theme incremental improvement

Digital-Defiance · Nov 27, 2024 · 40350ee · 40350ee
1 parent e3caba4
commit 40350ee
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 74 deletions.
diff --git a/chili-and-cilantro-react/src/app/components/auth.scss b/chili-and-cilantro-react/src/app/components/auth.scss
@@ -1,4 +1,4 @@
-@import '../../styles.scss';
+@use '../../styles' as *;
 
 // Auth container (for login and registration)
 .auth-container {

diff --git a/chili-and-cilantro-react/src/app/components/dashboard-page.scss b/chili-and-cilantro-react/src/app/components/dashboard-page.scss
@@ -1,4 +1,4 @@
-@import '../../styles.scss';
+@use '../../styles' as *;
 
 // Dashboard styles
 .dashboard-container {

diff --git a/chili-and-cilantro-react/src/app/components/splash-page.scss b/chili-and-cilantro-react/src/app/components/splash-page.scss
@@ -1,36 +1,36 @@
-@import '../../styles.scss';
+@use 'sass:color';
+@use '../../styles' as *;
 
 // Splash Page styles
 .splash-container {
   max-width: 800px;
   margin: 2rem auto;
   padding: 2rem;
-  background-color: $primary-dark; // Using dark theme background
-  border-radius: 8px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); // Darker shadow for depth
+  background-color: $background-color;
+  border-radius: 10px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7); // Strong shadow for depth
+  color: $text-color-light; // Light text for readability
   text-align: center;
-  color: $text-color; // Use shared text color
 
   .splash-logo {
-    max-width: 60%;
-    margin-bottom: 1rem;
+    max-width: 70%;
+    margin-bottom: 1.5rem;
   }
 
   .splash-subdescription {
-    font-size: 1.5rem;
-    color: $highlight-color; // Use highlight color
-    font-family: $font-family; // Shared primary font
+    font-size: 1.6rem;
+    color: $highlight-color; // Bright green for emphasis
+    font-family: $font-family;
     margin-bottom: 2rem;
   }
 
   .feature-list {
-    margin-bottom: 2rem;
     text-align: left;
 
     .feature-title {
-      color: $accent-color; // Use accent color for headers
+      color: $highlight-color;
+      font-family: $font-secondary;
       font-size: 1.8rem;
-      font-family: $font-secondary; // Use secondary font for contrast
       margin-bottom: 1rem;
       text-align: center;
     }
@@ -40,37 +40,47 @@
       padding-left: 2rem;
 
       li {
-        margin-bottom: 0.5rem;
-        font-size: 1.1rem;
-        color: $text-muted; // Muted text color for bullets
-        font-family: $font-family;
-      }
+        font-size: 1.2rem;
+        color: $text-color-muted;
+        margin-bottom: 0.75rem;
 
-      li:hover {
-        color: $text-color; // Highlight bullets on hover
-        transition: color 0.3s ease-in-out;
+        &:hover {
+          color: $text-color-light;
+          transition: color 0.3s ease;
+        }
       }
     }
   }
 
   .game-description {
-    background-color: $secondary-dark; // Use lighter dark for the card
+    background-color: color.adjust(
+      $new-dark,
+      $lightness: 10%
+    ); // Slightly lighter dark background
     padding: 1.5rem;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); // Subtle shadow for depth
     margin-bottom: 2rem;
 
     h3 {
-      color: $highlight-color; // Use highlight color for headers
       font-family: $font-family;
+      color: $highlight-color; // Bright green for headers
       font-size: 1.5rem;
       margin-bottom: 1rem;
     }
 
     p {
-      color: $text-muted; // Muted text for description
+      color: $text-color-light; // Light text for better contrast
       font-family: $font-family;
+      line-height: 1.8; // Improve readability with increased line spacing
+      font-size: 1.2rem; // Slightly larger font size
       margin: 0;
+
+      // Optional: Highlight keywords
+      span {
+        color: $highlight-color; // Use bright green for emphasis
+        font-weight: bold;
+      }
     }
   }
 
@@ -80,21 +90,29 @@
     gap: 1rem;
 
     .btn {
-      @extend .btn; // Extend shared button styles
+      display: inline-block;
+      padding: 0.75rem 1.5rem;
+      font-size: 1rem;
+      border-radius: 8px;
       text-decoration: none;
       text-align: center;
+      transition: background-color 0.3s ease;
 
       &-primary {
-        @extend .btn-primary; // Use primary button style
+        background-color: $new-gray;
+        color: $new-dark;
+
         &:hover {
-          background-color: $highlight-hover; // Shared hover color
+          background-color: $new-red;
         }
       }
 
       &-secondary {
-        @extend .btn-secondary; // Use secondary button style
+        background-color: $new-gray;
+        color: $new-dark;
+
         &:hover {
-          background-color: $accent-hover; // Shared hover color
+          background-color: color.scale($new-lightGreen, $lightness: -10%);
         }
       }
     }

diff --git a/chili-and-cilantro-react/src/app/components/splash-page.tsx b/chili-and-cilantro-react/src/app/components/splash-page.tsx
@@ -14,7 +14,9 @@ const SplashPage: React.FC = () => {
       />
       <p className="splash-subdescription">A Spicy Bluffing Game</p>
       <div className="feature-list">
-        <h2 className="feature-title montserrat-heading">Key Features:</h2>
+        <h2 className="feature-title playfair-display-regular">
+          Key Features:
+        </h2>
         <ul className="feature-bullets">
           <li>Exciting bluffing gameplay with a culinary twist</li>
           <li>Strategic bidding and card placement</li>

diff --git a/chili-and-cilantro-react/src/app/components/top-menu.scss b/chili-and-cilantro-react/src/app/components/top-menu.scss
@@ -1,4 +1,4 @@
-@import '../../styles.scss';
+@use '../../styles' as *;
 
 // TopMenu styles
 .top-menu {
@@ -119,7 +119,7 @@
 
     .logo-text {
       font-size: 1.2rem;
-      color: $primary-color;
+      color: $new-lightGreen;
     }
   }
 

diff --git a/chili-and-cilantro-react/src/app/components/top-menu.tsx b/chili-and-cilantro-react/src/app/components/top-menu.tsx
@@ -56,7 +56,7 @@ const TopMenu: React.FC = () => {
             alt="CurseFund"
             className="logo-symbol"
           />
-          <span className="logo-text montserrat-heading">
+          <span className="logo-text playfair-display-regular">
             Chili and Cilantro
           </span>
         </div>

diff --git a/chili-and-cilantro-react/src/app/components/verify-email-page.scss b/chili-and-cilantro-react/src/app/components/verify-email-page.scss
@@ -1,4 +1,4 @@
-@import '../../styles.scss';
+@use '../../styles' as *;
 
 .verification-container {
   max-width: 400px;

diff --git a/chili-and-cilantro-react/src/styles.scss b/chili-and-cilantro-react/src/styles.scss
@@ -1,29 +1,39 @@
 @use 'sass:color';
-// Variables
+// Color Base
 $logo-background-color: #fffdd0;
 $green-chili: #7edb0e;
 $green-chili-shadow: #0e683c;
 $red-chili: #ff081f;
 $red-chili-shadow: #9c0020;
+$cilantro-light: #e3fe2d;
+$cilantro-dark: #24b215;
+
+$new-dark: #05070b;
+$new-green: #375c4b;
+$new-lightGreen: #78bf33;
+$new-red: #cc2129;
+$new-gray: #cfcdc8;
 
 // Theme colors
-$primary-dark: #333333; // Darker shade for text
-$secondary-dark: #666666; // Medium gray for secondary text
-$highlight-color: #7edb0e; // Green chili as highlight
-$accent-color: #ff081f; // Red chili as accent
+$primary-dark: $new-dark; // Darker shade for text
+$secondary-dark: $new-gray; // Medium gray for secondary text
+$highlight-color: $new-lightGreen; // Green chili as highlight
+$accent-color: $new-red; // Red chili as accent
 $text-color: #000000; // Black text for readability
+$text-color-light: #ffffff; // White text for contrast
+$text-color-muted: $new-gray; // Muted gray for secondary text
 $text-muted: #666666; // Muted gray for secondary text
-$danger-color: #ff081f; // Red chili for danger/alerts
-$success-color: #7edb0e; // Green chili for success feedback
+$danger-color: $new-red; // Red chili for danger/alerts
+$success-color: $new-lightGreen; // Green chili for success feedback
 $border-color: #e0e0e0; // Light gray for borders
 
-$primary-color: $green-chili;
+$primary-color: $new-green;
 $light-color: #ffffff; // White background color
-$background-color: #ffffff; // White background color
+$background-color: $new-dark; // White background color
 
 // Button hover effects
-$highlight-hover: lighten($highlight-color, 10%);
-$accent-hover: lighten($accent-color, 10%);
+$highlight-hover: color.adjust($highlight-color, $lightness: 10%);
+$accent-hover: color.adjust($accent-color, $lightness: 10%);
 
 $font-family: 'Playfair Display', serif;
 $font-secondary: 'McFoodPoisoning', sans-serif;

diff --git a/chili-and-cilantro-react/src/theme.tsx b/chili-and-cilantro-react/src/theme.tsx
@@ -2,57 +2,74 @@ import { createTheme } from '@mui/material/styles';
 
 const theme = createTheme({
   palette: {
-    mode: 'light',
+    mode: 'dark',
     primary: {
-      main: '#7EDB0E', // green-chili
-      dark: '#0E683C', // green-chili-shadow
-      contrastText: '#FFFFFF', // white for better contrast
+      main: '#78bf33', // Bright green for highlights
+      contrastText: '#ffffff', // White for contrast
     },
     secondary: {
-      main: '#FF081F', // red-chili
-      dark: '#9C0020', // red-chili-shadow
-      contrastText: '#FFFFFF', // white for better contrast
+      main: '#cc2129', // Red accent
+      contrastText: '#ffffff',
     },
     background: {
-      default: '#FFFFFF', // white background
-      paper: '#FFFFFF',
+      default: '#05070b', // Dark background
+      paper: '#1a1e24', // Lighter dark for contrast
     },
     text: {
-      primary: '#000000',
-      secondary: '#333333',
+      primary: '#ffffff', // White text
+      secondary: '#cfcdc8', // Muted gray for secondary text
     },
   },
-  components: {
-    MuiAppBar: {
-      styleOverrides: {
-        root: {
-          backgroundColor: '#7EDB0E', // green-chili for AppBar
-          color: '#FFFFFF', // white text for contrast
-        },
-      },
+  typography: {
+    fontFamily: '"Playfair Display", serif',
+    h1: {
+      fontFamily: '"McFoodPoisoning", sans-serif',
+      fontWeight: 600,
+      fontSize: '2.5rem',
+    },
+    h2: {
+      fontFamily: '"McFoodPoisoning", sans-serif',
+      fontWeight: 500,
+      fontSize: '2rem',
+    },
+    body1: {
+      fontSize: '1rem',
+      lineHeight: 1.6,
+    },
+    button: {
+      fontWeight: 700,
     },
+  },
+  components: {
     MuiButton: {
       styleOverrides: {
         root: {
-          backgroundColor: '#7EDB0E', // green-chili for buttons
-          color: '#FFFFFF', // white text for contrast
+          borderRadius: '8px',
+          textTransform: 'none',
+        },
+        containedPrimary: {
+          backgroundColor: '#78bf33',
+          '&:hover': {
+            backgroundColor: '#5aa828',
+          },
+        },
+        containedSecondary: {
+          backgroundColor: '#cc2129',
           '&:hover': {
-            backgroundColor: '#0E683C', // darker green on hover
+            backgroundColor: '#9c0020',
           },
         },
       },
     },
-    MuiInputLabel: {
+    MuiAppBar: {
       styleOverrides: {
         root: {
-          color: '#333333', // darker text for better readability
+          backgroundColor: '#375c4b', // Muted green for AppBar
+          color: '#ffffff',
         },
       },
     },
   },
-  typography: {
-    fontFamily: '"Playfair Display", serif',
-  },
 });
 
 export default theme;