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 +++-
 6 files changed, 18 insertions(+), 10 deletions(-)

(limited to 'FrontEnd/src/pages')

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 {
-- 
cgit v1.2.3