From 82e18586a1735794de234dff613c0d06b6fc4a18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Mon, 20 Nov 2023 17:44:56 +0100
Subject: [PATCH] adjusts button styles

---
 app/components/button/component.tsx           |  8 ++++----
 .../features/raw-item/component.tsx           |  3 +++
 .../forms/select/constants/theme.ts           |  8 +++++---
 .../sidebar/project/scenarios-list/index.tsx  |  3 +--
 app/layout/projects/show/map/index.tsx        | 19 +++++++------------
 app/layout/scenarios/edit/map/component.tsx   | 19 +++++++------------
 6 files changed, 27 insertions(+), 33 deletions(-)

diff --git a/app/components/button/component.tsx b/app/components/button/component.tsx
index cd322751dd..3c2bb8ddd0 100644
--- a/app/components/button/component.tsx
+++ b/app/components/button/component.tsx
@@ -6,14 +6,14 @@ import { cn } from 'utils/cn';
 
 const THEME = {
   primary:
-    'text-black bg-primary-500 hover:bg-primary-400 active:bg-primary-300 border border-primary-500 hover:border-primary-400 active:border-primary-300',
+    'text-black bg-primary-500 hover:bg-primary-300 text-gray-900 active:bg-primary-300 border border-primary-500 hover:border-primary-400 active:border-primary-300',
   'primary-alt':
-    'text-primary-500 bg-transparent hover:bg-transparent active:bg-transparent border border-primary-500 hover:border-primary-400 active:border-primary-300',
+    'text-primary-500 bg-transparent hover:bg-transparent active:bg-transparent border border-primary-500 hover:border-primary-300 hover:text-primary-300 active:bg-blue-500 active:text-gray-900 active:border-primary-300 active:outline active:outline-offset-2 active:outline-gray-700',
 
   secondary:
-    'text-white bg-gray-700 hover:bg-gray-600 active:bg-gray-400 border border-gray-700 hover:border-gray-600 active:border-gray-400',
+    'text-white bg-gray-700 hover:bg-gray-600 active:bg-gray-400 border border-gray-700 hover:border-gray-600 active:border-gray-400 active:outline active:outline-offset-2 active:outline-gray-700',
   'secondary-alt':
-    'text-gray-400 bg-transparent hover:bg-transparent active:bg-transparent border border-gray-600 hover:border-gray-400 active:border-gray-300',
+    'text-white bg-transparent hover:bg-transparent active:bg-transparent border border-gray-600 hover:border-gray-400 active:border-gray-300',
 
   tertiary: 'text-black bg-gray-200 hover:bg-gray-100 hover:border-gray-100 hover:text-white',
 
diff --git a/app/components/features/raw-item/component.tsx b/app/components/features/raw-item/component.tsx
index e25a6914ca..3ddbb1dc3c 100644
--- a/app/components/features/raw-item/component.tsx
+++ b/app/components/features/raw-item/component.tsx
@@ -65,6 +65,9 @@ export const Item: React.FC<ItemProps> = ({
                 'secondary-alt': !selected,
               }) as ComponentProps<typeof Button>['theme']
             }
+            className={cn({
+              'text-gray-900': !selected,
+            })}
             size="xs"
             onClick={onToggleSelected}
           >
diff --git a/app/components/forms/select/constants/theme.ts b/app/components/forms/select/constants/theme.ts
index 5c6a9a7d90..69be54b766 100644
--- a/app/components/forms/select/constants/theme.ts
+++ b/app/components/forms/select/constants/theme.ts
@@ -1,4 +1,4 @@
-export default {
+export const SELECT_THEME = {
   dark: {
     container: 'text-white bg-gray-800 ring-1 ring-gray-600 rounded-3xl',
     open: 'ring-2 ring-primary-400 bg-gray-800 text-white rounded-2xl',
@@ -30,8 +30,8 @@ export default {
       disabled: 'text-gray-100',
     },
     item: {
-      base: 'text-sm text-gray-100',
-      highlighted: 'text-sm bg-gray-200 text-gray-900',
+      base: 'text-sm text-gray-900',
+      highlighted: 'text-sm bg-gray-100',
       disabled: 'text-sm opacity-50 pointer-events-none',
     },
   },
@@ -67,3 +67,5 @@ export default {
     },
   },
 };
+
+export default SELECT_THEME;
diff --git a/app/layout/project/sidebar/project/scenarios-list/index.tsx b/app/layout/project/sidebar/project/scenarios-list/index.tsx
index 0110410b73..40f34975d6 100644
--- a/app/layout/project/sidebar/project/scenarios-list/index.tsx
+++ b/app/layout/project/sidebar/project/scenarios-list/index.tsx
@@ -43,7 +43,7 @@ import ScenarioItem from './scenario-item';
 import ScenarioTypes from './types';
 
 const LINK_CLASSES =
-  'inline-block rounded-xl bg-gray-600 px-2.5 py-1 text-sm text-white transition-colors hover:bg-gray-100';
+  'inline-block rounded-xl bg-gray-700 px-2.5 py-1 text-sm text-white transition-colors hover:bg-gray-600';
 
 export const ScenariosList: React.FC = () => {
   const queryClient = useQueryClient();
@@ -343,7 +343,6 @@ export const ScenariosList: React.FC = () => {
               </motion.div>
 
               <motion.div
-                // key="project-scenarios-empty"
                 initial={{ y: -10, opacity: 0 }}
                 animate={{ y: 0, opacity: 1 }}
                 exit={{ y: -10, opacity: 0 }}
diff --git a/app/layout/projects/show/map/index.tsx b/app/layout/projects/show/map/index.tsx
index dd8c05d961..ca193d3258 100644
--- a/app/layout/projects/show/map/index.tsx
+++ b/app/layout/projects/show/map/index.tsx
@@ -34,6 +34,7 @@ import { useScenarios } from 'hooks/scenarios';
 import { useToasts } from 'hooks/toast';
 import { useProjectWDPAs } from 'hooks/wdpa';
 
+import Button from 'components/button';
 import Select from 'components/forms/select';
 import Loading from 'components/loading';
 import Map from 'components/map';
@@ -574,21 +575,15 @@ export const ProjectMap = (): JSX.Element => {
                   <HiOutlinePrinter className="h-6 w-6 text-white" />
                 </button>
               )}
-              <button
+              <Button
+                theme="primary"
+                size="base"
                 type="button"
                 onClick={() => setOpen(!open)}
-                className={cn({
-                  'rounded-full bg-gray-800 p-5 shadow-xl': true,
-                  'bg-blue-400': open,
-                })}
+                className="rounded-full p-5 shadow-xl"
               >
-                <FiLayers
-                  className={cn({
-                    'h-6 w-6 text-white': true,
-                    'text-gray-700': open,
-                  })}
-                />
-              </button>
+                <FiLayers className="h-6 w-6 text-gray-900" />
+              </Button>
             </div>
             <Legend
               open={open}
diff --git a/app/layout/scenarios/edit/map/component.tsx b/app/layout/scenarios/edit/map/component.tsx
index 99f9e16550..3aee3afd1e 100644
--- a/app/layout/scenarios/edit/map/component.tsx
+++ b/app/layout/scenarios/edit/map/component.tsx
@@ -31,6 +31,7 @@ import { useScenario, useScenarioPU } from 'hooks/scenarios';
 import { useBestSolution } from 'hooks/solutions';
 import { useWDPACategories } from 'hooks/wdpa';
 
+import Button from 'components/button';
 import Loading from 'components/loading';
 import Map from 'components/map';
 import Controls from 'components/map/controls';
@@ -611,21 +612,15 @@ export const ScenariosEditMap = (): JSX.Element => {
       </Controls>
 
       <div className="absolute bottom-16 right-5 flex w-full max-w-xs flex-col items-end space-y-2">
-        <button
+        <Button
+          theme="primary"
+          size="base"
           type="button"
           onClick={() => setOpen(!open)}
-          className={cn({
-            'rounded-full bg-gray-800 p-5 shadow-xl': true,
-            'bg-blue-400': open,
-          })}
+          className="rounded-full p-5 shadow-xl"
         >
-          <FiLayers
-            className={cn({
-              'h-6 w-6 text-white': true,
-              'text-gray-700': open,
-            })}
-          />
-        </button>
+          <FiLayers className="h-6 w-6 text-gray-900" />
+        </Button>
         <Legend open={open} className="max-h-[50svh] w-full" onChangeOpen={() => setOpen(!open)}>
           {legendConfig.map((c) => {
             return (