From 72ebec878d23471ab8598539facbcbd01a0de41f Mon Sep 17 00:00:00 2001 From: shahid Date: Fri, 28 Mar 2025 08:38:43 +0530 Subject: [PATCH 1/5] update drop shadows on modals to match active theme --- .../SearchPageHeader/SearchPageHeaderInput.tsx | 4 +++- src/styles/index.ts | 2 +- src/styles/theme/themes/dark.ts | 2 +- src/styles/theme/themes/light.ts | 2 +- src/styles/utils/generators/ModalStyleUtils.ts | 12 ++++++------ src/styles/variables.ts | 2 +- 6 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx index 9ab2994d119c..f7d5f3d12997 100644 --- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx +++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx @@ -21,6 +21,7 @@ import type {SelectionListHandle} from '@components/SelectionList/types'; import HelpButton from '@components/SidePane/HelpComponents/HelpButton'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {navigateToAndOpenReport} from '@libs/actions/Report'; import {clearAllFilters} from '@libs/actions/Search'; @@ -55,6 +56,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo const {translate} = useLocalize(); const [showPopupButton, setShowPopupButton] = useState(true); const styles = useThemeStyles(); + const theme = useTheme(); const {shouldUseNarrowLayout: displayNarrowHeader} = useResponsiveLayout(); const personalDetails = usePersonalDetails(); const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT); @@ -303,7 +305,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo styles.pAbsolute, styles.pt2, {top: 8 - BORDER_WIDTH, left: leftPopoverHorizontalPosition, right: rightPopoverHorizontalPosition}, - {boxShadow: variables.popoverMenuShadow}, + {boxShadow: `${variables.shadowPreset} ${theme.shadow}`}, ] : [styles.pt4]; const inputWrapperActiveStyle = isAutocompleteListVisible ? styles.ph2 : null; diff --git a/src/styles/index.ts b/src/styles/index.ts index e22a17965229..3452d5c3a040 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -273,7 +273,7 @@ const styles = (theme: ThemeColors) => borderColor: theme.border, justifyContent: 'center', overflow: 'hidden', - boxShadow: variables.popoverMenuShadow, + boxShadow: `${variables.shadowPreset} ${theme.shadow}`, paddingVertical: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING, }, diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts index 725966d487a8..e7d9aa25e54f 100644 --- a/src/styles/theme/themes/dark.ts +++ b/src/styles/theme/themes/dark.ts @@ -43,7 +43,7 @@ const darkTheme = { // Additional keys overlay: colors.productDark400, inverse: colors.productDark900, - shadow: colors.black, + shadow: 'rgba(2,18,4,0.24)', componentBG: colors.productDark100, hoverComponentBG: colors.productDark300, messageHighlightBG: colors.messageHighlightDark, diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts index add3bf183a42..23433c093e40 100644 --- a/src/styles/theme/themes/light.ts +++ b/src/styles/theme/themes/light.ts @@ -43,7 +43,7 @@ const lightTheme = { // Additional keys overlay: colors.productLight400, inverse: colors.productLight900, - shadow: colors.black, + shadow: 'rgba(2,18,4,0.6)', componentBG: colors.productLight100, messageHighlightBG: colors.yellow100, hoverComponentBG: colors.productLight300, diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts index 4b5ce5b28988..ccd4f79ceba3 100644 --- a/src/styles/utils/generators/ModalStyleUtils.ts +++ b/src/styles/utils/generators/ModalStyleUtils.ts @@ -74,7 +74,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the }, }; modalContainerStyle = { - boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)', + boxShadow: `${variables.shadowPreset} ${theme.shadow}`, borderRadius: variables.componentBorderRadiusLarge, overflow: 'hidden', width: variables.sideBarWidth, @@ -98,7 +98,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the }, }; modalContainerStyle = { - boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)', + boxShadow: `${variables.shadowPreset} ${theme.shadow}`, flex: 1, marginTop: isSmallScreenWidth ? 0 : 20, marginBottom: isSmallScreenWidth ? 0 : 20, @@ -128,7 +128,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the }, }; modalContainerStyle = { - boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)', + boxShadow: `${variables.shadowPreset} ${theme.shadow}`, flex: 1, marginTop: isSmallScreenWidth ? 0 : 20, marginBottom: isSmallScreenWidth ? 0 : 20, @@ -155,7 +155,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the }, }; modalContainerStyle = { - boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)', + boxShadow: `${variables.shadowPreset} ${theme.shadow}`, flex: 1, marginTop: isSmallScreenWidth ? 0 : 20, marginBottom: isSmallScreenWidth ? 0 : 20, @@ -180,7 +180,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the }, }; modalContainerStyle = { - boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)', + boxShadow: `${variables.shadowPreset} ${theme.shadow}`, borderRadius: variables.componentBorderRadiusLarge, borderWidth: 0, }; @@ -232,7 +232,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the borderColor: theme.border, justifyContent: 'center', overflow: 'hidden', - boxShadow: variables.popoverMenuShadow, + boxShadow: `${variables.shadowPreset} ${theme.shadow}`, }; hideBackdrop = true; diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 6c4eb2265d5f..20d49927ce08 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -100,7 +100,7 @@ export default { pdfPageMaxWidth: 992, tooltipzIndex: 10050, gutterWidth: 12, - popoverMenuShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.06)', + shadowPreset: '0px 4px 12px 0px ', optionRowHeight: 64, optionRowHeightCompact: 52, optionsListSectionHeaderHeight: getValueUsingPixelRatio(32, 38), From 3f239c47e3de262b51ef907162e14fe7258792f3 Mon Sep 17 00:00:00 2001 From: shahid Date: Sat, 29 Mar 2025 05:20:22 +0530 Subject: [PATCH 2/5] store full boxShadow values in the theme files --- .../SearchPageHeader/SearchPageHeaderInput.tsx | 2 +- src/styles/index.ts | 2 +- src/styles/theme/themes/dark.ts | 2 +- src/styles/theme/themes/light.ts | 2 +- src/styles/utils/generators/ModalStyleUtils.ts | 12 ++++++------ src/styles/variables.ts | 1 - 6 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx index f7d5f3d12997..ef8b42849e70 100644 --- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx +++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx @@ -305,7 +305,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo styles.pAbsolute, styles.pt2, {top: 8 - BORDER_WIDTH, left: leftPopoverHorizontalPosition, right: rightPopoverHorizontalPosition}, - {boxShadow: `${variables.shadowPreset} ${theme.shadow}`}, + {boxShadow: theme.shadow}, ] : [styles.pt4]; const inputWrapperActiveStyle = isAutocompleteListVisible ? styles.ph2 : null; diff --git a/src/styles/index.ts b/src/styles/index.ts index 3452d5c3a040..8f0f4342138c 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -273,7 +273,7 @@ const styles = (theme: ThemeColors) => borderColor: theme.border, justifyContent: 'center', overflow: 'hidden', - boxShadow: `${variables.shadowPreset} ${theme.shadow}`, + boxShadow: theme.shadow, paddingVertical: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING, }, diff --git a/src/styles/theme/themes/dark.ts b/src/styles/theme/themes/dark.ts index e7d9aa25e54f..54355ccdc925 100644 --- a/src/styles/theme/themes/dark.ts +++ b/src/styles/theme/themes/dark.ts @@ -43,7 +43,7 @@ const darkTheme = { // Additional keys overlay: colors.productDark400, inverse: colors.productDark900, - shadow: 'rgba(2,18,4,0.24)', + shadow: '0px 4px 12px 0px rgba(2,18,4,0.24)', componentBG: colors.productDark100, hoverComponentBG: colors.productDark300, messageHighlightBG: colors.messageHighlightDark, diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts index 23433c093e40..1379df7b50dc 100644 --- a/src/styles/theme/themes/light.ts +++ b/src/styles/theme/themes/light.ts @@ -43,7 +43,7 @@ const lightTheme = { // Additional keys overlay: colors.productLight400, inverse: colors.productLight900, - shadow: 'rgba(2,18,4,0.6)', + shadow: '0px 4px 12px 0px rgba(2,18,4,0.6)', componentBG: colors.productLight100, messageHighlightBG: colors.yellow100, hoverComponentBG: colors.productLight300, diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts index ccd4f79ceba3..595fb60d4c7a 100644 --- a/src/styles/utils/generators/ModalStyleUtils.ts +++ b/src/styles/utils/generators/ModalStyleUtils.ts @@ -74,7 +74,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the }, }; modalContainerStyle = { - boxShadow: `${variables.shadowPreset} ${theme.shadow}`, + boxShadow: theme.shadow, borderRadius: variables.componentBorderRadiusLarge, overflow: 'hidden', width: variables.sideBarWidth, @@ -98,7 +98,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the }, }; modalContainerStyle = { - boxShadow: `${variables.shadowPreset} ${theme.shadow}`, + boxShadow: theme.shadow, flex: 1, marginTop: isSmallScreenWidth ? 0 : 20, marginBottom: isSmallScreenWidth ? 0 : 20, @@ -128,7 +128,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the }, }; modalContainerStyle = { - boxShadow: `${variables.shadowPreset} ${theme.shadow}`, + boxShadow: theme.shadow, flex: 1, marginTop: isSmallScreenWidth ? 0 : 20, marginBottom: isSmallScreenWidth ? 0 : 20, @@ -155,7 +155,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the }, }; modalContainerStyle = { - boxShadow: `${variables.shadowPreset} ${theme.shadow}`, + boxShadow: theme.shadow, flex: 1, marginTop: isSmallScreenWidth ? 0 : 20, marginBottom: isSmallScreenWidth ? 0 : 20, @@ -180,7 +180,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the }, }; modalContainerStyle = { - boxShadow: `${variables.shadowPreset} ${theme.shadow}`, + boxShadow: theme.shadow, borderRadius: variables.componentBorderRadiusLarge, borderWidth: 0, }; @@ -232,7 +232,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the borderColor: theme.border, justifyContent: 'center', overflow: 'hidden', - boxShadow: `${variables.shadowPreset} ${theme.shadow}`, + boxShadow:theme.shadow, }; hideBackdrop = true; diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 20d49927ce08..34263610ebf0 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -100,7 +100,6 @@ export default { pdfPageMaxWidth: 992, tooltipzIndex: 10050, gutterWidth: 12, - shadowPreset: '0px 4px 12px 0px ', optionRowHeight: 64, optionRowHeightCompact: 52, optionsListSectionHeaderHeight: getValueUsingPixelRatio(32, 38), From cadc1a4f3490e4a481cb63bde08f10d4fee01c42 Mon Sep 17 00:00:00 2001 From: shahid Date: Sat, 29 Mar 2025 05:47:55 +0530 Subject: [PATCH 3/5] fix Prettier formatting issues --- src/styles/utils/generators/ModalStyleUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts index 595fb60d4c7a..345b894e75cd 100644 --- a/src/styles/utils/generators/ModalStyleUtils.ts +++ b/src/styles/utils/generators/ModalStyleUtils.ts @@ -232,7 +232,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the borderColor: theme.border, justifyContent: 'center', overflow: 'hidden', - boxShadow:theme.shadow, + boxShadow: theme.shadow, }; hideBackdrop = true; From 3f363d99b376599425851006cd8fc6a962a2ed8a Mon Sep 17 00:00:00 2001 From: shahid Date: Wed, 2 Apr 2025 19:16:11 +0530 Subject: [PATCH 4/5] add boxshadow for modals in mobile --- src/styles/utils/generators/ModalStyleUtils.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts index 345b894e75cd..fb1ba8779e63 100644 --- a/src/styles/utils/generators/ModalStyleUtils.ts +++ b/src/styles/utils/generators/ModalStyleUtils.ts @@ -209,6 +209,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the paddingTop: variables.componentBorderRadiusLarge, justifyContent: 'center', overflow: 'hidden', + boxShadow: theme.shadow, }; shouldAddBottomSafeAreaPadding = true; From ffe084a9fd94e551c7af53eefa2353bfbe1d4737 Mon Sep 17 00:00:00 2001 From: shahid Date: Fri, 4 Apr 2025 22:19:25 +0530 Subject: [PATCH 5/5] update shadow opacity for light mode --- src/styles/theme/themes/light.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/theme/themes/light.ts b/src/styles/theme/themes/light.ts index 1379df7b50dc..2b0ac4847a4a 100644 --- a/src/styles/theme/themes/light.ts +++ b/src/styles/theme/themes/light.ts @@ -43,7 +43,7 @@ const lightTheme = { // Additional keys overlay: colors.productLight400, inverse: colors.productLight900, - shadow: '0px 4px 12px 0px rgba(2,18,4,0.6)', + shadow: '0px 4px 12px 0px rgba(2,18,4,0.06)', componentBG: colors.productLight100, messageHighlightBG: colors.yellow100, hoverComponentBG: colors.productLight300,