chore: move onion dialog components to styled

stylesheets/_session.scss

@@ -1,5 +1,3 @@
-$onionPathLineColor: rgba(#7a7a7a, 0.6);
-
 #root {
   height: 100%;
 }
@@ -891,62 +889,6 @@ input {
   }
 }
 
-.onion__description {
-  min-width: 400px;
-  width: 0;
-}
-
-.onion__node-list {
-  display: flex;
-  flex-direction: column;
-  margin: var(--margins-sm);
-  align-items: center;
-  min-width: 10vw;
-  position: relative;
-
-  .onion__node {
-    display: flex;
-    flex-grow: 1;
-    align-items: center;
-    margin: var(--margins-xs);
-
-    &:nth-child(2) {
-      margin-top: 0;
-    }
-
-    &:nth-last-child(2) {
-      margin-bottom: 0;
-    }
-
-    .session-icon-button {
-      margin: var(--margins-sm) !important;
-    }
-  }
-
-  .onion__node-list-lights {
-    position: relative;
-  }
-  .onion__node__country {
-    margin: var(--margins-sm);
-    min-width: 150px;
-  }
-
-  .onion__growing-icon {
-    flex-grow: 1;
-    display: flex;
-    align-items: center;
-  }
-
-  .onion__vertical-line {
-    background: $onionPathLineColor;
-    position: absolute;
-    height: calc(100% - 2 * 15px);
-    margin: 15px calc(100% / 2 - 1px);
-
-    width: 1px;
-  }
-}
-
 .messages-container {
   .session-icon-button {
     display: flex;

ts/components/basic/SessionToggle.tsx

@@ -55,21 +55,20 @@ const StyledKnob = styled.div<{ active: boolean }>`
   position: absolute;
   top: 0.5px;
   left: 0.5px;
-  height: 27px;
-  width: 27px;
+  height: 21px;
+  width: 21px;
   border-radius: 28px;
   background-color: white;
-  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.05), 0 3px 1px 0 rgba(0, 0, 0, 0.05),
-    0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: -2px 1px 3px rgba(0, 0, 0, 0.15);
 
   transition: transform var(--default-duration) ease, background-color var(--default-duration) ease;
 
-  transform: ${props => (props.active ? 'translateX(20px)' : '')};
+  transform: ${props => (props.active ? 'translateX(25px)' : '')};
 `;
 
 const StyledSessionToggle = styled.div<{ active: boolean }>`
   width: 51px;
-  height: 31px;
+  height: 25px;
   border: 1.5px solid #e5e5ea;
   border-radius: 16px;
   position: relative;

ts/components/basic/YourSessionIDPill.tsx

@@ -40,7 +40,7 @@ const StyledYourSessionIDSelectable = styled.p`
   word-break: break-all;
 
   padding: 0px var(--margins-lg);
-  font-weight: 100;
+  font-weight: 300;
   color: var(--color-text);
 
   font-size: var(--font-size-sm);

ts/components/dialog/OnionStatusPathDialog.tsx

@@ -20,6 +20,7 @@ import useHover from 'react-use/lib/useHover';
 import { SessionSpinner } from '../basic/SessionSpinner';
 import { SessionIcon, SessionIconButton } from '../icon';
 import { SessionWrapperModal } from '../SessionWrapperModal';
+import styled from 'styled-components';
 
 export type StatusLightType = {
   glowStartDelay: number;
@@ -27,19 +28,30 @@ export type StatusLightType = {
   color?: string;
 };
 
-const OnionCountryDisplay = ({
-  index,
-  labelText,
-  snodeIp,
-}: {
-  snodeIp?: string;
-  labelText: string;
-  index: number;
-}) => {
+const StyledCountry = styled.div`
+  margin: var(--margins-sm);
+  min-width: 150px;
+`;
+
+const StyledOnionNodeList = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: var(--margins-sm);
+  align-items: center;
+  min-width: 10vw;
+  position: relative;
+`;
+
+const StyledOnionDescription = styled.p`
+  min-width: 400px;
+  width: 0;
+`;
+
+const OnionCountryDisplay = ({ labelText, snodeIp }: { snodeIp?: string; labelText: string }) => {
   const element = (hovered: boolean) => (
-    <div className="onion__node__country" key={`country-${index}`}>
+    <StyledCountry key={`country-${snodeIp}`}>
       {hovered && snodeIp ? snodeIp : labelText}
-    </div>
+    </StyledCountry>
   );
   const [hoverable] = useHover(element);
 
@@ -67,11 +79,13 @@ const OnionPathModalInner = () => {
 
   return (
     <>
-      <p className="onion__description">{window.i18n('onionPathIndicatorDescription')}</p>
-      <div className="onion__node-list">
+      <StyledOnionDescription>
+        {window.i18n('onionPathIndicatorDescription')}
+      </StyledOnionDescription>
+      <StyledOnionNodeList>
         <Flex container={true}>
-          <div className="onion__node-list-lights">
-            <div className="onion__vertical-line" />
+          <StyledLightsContainer>
+            <StyledVerticalLine />
 
             <Flex container={true} flexDirection="column" alignItems="center" height="100%">
               {nodes.map((_snode: Snode | any, index: number) => {
@@ -84,9 +98,9 @@ const OnionPathModalInner = () => {
                 );
               })}
             </Flex>
-          </div>
+          </StyledLightsContainer>
           <Flex container={true} flexDirection="column" alignItems="flex-start">
-            {nodes.map((snode: Snode | any, index: number) => {
+            {nodes.map((snode: Snode | any) => {
               let labelText = snode.label
                 ? snode.label
                 : `${countryLookup.byIso(ip2country(snode.ip))?.country}`;
@@ -94,16 +108,35 @@ const OnionPathModalInner = () => {
                 labelText = window.i18n('unknownCountry');
               }
               return labelText ? (
-                <OnionCountryDisplay index={index} labelText={labelText} snodeIp={snode.ip} />
+                <OnionCountryDisplay labelText={labelText} snodeIp={snode.ip} />
               ) : null;
             })}
           </Flex>
         </Flex>
-      </div>
+      </StyledOnionNodeList>
     </>
   );
 };
 
+const StyledVerticalLine = styled.div`
+  background: rgba(#7a7a7a, 0.6);
+  position: absolute;
+  height: calc(100% - 2 * 15px);
+  margin: 15px calc(100% / 2 - 1px);
+
+  width: 1px;
+`;
+
+const StyledLightsContainer = styled.div`
+  position: relative;
+`;
+
+const StyledGrowingIcon = styled.div`
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+`;
+
 export type OnionNodeStatusLightType = {
   glowStartDelay: number;
   glowDuration: number;
@@ -131,7 +164,7 @@ export const ModalStatusLight = (props: StatusLightType) => {
   const { glowStartDelay, glowDuration, color } = props;
 
   return (
-    <div className="onion__growing-icon">
+    <StyledGrowingIcon>
       <SessionIcon
         borderRadius={'50px'}
         iconColor={color}
@@ -140,7 +173,7 @@ export const ModalStatusLight = (props: StatusLightType) => {
         iconType="circle"
         iconSize={'tiny'}
       />
-    </div>
+    </StyledGrowingIcon>
   );
 };
 

ts/components/settings/SessionSettingListItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SessionButton, SessionButtonColor } from '../basic/SessionButton';
+import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
 import { SessionToggle } from '../basic/SessionToggle';
 import { SessionConfirmDialogProps } from '../dialog/SessionConfirm';
 import styled from 'styled-components';
@@ -8,6 +8,7 @@ type ButtonSettingsProps = {
   title?: string;
   description?: string;
   buttonColor: SessionButtonColor;
+  buttonType: SessionButtonType;
   buttonText: string;
   dataTestId?: string;
   onClick: () => void;
@@ -16,7 +17,7 @@ type ButtonSettingsProps = {
 const StyledDescription = styled.div`
   font-family: var(--font-default);
   font-size: var(--font-size-sm);
-  font-weight: 100;
+  font-weight: 400;
   max-width: 700px;
   color: var(--color-text-subtle);
 `;
@@ -93,7 +94,7 @@ export const SessionToggleWithDescription = (props: {
 };
 
 export const SessionSettingButtonItem = (props: ButtonSettingsProps) => {
-  const { title, description, buttonColor, buttonText, dataTestId, onClick } = props;
+  const { title, description, buttonColor, buttonType, buttonText, dataTestId, onClick } = props;
 
   return (
     <SessionSettingsItemWrapper title={title} description={description} inline={true}>
@@ -102,6 +103,7 @@ export const SessionSettingButtonItem = (props: ButtonSettingsProps) => {
         text={buttonText}
         buttonColor={buttonColor}
         onClick={onClick}
+        buttonType={buttonType}
       />
     </SessionSettingsItemWrapper>
   );

ts/components/settings/SessionSettingsHeader.tsx

@@ -15,7 +15,7 @@ export const SettingsHeader = (props: Props) => {
       categoryLocalized = 'appearanceSettingsTitle';
       break;
     case SessionSettingCategory.Conversations:
-      categoryLocalized = 'blockedSettingsTitle';
+      categoryLocalized = 'conversationsSettingsTitle';
       break;
     case SessionSettingCategory.Notifications:
       categoryLocalized = 'notificationsSettingsTitle';

ts/components/settings/section/CategoryConversations.tsx

@@ -8,7 +8,7 @@ import { ToastUtils } from '../../../session/utils';
 import { toggleAudioAutoplay } from '../../../state/ducks/userConfig';
 import { getBlockedPubkeys } from '../../../state/selectors/conversations';
 import { getAudioAutoplay } from '../../../state/selectors/userConfig';
-import { SessionButtonColor } from '../../basic/SessionButton';
+import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
 
 import {
   SessionSettingButtonItem,
@@ -100,6 +100,7 @@ const BlockedEntry = (props: { blockedEntry: string; title: string }) => {
     <SessionSettingButtonItem
       key={props.blockedEntry}
       buttonColor={SessionButtonColor.Danger}
+      buttonType={SessionButtonType.Square}
       buttonText={window.i18n('unblockUser')}
       title={props.title}
       onClick={async () => {

ts/components/settings/section/CategoryHelp.tsx

@@ -1,6 +1,6 @@
 import { ipcRenderer, shell } from 'electron';
 import React from 'react';
-import { SessionButtonColor } from '../../basic/SessionButton';
+import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
 
 import { SessionSettingButtonItem } from '../SessionSettingListItem';
 
@@ -12,12 +12,14 @@ export const SettingsCategoryHelp = (props: { hasPassword: boolean | null }) =>
           title={window.i18n('surveyTitle')}
           onClick={() => void shell.openExternal('https://getsession.org/survey')}
           buttonColor={SessionButtonColor.Primary}
+          buttonType={SessionButtonType.Square}
           buttonText={window.i18n('goToOurSurvey')}
         />
         <SessionSettingButtonItem
           title={window.i18n('helpUsTranslateSession')}
           onClick={() => void shell.openExternal('https://crowdin.com/project/session-desktop/')}
           buttonColor={SessionButtonColor.Primary}
+          buttonType={SessionButtonType.Square}
           buttonText={window.i18n('translation')}
         />
         <SessionSettingButtonItem
@@ -25,6 +27,7 @@ export const SettingsCategoryHelp = (props: { hasPassword: boolean | null }) =>
             ipcRenderer.send('show-debug-log');
           }}
           buttonColor={SessionButtonColor.Primary}
+          buttonType={SessionButtonType.Square}
           buttonText={window.i18n('showDebugLog')}
         />
       </>

ts/components/settings/section/CategoryPrivacy.tsx

@@ -4,7 +4,7 @@ import useUpdate from 'react-use/lib/useUpdate';
 import { Data, hasLinkPreviewPopupBeenDisplayed } from '../../../data/data';
 import { SettingsKey } from '../../../data/settings-key';
 import { sessionPassword, updateConfirmModal } from '../../../state/ducks/modalDialog';
-import { SessionButtonColor } from '../../basic/SessionButton';
+import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
 import { PasswordAction } from '../../dialog/SessionPasswordDialog';
 
 import { SessionSettingButtonItem, SessionToggleWithDescription } from '../SessionSettingListItem';
@@ -86,7 +86,8 @@ export const SettingsCategoryPrivacy = (props: {
             onClick={() => {
               displayPasswordModal('set', props.onPasswordUpdated);
             }}
-            buttonColor={SessionButtonColor.Primary}
+            buttonColor={SessionButtonColor.Green}
+            buttonType={SessionButtonType.BrandOutline}
             buttonText={window.i18n('setPassword')}
             dataTestId={'set-password-button'}
           />
@@ -98,7 +99,8 @@ export const SettingsCategoryPrivacy = (props: {
             onClick={() => {
               displayPasswordModal('change', props.onPasswordUpdated);
             }}
-            buttonColor={SessionButtonColor.Primary}
+            buttonColor={SessionButtonColor.Green}
+            buttonType={SessionButtonType.BrandOutline}
             buttonText={window.i18n('changePassword')}
           />
         )}
@@ -110,6 +112,7 @@ export const SettingsCategoryPrivacy = (props: {
               displayPasswordModal('remove', props.onPasswordUpdated);
             }}
             buttonColor={SessionButtonColor.Danger}
+            buttonType={SessionButtonType.BrandOutline}
             buttonText={window.i18n('removePassword')}
           />
         )}