From b9d4ad84b08db33bf20056a82d4d934a19fc8b56 Mon Sep 17 00:00:00 2001
From: Stephanie Gredell <s.raide@gmail.com>
Date: Thu, 4 Dec 2025 00:03:57 -0800
Subject: [PATCH] add some colors

---
 frontend/src/App.css                          | 34 ++++++--
 frontend/src/components/Navbar/Navbar.css     | 86 +++++++++++--------
 .../components/SearchFilter/SearchFilter.css  | 51 ++++++-----
 .../src/components/VideoCard/VideoCard.css    | 22 +++--
 .../src/components/VideoGrid/VideoGrid.css    | 44 ++++++----
 5 files changed, 146 insertions(+), 91 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 7bd6127..1366cc3 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,3 +1,20 @@
+:root {
+  --color-bg: #fff8f3;
+  --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);
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -8,8 +25,8 @@ body {
   font-family: 'Roboto', 'Arial', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: #fff;
-  color: #030303;
+  background: radial-gradient(circle at top, var(--color-surface-alt), var(--color-bg));
+  color: var(--color-text);
 }
 
 .app {
@@ -36,27 +53,30 @@ body {
 .error-container h1 {
   font-size: 24px;
   margin-bottom: 16px;
-  color: #d00;
+  color: var(--color-primary-dark);
 }
 
 .error-container p {
   font-size: 14px;
-  color: #606060;
+  color: var(--color-muted);
   margin-bottom: 24px;
 }
 
 .error-container button {
   padding: 10px 20px;
-  background-color: #065fd4;
+  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
   color: white;
   border: none;
-  border-radius: 4px;
+  border-radius: 999px;
   font-size: 14px;
   cursor: pointer;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
+  transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .error-container button:hover {
-  background-color: #0556c4;
+  transform: translateY(-1px);
+  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.12);
 }
 
 
diff --git a/frontend/src/components/Navbar/Navbar.css b/frontend/src/components/Navbar/Navbar.css
index 55a3ffc..4a5d6de 100644
--- a/frontend/src/components/Navbar/Navbar.css
+++ b/frontend/src/components/Navbar/Navbar.css
@@ -1,10 +1,10 @@
 .navbar {
-  background-color: #fff;
-  border-bottom: 1px solid #e5e5e5;
+  background: linear-gradient(120deg, var(--color-surface), var(--color-surface-alt));
+  border-bottom: 1px solid var(--color-border);
   position: sticky;
   top: 0;
   z-index: 100;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 8px 24px var(--color-shadow);
 }
 
 .navbar-container {
@@ -21,7 +21,7 @@
   align-items: center;
   gap: 8px;
   text-decoration: none;
-  color: #030303;
+  color: var(--color-primary-dark);
   font-size: 20px;
   font-weight: 600;
 }
@@ -42,16 +42,17 @@
 
 .navbar-link {
   text-decoration: none;
-  color: #030303;
+  color: var(--color-text);
   font-size: 14px;
   font-weight: 500;
   padding: 8px 12px;
-  border-radius: 4px;
-  transition: background-color 0.2s;
+  border-radius: 999px;
+  transition: background-color 0.2s, color 0.2s;
 }
 
 .navbar-link:hover {
-  background-color: #f2f2f2;
+  background-color: rgba(242, 107, 164, 0.12);
+  color: var(--color-primary-dark);
 }
 
 .navbar-user {
@@ -62,32 +63,34 @@
 
 .navbar-username {
   font-size: 14px;
-  color: #606060;
+  color: var(--color-muted);
 }
 
 .navbar-button {
-  background-color: #065fd4;
+  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
   color: white;
   border: none;
-  padding: 8px 16px;
-  border-radius: 18px;
+  padding: 10px 20px;
+  border-radius: 999px;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
   cursor: pointer;
   text-decoration: none;
   display: inline-block;
-  transition: background-color 0.2s;
+  transition: transform 0.2s, box-shadow 0.2s;
+  box-shadow: 0 10px 20px rgba(153, 118, 255, 0.2);
 }
 
 .navbar-button:hover {
-  background-color: #0556c4;
+  transform: translateY(-1px);
+  box-shadow: 0 12px 24px rgba(153, 118, 255, 0.28);
 }
 
 /* Search and Filters Section */
 .navbar-filters {
-  background-color: #f9f9f9;
-  border-top: 1px solid #e5e5e5;
-  padding: 12px 24px;
+  background-color: var(--color-surface-muted);
+  border-top: 1px solid var(--color-border);
+  padding: 16px 24px;
 }
 
 .navbar-filters-container {
@@ -107,29 +110,34 @@
 
 .navbar-search-input {
   flex: 1;
-  padding: 8px 12px;
-  border: 1px solid #ccc;
+  padding: 10px 14px;
+  border: 1px solid var(--color-border);
   font-size: 14px;
-  background-color: #fff;
+  background-color: var(--color-surface);
+  border-radius: 999px;
 }
 
 .navbar-search-input:focus {
   outline: none;
-  border-color: #065fd4;
+  border-color: var(--color-secondary);
+  box-shadow: 0 0 0 3px rgba(155, 142, 246, 0.25);
 }
 
 .navbar-search-button {
-  padding: 8px 16px;
-  background-color: #f2f2f2;
-  border: 1px solid #ccc;
-  border-radius: 20px;
+  padding: 10px 18px;
+  background-color: var(--color-mint);
+  border: none;
+  border-radius: 999px;
   cursor: pointer;
   font-size: 16px;
-  transition: background-color 0.2s;
+  transition: transform 0.2s, box-shadow 0.2s;
+  color: var(--color-text);
+  box-shadow: 0 8px 16px rgba(184, 242, 230, 0.4);
 }
 
 .navbar-search-button:hover {
-  background-color: #e5e5e5;
+  transform: translateY(-1px);
+  box-shadow: 0 12px 18px rgba(184, 242, 230, 0.55);
 }
 
 .navbar-filter-controls {
@@ -140,31 +148,35 @@
 
 .navbar-filter-select {
   padding: 8px 12px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
   font-size: 14px;
-  background-color: white;
+  background-color: var(--color-surface);
   cursor: pointer;
+  color: var(--color-text);
 }
 
 .navbar-filter-select:focus {
   outline: none;
-  border-color: #065fd4;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(242, 107, 164, 0.25);
 }
 
 .navbar-clear-button {
   padding: 8px 12px;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  background-color: transparent;
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
   cursor: pointer;
   font-size: 14px;
   white-space: nowrap;
-  transition: background-color 0.2s;
+  transition: background-color 0.2s, color 0.2s;
+  color: var(--color-muted);
 }
 
 .navbar-clear-button:hover {
-  background-color: #f2f2f2;
+  background-color: rgba(254, 200, 154, 0.4);
+  color: var(--color-text);
 }
 
 /* Mobile Responsive - Second Row Layout */
diff --git a/frontend/src/components/SearchFilter/SearchFilter.css b/frontend/src/components/SearchFilter/SearchFilter.css
index d5a9f61..d54fa5e 100644
--- a/frontend/src/components/SearchFilter/SearchFilter.css
+++ b/frontend/src/components/SearchFilter/SearchFilter.css
@@ -1,6 +1,6 @@
 .search-filter {
-  background-color: #f9f9f9;
-  border-bottom: 1px solid #e5e5e5;
+  background-color: var(--color-surface-muted);
+  border-bottom: 1px solid var(--color-border);
   padding: 16px 24px;
 }
 
@@ -21,29 +21,34 @@
 
 .search-input {
   flex: 1;
-  padding: 8px 12px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  padding: 10px 14px;
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
   font-size: 14px;
+  background-color: var(--color-surface);
 }
 
 .search-input:focus {
   outline: none;
-  border-color: #065fd4;
+  border-color: var(--color-secondary);
+  box-shadow: 0 0 0 3px rgba(155, 142, 246, 0.25);
 }
 
 .search-button {
-  padding: 8px 16px;
-  background-color: #f2f2f2;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  padding: 10px 18px;
+  background: linear-gradient(120deg, var(--color-primary), var(--color-secondary));
+  border: none;
+  border-radius: 999px;
   cursor: pointer;
   font-size: 16px;
-  transition: background-color 0.2s;
+  color: white;
+  transition: transform 0.2s, box-shadow 0.2s;
+  box-shadow: 0 12px 22px rgba(242, 107, 164, 0.3);
 }
 
 .search-button:hover {
-  background-color: #e5e5e5;
+  transform: translateY(-1px);
+  box-shadow: 0 16px 24px rgba(242, 107, 164, 0.36);
 }
 
 .filter-controls {
@@ -54,31 +59,35 @@
 
 .filter-select {
   padding: 8px 12px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
   font-size: 14px;
-  background-color: white;
+  background-color: var(--color-surface);
   cursor: pointer;
+  color: var(--color-text);
 }
 
 .filter-select:focus {
   outline: none;
-  border-color: #065fd4;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(242, 107, 164, 0.25);
 }
 
 .clear-button {
   padding: 8px 12px;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
+  background-color: transparent;
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
   cursor: pointer;
   font-size: 14px;
   white-space: nowrap;
-  transition: background-color 0.2s;
+  transition: background-color 0.2s, color 0.2s;
+  color: var(--color-muted);
 }
 
 .clear-button:hover {
-  background-color: #f2f2f2;
+  background-color: rgba(254, 200, 154, 0.35);
+  color: var(--color-text);
 }
 
 @media (max-width: 768px) {
diff --git a/frontend/src/components/VideoCard/VideoCard.css b/frontend/src/components/VideoCard/VideoCard.css
index 5445c02..f556109 100644
--- a/frontend/src/components/VideoCard/VideoCard.css
+++ b/frontend/src/components/VideoCard/VideoCard.css
@@ -1,10 +1,16 @@
 .video-card {
   cursor: pointer;
-  transition: transform 0.2s;
+  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);
 }
 
 .video-card:hover {
-  transform: translateY(-2px);
+  transform: translateY(-4px);
+  box-shadow: 0 16px 32px rgba(155, 142, 246, 0.2);
 }
 
 .video-thumbnail-container {
@@ -12,7 +18,8 @@
   width: 100%;
   aspect-ratio: 16 / 9;
   overflow: hidden;
-  background-color: #f0f0f0;
+  background-color: var(--color-surface-muted);
+  border-radius: 12px;
 }
 
 .video-thumbnail {
@@ -30,7 +37,7 @@
   position: absolute;
   bottom: 8px;
   right: 8px;
-  background-color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(44, 44, 58, 0.85);
   color: white;
   padding: 2px 6px;
   border-radius: 4px;
@@ -58,12 +65,13 @@
 
 .video-title {
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
   line-height: 1.4;
-  color: #030303;
+  color: var(--color-text);
   margin: 0 0 6px 0;
   overflow: hidden;
   display: -webkit-box;
+  line-clamp: 2;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
@@ -71,7 +79,7 @@
 .video-metadata {
   margin: 0;
   font-size: 12px;
-  color: #606060;
+  color: var(--color-muted);
   display: flex;
   flex-direction: column;
   gap: 2px;
diff --git a/frontend/src/components/VideoGrid/VideoGrid.css b/frontend/src/components/VideoGrid/VideoGrid.css
index 839464f..62ee7fa 100644
--- a/frontend/src/components/VideoGrid/VideoGrid.css
+++ b/frontend/src/components/VideoGrid/VideoGrid.css
@@ -2,7 +2,7 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   gap: 24px;
-  padding: 24px 0px;
+  padding: 32px 24px;
   max-width: 1600px;
   margin: 0 auto;
 }
@@ -14,8 +14,8 @@
 .skeleton-thumbnail {
   width: 100%;
   aspect-ratio: 16 / 9;
-  background-color: #e5e5e5;
-  border-radius: 12px;
+  background-color: var(--color-surface-muted);
+  border-radius: 16px;
 }
 
 .skeleton-info {
@@ -28,7 +28,7 @@
   width: 36px;
   height: 36px;
   border-radius: 50%;
-  background-color: #e5e5e5;
+  background-color: var(--color-surface-muted);
 }
 
 .skeleton-text {
@@ -37,7 +37,7 @@
 
 .skeleton-title {
   height: 16px;
-  background-color: #e5e5e5;
+  background-color: var(--color-surface-muted);
   border-radius: 4px;
   margin-bottom: 8px;
 }
@@ -45,7 +45,7 @@
 .skeleton-meta {
   height: 12px;
   width: 60%;
-  background-color: #e5e5e5;
+  background-color: var(--color-surface-muted);
   border-radius: 4px;
 }
 
@@ -61,13 +61,13 @@
 .error-message {
   text-align: center;
   padding: 48px 24px;
-  color: #d00;
+  color: var(--color-primary-dark);
 }
 
 .empty-state {
   text-align: center;
   padding: 48px 24px;
-  color: #606060;
+  color: var(--color-muted);
 }
 
 .empty-state h2 {
@@ -86,24 +86,27 @@
   justify-content: center;
   align-items: center;
   gap: 12px;
-  padding: 24px;
+  padding: 32px 24px 48px;
   margin: 0 auto;
   max-width: 1600px;
 }
 
 .pagination-button {
   padding: 8px 16px;
-  background-color: #f2f2f2;
+  background-color: var(--color-mint);
   border: none;
-  border-radius: 4px;
+  border-radius: 999px;
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
-  transition: background-color 0.2s;
+  transition: transform 0.2s, box-shadow 0.2s;
+  color: var(--color-text);
+  box-shadow: 0 10px 20px rgba(184, 242, 230, 0.4);
 }
 
 .pagination-button:hover:not(:disabled) {
-  background-color: #e5e5e5;
+  transform: translateY(-2px);
+  box-shadow: 0 14px 26px rgba(184, 242, 230, 0.55);
 }
 
 .pagination-button:disabled {
@@ -119,22 +122,25 @@
 .pagination-number {
   width: 36px;
   height: 36px;
-  background-color: #f2f2f2;
-  border: none;
-  border-radius: 4px;
+  background-color: var(--color-surface);
+  border: 1px solid transparent;
+  border-radius: 999px;
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
-  transition: background-color 0.2s;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+  color: var(--color-text);
 }
 
 .pagination-number:hover {
-  background-color: #e5e5e5;
+  background-color: rgba(242, 107, 164, 0.12);
+  border-color: rgba(242, 107, 164, 0.5);
 }
 
 .pagination-number.active {
-  background-color: #065fd4;
+  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
   color: white;
+  border-color: transparent;
 }
 
 @media (max-width: 768px) {