fix: account selection options behind modal

input-output-hk · May 7, 2024 · 1dd354c · 1dd354c
1 parent 5e53394
commit 1dd354c
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 26 deletions.
diff --git a/.../core/src/ui/components/WalletSetupRevamp/WalletSetupSelectAccountsStepRevamp.module.scss b/.../core/src/ui/components/WalletSetupRevamp/WalletSetupSelectAccountsStepRevamp.module.scss
@@ -14,3 +14,7 @@
 .label {
   z-index: 0 !important;
 }
+
+.selectOptions {
+  z-index: 1000;
+}
diff --git a/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupSelectAccountsStepRevamp.tsx b/packages/core/src/ui/components/WalletSetupRevamp/WalletSetupSelectAccountsStepRevamp.tsx
@@ -81,6 +81,7 @@ export const WalletSetupSelectAccountsStepRevamp = ({
             showArrow
             withOutline
             selectedValue={selectedAccount}
+            contentClassName={styles.selectOptions}
           />
         </Box>
       </Box>

diff --git a/packages/ui/src/design-system/select/select.component.tsx b/packages/ui/src/design-system/select/select.component.tsx
@@ -21,8 +21,8 @@ export type Props = Readonly<{
   disabled?: boolean;
   showArrow?: boolean;
   withOutline?: boolean;
-
   onValueChange: (value: string) => void;
+  contentClassName?: string;
 }>;
 
 export const SelectGroup = ({
@@ -33,6 +33,7 @@ export const SelectGroup = ({
   selectedValue,
   showArrow = false,
   withOutline = false,
+  contentClassName,
   ...props
 }: Props): JSX.Element => (
   <Box className={cn(className, cx.root)}>
@@ -55,7 +56,9 @@ export const SelectGroup = ({
         )}
       </RadixSelectGroup.Trigger>
       <RadixSelectGroup.Portal>
-        <RadixSelectGroup.Content className={cx.selectContent}>
+        <RadixSelectGroup.Content
+          className={cn(cx.selectContent, contentClassName)}
+        >
           <RadixSelectGroup.Viewport className="SelectViewport">
             <RadixSelectGroup.Group>
               {options.map(({ label, value }) => {

diff --git a/packages/ui/src/design-system/select/select.css.ts b/packages/ui/src/design-system/select/select.css.ts
@@ -46,6 +46,7 @@ export const selectTriggerBase = style([
     justifyContent: 'space-between',
     border: 0,
     cursor: 'pointer',
+    color: vars.colors.$select_input_value_color,
 
     ':hover': {
       backgroundColor: vars.colors.$select_hover_background_color,
@@ -112,10 +113,6 @@ export const selectContent = style([
   },
 ]);
 
-export const selectViewport = style({
-  padding: '5px',
-});
-
 export const selectItem = style([
   sx({
     display: 'flex',
@@ -146,23 +143,3 @@ export const selectItem = style([
     },
   },
 ]);
-
-export const selectLabel = style({
-  padding: '0 25px',
-  fontSize: vars.fontSizes.$12,
-  lineHeight: '25px',
-  color: vars.colors.$select_input_value_color,
-});
-
-export const selectItemIndicator = style([
-  sx({
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  }),
-  {
-    position: 'absolute',
-    left: 0,
-    width: '25px',
-  },
-]);