chore: update web themeing

code4romania · Dec 6, 2023 · edd1a26 · edd1a26
1 parent 7f8ef87
commit edd1a26
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 13 deletions.
diff --git a/frontend/src/common/constants/pie-chart-options.ts b/frontend/src/common/constants/pie-chart-options.ts
@@ -5,11 +5,11 @@ export enum PieChartOption {
   SEX = 'SEX',
 }
 
-export const PIE_CHART_COLORS = ['#06B5C0', '#C4FBFF', '#246F6F', '#000000'];
+export const PIE_CHART_COLORS = ['#FFD209', '#FEF3C7', '#F59E0B', '#000000'];
 export const PIE_CHART_LEGEND_COLORS = [
-  'bg-[#06B5C0]',
-  'bg-[#C4FBFF]',
-  'bg-[#246F6F]',
+  'bg-[#FFD209]',
+  'bg-[#FEF3C7]',
+  'bg-[#F59E0B]',
   'bg-[#000000]',
 ];
 

diff --git a/frontend/src/components/MenuLink.tsx b/frontend/src/components/MenuLink.tsx
@@ -15,10 +15,10 @@ const MenuLink = ({ item, active, isNarrow, onClick }: MenuLinkProps) => {
       id={`${item.name}__menu-item`}
       aria-label={item.name}
       className={classNames(
-        active ? 'bg-turquoise/[0.15] text-turquoise' : 'text-gray-50',
+        active ? 'bg-yellow/[0.15] text-yellow' : 'text-gray-50',
         active && item.childRoutes ? 'bg-transparent' : '',
         isNarrow ? 'justify-center px-0 space-x-0' : 'px-4 space-x-5 ',
-        'h-10 flex items-center px-2 py-2 font-medium rounded-md hover:bg-turquoise/[0.15]  hover:text-turquoise',
+        'h-10 flex items-center px-2 py-2 font-medium rounded-md hover:bg-yellow/[0.15]  hover:text-yellow',
       )}
       onClick={() => onClick(item)}
     >

diff --git a/frontend/src/components/Tabs.tsx b/frontend/src/components/Tabs.tsx
@@ -32,8 +32,10 @@ const Tabs = <T extends React.Key>({ children, tabs, onClick, defaultTab }: Tabs
             aria-label={tab.value}
             onClick={onTabClick.bind(null, tab)}
             className={`${
-              activeTab.key === tab.key ? 'bg-turquoise-200' : 'font-roboto hover:bg-turquoise-200'
-            } min-w-fit leading-5 text-cool-gray-800 hover:text-cool-gray-800 px-4 py-2 rounded-md active:bg-turquoise-300`}
+              activeTab.key === tab.key
+                ? 'bg-yellow-500/[0.5]'
+                : 'font-roboto hover:bg-yellow-500/[0.5]'
+            } min-w-fit leading-5 text-cool-gray-800 hover:text-cool-gray-800 px-4 py-2 rounded-md active:bg-yellow-500`}
           >
             {tab.value}
           </a>

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -29,7 +29,7 @@
   }
 
   a {
-    @apply text-sm sm:text-base font-robotoBold text-turquoise hover:text-turquoise-700 active:text-turquoise-800 focus:outline-0 cursor-pointer;
+    @apply text-sm sm:text-base font-robotoBold text-blue hover:text-blue/[0.8] active:text-blue/[0.8] focus:outline-0 cursor-pointer;
   }
 
   h1 {
@@ -112,15 +112,15 @@
   }
 
   .btn-primary {
-    @apply btn text-white bg-turquoise hover:bg-turquoise-700 active:bg-turquoise-800 focus:shadow-yellow focus:outline-0 disabled:bg-turquoise;
+    @apply btn text-black bg-yellow hover:bg-yellow-500 active:bg-yellow-400 focus:shadow-yellow-400 focus:outline-0 disabled:bg-yellow;
   }
 
   .btn-danger {
     @apply btn text-white bg-red hover:bg-red-700 active:bg-red-800 focus:shadow-yellow focus:outline-0;
   }
 
   .btn-secondary {
-    @apply btn text-white bg-cool-gray focus:shadow-yellow focus:outline-0;
+    @apply btn text-white bg-cool-gray focus:shadow-none focus:outline-0;
   }
 
   .btn-outline-secondary {
@@ -132,7 +132,7 @@
   }
 
   .btn-text-primary {
-    @apply btn text-turquoise hover:text-turquoise-700 active:text-turquoise-800 focus:shadow-yellow focus:outline-0;
+    @apply btn text-yellow hover:text-yellow-700 active:text-yellow-800 focus:shadow-yellow focus:outline-0;
   }
 
   .btn-text-danger {

diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
@@ -47,8 +47,20 @@ module.exports = {
         },
         yellow: {
           DEFAULT: '#FFD209',
-          900: '#F57F17',
+          50: '#fefce8',
+          100: '#fffbc2',
+          200: '#fff487',
+          300: '#ffe643',
+          400: '#ffe643',
           500: '#FFD209',
+          600: '#efba03',
+          700: '#ce9000',
+          800: '#F57F17',
+          900: '#a46604',
+        },
+        blue: {
+          DEFAULT: '#2563EB',
+          600: '#2563EB',
         },
       },
       transitionProperty: {