From 40350ee437e03165e40c39545cd8ea3de18f4782 Mon Sep 17 00:00:00 2001 From: Jessica Mulein Date: Wed, 27 Nov 2024 22:28:11 +0000 Subject: [PATCH] theme incremental improvement --- .../src/app/components/auth.scss | 2 +- .../src/app/components/dashboard-page.scss | 2 +- .../src/app/components/splash-page.scss | 76 ++++++++++++------- .../src/app/components/splash-page.tsx | 4 +- .../src/app/components/top-menu.scss | 4 +- .../src/app/components/top-menu.tsx | 2 +- .../src/app/components/verify-email-page.scss | 2 +- chili-and-cilantro-react/src/styles.scss | 32 +++++--- chili-and-cilantro-react/src/theme.tsx | 71 ++++++++++------- 9 files changed, 121 insertions(+), 74 deletions(-) diff --git a/chili-and-cilantro-react/src/app/components/auth.scss b/chili-and-cilantro-react/src/app/components/auth.scss index 1d1666a..efb1222 100644 --- 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 index c1b713d..8b49403 100644 --- 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 index 3576c57..8c98e67 100644 --- 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 index 137f8e8..cb3bad8 100644 --- 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 = () => { />

A Spicy Bluffing Game

-

Key Features:

+

+ Key Features: +

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 index 5200012..2508ea4 100644 --- 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 index 3ae8203..290a8a0 100644 --- 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 index afde261..0a1270c 100644 --- 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;