fix extension styling

apps/extension/src/final/extension-popup/views/settings/components/setting.tsx

@@ -44,10 +44,10 @@ const ArrowRightButton = (properties: { onClick: () => void }) => {
   return (
     <IconButton
       onClick={properties.onClick}
-      iconName="ArrowRight"
+      iconName="ChevronRight"
       intent="tertiary"
       size="medium"
-      className="p-0.5"
+      className="p-0.5 text-gray-300"
     />
   );
 };

apps/extension/src/shared/idriss/components/send/form.tsx

@@ -141,7 +141,7 @@ export const Form = ({
           }}
         />
       </div>
-      <div className="border-t border-t-neutral-200 px-6 py-3">{footer}</div>
+      <div className="px-6 py-3">{footer}</div>
     </DesignSystemForm>
   );
 };

apps/extension/src/shared/ui/components/select/select-option-container.component.tsx

@@ -23,7 +23,7 @@ export const SelectOptionContainer: SelectOptionContainerComponent = forwardRef(
       <Component
         {...restProperties}
         className={classes(
-          'w-full rounded-md bg-white shadow-sm focus:outline-none',
+          'w-full rounded-xl bg-white shadow-xs focus:outline-none',
           className,
         )}
         ref={reference}

apps/extension/src/shared/ui/components/select/select-option.component.tsx

@@ -1,5 +1,7 @@
 import { ForwardedRef, forwardRef } from 'react';
 
+import { SelectIcon } from 'shared/ui/utils/select-icon';
+
 import { classes } from '../../utils';
 
 import { SelectOptionProperties } from './select.types';
@@ -16,18 +18,20 @@ export const SelectOption = forwardRef(
       <div
         ref={reference}
         className={classes(
-          'flex w-full cursor-pointer items-center space-x-2 rounded-xl border-r border-none border-r-neutral-200 px-3 py-2 text-left',
+          'flex w-full cursor-pointer items-center space-x-2 px-3 py-2 text-left',
           'hover:bg-black/10 focus:bg-black/50',
           className,
+          selected ? 'rounded-xl border border-neutral-200' : '',
         )}
       >
         <div className={classes('relative mr-1 pr-2', selectedClassName)}>
           {option.prefix}
         </div>
-        <div className="whitespace-nowrap text-neutralGreen-900">
+        <div className="flex-1 whitespace-nowrap text-neutralGreen-900">
           {option.label}
         </div>
         {option.suffix}
+        <div className="items-center">{selected ? <SelectIcon /> : ''}</div>
       </div>
     );
   },

apps/extension/src/shared/ui/components/select/select.component.tsx

@@ -43,7 +43,7 @@ export const Select = <T,>({
       <DropdownMenu.Root modal={false}>
         <DropdownMenu.Trigger asChild>
           <SelectOptionContainer
-            className="text-neutralGreen-900 ring-1 ring-[#D1D5DB] focus:ring-indigo-500"
+            className="text-neutralGreen-900 ring-[#D1D5DB] focus:ring-indigo-500"
             as="button"
           >
             <SelectOption

apps/extension/src/shared/ui/utils/select-icon.tsx

@@ -0,0 +1,18 @@
+export const SelectIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.00003 13.042L12 16L15 13.042M15 10.958L12 8L9 10.958"
+        stroke="#000A05"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

apps/main-landing/src/app/creators/donate/components/select/select-icon.tsx

@@ -0,0 +1,20 @@
+const SelectIcon = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.00003 13.042L12 16L15 13.042M15 10.958L12 8L9 10.958"
+        stroke="#000A05"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default SelectIcon;

apps/main-landing/src/app/creators/donate/components/select/select-option.component.tsx

@@ -1,6 +1,8 @@
 import { ForwardedRef, forwardRef } from 'react';
 import { classes } from '@idriss-xyz/ui/utils';
 
+import SelectIcon from '@/app/creators/donate/components/select/select-icon';
+
 import { SelectOptionProperties } from './select.types';
 
 export const SelectOption = forwardRef(
@@ -24,10 +26,11 @@ export const SelectOption = forwardRef(
         <div className={classes('relative mr-1 pr-2', selectedClassName)}>
           {option.prefix}
         </div>
-        <div className="whitespace-nowrap text-neutralGreen-900">
+        <div className="flex-1 whitespace-nowrap text-neutralGreen-900">
           {option.label}
         </div>
         {option.suffix}
+        <div className="items-center">{selected ? <SelectIcon /> : ''}</div>
       </div>
     );
   },

packages/tailwind-config/tailwind.config.mjs

@@ -58,6 +58,7 @@ export default {
       },
       gray: {
         200: '#E5E5E5',
+        300: '#757575',
       },
       lime: {
         100: '#FBFFE6',

packages/ui/src/components/icon/constants.ts

@@ -1,5 +1,6 @@
 import {
   ChevronDown,
+  ChevronRight,
   Menu,
   Puzzle,
   X,
@@ -30,6 +31,7 @@ export const ICON = {
   ArrowRight,
   HelpCircle,
   ChevronDown,
+  ChevronRight,
   AlertCircle,
   CheckCircle2,
   ...customIcons,

packages/ui/src/components/modal/modal.tsx

@@ -103,7 +103,6 @@ export const Modal = ({
             <div
               className={classes(
                 'relative',
-                'border-b-secondary border-b',
                 headerContainerClassName,
                 onClose && 'pr-14',
               )}