From bac55126dc853662bfb9dcdb6ba9e1616c73e660 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 15 Aug 2023 17:29:33 +0800
Subject: ...

---
 FrontEnd/src/pages/timeline/ConnectionStatusBadge.css  | 12 +++++++-----
 FrontEnd/src/pages/timeline/Timeline.css               |  4 +++-
 FrontEnd/src/pages/timeline/Timeline.tsx               |  2 +-
 FrontEnd/src/pages/timeline/TimelineCard.css           |  5 +++--
 FrontEnd/src/pages/timeline/TimelineCard.tsx           |  1 +
 FrontEnd/src/pages/timeline/TimelinePostCreateView.css |  4 +++-
 FrontEnd/src/views/common/Card.css                     |  8 ++++++--
 FrontEnd/src/views/common/Card.tsx                     |  9 ++++++++-
 FrontEnd/src/views/common/button/Button.css            |  2 +-
 FrontEnd/src/views/common/button/LoadingButton.css     |  8 +-------
 FrontEnd/src/views/common/menu/Menu.css                |  8 ++++----
 FrontEnd/src/views/common/menu/Menu.tsx                |  6 ++++--
 FrontEnd/src/views/common/menu/PopupMenu.css           |  4 ++--
 FrontEnd/src/views/common/menu/PopupMenu.tsx           |  8 +++++++-
 FrontEnd/src/views/common/theme.css                    |  4 +---
 15 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/FrontEnd/src/pages/timeline/ConnectionStatusBadge.css b/FrontEnd/src/pages/timeline/ConnectionStatusBadge.css
index 7fe83b9b..fc01484e 100644
--- a/FrontEnd/src/pages/timeline/ConnectionStatusBadge.css
+++ b/FrontEnd/src/pages/timeline/ConnectionStatusBadge.css
@@ -2,8 +2,8 @@
   font-size: 0.8em;
   border-radius: 5px;
   padding: 0.1em 1em;
-  background-color: #eaf2ff;
 }
+
 .connection-status-badge::before {
   width: 10px;
   height: 10px;
@@ -12,11 +12,13 @@
   content: "";
   margin-right: 0.6em;
 }
+
 .connection-status-badge.success {
-  color: #006100;
+  color: var(--cru-create-color);
 }
+
 .connection-status-badge.success::before {
-  background-color: #006100;
+  background-color: var(--cru-create-color);
 }
 
 .connection-status-badge.warning {
@@ -28,9 +30,9 @@
 }
 
 .connection-status-badge.danger {
-  color: #fd1616;
+  color: var(--cru-danger-color);
 }
 
 .connection-status-badge.danger::before {
-  background-color: #fd1616;
+  background-color: var(--cru-danger-color);
 }
diff --git a/FrontEnd/src/pages/timeline/Timeline.css b/FrontEnd/src/pages/timeline/Timeline.css
index ba5f7b04..656374e9 100644
--- a/FrontEnd/src/pages/timeline/Timeline.css
+++ b/FrontEnd/src/pages/timeline/Timeline.css
@@ -1,5 +1,6 @@
-.timeline {
+.timeline-container {
   --timeline-shadow-color: #00000080;
+  --timeline-card-shadow: 2px 1px 10px -2px var(--timeline-shadow-color);
   --timeline-post-line-color: #eadd2c;
   --timeline-post-line-shadow: 2px 1px 10px -1px var(--timeline-shadow-color);
   --timeline-post-card-background-color: hsl(0, 0%, 100%);
@@ -18,6 +19,7 @@
   z-index: 0;
   position: relative;
   width: 100%;
+  padding-top: 10px;
 }
 
 @keyframes timeline-line-node {
diff --git a/FrontEnd/src/pages/timeline/Timeline.tsx b/FrontEnd/src/pages/timeline/Timeline.tsx
index 3c9d73bf..73e621c1 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>
+    <div className="timeline-container">
       {timeline && (
         <TimelineCard
           timeline={timeline}
diff --git a/FrontEnd/src/pages/timeline/TimelineCard.css b/FrontEnd/src/pages/timeline/TimelineCard.css
index 1bffe980..cf2704a9 100644
--- a/FrontEnd/src/pages/timeline/TimelineCard.css
+++ b/FrontEnd/src/pages/timeline/TimelineCard.css
@@ -4,6 +4,7 @@
   top: 56px;
   right: 0;
   margin: 0.5em;
+  box-shadow: var(--timeline-card-shadow);
 }
 
 @media (min-width: 576px) {
@@ -15,13 +16,13 @@
 .timeline-card-title {
   display: inline-block;
   vertical-align: middle;
-  color: var(--cru-key-container-on-color);
+  color: var(--cru-text-primary-color);
   margin: 0.5em 1em;
 }
 
 .timeline-card-title-name {
   margin-inline-start: 1em;
-  color: var(--cru-surface-on-variant-color);
+  color: var(--cru-text-secondary-color);
 }
 
 .timeline-card-user {
diff --git a/FrontEnd/src/pages/timeline/TimelineCard.tsx b/FrontEnd/src/pages/timeline/TimelineCard.tsx
index b287c620..d002a1b9 100644
--- a/FrontEnd/src/pages/timeline/TimelineCard.tsx
+++ b/FrontEnd/src/pages/timeline/TimelineCard.tsx
@@ -124,6 +124,7 @@ export default function TimelineCard(props: TimelinePageCardProps) {
   return (
     <Card
       color="secondary"
+      noBackground
       className={`timeline-card timeline-card-${
         collapse ? "collapse" : "expand"
       }`}
diff --git a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
index f54c5103..2a433860 100644
--- a/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
+++ b/FrontEnd/src/pages/timeline/TimelinePostCreateView.css
@@ -18,7 +18,9 @@
   height: 100%;
   background-color: var(--cru-background-color);
   color: var(--cru-text-primary-color);
-  border: 1px solid transparent;
+  border: 1px solid var(--cru-text-primary-color);
+  padding: 0.5em;
+  border-radius: 5px;
 }
 
 .timeline-post-create-edit-text:hover {
diff --git a/FrontEnd/src/views/common/Card.css b/FrontEnd/src/views/common/Card.css
index f391abc8..301910c6 100644
--- a/FrontEnd/src/views/common/Card.css
+++ b/FrontEnd/src/views/common/Card.css
@@ -1,6 +1,10 @@
 .cru-card {
   border-radius: var(--cru-card-border-radius);
-  border: 1px solid var(--cru-card-border-color);
+  border: 2px solid var(--cru-card-border-color);
   background-color: var(--cru-card-background-color);
   transition: all 0.3s;
-}
\ No newline at end of file
+}
+
+.cru-card-no-background {
+  background-color: var(--cru-background-color);
+}
diff --git a/FrontEnd/src/views/common/Card.tsx b/FrontEnd/src/views/common/Card.tsx
index e1af13a9..fb29f728 100644
--- a/FrontEnd/src/views/common/Card.tsx
+++ b/FrontEnd/src/views/common/Card.tsx
@@ -7,10 +7,12 @@ import "./Card.css";
 interface CardProps extends ComponentPropsWithoutRef<"div"> {
   containerRef?: Ref<HTMLDivElement>;
   color?: ThemeColor;
+  noBackground?: boolean;
 }
 
 export default function Card({
   color,
+  noBackground,
   className,
   children,
   containerRef,
@@ -19,7 +21,12 @@ export default function Card({
   return (
     <div
       ref={containerRef}
-      className={classNames("cru-card", `cru-card-${color ?? "primary"}`, className)}
+      className={classNames(
+        "cru-card",
+        `cru-card-${color ?? "primary"}`,
+        noBackground && "cru-card-no-background",
+        className,
+      )}
       {...otherProps}
     >
       {children}
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
index b5a4e2f5..da13c47b 100644
--- a/FrontEnd/src/views/common/button/Button.css
+++ b/FrontEnd/src/views/common/button/Button.css
@@ -57,7 +57,7 @@
   border-color: var(--cru-button-active-color);
 }
 
-.cru-button.outline:not(.cru-loading-button):disabled {
+.cru-button.outline:disabled {
   color: var(--cru-button-disabled-color);
   border-color: var(--cru-button-disabled-color);
   cursor: auto;
diff --git a/FrontEnd/src/views/common/button/LoadingButton.css b/FrontEnd/src/views/common/button/LoadingButton.css
index 0a7e4a3a..63e8948b 100644
--- a/FrontEnd/src/views/common/button/LoadingButton.css
+++ b/FrontEnd/src/views/common/button/LoadingButton.css
@@ -3,12 +3,6 @@
   align-items: center;
 }
 
-.cru-loading-button:disabled {
-  color: var(--cru-surface-on-color);
-  border-color: var(--cru-surface-on-color);
-  cursor: not-allowed;
-}
-
 .cru-loading-button-spinner {
   margin-left: 0.5em;
-}
\ No newline at end of file
+}
diff --git a/FrontEnd/src/views/common/menu/Menu.css b/FrontEnd/src/views/common/menu/Menu.css
index db0b7432..9b0f55bf 100644
--- a/FrontEnd/src/views/common/menu/Menu.css
+++ b/FrontEnd/src/views/common/menu/Menu.css
@@ -7,12 +7,12 @@
   padding: 0.5em 1.5em;
   cursor: pointer;
   transition: all 0.5s;
-  color: var(--cru-key-color);
+  color: var(--cru-button-normal-color);
 }
 
 .cru-menu-item:hover {
-  color: var(--cru-key-on-color);
-  background-color: var(--cru-key-color);
+  color: white;
+  background-color: var(--cru-button-normal-color);
 }
 
 .cru-menu-item-icon {
@@ -21,5 +21,5 @@
 
 .cru-menu-divider {
   border-width: 0;
-  border-top: 1px solid var(--cru-key-color);
+  border-top: 1px solid var(--cru-button-normal-color);
 }
\ No newline at end of file
diff --git a/FrontEnd/src/views/common/menu/Menu.tsx b/FrontEnd/src/views/common/menu/Menu.tsx
index a9ebfedf..65cd55b4 100644
--- a/FrontEnd/src/views/common/menu/Menu.tsx
+++ b/FrontEnd/src/views/common/menu/Menu.tsx
@@ -21,6 +21,7 @@ export type MenuItem =
 export type MenuItems = MenuItem[];
 
 export type MenuProps = {
+  color?: ThemeColor;
   items: MenuItems;
   onItemClicked?: () => void;
   className?: string;
@@ -28,6 +29,7 @@ export type MenuProps = {
 };
 
 export default function Menu({
+  color,
   items,
   onItemClicked,
   className,
@@ -37,7 +39,7 @@ export default function Menu({
 
   return (
     <div
-      className={classNames("cru-menu cru-primary", className)}
+      className={classNames(`cru-menu cru-button-${color ?? "primary"}`, className)}
       style={style}
     >
       {items.map((item, index) => {
@@ -48,7 +50,7 @@ export default function Menu({
           return (
             <div
               key={index}
-              className={`cru-menu-item cru-${color ?? "primary"}`}
+              className={`cru-menu-item cru-button-${color ?? "primary"}`}
               onClick={() => {
                 onClick();
                 onItemClicked?.();
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.css b/FrontEnd/src/views/common/menu/PopupMenu.css
index 38171ffd..b8dfe265 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.css
+++ b/FrontEnd/src/views/common/menu/PopupMenu.css
@@ -1,6 +1,6 @@
 .cru-popup-menu-menu-container {
   z-index: 1040;
   border-radius: 5px;
-  border: var(--cru-primary-color) 1px solid;
-  background-color: var(--cru-surface-color);
+  border: var(--cru-button-normal-color) 1px solid;
+  background-color: var(--cru-background-color);
 }
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.tsx b/FrontEnd/src/views/common/menu/PopupMenu.tsx
index 7ac12755..035f5602 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.tsx
+++ b/FrontEnd/src/views/common/menu/PopupMenu.tsx
@@ -7,9 +7,12 @@ import { useClickOutside } from "@/utilities/hooks";
 
 import Menu, { MenuItems } from "./Menu";
 
+import { ThemeColor } from "../common";
+
 import "./PopupMenu.css";
 
 export interface PopupMenuProps {
+  color?: ThemeColor;
   items: MenuItems;
   children?: ReactNode;
   containerClassName?: string;
@@ -17,6 +20,7 @@ export interface PopupMenuProps {
 }
 
 export default function PopupMenu({
+  color,
   items,
   children,
   containerClassName,
@@ -48,7 +52,9 @@ export default function PopupMenu({
         createPortal(
           <div
             ref={setPopperElement}
-            className="cru-popup-menu-menu-container"
+            className={`cru-popup-menu-menu-container cru-button-${
+              color ?? "primary"
+            }`}
             style={styles.popper}
             {...attributes.popper}
           >
diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/views/common/theme.css
index c8819b19..f672d7a8 100644
--- a/FrontEnd/src/views/common/theme.css
+++ b/FrontEnd/src/views/common/theme.css
@@ -6,8 +6,6 @@
 
   --cru-border-radius: 4px;
   --cru-card-border-radius: 4px;
-
-  --cru-secondary-text-color: var(--cru-surface-on-color);
 }
 
 /* theme colors */
@@ -55,7 +53,7 @@
   --cru-button-danger-hover-color: hsl(0, 100%, 60%);
   --cru-button-danger-focus-color: hsl(0, 100%, 60%);
   --cru-button-danger-active-color: hsl(0, 100%, 70%);
-  --cru-button-disabled-color: hsl(0, 0, 80%);
+  --cru-button-disabled-color: hsl(0, 0%, 50%);
   /* push button colors */
   --cru-push-button-text-color: #ffffff;
   --cru-push-button-disabled-text-color: hsl(0, 0, 80%);
-- 
cgit v1.2.3