Skip to content

Commit

Permalink
fix: account selection options behind modal
Browse files Browse the repository at this point in the history
  • Loading branch information
greatertomi authored and szymonmaslowski committed May 7, 2024
1 parent 5e53394 commit 1dd354c
Show file tree
Hide file tree
Showing 4 changed files with 11 additions and 26 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,7 @@
.label {
z-index: 0 !important;
}

.selectOptions {
z-index: 1000;
}
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ export const WalletSetupSelectAccountsStepRevamp = ({
showArrow
withOutline
selectedValue={selectedAccount}
contentClassName={styles.selectOptions}
/>
</Box>
</Box>
Expand Down
7 changes: 5 additions & 2 deletions packages/ui/src/design-system/select/select.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ export type Props = Readonly<{
disabled?: boolean;
showArrow?: boolean;
withOutline?: boolean;

onValueChange: (value: string) => void;
contentClassName?: string;
}>;

export const SelectGroup = ({
Expand All @@ -33,6 +33,7 @@ export const SelectGroup = ({
selectedValue,
showArrow = false,
withOutline = false,
contentClassName,
...props
}: Props): JSX.Element => (
<Box className={cn(className, cx.root)}>
Expand All @@ -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 }) => {
Expand Down
25 changes: 1 addition & 24 deletions packages/ui/src/design-system/select/select.css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -112,10 +113,6 @@ export const selectContent = style([
},
]);

export const selectViewport = style({
padding: '5px',
});

export const selectItem = style([
sx({
display: 'flex',
Expand Down Expand Up @@ -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',
},
]);

0 comments on commit 1dd354c

Please sign in to comment.