From 404407643cc76972b7fd91ab262130771190e868 Mon Sep 17 00:00:00 2001
From: Stephanie Gredell <s.raide@gmail.com>
Date: Thu, 4 Dec 2025 00:27:16 -0800
Subject: [PATCH] Update color scheme and enhance button styles across the
 application

---
 frontend/src/App.css                          | 27 +++++++++----------
 frontend/src/components/Navbar/Navbar.css     | 24 ++++++++---------
 .../components/SearchFilter/SearchFilter.css  | 14 +++++-----
 .../src/components/VideoCard/VideoCard.css    | 12 ++++-----
 .../src/components/VideoGrid/VideoGrid.css    | 12 ++++-----
 5 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 1366cc3..aa93ad6 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,18 +1,17 @@
 :root {
-  --color-bg: #fff8f3;
+  --color-bg: #f6f8fb;
   --color-surface: #ffffff;
-  --color-surface-alt: #ffeef8;
-  --color-surface-muted: #fdf2ff;
-  --color-primary: #f26ba4;
-  --color-primary-dark: #d94f89;
-  --color-secondary: #9b8ef6;
-  --color-secondary-dark: #7a6fe0;
-  --color-accent: #fec89a;
-  --color-mint: #b8f2e6;
-  --color-text: #2c2c3a;
-  --color-muted: #6f6f81;
-  --color-border: #f3d7ec;
-  --color-shadow: rgba(242, 107, 164, 0.18);
+  --color-surface-alt: #f0f4ff;
+  --color-surface-muted: #e9f2ff;
+  --color-primary: #2f80ed;
+  --color-primary-dark: #1f5fb7;
+  --color-secondary: #3ab5a8;
+  --color-secondary-dark: #2d8c82;
+  --color-accent: #f4c95d;
+  --color-muted: #5a6473;
+  --color-text: #1f2a37;
+  --color-border: #d4deef;
+  --color-shadow: rgba(35, 74, 134, 0.16);
 }
 
 * {
@@ -25,7 +24,7 @@ body {
   font-family: 'Roboto', 'Arial', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: radial-gradient(circle at top, var(--color-surface-alt), var(--color-bg));
+  background: linear-gradient(180deg, var(--color-bg), #e7edf7);
   color: var(--color-text);
 }
 
diff --git a/frontend/src/components/Navbar/Navbar.css b/frontend/src/components/Navbar/Navbar.css
index 4a5d6de..dce5071 100644
--- a/frontend/src/components/Navbar/Navbar.css
+++ b/frontend/src/components/Navbar/Navbar.css
@@ -4,7 +4,7 @@
   position: sticky;
   top: 0;
   z-index: 100;
-  box-shadow: 0 8px 24px var(--color-shadow);
+  box-shadow: 0 10px 30px var(--color-shadow);
 }
 
 .navbar-container {
@@ -51,7 +51,7 @@
 }
 
 .navbar-link:hover {
-  background-color: rgba(242, 107, 164, 0.12);
+  background-color: rgba(47, 128, 237, 0.12);
   color: var(--color-primary-dark);
 }
 
@@ -78,12 +78,12 @@
   text-decoration: none;
   display: inline-block;
   transition: transform 0.2s, box-shadow 0.2s;
-  box-shadow: 0 10px 20px rgba(153, 118, 255, 0.2);
+  box-shadow: 0 10px 20px rgba(32, 76, 130, 0.25);
 }
 
 .navbar-button:hover {
   transform: translateY(-1px);
-  box-shadow: 0 12px 24px rgba(153, 118, 255, 0.28);
+  box-shadow: 0 12px 26px rgba(32, 76, 130, 0.32);
 }
 
 /* Search and Filters Section */
@@ -119,25 +119,25 @@
 
 .navbar-search-input:focus {
   outline: none;
-  border-color: var(--color-secondary);
-  box-shadow: 0 0 0 3px rgba(155, 142, 246, 0.25);
+  border-color: var(--color-primary);
+  box-shadow: 0 8px 22px rgba(47, 128, 237, 0.1);
 }
 
 .navbar-search-button {
   padding: 10px 18px;
-  background-color: var(--color-mint);
+  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
   border: none;
   border-radius: 999px;
   cursor: pointer;
   font-size: 16px;
   transition: transform 0.2s, box-shadow 0.2s;
-  color: var(--color-text);
-  box-shadow: 0 8px 16px rgba(184, 242, 230, 0.4);
+  color: white;
+  box-shadow: 0 10px 22px rgba(32, 76, 130, 0.25);
 }
 
 .navbar-search-button:hover {
   transform: translateY(-1px);
-  box-shadow: 0 12px 18px rgba(184, 242, 230, 0.55);
+  box-shadow: 0 14px 26px rgba(32, 76, 130, 0.32);
 }
 
 .navbar-filter-controls {
@@ -159,7 +159,7 @@
 .navbar-filter-select:focus {
   outline: none;
   border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(242, 107, 164, 0.25);
+  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.18);
 }
 
 .navbar-clear-button {
@@ -175,7 +175,7 @@
 }
 
 .navbar-clear-button:hover {
-  background-color: rgba(254, 200, 154, 0.4);
+  background-color: rgba(47, 128, 237, 0.08);
   color: var(--color-text);
 }
 
diff --git a/frontend/src/components/SearchFilter/SearchFilter.css b/frontend/src/components/SearchFilter/SearchFilter.css
index d54fa5e..7193087 100644
--- a/frontend/src/components/SearchFilter/SearchFilter.css
+++ b/frontend/src/components/SearchFilter/SearchFilter.css
@@ -30,25 +30,25 @@
 
 .search-input:focus {
   outline: none;
-  border-color: var(--color-secondary);
-  box-shadow: 0 0 0 3px rgba(155, 142, 246, 0.25);
+  border-color: var(--color-primary);
+  box-shadow: 0 8px 22px rgba(47, 128, 237, 0.1);
 }
 
 .search-button {
   padding: 10px 18px;
-  background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
+  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
   border: none;
   border-radius: 999px;
   cursor: pointer;
   font-size: 16px;
   color: white;
   transition: transform 0.2s, box-shadow 0.2s;
-  box-shadow: 0 12px 22px rgba(242, 107, 164, 0.3);
+  box-shadow: 0 12px 24px rgba(32, 76, 130, 0.28);
 }
 
 .search-button:hover {
   transform: translateY(-1px);
-  box-shadow: 0 16px 24px rgba(242, 107, 164, 0.36);
+  box-shadow: 0 16px 28px rgba(32, 76, 130, 0.32);
 }
 
 .filter-controls {
@@ -70,7 +70,7 @@
 .filter-select:focus {
   outline: none;
   border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(242, 107, 164, 0.25);
+  box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.18);
 }
 
 .clear-button {
@@ -86,7 +86,7 @@
 }
 
 .clear-button:hover {
-  background-color: rgba(254, 200, 154, 0.35);
+  background-color: rgba(47, 128, 237, 0.08);
   color: var(--color-text);
 }
 
diff --git a/frontend/src/components/VideoCard/VideoCard.css b/frontend/src/components/VideoCard/VideoCard.css
index f556109..985f07c 100644
--- a/frontend/src/components/VideoCard/VideoCard.css
+++ b/frontend/src/components/VideoCard/VideoCard.css
@@ -2,15 +2,15 @@
   cursor: pointer;
   transition: transform 0.2s, box-shadow 0.2s;
   background: var(--color-surface);
-  border-radius: 18px;
-  padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.7);
-  box-shadow: 0 10px 24px rgba(242, 107, 164, 0.08);
+  border-radius: 20px;
+  padding: 16px;
+  border: 1px solid rgba(212, 222, 239, 0.8);
+  box-shadow: 0 14px 32px rgba(32, 76, 130, 0.08);
 }
 
 .video-card:hover {
   transform: translateY(-4px);
-  box-shadow: 0 16px 32px rgba(155, 142, 246, 0.2);
+  box-shadow: 0 18px 40px rgba(32, 76, 130, 0.12);
 }
 
 .video-thumbnail-container {
@@ -37,7 +37,7 @@
   position: absolute;
   bottom: 8px;
   right: 8px;
-  background-color: rgba(44, 44, 58, 0.85);
+  background-color: rgba(31, 42, 55, 0.85);
   color: white;
   padding: 2px 6px;
   border-radius: 4px;
diff --git a/frontend/src/components/VideoGrid/VideoGrid.css b/frontend/src/components/VideoGrid/VideoGrid.css
index 62ee7fa..5eedebe 100644
--- a/frontend/src/components/VideoGrid/VideoGrid.css
+++ b/frontend/src/components/VideoGrid/VideoGrid.css
@@ -93,20 +93,20 @@
 
 .pagination-button {
   padding: 8px 16px;
-  background-color: var(--color-mint);
+  background-color: var(--color-secondary);
   border: none;
   border-radius: 999px;
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
   transition: transform 0.2s, box-shadow 0.2s;
-  color: var(--color-text);
-  box-shadow: 0 10px 20px rgba(184, 242, 230, 0.4);
+  color: white;
+  box-shadow: 0 12px 26px rgba(32, 76, 130, 0.2);
 }
 
 .pagination-button:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 14px 26px rgba(184, 242, 230, 0.55);
+  box-shadow: 0 16px 30px rgba(32, 76, 130, 0.28);
 }
 
 .pagination-button:disabled {
@@ -133,8 +133,8 @@
 }
 
 .pagination-number:hover {
-  background-color: rgba(242, 107, 164, 0.12);
-  border-color: rgba(242, 107, 164, 0.5);
+  background-color: rgba(47, 128, 237, 0.12);
+  border-color: rgba(47, 128, 237, 0.5);
 }
 
 .pagination-number.active {