From 28517b7624bc88070c365c1042892f02ff3a9af3 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Wed, 24 Jan 2024 11:59:53 +1100
Subject: [PATCH] feat: sessionradio now supports being positioned on the right

used in delete message modal
---
 ts/components/basic/SessionRadio.tsx      | 9 ++++++++-
 ts/components/basic/SessionRadioGroup.tsx | 4 +++-
 ts/components/dialog/SessionConfirm.tsx   | 3 ++-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/ts/components/basic/SessionRadio.tsx b/ts/components/basic/SessionRadio.tsx
index 892c461aa..aa5dc586a 100644
--- a/ts/components/basic/SessionRadio.tsx
+++ b/ts/components/basic/SessionRadio.tsx
@@ -54,6 +54,7 @@ type SessionRadioProps = {
   beforeMargins?: string;
   onClick?: (value: string) => void;
   disabled?: boolean;
+  radioPosition?: 'left' | 'right';
   style?: CSSProperties;
 };
 
@@ -66,6 +67,7 @@ export const SessionRadio = (props: SessionRadioProps) => {
     onClick,
     beforeMargins,
     disabled = false,
+    radioPosition = 'left',
     style,
   } = props;
 
@@ -81,7 +83,12 @@ export const SessionRadio = (props: SessionRadioProps) => {
   const outlineOffset = 2;
 
   return (
-    <Flex container={true} style={style}>
+    <Flex
+      container={true}
+      flexDirection={radioPosition === 'left' ? 'row' : 'row-reverse'}
+      justifyContent={radioPosition === 'left' ? 'flex-start' : 'flex-end'}
+      style={style}
+    >
       <StyledInput
         type="radio"
         name={inputName || ''}
diff --git a/ts/components/basic/SessionRadioGroup.tsx b/ts/components/basic/SessionRadioGroup.tsx
index ecb3d2a98..b0867e3d7 100644
--- a/ts/components/basic/SessionRadioGroup.tsx
+++ b/ts/components/basic/SessionRadioGroup.tsx
@@ -11,6 +11,7 @@ interface Props {
   items: SessionRadioItems;
   group: string;
   onClick: (selectedValue: string) => void;
+  radioPosition?: 'left' | 'right';
   style?: CSSProperties;
 }
 
@@ -31,7 +32,7 @@ const StyledFieldSet = styled.fieldset`
 `;
 
 export const SessionRadioGroup = (props: Props) => {
-  const { items, group, initialItem, style } = props;
+  const { items, group, initialItem, radioPosition, style } = props;
   const [activeItem, setActiveItem] = useState('');
 
   useMount(() => {
@@ -55,6 +56,7 @@ export const SessionRadioGroup = (props: Props) => {
               props.onClick(value);
             }}
             beforeMargins={'0 var(--margins-sm) 0 0 '}
+            radioPosition={radioPosition}
           />
         );
       })}
diff --git a/ts/components/dialog/SessionConfirm.tsx b/ts/components/dialog/SessionConfirm.tsx
index cfbfbec8a..dfaabb24f 100644
--- a/ts/components/dialog/SessionConfirm.tsx
+++ b/ts/components/dialog/SessionConfirm.tsx
@@ -138,12 +138,13 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
           <SessionRadioGroup
             group="session-confirm-radio-group"
             initialItem={chosenOption}
+            items={radioOptions}
+            radioPosition="right"
             onClick={value => {
               if (value) {
                 setChosenOption(value);
               }
             }}
-            items={radioOptions}
           />
         )}