From be995e5028e5fbd9daee4ee2bfbae8f0d8484f13 Mon Sep 17 00:00:00 2001 From: Denis Nebytov Date: Fri, 27 Dec 2024 20:01:32 +0300 Subject: [PATCH 1/3] new box shadow --- .../app/styles/themes/base-palettes/dark-palette.js | 3 ++- .../app/styles/themes/base-palettes/light-palette.js | 3 ++- packages/yoroi-extension/app/styles/themes/types.js | 1 + 3 files changed, 5 insertions(+), 2 deletions(-) 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 index 48cace5cf1..b2def5b1e9 100644 --- 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 index fa1374a815..894748f412 100644 --- 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 index 25cface58e..89f6167123 100644 --- 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, |}; From cc007a167c49b0605196c4cbde32788d76ccb02d Mon Sep 17 00:00:00 2001 From: Denis Nebytov Date: Fri, 27 Dec 2024 21:15:28 +0300 Subject: [PATCH 2/3] changed box shadow on Select component --- .../yoroi-extension/app/components/common/Select.js | 12 +++++++++--- .../general-setting/UnitOfAccountSettings.js | 8 +------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/yoroi-extension/app/components/common/Select.js b/packages/yoroi-extension/app/components/common/Select.js index 80514183af..2b66d41df0 100644 --- 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, + 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/settings/categories/general-setting/UnitOfAccountSettings.js b/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js index 89bb9aa2b2..19911a71bc 100644 --- a/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js +++ b/packages/yoroi-extension/app/components/settings/categories/general-setting/UnitOfAccountSettings.js @@ -169,13 +169,7 @@ export default class UnitOfAccountSettings extends Component { {...coinPriceCurrencyId.bind()} onChange={this.props.onSelect} value={currentValue} - menuProps={{ - sx: { - '& .MuiMenu-paper': { - maxHeight: '280px', - }, - }, - }} + maxHeight='280px' renderValue={value => ( Date: Fri, 27 Dec 2024 21:29:31 +0300 Subject: [PATCH 3/3] applied different shadow on autoselect --- .../app/components/common/autocomplete/Autocomplete.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/yoroi-extension/app/components/common/autocomplete/Autocomplete.js b/packages/yoroi-extension/app/components/common/autocomplete/Autocomplete.js index f3bb9c9089..04f1203539 100644 --- 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)(