From 3da8ee7649058d2209db6db6ab15da6a04dd105c Mon Sep 17 00:00:00 2001
From: Kellar <kellar.base09@gmail.com>
Date: Fri, 19 Apr 2024 18:19:16 +0100
Subject: [PATCH] Half-assed sort and dao options menu reskin. Needs more work

---
 .../ui/menus/OptionMenu/OptionsList.tsx         | 17 ++++-------------
 src/components/ui/menus/OptionMenu/index.tsx    | 11 ++++++-----
 src/components/ui/utils/Sort.tsx                |  4 +---
 3 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/src/components/ui/menus/OptionMenu/OptionsList.tsx b/src/components/ui/menus/OptionMenu/OptionsList.tsx
index 6853e7ccd4..50e1c9b211 100644
--- a/src/components/ui/menus/OptionMenu/OptionsList.tsx
+++ b/src/components/ui/menus/OptionMenu/OptionsList.tsx
@@ -20,11 +20,7 @@ export function OptionsList({
   return (
     <>
       {titleKey && (
-        <Text
-          textStyle="text-sm-sans-regular"
-          color="chocolate.200"
-          marginBottom="0.5rem"
-        >
+        <Text marginBottom="0.5rem" textStyle="helper-text-small" color="neutral-7">
           {t(titleKey)}
         </Text>
       )}
@@ -36,11 +32,8 @@ export function OptionsList({
               as={showOptionSelected ? Box : Text}
               onClick={clickListener}
               cursor="pointer"
-              textStyle="text-base-mono-medium"
-              color="grayscale.100"
-              _hover={{ color: 'gold.200', textDecoration: 'none' }}
-              paddingStart="0rem"
-              paddingEnd="0rem"
+              _hover={{ bg: 'neutral-3', textDecoration: 'none' }}
+              p="0.5rem 1rem"
               gap={2}
               closeOnSelect={closeOnSelect}
               data-testid={'optionMenu-' + option.optionKey}
@@ -50,7 +43,6 @@ export function OptionsList({
                   <Checkbox
                     isChecked={option.isSelected}
                     onChange={clickListener}
-                    colorScheme="gold"
                     iconColor="black.900"
                     marginEnd="0.5rem"
                   />
@@ -62,7 +54,6 @@ export function OptionsList({
               {showOptionCount && (
                 <Text
                   textStyle="text-base-mono-medium"
-                  color={option.count ? 'grayscale.100' : 'grayscale.500'}
                   as="span"
                 >
                   {option.count}
@@ -73,7 +64,7 @@ export function OptionsList({
               <Divider
                 marginTop="0.25rem"
                 marginBottom="0.25rem"
-                color="chocolate.700"
+                color="neutral-3"
               />
             )}
           </Box>
diff --git a/src/components/ui/menus/OptionMenu/index.tsx b/src/components/ui/menus/OptionMenu/index.tsx
index f8720a0814..ebc030a2e3 100644
--- a/src/components/ui/menus/OptionMenu/index.tsx
+++ b/src/components/ui/menus/OptionMenu/index.tsx
@@ -50,13 +50,14 @@ export function OptionMenu({
           {trigger}
         </MenuButton>
       </Tooltip>
+
       <MenuList
-        rounded="lg"
-        shadow="menu-gold"
+        borderWidth="1px"
+        borderColor="neutral-3"
+        borderRadius="0.5rem"
+        bg="neutral-2" // neutral-2-84 ??
+        p="0.5rem 1rem"
         mr={['auto', '1rem']}
-        bg="grayscale.black"
-        border="none"
-        padding="1rem"
         zIndex={1000}
       >
         {children}
diff --git a/src/components/ui/utils/Sort.tsx b/src/components/ui/utils/Sort.tsx
index 5bbc11d1ac..83e3733e32 100644
--- a/src/components/ui/utils/Sort.tsx
+++ b/src/components/ui/utils/Sort.tsx
@@ -19,9 +19,7 @@ function SortMenuItem({
       py="0.5rem"
       color="grayscale.100"
       sx={{
-        '&:hover': {
-          color: 'gold.500',
-        },
+        '&:hover': { bg: 'neutral-3' },
       }}
       data-testid={testId}
       onClick={onClick}