Use effect only shadow for MessageCard component

helpscout · Dec 18, 2020 · 329d62f · 329d62f
1 parent 609888a
commit 329d62f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/components/MessageCard/MessageCard.css.js b/src/components/MessageCard/MessageCard.css.js
@@ -2,7 +2,7 @@ import styled from 'styled-components'
 import { makeFontFamily, setFontSize } from '../../styles/utilities/font'
 import { getColor } from '../../styles/utilities/color'
 import { FONT_FAMILY } from '../../styles/configs/constants'
-import { d600 } from '../../styles/mixins/depth.css'
+import { d600Effect } from '../../styles/mixins/depth.css'
 import Card from '../Card'
 import Button from '../Button'
 import Heading from '../Heading'
@@ -26,7 +26,7 @@ export const MessageCardUI = styled(Card)`
     border-bottom-left-radius: 4px;
   }
   &.is-with-box-shadow {
-    ${d600}
+    ${d600Effect}
   }
   &.is-mobile {
     width: 100%;

diff --git a/src/styles/mixins/depth.css.js b/src/styles/mixins/depth.css.js
@@ -55,6 +55,10 @@ export const d600 = `
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1),
                   0 4px 6px rgba(0, 0, 0, 0.15);
 `
+export const d600Effect = `
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1),
+                  0 4px 6px rgba(0, 0, 0, 0.15);
+`
 export const d700 = `
   ${common}
   box-shadow: 0 2px 3px rgba(64, 82, 97, 0.2),