From d5aa500b4de572faffe01361c5da08f733de0e99 Mon Sep 17 00:00:00 2001
From: Maciej Kutynia <kutynia.maciej@gmail.com>
Date: Tue, 17 Dec 2024 22:30:18 +0100
Subject: [PATCH 1/8] fix extension styling

---
 .../views/settings/components/setting.tsx     |  4 ++--
 .../select/select-option.component.tsx        |  4 +++-
 .../src/shared/ui/utils/select-icon.tsx       | 20 +++++++++++++++++++
 .../donate/components/select/SelectIcon.tsx   | 20 +++++++++++++++++++
 .../select/select-option.component.tsx        |  5 ++++-
 packages/tailwind-config/tailwind.config.mjs  |  3 ++-
 packages/ui/src/components/icon/constants.ts  |  2 ++
 7 files changed, 53 insertions(+), 5 deletions(-)
 create mode 100644 apps/extension/src/shared/ui/utils/select-icon.tsx
 create mode 100644 apps/main-landing/src/app/creators/donate/components/select/SelectIcon.tsx

diff --git a/apps/extension/src/final/extension-popup/views/settings/components/setting.tsx b/apps/extension/src/final/extension-popup/views/settings/components/setting.tsx
index e160df1d..1f7c5ae5 100644
--- a/apps/extension/src/final/extension-popup/views/settings/components/setting.tsx
+++ b/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"
     />
   );
 };
diff --git a/apps/extension/src/shared/ui/components/select/select-option.component.tsx b/apps/extension/src/shared/ui/components/select/select-option.component.tsx
index 1c7d18c3..1a3aa776 100644
--- a/apps/extension/src/shared/ui/components/select/select-option.component.tsx
+++ b/apps/extension/src/shared/ui/components/select/select-option.component.tsx
@@ -3,6 +3,7 @@ import { ForwardedRef, forwardRef } from 'react';
 import { classes } from '../../utils';
 
 import { SelectOptionProperties } from './select.types';
+import SelectIcon from 'shared/ui/utils/select-icon';
 
 export const SelectOption = forwardRef(
   (
@@ -24,10 +25,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>
     );
   },
diff --git a/apps/extension/src/shared/ui/utils/select-icon.tsx b/apps/extension/src/shared/ui/utils/select-icon.tsx
new file mode 100644
index 00000000..4a077c7a
--- /dev/null
+++ b/apps/extension/src/shared/ui/utils/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;
diff --git a/apps/main-landing/src/app/creators/donate/components/select/SelectIcon.tsx b/apps/main-landing/src/app/creators/donate/components/select/SelectIcon.tsx
new file mode 100644
index 00000000..4a077c7a
--- /dev/null
+++ b/apps/main-landing/src/app/creators/donate/components/select/SelectIcon.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;
diff --git a/apps/main-landing/src/app/creators/donate/components/select/select-option.component.tsx b/apps/main-landing/src/app/creators/donate/components/select/select-option.component.tsx
index 0db99c68..71ba877b 100644
--- a/apps/main-landing/src/app/creators/donate/components/select/select-option.component.tsx
+++ b/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/SelectIcon';
+
 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>
     );
   },
diff --git a/packages/tailwind-config/tailwind.config.mjs b/packages/tailwind-config/tailwind.config.mjs
index ca31d9b3..a8fe7c06 100644
--- a/packages/tailwind-config/tailwind.config.mjs
+++ b/packages/tailwind-config/tailwind.config.mjs
@@ -57,7 +57,8 @@ export default {
         900: '#002D1E',
       },
       gray: {
-        200: '#E5E5E5'
+        200: '#E5E5E5',
+        300: '#757575',
       },
       lime: {
         100: '#FBFFE6',
diff --git a/packages/ui/src/components/icon/constants.ts b/packages/ui/src/components/icon/constants.ts
index b88fcd99..84dc7e38 100644
--- a/packages/ui/src/components/icon/constants.ts
+++ b/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,

From fe95171907d8c100bd910b472aa9f287b94d4118 Mon Sep 17 00:00:00 2001
From: Maciej Kutynia <kutynia.maciej@gmail.com>
Date: Mon, 30 Dec 2024 17:52:51 +0100
Subject: [PATCH 2/8] fix lint errors

---
 .../components/select/select-option.component.tsx   | 13 +++++++------
 apps/extension/src/shared/ui/utils/select-icon.tsx  |  4 ++--
 .../select/{SelectIcon.tsx => select-icon.tsx}      |  0
 .../components/select/select-option.component.tsx   | 12 ++++++------
 4 files changed, 15 insertions(+), 14 deletions(-)
 rename apps/main-landing/src/app/creators/donate/components/select/{SelectIcon.tsx => select-icon.tsx} (100%)

diff --git a/apps/extension/src/shared/ui/components/select/select-option.component.tsx b/apps/extension/src/shared/ui/components/select/select-option.component.tsx
index 1a3aa776..de61c0cb 100644
--- a/apps/extension/src/shared/ui/components/select/select-option.component.tsx
+++ b/apps/extension/src/shared/ui/components/select/select-option.component.tsx
@@ -1,13 +1,14 @@
-import { ForwardedRef, forwardRef } from 'react';
+import {ForwardedRef, forwardRef} from 'react';
 
-import { classes } from '../../utils';
+import {SelectIcon} from 'shared/ui/utils/select-icon';
 
-import { SelectOptionProperties } from './select.types';
-import SelectIcon from 'shared/ui/utils/select-icon';
+import {classes} from '../../utils';
+
+import {SelectOptionProperties} from './select.types';
 
 export const SelectOption = forwardRef(
   (
-    { option, className, selected }: SelectOptionProperties<unknown>,
+    {option, className, selected}: SelectOptionProperties<unknown>,
     reference: ForwardedRef<HTMLDivElement>,
   ) => {
     const selectedClassName = selected
@@ -29,7 +30,7 @@ export const SelectOption = forwardRef(
           {option.label}
         </div>
         {option.suffix}
-        <div className="items-center">{selected ? <SelectIcon /> : ''}</div>
+        <div className="items-center">{selected ? <SelectIcon/> : ''}</div>
       </div>
     );
   },
diff --git a/apps/extension/src/shared/ui/utils/select-icon.tsx b/apps/extension/src/shared/ui/utils/select-icon.tsx
index 4a077c7a..cdb1998d 100644
--- a/apps/extension/src/shared/ui/utils/select-icon.tsx
+++ b/apps/extension/src/shared/ui/utils/select-icon.tsx
@@ -1,4 +1,4 @@
-const SelectIcon = () => {
+export const SelectIcon = () => {
   return (
     <svg
       width="24"
@@ -17,4 +17,4 @@ const SelectIcon = () => {
   );
 };
 
-export default SelectIcon;
+
diff --git a/apps/main-landing/src/app/creators/donate/components/select/SelectIcon.tsx b/apps/main-landing/src/app/creators/donate/components/select/select-icon.tsx
similarity index 100%
rename from apps/main-landing/src/app/creators/donate/components/select/SelectIcon.tsx
rename to apps/main-landing/src/app/creators/donate/components/select/select-icon.tsx
diff --git a/apps/main-landing/src/app/creators/donate/components/select/select-option.component.tsx b/apps/main-landing/src/app/creators/donate/components/select/select-option.component.tsx
index 71ba877b..facc72dd 100644
--- a/apps/main-landing/src/app/creators/donate/components/select/select-option.component.tsx
+++ b/apps/main-landing/src/app/creators/donate/components/select/select-option.component.tsx
@@ -1,13 +1,13 @@
-import { ForwardedRef, forwardRef } from 'react';
-import { classes } from '@idriss-xyz/ui/utils';
+import {ForwardedRef, forwardRef} from 'react';
+import {classes} from '@idriss-xyz/ui/utils';
 
-import SelectIcon from '@/app/creators/donate/components/select/SelectIcon';
+import SelectIcon from '@/app/creators/donate/components/select/select-icon';
 
-import { SelectOptionProperties } from './select.types';
+import {SelectOptionProperties} from './select.types';
 
 export const SelectOption = forwardRef(
   (
-    { option, className, selected }: SelectOptionProperties<unknown>,
+    {option, className, selected}: SelectOptionProperties<unknown>,
     reference: ForwardedRef<HTMLDivElement>,
   ) => {
     const selectedClassName = selected
@@ -30,7 +30,7 @@ export const SelectOption = forwardRef(
           {option.label}
         </div>
         {option.suffix}
-        <div className="items-center">{selected ? <SelectIcon /> : ''}</div>
+        <div className="items-center">{selected ? <SelectIcon/> : ''}</div>
       </div>
     );
   },

From 9b4b7bb622b80163de14fad8c0e10dc86b91d4a1 Mon Sep 17 00:00:00 2001
From: Maciej Kutynia <kutynia.maciej@gmail.com>
Date: Mon, 30 Dec 2024 18:05:25 +0100
Subject: [PATCH 3/8] fix format error

---
 .../ui/components/select/select-option.component.tsx | 12 ++++++------
 apps/extension/src/shared/ui/utils/select-icon.tsx   |  2 --
 .../components/select/select-option.component.tsx    | 10 +++++-----
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/apps/extension/src/shared/ui/components/select/select-option.component.tsx b/apps/extension/src/shared/ui/components/select/select-option.component.tsx
index de61c0cb..dafccd1b 100644
--- a/apps/extension/src/shared/ui/components/select/select-option.component.tsx
+++ b/apps/extension/src/shared/ui/components/select/select-option.component.tsx
@@ -1,14 +1,14 @@
-import {ForwardedRef, forwardRef} from 'react';
+import { ForwardedRef, forwardRef } from 'react';
 
-import {SelectIcon} from 'shared/ui/utils/select-icon';
+import { SelectIcon } from 'shared/ui/utils/select-icon';
 
-import {classes} from '../../utils';
+import { classes } from '../../utils';
 
-import {SelectOptionProperties} from './select.types';
+import { SelectOptionProperties } from './select.types';
 
 export const SelectOption = forwardRef(
   (
-    {option, className, selected}: SelectOptionProperties<unknown>,
+    { option, className, selected }: SelectOptionProperties<unknown>,
     reference: ForwardedRef<HTMLDivElement>,
   ) => {
     const selectedClassName = selected
@@ -30,7 +30,7 @@ export const SelectOption = forwardRef(
           {option.label}
         </div>
         {option.suffix}
-        <div className="items-center">{selected ? <SelectIcon/> : ''}</div>
+        <div className="items-center">{selected ? <SelectIcon /> : ''}</div>
       </div>
     );
   },
diff --git a/apps/extension/src/shared/ui/utils/select-icon.tsx b/apps/extension/src/shared/ui/utils/select-icon.tsx
index cdb1998d..7e3d1ab3 100644
--- a/apps/extension/src/shared/ui/utils/select-icon.tsx
+++ b/apps/extension/src/shared/ui/utils/select-icon.tsx
@@ -16,5 +16,3 @@ export const SelectIcon = () => {
     </svg>
   );
 };
-
-
diff --git a/apps/main-landing/src/app/creators/donate/components/select/select-option.component.tsx b/apps/main-landing/src/app/creators/donate/components/select/select-option.component.tsx
index facc72dd..da19377e 100644
--- a/apps/main-landing/src/app/creators/donate/components/select/select-option.component.tsx
+++ b/apps/main-landing/src/app/creators/donate/components/select/select-option.component.tsx
@@ -1,13 +1,13 @@
-import {ForwardedRef, forwardRef} from 'react';
-import {classes} from '@idriss-xyz/ui/utils';
+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';
+import { SelectOptionProperties } from './select.types';
 
 export const SelectOption = forwardRef(
   (
-    {option, className, selected}: SelectOptionProperties<unknown>,
+    { option, className, selected }: SelectOptionProperties<unknown>,
     reference: ForwardedRef<HTMLDivElement>,
   ) => {
     const selectedClassName = selected
@@ -30,7 +30,7 @@ export const SelectOption = forwardRef(
           {option.label}
         </div>
         {option.suffix}
-        <div className="items-center">{selected ? <SelectIcon/> : ''}</div>
+        <div className="items-center">{selected ? <SelectIcon /> : ''}</div>
       </div>
     );
   },

From 888353a30128000357ff384d06864dc20cdff3b4 Mon Sep 17 00:00:00 2001
From: Maciej Kutynia <kutynia.maciej@gmail.com>
Date: Thu, 2 Jan 2025 22:23:21 +0100
Subject: [PATCH 4/8] remove horizontal bars

---
 .../shared/idriss/components/send/form.tsx    | 46 +++++++++----------
 .../select-option-container.component.tsx     |  8 ++--
 .../select/select-option.component.tsx        | 14 +++---
 .../ui/components/select/select.component.tsx | 36 +++++++--------
 packages/ui/src/components/modal/modal.tsx    | 45 +++++++++---------
 5 files changed, 74 insertions(+), 75 deletions(-)

diff --git a/apps/extension/src/shared/idriss/components/send/form.tsx b/apps/extension/src/shared/idriss/components/send/form.tsx
index 40860283..5f8d8797 100644
--- a/apps/extension/src/shared/idriss/components/send/form.tsx
+++ b/apps/extension/src/shared/idriss/components/send/form.tsx
@@ -1,12 +1,12 @@
-import { Controller, UseFormReturn } from 'react-hook-form';
-import { Form as DesignSystemForm } from '@idriss-xyz/ui/form';
-import { ReactNode, useCallback, useRef } from 'react';
-import { Button } from '@idriss-xyz/ui/button';
-import { classes } from '@idriss-xyz/ui/utils';
+import {Controller, UseFormReturn} from 'react-hook-form';
+import {Form as DesignSystemForm} from '@idriss-xyz/ui/form';
+import {ReactNode, useCallback, useRef} from 'react';
+import {Button} from '@idriss-xyz/ui/button';
+import {classes} from '@idriss-xyz/ui/utils';
 
-import { ChainSelect, ChainToken, TokenSelect } from 'shared/web3';
+import {ChainSelect, ChainToken, TokenSelect} from 'shared/web3';
 
-import { SendFormValues } from '../../types';
+import {SendFormValues} from '../../types';
 
 interface Properties {
   footer: ReactNode;
@@ -20,15 +20,15 @@ interface Properties {
 }
 
 export const Form = ({
-  footer,
-  tokens,
-  className,
-  formMethods,
-  allowedChainsIds,
-  onSubmit,
-  onChangeChainId,
-  renderChainSuffix,
-}: Properties) => {
+                       footer,
+                       tokens,
+                       className,
+                       formMethods,
+                       allowedChainsIds,
+                       onSubmit,
+                       onChangeChainId,
+                       renderChainSuffix,
+                     }: Properties) => {
   const amount = formMethods.watch('amount');
   const formReference = useRef<HTMLFormElement | null>(null);
 
@@ -51,7 +51,7 @@ export const Form = ({
         <Controller
           control={formMethods.control}
           name="amount"
-          render={({ field }) => {
+          render={({field}) => {
             return (
               <DesignSystemForm.Field
                 {...field}
@@ -72,7 +72,7 @@ export const Form = ({
             className={classes(
               'w-full',
               amount === 1 &&
-                'border-mint-600 bg-mint-300 hover:border-mint-600 hover:bg-mint-300',
+              'border-mint-600 bg-mint-300 hover:border-mint-600 hover:bg-mint-300',
             )}
             intent="secondary"
             size="medium"
@@ -84,7 +84,7 @@ export const Form = ({
             className={classes(
               'w-full',
               amount === 2 &&
-                'border-mint-600 bg-mint-300 hover:border-mint-600 hover:bg-mint-300',
+              'border-mint-600 bg-mint-300 hover:border-mint-600 hover:bg-mint-300',
             )}
             intent="secondary"
             size="medium"
@@ -96,7 +96,7 @@ export const Form = ({
             className={classes(
               'w-full',
               amount === 5 &&
-                'border-mint-600 bg-mint-300 hover:border-mint-600 hover:bg-mint-300',
+              'border-mint-600 bg-mint-300 hover:border-mint-600 hover:bg-mint-300',
             )}
             intent="secondary"
             size="medium"
@@ -108,7 +108,7 @@ export const Form = ({
         <Controller
           control={formMethods.control}
           name="chainId"
-          render={({ field }) => {
+          render={({field}) => {
             return (
               <ChainSelect
                 className="mt-4"
@@ -128,7 +128,7 @@ export const Form = ({
         <Controller
           control={formMethods.control}
           name="tokenAddress"
-          render={({ field }) => {
+          render={({field}) => {
             return (
               <TokenSelect
                 className="mt-4"
@@ -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>
   );
 };
diff --git a/apps/extension/src/shared/ui/components/select/select-option-container.component.tsx b/apps/extension/src/shared/ui/components/select/select-option-container.component.tsx
index 21a4a691..1c54b268 100644
--- a/apps/extension/src/shared/ui/components/select/select-option-container.component.tsx
+++ b/apps/extension/src/shared/ui/components/select/select-option-container.component.tsx
@@ -1,7 +1,7 @@
-import { ReactNode, forwardRef } from 'react';
+import {ReactNode, forwardRef} from 'react';
 
-import { PolymorphicReference } from '../../types';
-import { classes } from '../../utils';
+import {PolymorphicReference} from '../../types';
+import {classes} from '../../utils';
 
 import {
   PolymorphicSelectOptionContainerProperties,
@@ -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-md bg-white shadow-xs focus:outline-none',
           className,
         )}
         ref={reference}
diff --git a/apps/extension/src/shared/ui/components/select/select-option.component.tsx b/apps/extension/src/shared/ui/components/select/select-option.component.tsx
index dafccd1b..e37432c4 100644
--- a/apps/extension/src/shared/ui/components/select/select-option.component.tsx
+++ b/apps/extension/src/shared/ui/components/select/select-option.component.tsx
@@ -1,14 +1,14 @@
-import { ForwardedRef, forwardRef } from 'react';
+import {ForwardedRef, forwardRef} from 'react';
 
-import { SelectIcon } from 'shared/ui/utils/select-icon';
+import {SelectIcon} from 'shared/ui/utils/select-icon';
 
-import { classes } from '../../utils';
+import {classes} from '../../utils';
 
-import { SelectOptionProperties } from './select.types';
+import {SelectOptionProperties} from './select.types';
 
 export const SelectOption = forwardRef(
   (
-    { option, className, selected }: SelectOptionProperties<unknown>,
+    {option, className, selected}: SelectOptionProperties<unknown>,
     reference: ForwardedRef<HTMLDivElement>,
   ) => {
     const selectedClassName = selected
@@ -18,7 +18,7 @@ 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 rounded-xl border border-neutral-200 px-3 py-2 text-left',
           'hover:bg-black/10 focus:bg-black/50',
           className,
         )}
@@ -30,7 +30,7 @@ export const SelectOption = forwardRef(
           {option.label}
         </div>
         {option.suffix}
-        <div className="items-center">{selected ? <SelectIcon /> : ''}</div>
+        <div className="items-center">{selected ? <SelectIcon/> : ''}</div>
       </div>
     );
   },
diff --git a/apps/extension/src/shared/ui/components/select/select.component.tsx b/apps/extension/src/shared/ui/components/select/select.component.tsx
index 37e64283..7cf0da55 100644
--- a/apps/extension/src/shared/ui/components/select/select.component.tsx
+++ b/apps/extension/src/shared/ui/components/select/select.component.tsx
@@ -1,24 +1,24 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import { useMemo } from 'react';
+import {useMemo} from 'react';
 
-import { usePortal } from '../../providers';
-import { classes } from '../../utils';
-import { ScrollArea } from '../scroll-area';
+import {usePortal} from '../../providers';
+import {classes} from '../../utils';
+import {ScrollArea} from '../scroll-area';
 
-import { SelectProperties } from './select.types';
-import { SelectOption } from './select-option.component';
-import { SelectOptionContainer } from './select-option-container.component';
+import {SelectProperties} from './select.types';
+import {SelectOption} from './select-option.component';
+import {SelectOptionContainer} from './select-option-container.component';
 
-export const Select = <T,>({
-  label,
-  options,
-  value,
-  className,
-  optionsContainerClassName,
-  renderLabel,
-  onChange,
-}: SelectProperties<T>) => {
-  const { portal } = usePortal();
+export const Select = <T, >({
+                              label,
+                              options,
+                              value,
+                              className,
+                              optionsContainerClassName,
+                              renderLabel,
+                              onChange,
+                            }: SelectProperties<T>) => {
+  const {portal} = usePortal();
   const pickedOption = useMemo(() => {
     return (
       options.find((option) => {
@@ -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
diff --git a/packages/ui/src/components/modal/modal.tsx b/packages/ui/src/components/modal/modal.tsx
index 42d33fff..e32c5397 100644
--- a/packages/ui/src/components/modal/modal.tsx
+++ b/packages/ui/src/components/modal/modal.tsx
@@ -1,11 +1,11 @@
-import { ReactNode, useMemo, useState } from 'react';
+import {ReactNode, useMemo, useState} from 'react';
 import * as Portal from '@radix-ui/react-portal';
 
-import { usePortal } from '../../providers/with-portal';
-import { IconButton } from '../icon-button';
-import { classes } from '../../utils';
+import {usePortal} from '../../providers/with-portal';
+import {IconButton} from '../icon-button';
+import {classes} from '../../utils';
 
-import { Backdrop } from './backdrop';
+import {Backdrop} from './backdrop';
 
 type Properties = {
   header?: ReactNode;
@@ -26,24 +26,24 @@ type Properties = {
 };
 
 export const Modal = ({
-  children,
-  header,
-  isOpened,
-  onClose,
-  className,
-  backdropClassName,
-  closeOnHoverAway,
-  closeOnClickAway,
-  onClickInside,
-  headerContainerClassName,
-  width,
-  left,
-  right,
-  top,
-  withoutPortal,
-}: Properties) => {
+                        children,
+                        header,
+                        isOpened,
+                        onClose,
+                        className,
+                        backdropClassName,
+                        closeOnHoverAway,
+                        closeOnClickAway,
+                        onClickInside,
+                        headerContainerClassName,
+                        width,
+                        left,
+                        right,
+                        top,
+                        withoutPortal,
+                      }: Properties) => {
   const [fakePortal, setFakePortal] = useState<HTMLDivElement | null>(null);
-  const { portal } = usePortal();
+  const {portal} = usePortal();
 
   const shouldBeCentered = useMemo(() => {
     return [left, right, top].every((value) => {
@@ -90,7 +90,6 @@ export const Modal = ({
                 'relative',
                 headerContainerClassName,
                 'pr-14',
-                'border-b-secondary border-b',
               )}
             >
               {header}

From 296222a80df15fe0852f19a7133ad369a684e285 Mon Sep 17 00:00:00 2001
From: Maciej Kutynia <kutynia.maciej@gmail.com>
Date: Sun, 5 Jan 2025 19:14:14 +0100
Subject: [PATCH 5/8] fix border in extension

---
 .../shared/ui/components/select/select-option.component.tsx    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/extension/src/shared/ui/components/select/select-option.component.tsx b/apps/extension/src/shared/ui/components/select/select-option.component.tsx
index 6386afbe..820fb303 100644
--- a/apps/extension/src/shared/ui/components/select/select-option.component.tsx
+++ b/apps/extension/src/shared/ui/components/select/select-option.component.tsx
@@ -18,9 +18,10 @@ export const SelectOption = forwardRef(
       <div
         ref={reference}
         className={classes(
-          'flex w-full cursor-pointer items-center space-x-2 rounded-xl border border-neutral-200 px-3 py-2 text-left',
+          'flex w-full cursor-pointer items-center space-x-2 rounded-xl border-r border-r-neutral-200 px-3 py-2 text-left',
           'hover:bg-black/10 focus:bg-black/50',
           className,
+          selected ? 'border border-neutral-200' : '',
         )}
       >
         <div className={classes('relative mr-1 pr-2', selectedClassName)}>

From dd5c62f4f7729e90ff36fdeee9b4ffcd0da0d82c Mon Sep 17 00:00:00 2001
From: Maciej Kutynia <kutynia.maciej@gmail.com>
Date: Sun, 5 Jan 2025 20:20:57 +0100
Subject: [PATCH 6/8] fix border on select options

---
 .../select/select-option.component.tsx           | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/extension/src/shared/ui/components/select/select-option.component.tsx b/apps/extension/src/shared/ui/components/select/select-option.component.tsx
index 820fb303..bcbcc329 100644
--- a/apps/extension/src/shared/ui/components/select/select-option.component.tsx
+++ b/apps/extension/src/shared/ui/components/select/select-option.component.tsx
@@ -1,14 +1,14 @@
-import { ForwardedRef, forwardRef } from 'react';
+import {ForwardedRef, forwardRef} from 'react';
 
-import { SelectIcon } from 'shared/ui/utils/select-icon';
+import {SelectIcon} from 'shared/ui/utils/select-icon';
 
-import { classes } from '../../utils';
+import {classes} from '../../utils';
 
-import { SelectOptionProperties } from './select.types';
+import {SelectOptionProperties} from './select.types';
 
 export const SelectOption = forwardRef(
   (
-    { option, className, selected }: SelectOptionProperties<unknown>,
+    {option, className, selected}: SelectOptionProperties<unknown>,
     reference: ForwardedRef<HTMLDivElement>,
   ) => {
     const selectedClassName = selected
@@ -18,10 +18,10 @@ export const SelectOption = forwardRef(
       <div
         ref={reference}
         className={classes(
-          'flex w-full cursor-pointer items-center space-x-2 rounded-xl border-r 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 ? 'border border-neutral-200' : '',
+          selected ? 'border border-neutral-200 rounded-xl' : '',
         )}
       >
         <div className={classes('relative mr-1 pr-2', selectedClassName)}>
@@ -31,7 +31,7 @@ export const SelectOption = forwardRef(
           {option.label}
         </div>
         {option.suffix}
-        <div className="items-center">{selected ? <SelectIcon /> : ''}</div>
+        <div className="items-center">{selected ? <SelectIcon/> : ''}</div>
       </div>
     );
   },

From f2e8a8c8ee71335cff55460ff19e62a3eafc0488 Mon Sep 17 00:00:00 2001
From: Maciej Kutynia <kutynia.maciej@gmail.com>
Date: Sun, 5 Jan 2025 20:28:46 +0100
Subject: [PATCH 7/8] fix border on select options

---
 .../select/select-option-container.component.tsx          | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/extension/src/shared/ui/components/select/select-option-container.component.tsx b/apps/extension/src/shared/ui/components/select/select-option-container.component.tsx
index 1f8438f1..0892b257 100644
--- a/apps/extension/src/shared/ui/components/select/select-option-container.component.tsx
+++ b/apps/extension/src/shared/ui/components/select/select-option-container.component.tsx
@@ -1,7 +1,7 @@
-import { ReactNode, forwardRef } from 'react';
+import {ReactNode, forwardRef} from 'react';
 
-import { PolymorphicReference } from '../../types';
-import { classes } from '../../utils';
+import {PolymorphicReference} from '../../types';
+import {classes} from '../../utils';
 
 import {
   PolymorphicSelectOptionContainerProperties,
@@ -23,7 +23,7 @@ export const SelectOptionContainer: SelectOptionContainerComponent = forwardRef(
       <Component
         {...restProperties}
         className={classes(
-          'w-full rounded-md bg-white shadow-xs focus:outline-none',
+          'w-full rounded-xl bg-white shadow-xs focus:outline-none',
           className,
         )}
         ref={reference}

From d9bd392f85822c191167d3619a65cd21b4056572 Mon Sep 17 00:00:00 2001
From: Maciej Kutynia <kutynia.maciej@gmail.com>
Date: Sun, 5 Jan 2025 20:30:45 +0100
Subject: [PATCH 8/8] fix border on select options

---
 .../select/select-option-container.component.tsx   |  6 +++---
 .../components/select/select-option.component.tsx  | 14 +++++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/extension/src/shared/ui/components/select/select-option-container.component.tsx b/apps/extension/src/shared/ui/components/select/select-option-container.component.tsx
index 0892b257..beb7fa5e 100644
--- a/apps/extension/src/shared/ui/components/select/select-option-container.component.tsx
+++ b/apps/extension/src/shared/ui/components/select/select-option-container.component.tsx
@@ -1,7 +1,7 @@
-import {ReactNode, forwardRef} from 'react';
+import { ReactNode, forwardRef } from 'react';
 
-import {PolymorphicReference} from '../../types';
-import {classes} from '../../utils';
+import { PolymorphicReference } from '../../types';
+import { classes } from '../../utils';
 
 import {
   PolymorphicSelectOptionContainerProperties,
diff --git a/apps/extension/src/shared/ui/components/select/select-option.component.tsx b/apps/extension/src/shared/ui/components/select/select-option.component.tsx
index bcbcc329..3248d74c 100644
--- a/apps/extension/src/shared/ui/components/select/select-option.component.tsx
+++ b/apps/extension/src/shared/ui/components/select/select-option.component.tsx
@@ -1,14 +1,14 @@
-import {ForwardedRef, forwardRef} from 'react';
+import { ForwardedRef, forwardRef } from 'react';
 
-import {SelectIcon} from 'shared/ui/utils/select-icon';
+import { SelectIcon } from 'shared/ui/utils/select-icon';
 
-import {classes} from '../../utils';
+import { classes } from '../../utils';
 
-import {SelectOptionProperties} from './select.types';
+import { SelectOptionProperties } from './select.types';
 
 export const SelectOption = forwardRef(
   (
-    {option, className, selected}: SelectOptionProperties<unknown>,
+    { option, className, selected }: SelectOptionProperties<unknown>,
     reference: ForwardedRef<HTMLDivElement>,
   ) => {
     const selectedClassName = selected
@@ -21,7 +21,7 @@ export const SelectOption = forwardRef(
           '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 ? 'border border-neutral-200 rounded-xl' : '',
+          selected ? 'rounded-xl border border-neutral-200' : '',
         )}
       >
         <div className={classes('relative mr-1 pr-2', selectedClassName)}>
@@ -31,7 +31,7 @@ export const SelectOption = forwardRef(
           {option.label}
         </div>
         {option.suffix}
-        <div className="items-center">{selected ? <SelectIcon/> : ''}</div>
+        <div className="items-center">{selected ? <SelectIcon /> : ''}</div>
       </div>
     );
   },