From 87b3cecbfa6acffa84818b85da8690438afbb35e Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Wed, 12 Apr 2023 11:06:09 +0300 Subject: [PATCH] Web:Components:Fixed missing dark theme shadow on sort list on mobile. --- packages/components/drop-down/styled-drop-down.js | 9 +++++++++ packages/components/themes/dark.js | 1 + 2 files changed, 10 insertions(+) diff --git a/packages/components/drop-down/styled-drop-down.js b/packages/components/drop-down/styled-drop-down.js index 30b65c3d53..2e0c8af974 100644 --- a/packages/components/drop-down/styled-drop-down.js +++ b/packages/components/drop-down/styled-drop-down.js @@ -1,5 +1,6 @@ import styled, { css } from "styled-components"; import Base from "../themes/base"; +import { isMobileOnly } from "react-device-detect"; const StyledDropdown = styled.div` @media (orientation: landscape) { @@ -58,6 +59,14 @@ const StyledDropdown = styled.div` box-shadow: ${(props) => props.theme.dropDown.boxShadow}; -moz-box-shadow: ${(props) => props.theme.dropDown.boxShadow}; -webkit-box-shadow: ${(props) => props.theme.dropDown.boxShadow}; + ${(props) => + (props.isMobileView || isMobileOnly) && + css` + box-shadow: ${(props) => props.theme.dropDown.boxShadowMobile}; + -moz-box-shadow: ${(props) => props.theme.dropDown.boxShadowMobile}; + -webkit-box-shadow: ${(props) => props.theme.dropDown.boxShadowMobile}; + `} + padding: ${(props) => !props.maxHeight && props.itemCount > 1 && `4px 0px`}; ${(props) => props.columnCount && diff --git a/packages/components/themes/dark.js b/packages/components/themes/dark.js index b75f1dd678..ec5dcb167e 100644 --- a/packages/components/themes/dark.js +++ b/packages/components/themes/dark.js @@ -1375,6 +1375,7 @@ const Dark = { borderRadius: "6px", boxShadow: "0px 16px 16px rgba(0, 0, 0, 0.16), 0px 8.1px 6.975px rgba(0, 0, 0, 0.108), 0px 3.2px 2.6px rgba(0, 0, 0, 0.08), 0px 0.7px 0.925px rgba(0, 0, 0, 0.052)", + boxShadowMobile: "0px -4px 60px rgba(0, 0, 0, 0.25)", border: "1px solid #474747", },