...

4 files changed, 21 insertions, 3 deletions

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)}
     />
   );
 }