fix: use js variables instead of css variables for Message corners

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.isOutgoing ? (props.firstOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`};
-      ? props.firstOfSeries
-        ? 'var(--radius-lg)'
-        : 'var(--radius-sm)'
-      : 'var(--radius-lg)'};
   border-bottom-right-radius: ${props =>
-    props.isOutgoing
+    props.isOutgoing ? (props.lastOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`};
-      ? props.lastOfSeries
-        ? 'var(--radius-lg)'
-        : 'var(--radius-sm)'
-      : 'var(--radius-lg)'};
   border-top-left-radius: ${props =>
-    !props.isOutgoing
+    !props.isOutgoing ? (props.firstOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`};
-      ? props.firstOfSeries
-        ? 'var(--radius-lg)'
-        : 'var(--radius-sm)'
-      : 'var(--radius-lg)'};
   border-bottom-left-radius: ${props =>
-    !props.isOutgoing
+    !props.isOutgoing ? (props.lastOfSeries ? `${radiusLg}` : `${radiusSm}`) : `${radiusLg}`};
-      ? props.lastOfSeries
-        ? 'var(--radius-lg)'
-        : 'var(--radius-sm)'
-      : 'var(--radius-lg)'};
 `;
 
 export const IsMessageVisibleContext = createContext(false);
@@ -226,13 +213,9 @@ export const MessageContent = (props: Props) => {
 
         flashGreen && 'flash-green-once'
       )}
-      style={
+      style={{
-        {
+        width: isShowingImage ? width : undefined,
-          width: isShowingImage ? width : undefined,
+      }}
-          '--radius-lg': '18px',
-          '--radius-sm': '4px',
-        } as CSSProperties
-      }
       firstOfSeries={Boolean(firstMessageOfSeries || props.isDetailView)}
       lastOfSeries={Boolean(lastMessageOfSeries || props.isDetailView)}
       isOutgoing={direction === 'outgoing'}