From e6ccc0174a86a0ade240e6551228598cd81f984b Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 1 Aug 2023 00:29:35 +0800
Subject: ...

---
 FrontEnd/src/pages/timeline/TimelinePostCard.css | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 FrontEnd/src/pages/timeline/TimelinePostCard.css

(limited to 'FrontEnd/src/pages/timeline/TimelinePostCard.css')

diff --git a/FrontEnd/src/pages/timeline/TimelinePostCard.css b/FrontEnd/src/pages/timeline/TimelinePostCard.css
new file mode 100644
index 00000000..3a446f44
--- /dev/null
+++ b/FrontEnd/src/pages/timeline/TimelinePostCard.css
@@ -0,0 +1,9 @@
+.timeline-post-card {
+  padding: 1em 1em 1em 3em;
+  color: var(--timeline-post-text-color);
+  background-color: var(--timeline-post-card-background-color);
+  box-shadow: var(--timeline-post-card-shadow);
+  border-radius: var(--timeline-post-card-border-radius);
+  position: relative;
+  z-index: 1;
+}
\ No newline at end of file
-- 
cgit v1.2.3


From 93bc2b9688ebc0dde2ae8d5cf3e3f2628d636ff0 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 15 Aug 2023 01:16:37 +0800
Subject: ...

---
 FrontEnd/src/pages/setting/index.css               | 26 ++++++-----
 FrontEnd/src/pages/setting/index.tsx               |  6 +--
 FrontEnd/src/pages/timeline/Timeline.css           |  2 -
 FrontEnd/src/pages/timeline/Timeline.tsx           |  4 +-
 FrontEnd/src/pages/timeline/TimelineCard.tsx       |  2 +-
 FrontEnd/src/pages/timeline/TimelinePostCard.css   |  3 +-
 FrontEnd/src/pages/timeline/TimelinePostCard.tsx   |  2 +-
 FrontEnd/src/pages/timeline/index.tsx              | 11 +----
 FrontEnd/src/views/common/AppBar.css               |  8 ++--
 FrontEnd/src/views/common/Card.css                 |  3 +-
 FrontEnd/src/views/common/Card.tsx                 |  2 +-
 FrontEnd/src/views/common/button/Button.css        |  3 +-
 FrontEnd/src/views/common/button/Button.tsx        |  2 +-
 FrontEnd/src/views/common/button/IconButton.tsx    |  2 +-
 FrontEnd/src/views/common/button/LoadingButton.tsx |  2 +-
 FrontEnd/src/views/common/index.css                |  4 +-
 FrontEnd/src/views/common/theme.css                | 50 ++++++++++++++++++++--
 17 files changed, 87 insertions(+), 45 deletions(-)

(limited to 'FrontEnd/src/pages/timeline/TimelinePostCard.css')

diff --git a/FrontEnd/src/pages/setting/index.css b/FrontEnd/src/pages/setting/index.css
index d9cba24f..c1950f9c 100644
--- a/FrontEnd/src/pages/setting/index.css
+++ b/FrontEnd/src/pages/setting/index.css
@@ -17,29 +17,39 @@
 
 .setting-section-title {
   padding: 0 1em;
+  color: white;
 }
 
 .setting-section-item-area {
   margin-top: 1em;
-  border-top: 1px solid var(--cru-key-container-color);
+  border-top: 1px solid var(--cru-secondary-color);
 }
 
 .setting-item-container {
   padding: 0.5em 1em;
   transition: background-color 0.3s;
-  color: var(--cru-surface-on-color);
-  background-color: var(--cru-surface-color);
-  border-bottom: 1px solid var(--cru-key-container-color);
+  background-color: var(--cru-background-color);
+  border-bottom: 1px solid var(--cru-secondary-color);
   display: flex;
   align-items: center;
 }
 
 .setting-item-container:hover {
-  background-color: var(--cru-key-container-1-color);
+  color: white;
+  background-color: var(--cru-secondary-color);
+}
+
+.setting-item-container.danger {
+  color: var(--cru-danger-color);
+}
+
+.setting-item-container.danger:hover {
+  color: white;
+  background-color: var(--cru-danger-color);
 }
 
 .setting-item-label-sub {
-  color: var(--cru-secondary-text-color);
+  color: var(--cru-text-secondary-color);
 }
 
 .setting-item-value-area {
@@ -50,10 +60,6 @@
   cursor: pointer;
 }
 
-.setting-item-container.setting-type-button.danger {
-  color: var(--cru-danger-color);
-}
-
 .register-code {
   background: var(--cru-surface-container-highest-color);
   border: 1px solid var(--cru-surface-container-highest-color);
diff --git a/FrontEnd/src/pages/setting/index.tsx b/FrontEnd/src/pages/setting/index.tsx
index 8e8ae488..8673d55a 100644
--- a/FrontEnd/src/pages/setting/index.tsx
+++ b/FrontEnd/src/pages/setting/index.tsx
@@ -172,7 +172,7 @@ function RegisterCodeSettingItem() {
           onClick={(event) => {
             void navigator.clipboard.writeText(registerCode).then(() => {
               pushAlert({
-                type: "success",
+                type: "create",
                 message: "settings.myRegisterCodeCopied",
               });
             });
@@ -249,7 +249,7 @@ export default function SettingPage() {
   return (
     <Page className="cru-primary" noTopPadding>
       {user ? (
-        <SettingSection title="settings.subheader.account">
+        <SettingSection title="settings.subheader.account" color="secondary">
           <RegisterCodeSettingItem />
           <ButtonSettingItem
             title="settings.changeAvatar"
@@ -271,7 +271,7 @@ export default function SettingPage() {
           />
         </SettingSection>
       ) : null}
-      <SettingSection title="settings.subheader.customization">
+      <SettingSection title="settings.subheader.customization" color="secondary">
         <LanguageChangeSettingItem />
       </SettingSection>
       <ChangePasswordDialog {...dialogPropsMap["change-password"]} />
diff --git a/FrontEnd/src/pages/timeline/Timeline.css b/FrontEnd/src/pages/timeline/Timeline.css
index 30ad75c9..419ab9b1 100644
--- a/FrontEnd/src/pages/timeline/Timeline.css
+++ b/FrontEnd/src/pages/timeline/Timeline.css
@@ -1,5 +1,4 @@
 .timeline {
-  --timeline-background-color: #f3f3f3;
   --timeline-shadow-color: #00000080;
   --timeline-post-line-color: #eadd2c;
   --timeline-post-line-shadow: 2px 1px 10px -1px var(--timeline-shadow-color);
@@ -13,7 +12,6 @@
   z-index: 0;
   position: relative;
   width: 100%;
-  background-color: var(--timeline-background-color);
 }
 
 @keyframes timeline-line-node {
diff --git a/FrontEnd/src/pages/timeline/Timeline.tsx b/FrontEnd/src/pages/timeline/Timeline.tsx
index d05336d7..3c9d73bf 100644
--- a/FrontEnd/src/pages/timeline/Timeline.tsx
+++ b/FrontEnd/src/pages/timeline/Timeline.tsx
@@ -156,7 +156,7 @@ export function Timeline(props: TimelineProps) {
     return <div className={className}>Error.</div>;
   }
   return (
-    <>
+    <div>
       {timeline && (
         <TimelineCard
           timeline={timeline}
@@ -172,7 +172,7 @@ export function Timeline(props: TimelineProps) {
           <TimelinePostList posts={posts} onReload={updatePosts} />
         </div>
       )}
-    </>
+    </div>
   );
 }
 
diff --git a/FrontEnd/src/pages/timeline/TimelineCard.tsx b/FrontEnd/src/pages/timeline/TimelineCard.tsx
index 04b34ec1..b287c620 100644
--- a/FrontEnd/src/pages/timeline/TimelineCard.tsx
+++ b/FrontEnd/src/pages/timeline/TimelineCard.tsx
@@ -123,7 +123,7 @@ export default function TimelineCard(props: TimelinePageCardProps) {
 
   return (
     <Card
-      color="tertiary"
+      color="secondary"
       className={`timeline-card timeline-card-${
         collapse ? "collapse" : "expand"
       }`}
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCard.css b/FrontEnd/src/pages/timeline/TimelinePostCard.css
index 3a446f44..67b447aa 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostCard.css
+++ b/FrontEnd/src/pages/timeline/TimelinePostCard.css
@@ -1,7 +1,6 @@
 .timeline-post-card {
   padding: 1em 1em 1em 3em;
-  color: var(--timeline-post-text-color);
-  background-color: var(--timeline-post-card-background-color);
+  background-color: var(--cru-background-color);
   box-shadow: var(--timeline-post-card-shadow);
   border-radius: var(--timeline-post-card-border-radius);
   position: relative;
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCard.tsx b/FrontEnd/src/pages/timeline/TimelinePostCard.tsx
index f3743915..23dd141f 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostCard.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostCard.tsx
@@ -15,7 +15,7 @@ export default function TimelinePostCard({
   children,
 }: TimelinePostCardProps) {
   return (
-    <Card className={classNames("timeline-post-card", className)}>
+    <Card color="primary" className={classNames("timeline-post-card", className)}>
       {children}
     </Card>
   );
diff --git a/FrontEnd/src/pages/timeline/index.tsx b/FrontEnd/src/pages/timeline/index.tsx
index 1dffdcc1..51cc37f0 100644
--- a/FrontEnd/src/pages/timeline/index.tsx
+++ b/FrontEnd/src/pages/timeline/index.tsx
@@ -1,11 +1,10 @@
-import * as React from "react";
 import { useParams } from "react-router-dom";
 
 import { UiLogicError } from "@/common";
 
 import Timeline from "./Timeline";
 
-const TimelinePage: React.FC = () => {
+export default function TimelinePage() {
   const { owner, timeline: timelineNameParam } = useParams();
 
   if (owner == null || owner == "")
@@ -13,11 +12,5 @@ const TimelinePage: React.FC = () => {
 
   const timeline = timelineNameParam || "self";
 
-  return (
-    <div className="container">
-      <Timeline timelineOwner={owner} timelineName={timeline} />
-    </div>
-  );
+  return <Timeline timelineOwner={owner} timelineName={timeline} />;
 };
-
-export default TimelinePage;
diff --git a/FrontEnd/src/views/common/AppBar.css b/FrontEnd/src/views/common/AppBar.css
index bd8d0986..2f2d4a1a 100644
--- a/FrontEnd/src/views/common/AppBar.css
+++ b/FrontEnd/src/views/common/AppBar.css
@@ -28,7 +28,7 @@
 
 .app-bar a {
   background-color: var(--cru-primary-color);
-  color: var(--cru-primary-on-color);
+  color: var(--cru-push-button-text-color);
   text-decoration: none;
   display: flex;
   align-items: center;
@@ -37,15 +37,15 @@
 }
 
 .app-bar a:hover {
-  background-color: var(--cru-primary-1-color);
+  background-color: var(--cru-button-primary-hover-color);
 }
 
 .app-bar a:focus {
-  background-color: var(--cru-primary-1-color);
+  background-color: var(--cru-button-primary-focus-color);
 }
 
 .app-bar a:active {
-  background-color: var(--cru-primary-2-color);
+  background-color: var(--cru-button-primary-active-color);
 }
 
 .app-bar .app-bar-avatar img {
diff --git a/FrontEnd/src/views/common/Card.css b/FrontEnd/src/views/common/Card.css
index c677abd7..f391abc8 100644
--- a/FrontEnd/src/views/common/Card.css
+++ b/FrontEnd/src/views/common/Card.css
@@ -1,5 +1,6 @@
 .cru-card {
   border-radius: var(--cru-card-border-radius);
-  background-color: var(--cru-key-container-color);
+  border: 1px solid var(--cru-card-border-color);
+  background-color: var(--cru-card-background-color);
   transition: all 0.3s;
 }
\ No newline at end of file
diff --git a/FrontEnd/src/views/common/Card.tsx b/FrontEnd/src/views/common/Card.tsx
index 381e58e7..e1af13a9 100644
--- a/FrontEnd/src/views/common/Card.tsx
+++ b/FrontEnd/src/views/common/Card.tsx
@@ -19,7 +19,7 @@ export default function Card({
   return (
     <div
       ref={containerRef}
-      className={classNames("cru-card", color && `cru-${color}`, className)}
+      className={classNames("cru-card", `cru-card-${color ?? "primary"}`, className)}
       {...otherProps}
     >
       {children}
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index 4e755dba..b5a4e2f5 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -1,7 +1,7 @@
 .cru-button {
   font-size: 1rem;
   padding: 0.4em 0.8em;
-  transition: all 0.5s;
+  transition: all 0.3s;
   border-radius: 0.2em;
   border: 1px solid;
   cursor: pointer;
@@ -39,6 +39,7 @@
 .cru-button.outline {
   color: var(--cru-button-normal-color);
   border-color: var(--cru-button-normal-color);
+  background-color: transparent;
 }
 
 .cru-button.outline:hover {
diff --git a/FrontEnd/src/views/common/button/Button.tsx b/FrontEnd/src/views/common/button/Button.tsx
index 02d00ee5..573055cf 100644
--- a/FrontEnd/src/views/common/button/Button.tsx
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -33,8 +33,8 @@ export default function Button(props: ButtonProps) {
     <button
       ref={buttonRef}
       className={classNames(
-        color && `cru-${color}-button`,
         "cru-button",
+        `cru-button-${color ?? "primary"}`,
         outline && "outline",
         className,
       )}
diff --git a/FrontEnd/src/views/common/button/IconButton.tsx b/FrontEnd/src/views/common/button/IconButton.tsx
index d3a8b240..60050e0d 100644
--- a/FrontEnd/src/views/common/button/IconButton.tsx
+++ b/FrontEnd/src/views/common/button/IconButton.tsx
@@ -18,9 +18,9 @@ export default function IconButton(props: IconButtonProps) {
     <button
       className={classNames(
         "cru-icon-button",
+        `cru-button-${color ?? "primary"}`,
         large && "large",
         "bi-" + icon,
-        color && `cru-button-${color}`,
         className,
       )}
       {...otherProps}
diff --git a/FrontEnd/src/views/common/button/LoadingButton.tsx b/FrontEnd/src/views/common/button/LoadingButton.tsx
index 441abbbd..43aca766 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.tsx
+++ b/FrontEnd/src/views/common/button/LoadingButton.tsx
@@ -26,8 +26,8 @@ export default function LoadingButton(props: LoadingButtonProps) {
     <button
       disabled={disabled || loading}
       className={classNames(
-        color && `cru-${color}`,
         "cru-button outline cru-loading-button",
+        `cru-button-${color ?? "primary"}`,
         className,
       )}
       {...otherProps}
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index 1f9b5086..a8f5e9a5 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -8,8 +8,8 @@
 
 body {
   font-family: var(--cru-default-font-family);
-  background: var(--cru-surface-color);
-  color: var(--cru-surface-on-color);
+  background: var(--cru-body-background-color);
+  color: var(--cru-text-primary-color);
   line-height: 1.2;
 }
 
diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/views/common/theme.css
index 150f35cf..c8819b19 100644
--- a/FrontEnd/src/views/common/theme.css
+++ b/FrontEnd/src/views/common/theme.css
@@ -20,9 +20,21 @@
 
 /* common colors */
 :root {
-  --cru-body-background-color: #ffffff;
-  --cru-text-primary-color: #ffffff;
-  --cru-text-secondary-color: #ffffff;
+  --cru-background-color: #ffffff;
+  --cru-text-primary-color: #000000;
+  --cru-text-secondary-color: #000000;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --cru-background-color: #000000;
+    --cru-text-primary-color: #ffffff;
+    --cru-text-secondary-color: #ffffff;
+  }
+}
+
+:root {
+  --cru-body-background-color: var(--cru-background-color);
 }
 
 /* button colors */
@@ -91,3 +103,35 @@
   --cru-button-focus-color: var(--cru-button-danger-focus-color);
   --cru-button-active-color: var(--cru-button-danger-active-color);
 }
+
+/* Card colors */
+:root {
+  --cru-card-background-primary-color: hsl(210, 100%, 50%);
+  --cru-card-border-primary-color: hsl(210, 100%, 50%);
+  --cru-card-background-secondary-color: hsl(30, 100%, 50%);
+  --cru-card-border-secondary-color: hsl(30, 100%, 50%);
+  --cru-card-background-create-color: hsl(120, 100%, 25%);
+  --cru-card-border-create-color: hsl(120, 100%, 25%);
+  --cru-card-background-danger-color: hsl(0, 100%, 50%);
+  --cru-card-border-danger-color: hsl(0, 100%, 50%);
+}
+
+.cru-card-primary {
+  --cru-card-background-color: var(--cru-card-background-primary-color);
+  --cru-card-border-color: var(--cru-card-border-primary-color)
+}
+
+.cru-card-secondary {
+  --cru-card-background-color: var(--cru-card-background-secondary-color);
+  --cru-card-border-color: var(--cru-card-border-secondary-color)
+}
+
+.cru-card-create {
+  --cru-card-background-color: var(--cru-card-background-create-color);
+  --cru-card-border-color: var(--cru-card-border-create-color)
+}
+
+.cru-card-danger {
+  --cru-card-background-color: var(--cru-card-background-danger-color);
+  --cru-card-border-color: var(--cru-card-border-danger-color)
+}
-- 
cgit v1.2.3


From 3a54aa6171ad14854e877e1b4f320f808ed61811 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 15 Aug 2023 01:37:16 +0800
Subject: ...

---
 FrontEnd/src/pages/timeline/Timeline.css               |  8 +++++++-
 FrontEnd/src/pages/timeline/TimelinePostCard.css       |  3 ++-
 FrontEnd/src/pages/timeline/TimelinePostCreateView.css | 11 +++++++++++
 FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx |  2 +-
 4 files changed, 21 insertions(+), 3 deletions(-)

(limited to 'FrontEnd/src/pages/timeline/TimelinePostCard.css')

diff --git a/FrontEnd/src/pages/timeline/Timeline.css b/FrontEnd/src/pages/timeline/Timeline.css
index 419ab9b1..ba5f7b04 100644
--- a/FrontEnd/src/pages/timeline/Timeline.css
+++ b/FrontEnd/src/pages/timeline/Timeline.css
@@ -2,12 +2,18 @@
   --timeline-shadow-color: #00000080;
   --timeline-post-line-color: #eadd2c;
   --timeline-post-line-shadow: 2px 1px 10px -1px var(--timeline-shadow-color);
-  --timeline-post-card-background-color: rgb(255, 255, 255);
+  --timeline-post-card-background-color: hsl(0, 0%, 100%);
   --timeline-post-card-shadow: 4px 2px 10px -2px var(--timeline-shadow-color);
   --timeline-post-card-border-radius: 10px;
   --timeline-post-text-color: #000000;
 }
 
+@media (prefers-color-scheme: dark) {
+  .timeline {
+    --timeline-post-card-background-color: hsl(0, 0%, 12%);
+  }
+}
+
 .timeline {
   z-index: 0;
   position: relative;
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCard.css b/FrontEnd/src/pages/timeline/TimelinePostCard.css
index 67b447aa..f60610c0 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostCard.css
+++ b/FrontEnd/src/pages/timeline/TimelinePostCard.css
@@ -1,8 +1,9 @@
 .timeline-post-card {
   padding: 1em 1em 1em 3em;
-  background-color: var(--cru-background-color);
+  background-color: var(--timeline-post-card-background-color);
   box-shadow: var(--timeline-post-card-shadow);
   border-radius: var(--timeline-post-card-border-radius);
+  border: none;
   position: relative;
   z-index: 1;
 }
\ No newline at end of file
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
index d33d4bb7..f54c5103 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
+++ b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
@@ -16,6 +16,17 @@
 .timeline-post-create-edit-text {
   width: 100%;
   height: 100%;
+  background-color: var(--cru-background-color);
+  color: var(--cru-text-primary-color);
+  border: 1px solid transparent;
+}
+
+.timeline-post-create-edit-text:hover {
+  border-color: var(--cru-button-secondary-normal-color)
+}
+
+.timeline-post-create-edit-text:focus {
+  border-color: var(--cru-button-secondary-normal-color)
 }
 
 .timeline-post-create-image {
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx b/FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx
index 52b6c3d3..572a9119 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx
+++ b/FrontEnd/src/pages/timeline/TimelinePostCreateView.tsx
@@ -42,7 +42,7 @@ function TimelinePostEditText(props: TimelinePostEditTextProps) {
       onChange={(event) => {
         onChange(event.target.value);
       }}
-      className={className}
+      className={classNames("timeline-post-create-edit-text", className)}
     />
   );
 }
-- 
cgit v1.2.3