feat: sessionradio now supports being positioned on the right

used in delete message modal

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 || ''}

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}
           />
         );
       })}

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}
           />
         )}