Merge pull request #3798 from Emurgo/denis/box-shadows

Box shadows
Emurgo · Jan 7, 2025 · b6f95fc · b6f95fc
2 parents e266935 + 8404ff3
commit b6f95fc
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 13 deletions.
diff --git a/packages/yoroi-extension/app/components/common/Select.js b/packages/yoroi-extension/app/components/common/Select.js
@@ -16,6 +16,7 @@ type Props = {|
   labelProps?: Object,
   helperText?: string,
   options: Array<Object>,
+  maxHeight?: string,
 |};
 
 function Select({
@@ -28,6 +29,7 @@ function Select({
   shrink,
   disabled,
   labelProps,
+  maxHeight,
   ...props
 }: Props): Node {
   const theme = useTheme();
@@ -53,9 +55,6 @@ function Select({
         onChange={e => onChange(e.target.value)}
         onClose={handleClose}
         onOpen={handleOpen}
-        sx={{
-          boxShadow: open ? theme.palette.ds.light_shadow_dropdown_menu : 'unset',
-        }}
         MenuProps={{
           anchorOrigin: {
             vertical: 'bottom',
@@ -65,6 +64,13 @@ function Select({
             vertical: 'top',
             horizontal: 'left',
           },
+          sx: {
+            '& .MuiMenu-paper': {
+              maxHeight: maxHeight != null ? maxHeight : '500px',
+              borderRadius: '8px',
+              boxShadow: open ? theme.palette.ds.light_shadow_dropdown_menu : 'unset',
+            },
+          },
           ...(menuProps !== null && menuProps),
         }}
         {...props}

diff --git a/packages/yoroi-extension/app/components/common/autocomplete/Autocomplete.js b/packages/yoroi-extension/app/components/common/autocomplete/Autocomplete.js
@@ -246,7 +246,7 @@ const ULList = styled(Box)(({ theme, isOpen }) => ({
   outline: '0',
   transition: 'opacity .1s ease',
   borderRadius: 0,
-  boxShadow: isOpen ? theme.palette.ds.light_shadow_dropdown_menu : 'unset',
+  boxShadow: isOpen ? theme.palette.ds.light_shadow_dropdown_words : 'unset',
 }));
 
 const InputWrapper = styled(Box)(

diff --git a/...roi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js b/...roi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js
@@ -169,13 +169,7 @@ export default class UnitOfAccountSettings extends Component<Props> {
             {...coinPriceCurrencyId.bind()}
             onChange={this.props.onSelect}
             value={currentValue}
-            menuProps={{
-              sx: {
-                '& .MuiMenu-paper': {
-                  maxHeight: '280px',
-                },
-              },
-            }}
+            maxHeight='280px'
             renderValue={value => (
               <Typography component="div"
                 variant="body1"

diff --git a/packages/yoroi-extension/app/styles/themes/base-palettes/dark-palette.js b/packages/yoroi-extension/app/styles/themes/base-palettes/dark-palette.js
@@ -57,5 +57,6 @@ export const darkPalette = {
   bg_gradient_3: 'linear-gradient(23deg, #2E4BB0 15.04%, #2B3E7D 84.96%)',
   special_web_overlay: 'rgba(31, 35, 46, 0.80)',
   special_web_bg_sidebar: 'rgba(0, 0, 0, 0.16)',
-  light_shadow_dropdown_menu: `0px 4px 20px 0px #0000007A`, // dropdown shadow
+  light_shadow_dropdown_words: `0px 3px 10px rgba(24, 26, 30, 0.08)`, // dropdown shadow
+  light_shadow_dropdown_menu: `0px 4px 10px rgba(24, 26, 30, 0.16)`,
 };
diff --git a/packages/yoroi-extension/app/styles/themes/base-palettes/light-palette.js b/packages/yoroi-extension/app/styles/themes/base-palettes/light-palette.js
@@ -56,5 +56,6 @@ export const lightPalette = {
   bg_gradient_3: 'linear-gradient(30deg, #244ABF 0%, #4760FF 100%)',
   special_web_overlay: 'rgba(31, 35, 46, 0.80)',
   special_web_bg_sidebar: '#1F232ECC',
-  light_shadow_dropdown_menu: '0px 4px 10px 0px #181A1E29',
+  light_shadow_dropdown_words: `0px 3px 10px rgba(24, 26, 30, 0.08)`,
+  light_shadow_dropdown_menu: `0px 4px 10px rgba(24, 26, 30, 0.16)`,
 };
diff --git a/packages/yoroi-extension/app/styles/themes/types.js b/packages/yoroi-extension/app/styles/themes/types.js
@@ -77,5 +77,6 @@ export type DSColorPalette = {|
   web_sidebar_item_active_bg: string,
   mobile_overlay: string,
   mobile_bg_blur: string,
+  light_shadow_dropdown_words: string,
   light_shadow_dropdown_menu: string,
 |};