rename all spacer-* to react component

js/views/app_view.js

@@ -1,4 +1,4 @@
-/* global Backbone, i18n, Whisper, storage, _, $ */
+/* global Backbone, Whisper, storage, _, $ */
 
 /* eslint-disable more/no-then */
 

stylesheets/_session.scss

@@ -1,13 +1,3 @@
-div.spacer-sm {
-  height: $session-margin-sm;
-}
-div.spacer-md {
-  height: $session-margin-md;
-}
-div.spacer-lg {
-  height: $session-margin-lg;
-}
-
 .subtle {
   opacity: $session-subtle-factor;
 }
@@ -1199,7 +1189,6 @@ input {
   }
 }
 
-
 .onion__description {
   min-width: 100%;
   width: 0;
@@ -1227,7 +1216,6 @@ input {
   }
 }
 
-
 .session-nickname-wrapper {
   position: absolute;
   height: 100%;

ts/components/EditProfileDialog.tsx

@@ -17,6 +17,7 @@ import { ConversationTypeEnum } from '../models/conversation';
 import { SessionWrapperModal } from './session/SessionWrapperModal';
 import { AttachmentUtil } from '../util';
 import { ConversationController } from '../session/conversations';
+import { SpacerLG, SpacerMD } from './basic/Text';
 
 interface Props {
   profileName?: string;
@@ -128,7 +129,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
           showExitIcon={true}
           theme={this.props.theme}
         >
-          <div className="spacer-md" />
+          <SpacerMD />
 
           {viewQR && this.renderQRView(sessionID)}
           {viewDefault && this.renderDefaultView()}
@@ -140,7 +141,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
               {sessionID}
             </p>
 
-            <div className="spacer-lg" />
+            <SpacerLG />
             <SessionSpinner loading={this.state.loading} />
 
             {viewDefault || viewQR ? (
@@ -164,7 +165,7 @@ export class EditProfileDialog extends React.Component<Props, State> {
               )
             )}
 
-            <div className="spacer-lg" />
+            <SpacerLG />
           </div>
         </SessionWrapperModal>
       </div>

ts/components/LeftPane.tsx

@@ -86,7 +86,7 @@ const InnerLeftPaneContactSection = () => {
   );
 };
 
-const LeftPaneSection = (props: { isExpired: boolean, setModal: any}) => {
+const LeftPaneSection = (props: { isExpired: boolean; setModal: any }) => {
   const focusedSection = useSelector(getFocusedSection);
   const { setModal } = props;
 
@@ -110,7 +110,7 @@ export const LeftPane = (props: Props) => {
 
   return (
     <>
-      { modal ? modal : null}
+      {modal ? modal : null}
       <SessionTheme theme={theme}>
         <div className="module-left-pane-session">
           <ActionsPanel />

ts/components/MainViewController.tsx

@@ -38,7 +38,7 @@ export class MessageView extends React.Component {
  */
 async function createClosedGroup(
   groupName: string,
-  groupMembers: Array<ContactType>,
+  groupMembers: Array<ContactType>
 ): Promise<boolean> {
   // Validate groupName and groupMembers length
   if (groupName.length === 0) {

ts/components/UserDetailsDialog.tsx

@@ -9,6 +9,7 @@ import { ConversationController } from '../session/conversations';
 import { ConversationTypeEnum } from '../models/conversation';
 import { Session } from 'electron';
 import { SessionWrapperModal } from './session/SessionWrapperModal';
+import { SpacerMD } from './basic/Text';
 
 interface Props {
   i18n: any;
@@ -48,7 +49,7 @@ export class UserDetailsDialog extends React.Component<Props, State> {
           <div className="avatar-center-inner">{this.renderAvatar()}</div>
         </div>
 
-        <div className="spacer-md"></div>
+        <SpacerMD />
         <SessionIdEditable editable={false} text={this.props.pubkey} />
 
         <div className="session-modal__button-group__center">
@@ -86,7 +87,7 @@ export class UserDetailsDialog extends React.Component<Props, State> {
   private onKeyUp(event: any) {
     switch (event.key) {
       case 'Enter':
-        this.onClickStartConversation();
+        void this.onClickStartConversation();
         break;
       case 'Esc':
       case 'Escape':
@@ -103,12 +104,13 @@ export class UserDetailsDialog extends React.Component<Props, State> {
 
   private async onClickStartConversation() {
     // this.props.onStartConversation();
-    const conversation = await ConversationController.getInstance().getOrCreateAndWait(this.props.pubkey, ConversationTypeEnum.PRIVATE);
+    const conversation = await ConversationController.getInstance().getOrCreateAndWait(
-
+      this.props.pubkey,
-    window.inboxStore?.dispatch(
+      ConversationTypeEnum.PRIVATE
-      window.actionsCreators.openConversationExternal(conversation.id)
     );
 
+    window.inboxStore?.dispatch(window.actionsCreators.openConversationExternal(conversation.id));
+
     this.closeDialog();
   }
 }

ts/components/conversation/AdminLeaveClosedGroupDialog.tsx

@@ -1,19 +1,18 @@
 import React from 'react';
 
-import { SessionModal } from '../session/SessionModal';
 import { SessionButton, SessionButtonColor } from '../session/SessionButton';
-import { DefaultTheme, useTheme } from 'styled-components';
+import { DefaultTheme } from 'styled-components';
 import { SessionWrapperModal } from '../session/SessionWrapperModal';
+import { SpacerLG } from '../basic/Text';
 
-interface Props {
+type Props = {
   groupName: string;
   onSubmit: () => any;
   onClose: any;
   theme: DefaultTheme;
-}
+};
 
 const AdminLeaveClosedGroupDialogInner = (props: Props) => {
-
   const { groupName, theme, onSubmit, onClose } = props;
 
   const titleText = `${window.i18n('leaveGroup')} ${groupName}`;
@@ -24,31 +23,23 @@ const AdminLeaveClosedGroupDialogInner = (props: Props) => {
   const onClickOK = () => {
     void onSubmit();
     closeDialog();
-  }
+  };
 
   const closeDialog = () => {
     onClose();
-  }
+  };
 
   return (
     <SessionWrapperModal title={titleText} onClose={closeDialog} theme={theme}>
-
+      <SpacerLG />
-      <div className="spacer-lg" />
       <p>{warningAsAdmin}</p>
 
       <div className="session-modal__button-group">
-        <SessionButton
+        <SessionButton text={okText} onClick={onClickOK} buttonColor={SessionButtonColor.Danger} />
-          text={okText}
+        <SessionButton text={cancelText} onClick={closeDialog} />
-          onClick={onClickOK}
-          buttonColor={SessionButtonColor.Danger}
-        />
-        <SessionButton
-          text={cancelText}
-          onClick={closeDialog}
-        />
       </div>
     </SessionWrapperModal>
   );
-}
+};
 
 export const AdminLeaveClosedGroupDialog = AdminLeaveClosedGroupDialogInner;

ts/components/conversation/InviteContactsDialog.tsx

@@ -12,6 +12,7 @@ import { getCompleteUrlForV2ConvoId } from '../../interactions/conversation';
 import _ from 'lodash';
 import { VALIDATION } from '../../session/constants';
 import { SessionWrapperModal } from '../session/SessionWrapperModal';
+import { SpacerLG } from '../basic/Text';
 
 type Props = {
   // contactList: Array<any>;
@@ -202,18 +203,18 @@ const InviteContactsDialogInner = (props: Props) => {
 
   return (
     <SessionWrapperModal title={titleText} onClose={closeDialog} theme={props.theme}>
-      <div className="spacer-lg" />
+      <SpacerLG />
 
       <div className="contact-selection-list">{renderMemberList()}</div>
       {hasContacts ? null : (
         <>
-          <div className="spacer-lg" />
+          <SpacerLG />
           <p className="no-contacts">{window.i18n('noContactsToAdd')}</p>
-          <div className="spacer-lg" />
+          <SpacerLG />
         </>
       )}
 
-      <div className="spacer-lg" />
+      <SpacerLG />
 
       <div className="session-modal__button-group">
         <SessionButton text={cancelText} onClick={closeDialog} />

ts/components/conversation/UpdateGroupMembersDialog.tsx

@@ -10,7 +10,7 @@ import autoBind from 'auto-bind';
 import { ConversationController } from '../../session/conversations';
 
 import _ from 'lodash';
-import { Text } from '../basic/Text';
+import { SpacerLG, SpacerMD, Text } from '../basic/Text';
 import { SessionWrapperModal } from '../session/SessionWrapperModal';
 
 interface Props {
@@ -50,8 +50,8 @@ export class UpdateGroupMembersDialog extends React.Component<Props, State> {
       const name = nickname
         ? nickname
         : lokiProfile
-          ? lokiProfile.displayName
+        ? lokiProfile.displayName
-          : window.i18n('anonymous');
+        : window.i18n('anonymous');
 
       const existingMember = this.props.existingMembers.includes(d.id);
 
@@ -130,16 +130,16 @@ export class UpdateGroupMembersDialog extends React.Component<Props, State> {
         onClose={() => this.closeDialog()}
         theme={this.props.theme}
       >
-        <div className="spacer-md" />
+        <SpacerMD />
 
         <p className={errorMessageClasses}>{errorMsg}</p>
-        <div className="spacer-md" />
+        <SpacerMD />
 
         <div className="group-member-list__selection">{this.renderMemberList()}</div>
         {this.renderZombiesList()}
         {showNoMembersMessage && <p>{window.i18n('noMembersInThisGroup')}</p>}
 
-        <div className="spacer-lg" />
+        <SpacerLG />
 
         <div className="session-modal__button-group">
           <SessionButton text={cancelText} onClick={this.closeDialog} />
@@ -200,7 +200,7 @@ export class UpdateGroupMembersDialog extends React.Component<Props, State> {
     });
     return (
       <>
-        <div className="spacer-lg" />
+        <SpacerLG />
         {isAdmin && (
           <Text
             padding="20px"
@@ -229,7 +229,6 @@ export class UpdateGroupMembersDialog extends React.Component<Props, State> {
     }
   }
 
-
   // Return members that would comprise the group given the
   // current state in `users`
   private getWouldBeMembers(users: Array<ContactType>) {

ts/components/conversation/UpdateGroupNameDialog.tsx

@@ -6,6 +6,7 @@ import { SessionButton, SessionButtonColor } from '../session/SessionButton';
 import { Avatar, AvatarSize } from '../Avatar';
 import { DefaultTheme, withTheme } from 'styled-components';
 import { SessionWrapperModal } from '../session/SessionWrapperModal';
+import { SpacerMD } from '../basic/Text';
 
 interface Props {
   titleText: string;
@@ -85,19 +86,16 @@ class UpdateGroupNameDialogInner extends React.Component<Props, State> {
         onClose={() => this.closeDialog()}
         theme={this.props.theme}
       >
-
+        {this.state.errorDisplayed ? (
-        { this.state.errorDisplayed ?
           <>
-            <div className="spacer-md" />
+            <SpacerMD />
             <p className={errorMessageClasses}>{errorMsg}</p>
-            <div className="spacer-md" />
+            <SpacerMD />
           </>
-          :
+        ) : null}
-          null
-        }
 
         {this.renderAvatar()}
-        <div className="spacer-md" />
+        <SpacerMD />
 
         <input
           type="text"

ts/components/session/LeftPaneMessageSection.tsx

@@ -30,7 +30,7 @@ import autoBind from 'auto-bind';
 import { onsNameRegex } from '../../session/snode_api/SNodeAPI';
 import { SNodeAPI } from '../../session/snode_api';
 
-import { createClosedGroup } from "../../receiver/closedGroups";
+import { createClosedGroup } from '../../receiver/closedGroups';
 
 export interface Props {
   searchTerm: string;
@@ -75,7 +75,7 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
       loading: false,
       overlay: false,
       valuePasted: '',
-      modal: null
+      modal: null,
     };
 
     autoBind(this);
@@ -169,17 +169,15 @@ export class LeftPaneMessageSection extends React.Component<Props, State> {
     return (
       <div className="session-left-pane-section-content">
         {this.renderHeader()}
-        { this.state.modal ? this.state.modal : null }
+        {this.state.modal ? this.state.modal : null}
         {overlay ? this.renderClosableOverlay(overlay) : this.renderConversations()}
       </div>
     );
   }
 
-
+  public setModal(modal: null | JSX.Element) {
-  
-  public setModal (modal: null | JSX.Element) {
     this.setState({
-      modal
+      modal,
     });
   }
 

ts/components/session/LeftPaneSettingSection.tsx

@@ -104,42 +104,34 @@ const LeftPaneSettingsCategories = () => {
   );
 };
 
-const onDeleteAccount = ( setModal: any) => {
+const onDeleteAccount = (setModal: any) => {
   const title = window.i18n('clearAllData');
   const message = window.i18n('deleteAccountWarning');
 
   const clearModal = () => {
     setModal(null);
-  }
+  };
 
   setModal(
-  <SessionConfirm
+    <SessionConfirm
-    title={title}
+      title={title}
-    message={message}
+      message={message}
-    onClickOk={deleteAccount}
+      onClickOk={deleteAccount}
-    okTheme={SessionButtonColor.Danger}
+      okTheme={SessionButtonColor.Danger}
-    onClickClose={clearModal}
+      onClickClose={clearModal}
-  />)
+    />
+  );
 };
 
 const onShowRecoverPhrase = (setModal: any) => {
-
   const clearModal = () => {
     setModal(null);
-  }
+  };
-
-  setModal(
 
-    <SessionSeedModal
+  setModal(<SessionSeedModal onClose={clearModal}></SessionSeedModal>);
-     onClose={clearModal} 
+};
-    ></SessionSeedModal>
-  
-  )
-
-
-}
 
-const LeftPaneBottomButtons = (props: { setModal: any}) => {
+const LeftPaneBottomButtons = (props: { setModal: any }) => {
   const dangerButtonText = window.i18n('clearAllData');
   const showRecoveryPhrase = window.i18n('showRecoveryPhrase');
   const { setModal } = props;
@@ -163,7 +155,7 @@ const LeftPaneBottomButtons = (props: { setModal: any}) => {
   );
 };
 
-export const LeftPaneSettingSection = (props: { setModal: any}) => {
+export const LeftPaneSettingSection = (props: { setModal: any }) => {
   const theme = useSelector(getTheme);
   const { setModal } = props;
 

ts/components/session/SessionConfirm.tsx

@@ -8,6 +8,7 @@ import { SessionWrapperModal } from './SessionWrapperModal';
 import { useDispatch } from 'react-redux';
 import { updateConfirmModal } from '../../state/ducks/modalDialog';
 import { update } from 'lodash';
+import { SpacerLG } from '../basic/Text';
 
 export interface SessionConfirmDialogProps {
   message?: string;
@@ -27,7 +28,7 @@ export interface SessionConfirmDialogProps {
   theme?: DefaultTheme;
   closeAfterClickOk?: boolean;
   shouldShowConfirm?: () => boolean | undefined;
-};
+}
 
 const SessionConfirmInner = (props: SessionConfirmDialogProps) => {
   const {
@@ -55,7 +56,7 @@ const SessionConfirmInner = (props: SessionConfirmDialogProps) => {
   const messageSubText = messageSub ? 'session-confirm-main-message' : 'subtle';
 
   /**
-   * Calls close function after the ok button is clicked. If no close method specified, closes the modal 
+   * Calls close function after the ok button is clicked. If no close method specified, closes the modal
    */
   const onClickOkWithClose = () => {
     if (onClickOk) {
@@ -65,17 +66,15 @@ const SessionConfirmInner = (props: SessionConfirmDialogProps) => {
     if (onClickClose) {
       onClickClose();
     }
-  }
+  };
-
 
   const onClickOkHandler = () => {
     if (onClickOk) {
       onClickOk();
     }
 
-
     window.inboxStore?.dispatch(updateConfirmModal(null));
-  }
+  };
 
   if (shouldShowConfirm && !shouldShowConfirm()) {
     return null;
@@ -87,8 +86,7 @@ const SessionConfirmInner = (props: SessionConfirmDialogProps) => {
     }
 
     window.inboxStore?.dispatch(updateConfirmModal(null));
-  }
+  };
-
 
   return (
     <SessionWrapperModal
@@ -98,14 +96,13 @@ const SessionConfirmInner = (props: SessionConfirmDialogProps) => {
       showHeader={showHeader}
       theme={theme}
     >
-
+      {!showHeader && <SpacerLG />}
-      {!showHeader && <div className="spacer-lg" />}
 
       <div className="session-modal__centered">
         {sessionIcon && iconSize && (
           <>
             <SessionIcon iconType={sessionIcon} iconSize={iconSize} theme={theme} />
-            <div className="spacer-lg" />
+            <SpacerLG />
           </>
         )}
 
@@ -123,10 +120,13 @@ const SessionConfirmInner = (props: SessionConfirmDialogProps) => {
 
         {!hideCancel && (
           // <SessionButton text={cancelText} buttonColor={closeTheme} onClick={onClickClose} />
-          <SessionButton text={cancelText} buttonColor={closeTheme} onClick={onClickCancelHandler} />
+          <SessionButton
+            text={cancelText}
+            buttonColor={closeTheme}
+            onClick={onClickCancelHandler}
+          />
         )}
       </div>
-
     </SessionWrapperModal>
   );
 };

ts/components/session/SessionIDResetDialog.tsx

@@ -5,6 +5,7 @@ import { SessionButton, SessionButtonColor } from './SessionButton';
 import { DefaultTheme, withTheme } from 'styled-components';
 import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
 import { deleteAccount } from '../../util/accountManager';
+import { SpacerLG, SpacerSM, SpacerXS } from '../basic/Text';
 
 type Props = {
   onClose: any;
@@ -19,19 +20,19 @@ const SessionIDResetDialogInner = (props: Props) => {
 
   return (
     <SessionModal title="Mandatory Upgrade Session ID" onClose={() => null} theme={props.theme}>
-      <div className="spacer-sm" />
+      <SpacerSM />
       <div className="session-modal__centered text-center">
         <SessionIcon
           iconType={SessionIconType.Shield}
           iconSize={SessionIconSize.Max}
           theme={props.theme}
         />
-        <div className="spacer-lg" />
+        <SpacerLG />
 
         {description}
-        <div className="spacer-xs" />
+        <SpacerXS />
       </div>
-      <div className="spacer-lg" />
+      <SpacerLG />
 
       <div className="session-modal__button-group">
         <SessionButton

ts/components/session/SessionNicknameDialog.tsx

@@ -6,6 +6,7 @@ import { DefaultTheme, withTheme, useTheme } from 'styled-components';
 
 import _ from 'lodash';
 import { SessionWrapperModal } from './SessionWrapperModal';
+import { SpacerLG } from '../basic/Text';
 
 type Props = {
   onClickOk?: any;
@@ -69,7 +70,7 @@ const SessionNicknameInner = (props: Props) => {
     >
       <div className="session-modal__centered">
         <span className="subtle">{window.i18n('changeNicknameMessage')}</span>
-        <div className="spacer-lg" />
+        <SpacerLG />
       </div>
 
       <input

ts/components/session/SessionPasswordModal.tsx

@@ -8,6 +8,7 @@ import { SessionIconType } from './icon';
 import { DefaultTheme, withTheme } from 'styled-components';
 import { getPasswordHash } from '../../data/data';
 import { SessionWrapperModal } from './SessionWrapperModal';
+import { SpacerLG, SpacerSM } from '../basic/Text';
 export enum PasswordAction {
   Set = 'set',
   Change = 'change',
@@ -78,7 +79,7 @@ class SessionPasswordModalInner extends React.Component<Props, State> {
         onClose={this.closeDialog}
         theme={this.props.theme}
       >
-        <div className="spacer-sm" />
+        <SpacerSM />
 
         <div className="session-modal__input-group">
           <input
@@ -108,7 +109,7 @@ class SessionPasswordModalInner extends React.Component<Props, State> {
           )}
         </div>
 
-        <div className="spacer-sm" />
+        <SpacerSM />
         {this.showError()}
 
         <div className="session-modal__button-group">
@@ -142,7 +143,7 @@ class SessionPasswordModalInner extends React.Component<Props, State> {
         {message && (
           <>
             <div className="session-label warning">{message}</div>
-            <div className="spacer-lg" />
+            <SpacerLG />
           </>
         )}
       </>

ts/components/session/SessionSeedModal.tsx

@@ -9,6 +9,7 @@ import { getPasswordHash } from '../../data/data';
 import { QRCode } from 'react-qr-svg';
 import { mn_decode } from '../../session/crypto/mnemonic';
 import { SessionWrapperModal } from './SessionWrapperModal';
+import { SpacerLG, SpacerSM, SpacerXS } from '../basic/Text';
 
 interface Props {
   onClose: any;
@@ -68,7 +69,7 @@ class SessionSeedModalInner extends React.Component<Props, State> {
             onClose={onClose}
             theme={this.props.theme}
           >
-            <div className="spacer-sm" />
+            <SpacerSM />
 
             {hasPassword && !passwordValid ? (
               <>{this.renderPasswordView()}</>
@@ -98,12 +99,12 @@ class SessionSeedModalInner extends React.Component<Props, State> {
 
         {error && (
           <>
-            <div className="spacer-xs" />
+            <SpacerXS />
             <div className="session-label danger">{error}</div>
           </>
         )}
 
-        <div className="spacer-lg" />
+        <SpacerLG />
 
         <div className="session-modal__button-group">
           <SessionButton text={i18n('ok')} onClick={this.confirmPassword} />
@@ -125,15 +126,15 @@ class SessionSeedModalInner extends React.Component<Props, State> {
       <>
         <div className="session-modal__centered text-center">
           <p className="session-modal__description">{i18n('recoveryPhraseSavePromptMain')}</p>
-          <div className="spacer-xs" />
+          <SpacerXS />
 
           <i className="session-modal__text-highlight">{this.state.recoveryPhrase}</i>
         </div>
-        <div className="spacer-lg" />
+        <SpacerLG />
         <div className="qr-image">
           <QRCode value={hexEncodedSeed} bgColor={bgColor} fgColor={fgColor} level="L" />
         </div>
-        <div className="spacer-lg" />
+        <SpacerLG />
         <div className="session-modal__button-group">
           <SessionButton
             text={i18n('copy')}

ts/components/session/SessionToggle.tsx

@@ -71,7 +71,7 @@ export class SessionToggle extends React.PureComponent<Props, State> {
       // If item needs a confirmation dialog to turn ON, render it
       const closeConfirmModal = () => {
         this.props.updateConfirmModal(null);
-      }
+      };
 
       this.props.updateConfirmModal({
         onClickOk: () => {
@@ -83,7 +83,7 @@ export class SessionToggle extends React.PureComponent<Props, State> {
         },
         ...this.props.confirmationDialogParams,
         updateConfirmModal,
-      })
+      });
 
       return;
     }

ts/components/session/SessionWrapperModal.tsx

@@ -33,7 +33,7 @@ export type SessionWrapperModalType = {
   showHeader?: boolean;
   onConfirm?: () => void;
   onClose?: () => void;
-  showClose?: boolean
+  showClose?: boolean;
   confirmText?: string;
   cancelText?: string;
   showExitIcon?: boolean;
@@ -55,7 +55,7 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
     showExitIcon,
     theme,
     headerIconButtons,
-    headerReverse
+    headerReverse,
   } = props;
 
   useEffect(() => {
@@ -78,8 +78,7 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
     <div className="loki-dialog modal">
       <div className="session-confirm-wrapper">
         <div className="session-modal">
-
+          {showHeader ? (
-          {showHeader ?
             <div className={classNames('session-modal__header', headerReverse && 'reverse')}>
               <div className="session-modal__header__close">
                 {showExitIcon ? (
@@ -95,40 +94,37 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
               <div className="session-modal__header__icons">
                 {headerIconButtons
                   ? headerIconButtons.map((iconItem: any) => {
-                    return (
+                      return (
-                      <SessionIconButton
+                        <SessionIconButton
-                        key={iconItem.iconType}
+                          key={iconItem.iconType}
-                        iconType={iconItem.iconType}
+                          iconType={iconItem.iconType}
-                        iconSize={SessionIconSize.Large}
+                          iconSize={SessionIconSize.Large}
-                        iconRotation={iconItem.iconRotation}
+                          iconRotation={iconItem.iconRotation}
-                        onClick={iconItem.onClick}
+                          onClick={iconItem.onClick}
-                        theme={props.theme}
+                          theme={props.theme}
-                      />
+                        />
-                    );
+                      );
-                  })
+                    })
                   : null}
               </div>
             </div>
-            : null}
+          ) : null}
 
           <div className="session-modal__body">
             <div className="session-modal__centered">
               {props.children}
               <div className="session-modal__button-group">
-
                 {onConfirm ? (
                   <SessionButton onClick={props.onConfirm}>
                     {confirmText || window.i18n('ok')}
                   </SessionButton>
                 ) : null}
 
-
                 {onClose && showClose ? (
                   <SessionButton onClick={props.onClose}>
                     {cancelText || window.i18n('close')}
                   </SessionButton>
                 ) : null}
-
               </div>
             </div>
           </div>

ts/components/session/conversation/SessionMessagesList.tsx

@@ -346,7 +346,7 @@ export class SessionMessagesList extends React.Component<Props, State> {
       };
     }
 
-    messageProps.updateSessionConversationModal = this.props.updateSessionConversationModal
+    messageProps.updateSessionConversationModal = this.props.updateSessionConversationModal;
 
     return <Message {...messageProps} key={messageProps.id} />;
   }

ts/components/session/conversation/SessionRightPanel.tsx

@@ -246,10 +246,10 @@ class SessionRightPanel extends React.Component<Props, State> {
     const leaveGroupString = isPublic
       ? window.i18n('leaveGroup')
       : isKickedFromGroup
-        ? window.i18n('youGotKickedFromGroup')
+      ? window.i18n('youGotKickedFromGroup')
-        : left
+      : left
-          ? window.i18n('youLeftTheGroup')
+      ? window.i18n('youLeftTheGroup')
-          : window.i18n('leaveGroup');
+      : window.i18n('leaveGroup');
 
     const disappearingMessagesOptions = timerOptions.map(option => {
       return {

ts/components/session/settings/SessionSettingListItem.tsx

@@ -21,7 +21,7 @@ interface Props {
   confirmationDialogParams?: SessionConfirmDialogProps;
 
   // for updating modal in redux
-  updateConfirmModal?: any
+  updateConfirmModal?: any;
 }
 
 interface State {

ts/components/session/settings/SessionSettings.tsx

@@ -11,7 +11,7 @@ import { ConversationController } from '../../../session/conversations';
 import { getConversationLookup } from '../../../state/selectors/conversations';
 import { connect } from 'react-redux';
 import { getPasswordHash } from '../../../../ts/data/data';
-import { SpacerLG } from '../../basic/Text';
+import { SpacerLG, SpacerXS } from '../../basic/Text';
 import { shell } from 'electron';
 import { PasswordAction, SessionPasswordModal } from '../SessionPasswordModal';
 import { SessionConfirmDialogProps } from '../SessionConfirm';
@@ -173,8 +173,7 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
           <h3>{window.i18n('password')}</h3>
           <input type="password" id="password-lock-input" defaultValue="" placeholder="Password" />
 
-          <div className="spacer-xs" />
+          <SpacerXS />
-
           {this.state.pwdLockError && (
             <>
               <div className="session-label warning">{this.state.pwdLockError}</div>

ts/state/actions.ts

@@ -5,7 +5,7 @@ import { actions as conversations } from './ducks/conversations';
 import { actions as user } from './ducks/user';
 import { actions as sections } from './ducks/section';
 import { actions as theme } from './ducks/theme';
-import { actions as modalDialog } from  './ducks/modalDialog';
+import { actions as modalDialog } from './ducks/modalDialog';
 
 export function mapDispatchToProps(dispatch: Dispatch): Object {
   return {
@@ -16,7 +16,7 @@ export function mapDispatchToProps(dispatch: Dispatch): Object {
         ...user,
         ...theme,
         ...sections,
-        ...modalDialog
+        ...modalDialog,
       },
       dispatch
     ),

ts/state/ducks/modalDialog.tsx

@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { SessionConfirmDialogProps  } from '../../components/session/SessionConfirm';
+import { SessionConfirmDialogProps } from '../../components/session/SessionConfirm';
 
 export type ConfirmModalState = SessionConfirmDialogProps | null;
 
@@ -12,10 +12,10 @@ const confirmModalSlice = createSlice({
     updateConfirmModal(state, action: PayloadAction<ConfirmModalState | null>) {
       state = action.payload;
       return action.payload;
-    }
+    },
-  }
+  },
-})
+});
 
 export const { actions, reducer } = confirmModalSlice;
 export const { updateConfirmModal } = actions;
-export const confirmModalReducer = reducer;
+export const confirmModalReducer = reducer;

ts/state/smart/SessionConversation.tsx

@@ -17,7 +17,9 @@ const mapStateToProps = (state: StateType) => {
     theme: getTheme(state),
     messages: getMessagesOfSelectedConversation(state),
     ourNumber: getOurNumber(state),
-    confirmModal: (state: StateType) => {state.confirmModal}
+    confirmModal: (state: StateType) => {
+      state.confirmModal;
+    },
   };
 };
 

ts/util/attachmentsUtil.ts

@@ -116,8 +116,7 @@ export type AttachmentFileType = {
   attachment: any;
   data: ArrayBuffer;
   size: number;
-}
+};
-
 
 // export async function readFile(attachment: any): Promise<object> {
 export async function readFile(attachment: any): Promise<AttachmentFileType> {