From 7e32880ab0d9219df18d3b3d8bb48de6a4939e1c Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Fri, 26 Aug 2022 13:24:57 +1000
Subject: [PATCH] fix: use js variables instead of css variables for Message
 corners

---
 .../message-content/MessageContent.tsx        | 39 ++++++-------------
 1 file changed, 11 insertions(+), 28 deletions(-)

diff --git a/ts/components/conversation/message/message-content/MessageContent.tsx b/ts/components/conversation/message/message-content/MessageContent.tsx
index ac7074e9a..e1fbaeb03 100644
--- a/ts/components/conversation/message/message-content/MessageContent.tsx
+++ b/ts/components/conversation/message/message-content/MessageContent.tsx
@@ -28,7 +28,7 @@ import { MessagePreview } from './MessagePreview';
 import { MessageQuote } from './MessageQuote';
 import { MessageText } from './MessageText';
 import { ScrollToLoadedMessageContext } from '../../SessionMessagesListContainer';
-import styled, { CSSProperties } from 'styled-components';
+import styled from 'styled-components';
 
 export type MessageContentSelectorProps = Pick<
   MessageRenderingProps,
@@ -96,35 +96,22 @@ function onClickOnMessageInnerContainer(event: React.MouseEvent<HTMLDivElement>)
   }
 }
 
+const radiusLg = '18px';
+const radiusSm = '4px';
+
 const StyledMessageContent = styled.div<{
   isOutgoing: boolean;
   firstOfSeries: boolean;
   lastOfSeries: boolean;
 }>`
   border-top-right-radius: ${props =>
-    props.isOutgoing
-      ? props.firstOfSeries
-        ? 'var(--radius-lg)'
-        : 'var(--radius-sm)'
-      : 'var(--radius-lg)'};
+    props.isOutgoing ? (props.firstOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`};
   border-bottom-right-radius: ${props =>
-    props.isOutgoing
-      ? props.lastOfSeries
-        ? 'var(--radius-lg)'
-        : 'var(--radius-sm)'
-      : 'var(--radius-lg)'};
+    props.isOutgoing ? (props.lastOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`};
   border-top-left-radius: ${props =>
-    !props.isOutgoing
-      ? props.firstOfSeries
-        ? 'var(--radius-lg)'
-        : 'var(--radius-sm)'
-      : 'var(--radius-lg)'};
+    !props.isOutgoing ? (props.firstOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`};
   border-bottom-left-radius: ${props =>
-    !props.isOutgoing
-      ? props.lastOfSeries
-        ? 'var(--radius-lg)'
-        : 'var(--radius-sm)'
-      : 'var(--radius-lg)'};
+    !props.isOutgoing ? (props.lastOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`};
 `;
 
 export const IsMessageVisibleContext = createContext(false);
@@ -226,13 +213,9 @@ export const MessageContent = (props: Props) => {
 
         flashGreen && 'flash-green-once'
       )}
-      style={
-        {
-          width: isShowingImage ? width : undefined,
-          '--radius-lg': '18px',
-          '--radius-sm': '4px',
-        } as CSSProperties
-      }
+      style={{
+        width: isShowingImage ? width : undefined,
+      }}
       firstOfSeries={Boolean(firstMessageOfSeries || props.isDetailView)}
       lastOfSeries={Boolean(lastMessageOfSeries || props.isDetailView)}
       isOutgoing={direction === 'outgoing'}