feat: made right panel scrollable, added subtitle to panelradiobutton and xl margin option

ts/components/basic/Text.tsx

@@ -27,13 +27,15 @@ export const Text = (props: TextProps) => {
 };
 
 type SpacerProps = {
-  size: 'lg' | 'md' | 'sm' | 'xs';
+  size: 'xl' | 'lg' | 'md' | 'sm' | 'xs';
   style?: CSSProperties;
 };
 
 const SpacerStyled = styled.div<SpacerProps>`
   height: ${props =>
-    props.size === 'lg'
+    props.size === 'xl'
+      ? 'var(--margins-xl)'
+      : props.size === 'lg'
       ? 'var(--margins-lg)'
       : props.size === 'md'
       ? 'var(--margins-md)'
@@ -42,7 +44,9 @@ const SpacerStyled = styled.div<SpacerProps>`
       : 'var(--margins-xs)'};
 
   width: ${props =>
-    props.size === 'lg'
+    props.size === 'xl'
+      ? 'var(--margins-xl)'
+      : props.size === 'lg'
       ? 'var(--margins-lg)'
       : props.size === 'md'
       ? 'var(--margins-md)'
@@ -55,6 +59,10 @@ const Spacer = (props: SpacerProps) => {
   return <SpacerStyled {...props} />;
 };
 
+export const SpacerXL = (props: { style?: CSSProperties }) => {
+  return <Spacer size="xl" style={props.style} />;
+};
+
 export const SpacerLG = (props: { style?: CSSProperties }) => {
   return <Spacer size="lg" style={props.style} />;
 };

ts/components/buttons/PanelButton.tsx

@@ -85,7 +85,7 @@ export type PanelButtonProps = {
   className?: string;
   disableBg?: boolean;
   children: ReactNode;
-  onClick: (...args: any[]) => void;
+  onClick: (...args: Array<any>) => void;
   dataTestId?: string;
   style?: CSSProperties;
 };

ts/components/buttons/PanelRadioButton.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { Flex } from '../basic/Flex';
 import { SessionRadio } from '../basic/SessionRadio';
 import { PanelButton, PanelButtonProps, StyledContent, StyledText } from './PanelButton';
 
@@ -23,7 +24,10 @@ const StyledPanelButton = styled(PanelButton)`
   }
 `;
 
-const StyledSubtitle = styled.p``;
+const StyledSubtitle = styled.p`
+  font-size: var(--font-size-xs);
+  margin: 0;
+`;
 
 const StyledCheckContainer = styled.div`
   display: flex;
@@ -35,8 +39,8 @@ interface PanelRadioButtonProps extends Omit<PanelButtonProps, 'children' | 'onC
   text: string;
   subtitle?: string;
   isSelected: boolean;
-  onSelect?: (...args: any[]) => void;
-  onUnselect?: (...args: any[]) => void;
+  onSelect?: (...args: Array<any>) => void;
+  onUnselect?: (...args: Array<any>) => void;
 }
 
 export const PanelRadioButton = (props: PanelRadioButtonProps) => {
@@ -51,8 +55,10 @@ export const PanelRadioButton = (props: PanelRadioButtonProps) => {
       dataTestId={dataTestId}
     >
       <StyledContent>
-        <StyledText>{text}</StyledText>
-        {subtitle && <StyledSubtitle></StyledSubtitle>}
+        <Flex container={true} width={'100%'} flexDirection={'column'} alignItems={'flex-start'}>
+          <StyledText>{text}</StyledText>
+          {subtitle && <StyledSubtitle>{subtitle}</StyledSubtitle>}
+        </Flex>
         <StyledCheckContainer>
           <SessionRadio active={isSelected} value={value} inputName={value} label="" />
         </StyledCheckContainer>

ts/components/conversation/right-panel/overlay/OverlayDisappearingMessages.tsx

@@ -8,11 +8,18 @@ import { getSelectedConversationKey } from '../../../../state/selectors/conversa
 import { getTimerOptions } from '../../../../state/selectors/timerOptions';
 import { Flex } from '../../../basic/Flex';
 import { SessionButton } from '../../../basic/SessionButton';
+import { SpacerLG } from '../../../basic/Text';
 import { PanelButtonGroup } from '../../../buttons';
 import { PanelLabel } from '../../../buttons/PanelButton';
 import { PanelRadioButton } from '../../../buttons/PanelRadioButton';
 import { SessionIconButton } from '../../../icon';
 
+const StyledScrollContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  overflow: hidden auto;
+`;
+
 const StyledContainer = styled(Flex)`
   width: 100%;
 
@@ -83,7 +90,7 @@ const Header = (props: HeaderProps) => {
 };
 
 type TimerOptionsProps = {
-  options: any[];
+  options: Array<any>;
   selected: number;
   setSelected: (value: number) => void;
 };
@@ -116,24 +123,27 @@ export const OverlayDisappearingMessages = () => {
   const selectedConversationKey = useSelector(getSelectedConversationKey);
   const timerOptions = useSelector(getTimerOptions).timerOptions;
 
-  const [selected, setSelected] = useState(timerOptions[0].value);
+  const [timeSelected, setTimeSelected] = useState(timerOptions[0].value);
 
   return (
-    <StyledContainer container={true} flexDirection={'column'} alignItems={'center'}>
-      <Header
-        title={window.i18n('disappearingMessages')}
-        subtitle={window.i18n('disappearingMessagesSubtitle')}
-      />
-      <TimeOptions options={timerOptions} selected={selected} setSelected={setSelected} />
-      <SessionButton
-        onClick={() => {
-          if (selectedConversationKey) {
-            void setDisappearingMessagesByConvoId(selectedConversationKey, selected);
-          }
-        }}
-      >
-        {window.i18n('set')}
-      </SessionButton>
-    </StyledContainer>
+    <StyledScrollContainer>
+      <StyledContainer container={true} flexDirection={'column'} alignItems={'center'}>
+        <Header
+          title={window.i18n('disappearingMessages')}
+          subtitle={window.i18n('disappearingMessagesSubtitle')}
+        />
+        <TimeOptions options={timerOptions} selected={timeSelected} setSelected={setTimeSelected} />
+        <SessionButton
+          onClick={async () => {
+            if (selectedConversationKey) {
+              await setDisappearingMessagesByConvoId(selectedConversationKey, timeSelected);
+            }
+          }}
+        >
+          {window.i18n('set')}
+        </SessionButton>
+        <SpacerLG />
+      </StyledContainer>
+    </StyledScrollContainer>
   );
 };

ts/themes/globals.tsx

@@ -21,6 +21,7 @@ export type ThemeGlobals = {
   '--margins-sm': string;
   '--margins-md': string;
   '--margins-lg': string;
+  '--margins-xl': string;
 
   /* Padding */
   '--padding-message-content': string;
@@ -101,6 +102,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--margins-sm': '10px',
   '--margins-md': '15px',
   '--margins-lg': '20px',
+  '--margins-xl': '25px',
 
   '--padding-message-content': '7px 13px',
   '--padding-link-preview': '-7px -13px 7px -13px', // bottom has positive value because a link preview has always a body below