fix: radio button in settings + registration page

stylesheets/_session_signin.scss

@@ -48,7 +48,8 @@
       width: 289px;
 
       .session-button {
-        width: 100%;
+        width: 80%;
+        margin: auto;
       }
     }
 
@@ -175,7 +176,7 @@
     }
   }
 
-  session-description-long {
+  &-description-long {
     padding-top: 0;
     padding-bottom: 20px;
 

ts/components/basic/SessionRadio.tsx

@@ -8,6 +8,7 @@ type Props = {
   value: string;
   active: boolean;
   inputName?: string;
+  beforeMargins?: string;
   onClick?: (value: string) => void;
 };
 
@@ -22,8 +23,7 @@ const StyledInput = styled.input<{
   width: ${props => props.filledSize + props.outlineOffset}px;
   height: ${props => props.filledSize + props.outlineOffset}px;
 
-  :checked + label:before,
-  :hover + label:before {
+  :checked + label:before {
     background: ${props => props.selectedColor};
   }
 `;
@@ -32,6 +32,7 @@ const StyledLabel = styled.label<{
   selectedColor: string;
   filledSize: number;
   outlineOffset: number;
+  beforeMargins?: string;
 }>`
   cursor: pointer;
 
@@ -45,15 +46,12 @@ const StyledLabel = styled.label<{
     outline: var(--color-text) solid 1px;
     border: none;
     outline-offset: ${props => props.outlineOffset}px;
-
-    :hover {
-      background: ${props => props.selectedColor};
-    }
+    margin: ${props => props.beforeMargins || ''};
   }
 `;
 
 export const SessionRadio = (props: Props) => {
-  const { label, inputName, value, active, onClick } = props;
+  const { label, inputName, value, active, onClick, beforeMargins } = props;
 
   function clickHandler(e: ChangeEvent<any>) {
     if (onClick) {
@@ -76,7 +74,7 @@ export const SessionRadio = (props: Props) => {
         aria-checked={active}
         checked={active}
         onChange={clickHandler}
-        filledSize={filledSize}
+        filledSize={filledSize * 2}
         outlineOffset={outlineOffset}
         selectedColor={selectedColor}
       />
@@ -87,6 +85,7 @@ export const SessionRadio = (props: Props) => {
         selectedColor={selectedColor}
         filledSize={filledSize}
         outlineOffset={outlineOffset}
+        beforeMargins={beforeMargins}
       >
         {label}
       </StyledLabel>

ts/components/basic/SessionRadioGroup.tsx

@@ -12,6 +12,10 @@ interface Props {
 }
 
 const StyledFieldSet = styled.fieldset`
+  display: flex;
+  flex-direction: column;
+  gap: var(--margins-xs);
+
   border: none;
   margin-inline-start: var(--margins-sm);
   margin-top: var(--margins-sm);
@@ -41,6 +45,7 @@ export const SessionRadioGroup = (props: Props) => {
               setActiveItem(value);
               props.onClick(value);
             }}
+            beforeMargins={'0 var(--margins-sm) 0 0 '}
           />
         );
       })}

ts/components/settings/SettingsThemeSwitcher.tsx

@@ -86,17 +86,7 @@ const ThemePreview = (props: { style: StyleSessionSwitcher }) => {
   );
 };
 
-const Themes = (props: { selectedAccent?: PrimaryColorIds }) => {
-  const { selectedAccent } = props;
-
-  // I am not too sure if we want to override the accent color on the Theme switcher of not.
-  // If we do, we also need a way to rollback to the default, I guess?
-  const overridenAccent = selectedAccent
-    ? getPrimaryColors().find(e => {
-        return e.id === selectedAccent;
-      })?.color
-    : undefined;
-
+const Themes = () => {
   const themes: Array<ThemeType> = [
     {
       id: 'dark',
@@ -105,7 +95,7 @@ const Themes = (props: { selectedAccent?: PrimaryColorIds }) => {
         background: '#000000',
         border: '#414141',
         receivedBg: darkColorReceivedMessageBg,
-        sentBg: overridenAccent || darkColorSentMessageBg,
+        sentBg: darkColorSentMessageBg,
       },
     },
     {
@@ -115,7 +105,7 @@ const Themes = (props: { selectedAccent?: PrimaryColorIds }) => {
         background: '#ffffff',
         border: '#414141',
         receivedBg: lightColorReceivedMessageBg,
-        sentBg: overridenAccent || lightColorSentMessageBg,
+        sentBg: lightColorSentMessageBg,
       },
     },
     {
@@ -125,7 +115,7 @@ const Themes = (props: { selectedAccent?: PrimaryColorIds }) => {
         background: OceanBlueDark.background,
         border: OceanBlueDark.border,
         receivedBg: OceanBlueDark.received,
-        sentBg: overridenAccent || OceanBlueDark.sent,
+        sentBg: OceanBlueDark.sent,
       },
     },
     {
@@ -135,7 +125,7 @@ const Themes = (props: { selectedAccent?: PrimaryColorIds }) => {
         background: OceanBlueLight.background,
         border: OceanBlueLight.border,
         receivedBg: OceanBlueLight.received,
-        sentBg: overridenAccent || OceanBlueLight.sent,
+        sentBg: OceanBlueLight.sent,
       },
     },
   ];
@@ -176,7 +166,7 @@ export const SettingsThemeSwitcher = () => {
     <StyledSwitcherContainer>
       <StyledTitleSettingsItem>{window.i18n('themesSettingTitle')}</StyledTitleSettingsItem>
       <ThemesContainer>
-        <Themes selectedAccent={selectedAccent} />
+        <Themes />
       </ThemesContainer>
       <SpacerMD />
       <StyledDescriptionSettingsItem>{window.i18n('primaryColor')}</StyledDescriptionSettingsItem>