use size constant in CSS styles to avoid duplication

helpscout · Apr 21, 2021 · b1fdd01 · b1fdd01
1 parent e6e8687
commit b1fdd01
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/components/MessageCard/MessageCard.css.js b/src/components/MessageCard/MessageCard.css.js
@@ -7,6 +7,9 @@ import Card from '../Card'
 import Button from '../Button'
 import Heading from '../Heading'
 import Image from '../Image'
+
+export const MAX_IMAGE_SIZE = 278
+
 const fontFamily = makeFontFamily('Barlow')
 
 export const MessageCardUI = styled(Card)`
@@ -272,7 +275,7 @@ export const ImageUI = styled(Image)`
   border-radius: 3px;
   height: ${({ height }) => height};
   width: ${({ width }) => width};
-  max-height: 278px;
+  max-height: ${MAX_IMAGE_SIZE}px;
 `
 
 export const ImageContainerUI = styled('div')`
@@ -281,5 +284,5 @@ export const ImageContainerUI = styled('div')`
   width: 100%;
   margin-top: 20px;
   padding: 0 10px;
-  max-height: 278px;
+  max-height: ${MAX_IMAGE_SIZE}px;
 `
diff --git a/src/components/MessageCard/MessageCard.jsx b/src/components/MessageCard/MessageCard.jsx
@@ -10,14 +10,13 @@ import {
   BodyUI,
   ImageContainerUI,
   ImageUI,
+  MAX_IMAGE_SIZE,
   MessageCardUI,
   SubtitleUI,
   TitleUI,
 } from './MessageCard.css'
 import Truncate from '../Truncate'
 
-const MAX_IMAGE_SIZE = 278
-
 const sizeWithRatio = (recalculatedSide, otherSide, defaultValue) =>
   // Check if other side is smaller than max size to not recalculate unnecessarily this side as it doesn't need any scaling
   // other condition checks that the image fits the boundaries