From b1fdd01a0a5a4a02ced3e2a7645151a85b1fbc2f Mon Sep 17 00:00:00 2001
From: Jakub Janczyk <jakub@helpscout.com>
Date: Wed, 21 Apr 2021 15:26:28 +0200
Subject: [PATCH] use size constant in CSS styles to avoid duplication

---
 src/components/MessageCard/MessageCard.css.js | 7 +++++--
 src/components/MessageCard/MessageCard.jsx    | 3 +--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/MessageCard/MessageCard.css.js b/src/components/MessageCard/MessageCard.css.js
index a83235fcc..6bab6a465 100644
--- 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
index 3afe2d3ca..699eeeaa2 100644
--- 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