Merge pull request #41 from PixelSculptor/feature/color-palette

Feature/color palette
PixelSculptor · Feb 14, 2024 · 9396ea1 · 9396ea1
2 parents b83dc0f + 1b5fbb2
commit 9396ea1
Show file tree

Hide file tree

Showing 12 changed files with 52 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -28,16 +28,20 @@ If you are developing a production application, we recommend updating the config
 
 
 ## Color palette - description:
-- #3D84A8 (teal blue) - for buttons, call-to-action elements, and headings,
-- #F4A261 (light orange) - for secondary buttons, highlights, and important notifications,
-- #F2F2F2 (light gray) - for the background to provide a clean and unobtrusive canvas for content,
-- #333333 (dark gray) - for text, labels, and descriptions, ensuring readability and contrast with the background,
-- #E76F51 (terracotta) - for critical callouts, notifications, and icons to draw attention,
-- #FFD700 (gold) - for exceptional elements like selected dates or outstanding bookings. It adds a touch of elegance,
-- #FFFFFF (white) for sections with minimal distraction, such as headers and footers,
-- #CCCCCC (light gray) - for borders and dividers to maintain a sense of structure
-- #E63946 (red) - error color,
-- #4CAF50 (green) - success color
+- ![#0a3b92](https://placehold.co/15x15/0a3b92/0a3b92.png) `#0a3b92` - Primary color
+- ![#115dbd](https://placehold.co/15x15/115dbd/115dbd.png) `#115dbd` - Light primary color
+- ![#bd3872](https://placehold.co/15x15/bd3872/bd3872.png) `#bd3872` - Secondary color
+- ![#e04387](https://placehold.co/15x15/e04387/e04387.png) `#e04387` - Light secondary color
+- ![#f2f2f2](https://placehold.co/15x15/f2f2f2/f2f2f2.png) `#f2f2f2` - Background color
+- ![#333333](https://placehold.co/15x15/333333/333333.png) `#333333` - Dark text color
+- ![#f2f2f2](https://placehold.co/15x15/f2f2f2/f2f2f2.png) `#f2f2f2` - Light text color
+- ![#69a50e](https://placehold.co/15x15/69a50e/69a50e.png) `#69a50e` - Accent color
+- ![#3e7b05](https://placehold.co/15x15/3e7b05/3e7b05.png) `#3e7b05` - Darker accent color
+- ![#ffd700](https://placehold.co/15x15/ffd700/ffd700.png) `#ffd700` - Highlight color
+- ![#ffffff](https://placehold.co/15x15/ffffff/ffffff.png) `#ffffff` - Neutral color
+- ![#cccccc](https://placehold.co/15x15/cccccc/cccccc.png) `#cccccc` - Border color
+- ![#e63946](https://placehold.co/15x15/e63946/e63946.png) `#e63946` - Error color
+- ![#4caf50](https://placehold.co/15x15/4caf50/4caf50.png) `#4caf50` - Success color
 
 # Favicon:
 Favicon was created [here](https://icons8.com)
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,11 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
-        <link
-            rel="icon"
-            type="image/svg+xml"
-            href="/assets/icons8-desk-64.png"
-        />
+        <link rel="icon" type="image/svg+xml" href="/assets/icons8-office-32.png" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Desk Me</title>
     </head>

diff --git a/frontend/public/assets/icons8-desk-64.png b/frontend/public/assets/icons8-desk-64.png
diff --git a/frontend/public/assets/icons8-office-32.png b/frontend/public/assets/icons8-office-32.png
diff --git a/frontend/src/components/HamburgerMenu/HamburgerMenu.module.scss b/frontend/src/components/HamburgerMenu/HamburgerMenu.module.scss
@@ -13,7 +13,9 @@
 
     & > svg {
         cursor: pointer;
-        animation: fade 0.5s ease-in forwards;
+        width: 3rem;
+        height: auto;
+        animation: fade 0.125s ease-in forwards;
     }
 
     &--active {

diff --git a/frontend/src/components/Navigation/Navigation.tsx b/frontend/src/components/Navigation/Navigation.tsx
@@ -19,7 +19,7 @@ function NavigationSidebar() {
             <HamburgerMenu toggleMenu={toggleFlag} isMenuActive={menu} />
             <ul className={`${styles['navigation__list']} ${menu && styles['navigation__list--active']}`}>
                 {NAV_LINKS.map(({ Icon, path, text }) => (
-                    <NavigationLink Icon={Icon} path={path} navLinkText={text} key={path} />
+                    <NavigationLink Icon={Icon} path={path} navLinkText={text} key={path} toggleMenu={toggleFlag} />
                 ))}
             </ul>
         </nav>

diff --git a/frontend/src/components/Navigation/NavigationLink/NavigationLink.module.scss b/frontend/src/components/Navigation/NavigationLink/NavigationLink.module.scss
@@ -3,20 +3,21 @@
 .navlink {
     width: 100%;
 
-    color: utils.$background-color;
+    color: utils.$neutral-color;
     text-align: center;
     font-size: utils.$text-size-head4;
     font-weight: utils.$font-weight-normal;
     transition: 0.3s ease-in-out;
     padding: 0.5rem;
+    cursor: pointer;
 
     &:hover {
-        color: utils.$text-color;
+        color: utils.$secondary-color--light;
         background-color: utils.$primary-color--light;
         border-radius: 0.75rem;
 
         a.active {
-            color: utils.$accent-color--darker;
+            color: utils.$secondary-color--light;
         }
     }
 

diff --git a/frontend/src/components/Navigation/NavigationLink/NavigationLink.tsx b/frontend/src/components/Navigation/NavigationLink/NavigationLink.tsx
@@ -4,10 +4,10 @@ import { NavigationLinkProps } from './NavigationLinkProps';
 
 import classes from './NavigationLink.module.scss';
 
-export function NavigationLink({ path, navLinkText, Icon }: NavigationLinkProps) {
+export function NavigationLink({ path, navLinkText, Icon, toggleMenu }: NavigationLinkProps) {
     return (
         <li className={classes['navlink']}>
-            <NavLink to={path} className={({ isActive }) => (isActive ? classes.active : '')}>
+            <NavLink onClick={toggleMenu} to={path} className={({ isActive }) => (isActive ? classes.active : '')}>
                 <Icon />
                 {navLinkText}
             </NavLink>

diff --git a/frontend/src/components/Navigation/NavigationLink/NavigationLinkProps.ts b/frontend/src/components/Navigation/NavigationLink/NavigationLinkProps.ts
@@ -6,4 +6,5 @@ export type NavigationLinkProps = {
     path: AVAILABLE_ROUTES;
     navLinkText: string;
     Icon: IconType;
+    toggleMenu: () => void;
 };
diff --git a/frontend/src/styles/main.scss b/frontend/src/styles/main.scss
@@ -9,7 +9,7 @@ html {
 body {
     font-family: 'Poppins', 'Arial', sans-serif;
     background-color: variables.$background-color;
-    color: variables.$text-color;
+    color: variables.$text-color--dark;
     box-sizing: border-box;
 }
 

diff --git a/frontend/src/styles/utils.scss b/frontend/src/styles/utils.scss
@@ -1 +1,6 @@
-@forward './variables.scss';
+@use 'sass:math';
+$viewport-width: 1440;
+
+@function calculate-vw($px-value) {
+    @return math.div($px-value, $viewport-width) * 100 * 1vw;
+}
diff --git a/frontend/src/styles/variables.scss b/frontend/src/styles/variables.scss
@@ -1,11 +1,15 @@
+@use 'utils.scss' as utils;
+
 // color palette
-$primary-color: #0f425b;
-$primary-color--light: #76cdf8;
-$secondary-color: #ffcca3;
+$primary-color: #0a3b92;
+$primary-color--light: #115dbd;
+$secondary-color: #bd3872;
+$secondary-color--light: #e04387;
 $background-color: #f2f2f2;
-$text-color: #333333;
-$accent-color: #e76f51;
-$accent-color--darker: #af533c;
+$text-color--dark: #333333;
+$text-color--light: #f2f2f2;
+$accent-color: #69a50e;
+$accent-color--darker: #3e7b05;
 $highlight-color: #ffd700;
 $neutral-color: #ffffff;
 $border-color: #cccccc;
@@ -14,17 +18,16 @@ $border-color: #cccccc;
 $error-color: #e63946;
 $success-color: #4caf50;
 
-// TODO: add clamp font size config for rest of text types
 // font size
-$text-size-caption: 0.75rem;
-$text-size-button: 1.025rem;
-$text-size-body: 1rem;
-$text-size-head6: 1.188rem;
-$text-size-head5: 1.438rem;
-$text-size-head4: 2.063rem;
-$text-size-head3: clamp(1.3rem, 0.922rem + 1.68vw, 2.938rem);
-$text-size-head2: clamp(1.5rem, 0.4865rem + 2.2821vw, 3.225rem);
-$text-size-head1: 4.513rem;
+$text-size-caption: clamp(0.75rem, utils.calculate-vw(12), 0.875rem); // 12px
+$text-size-button: clamp(0.875rem, utils.calculate-vw(14), 1rem); // 14px
+$text-size-body: clamp(1rem, utils.calculate-vw(16), 1.25rem); // 16px
+$text-size-head6: clamp(1rem, utils.calculate-vw(18), 1.25rem); // 18px
+$text-size-head5: clamp(1.25rem, utils.calculate-vw(20), 1.5rem); // 20px
+$text-size-head4: clamp(1.5rem, utils.calculate-vw(26), 1.75rem); // 26px
+$text-size-head3: clamp(1.75rem, utils.calculate-vw(28), 2rem); // 28px
+$text-size-head2: clamp(2rem, utils.calculate-vw(32), 2.5rem); // 32px
+$text-size-head1: clamp(2.5rem, utils.calculate-vw(40), 3rem); // 40px
 
 // font weights
 $font-weight-regular: 400;