chore: cosmetic changes for usersettingsmodal

Author: Bilb

ts/components/basic/SessionToggle.tsx

@@ -52,7 +52,7 @@ export const SessionToggle = ({
 }: {
   active: boolean;
   /**
-   * in undefined, the toggle won't be clickable and disabled
+   * if `onClick` is undefined, the toggle won't be clickable and disabled
    */
   onClick?: () => void;
   dataTestId?: SessionDataTestId;

ts/components/dialog/EnterPasswordModal.tsx

@@ -73,7 +73,7 @@ export const EnterPasswordModal = (props: EnterPasswordModalProps) => {
       buttonChildren={
         <ModalActionsContainer buttonType={SessionButtonType.Simple}>
           <SessionButton
-            text={tr('done')}
+            text={tr('enter')}
             buttonType={SessionButtonType.Simple}
             onClick={verifyPassword}
             dataTestId="session-confirm-ok-button"

ts/components/dialog/user-settings/pages/AppearanceSettingsPage.tsx

@@ -252,7 +252,11 @@ async function setZoomFactor(value: number, forceUpdate: () => void) {
 
 const zoomFactorMenuId = 'zoom-factor-menu';
 
-const zoomFactorValues = range(ZOOM_FACTOR.MIN, ZOOM_FACTOR.MAX, ZOOM_FACTOR.STEP);
+const zoomFactorValues = range(
+  ZOOM_FACTOR.MIN,
+  ZOOM_FACTOR.MAX + ZOOM_FACTOR.STEP, // just so the upper end is an option
+  ZOOM_FACTOR.STEP
+);
 
 const ZoomFactorMenuPicker = ({
   forceUpdate,
@@ -314,7 +318,7 @@ const ZoomFactorMenuPicker = ({
 function ZoomFactorPicker({ forceUpdate }: { forceUpdate: () => void }) {
   const baseDataTestId = 'zoom-factor';
   useInterval(() => {
-    // the shortcut can change this value. So let's make this refresh every second when displayed
+    // the keyboard shortcuts can change this value. So let's make this refresh often when visible
     forceUpdate();
   }, 500);
 

ts/components/dialog/user-settings/pages/DefaultSettingsPage.tsx

@@ -407,7 +407,11 @@ export const DefaultSettingPage = () => {
                 onClick={copyAccountIdToClipboard}
               />
             }
-            style={{ color: 'var(--text-primary-color)' }}
+            style={{
+              color: 'var(--text-primary-color)',
+              fontSize: 'var(--font-size-h8)',
+              lineHeight: 1.1,
+            }}
             onClick={copyAccountIdToClipboard}
           />
 

ts/components/dialog/user-settings/pages/EditPasswordSettingsPage.tsx

@@ -38,7 +38,7 @@ function StrengthCriteria(opts: { isMet: boolean } & WithTrArgs) {
   const criteriaMetColor = theme.includes('classic') ? 'var(--green-color)' : 'var(--blue-color)';
   return (
     <Flex $container={true} $alignItems="flex-start" $flexGap="var(--margins-xs)">
-      <Localizer {...opts.tr} />
+      <Localizer {...opts.trArgs} />
       <LucideIcon
         iconColor={opts.isMet ? criteriaMetColor : 'var(--danger-color)'}
         unicode={opts.isMet ? LUCIDE_ICONS_UNICODE.CIRCLE_CHECK : LUCIDE_ICONS_UNICODE.CIRCLE_X}
@@ -365,20 +365,23 @@ export function EditPasswordSettingsPage(modalState: {
             >
               <StrengthCriteria
                 isMet={hasLengthStrength}
-                tr={{ token: 'passwordStrengthCharLength' }}
+                trArgs={{ token: 'passwordStrengthCharLength' }}
+              />
+              <StrengthCriteria
+                isMet={hasNumber}
+                trArgs={{ token: 'passwordStrengthIncludeNumber' }}
               />
-              <StrengthCriteria isMet={hasNumber} tr={{ token: 'passwordStrengthIncludeNumber' }} />
               <StrengthCriteria
                 isMet={hasLetter}
-                tr={{ token: 'passwordStrengthIncludesLetter' }}
+                trArgs={{ token: 'passwordStrengthIncludesLetter' }}
               />
               <StrengthCriteria
                 isMet={hasUppercase}
-                tr={{ token: 'passwordStrengthIncludesUppercase' }}
+                trArgs={{ token: 'passwordStrengthIncludesUppercase' }}
               />
               <StrengthCriteria
                 isMet={hasLowercase}
-                tr={{ token: 'passwordStrengthIncludesLowercase' }}
+                trArgs={{ token: 'passwordStrengthIncludesLowercase' }}
               />
             </Flex>
           </PanelButtonGroup>

ts/components/leftpane/ActionsPanel.tsx

@@ -61,6 +61,7 @@ import { themesArray } from '../../themes/constants/colors';
 import { isDebugMode } from '../../shared/env_vars';
 import { GearAvatarButton } from '../buttons/avatar/GearAvatarButton';
 import { useZoomShortcuts } from '../../hooks/useZoomingShortcut';
+import { assertUnreachable } from '../../types/sqlSharedTypes';
 
 const StyledContainerAvatar = styled.div`
   padding: var(--margins-lg);
@@ -107,9 +108,7 @@ const Section = (props: { type: SectionType }) => {
       dispatch(userSettingsModal({ userSettingsPage: 'default' }));
       return;
     }
-    // message section
-    dispatch(searchActions.clearSearch());
-    dispatch(sectionActions.resetLeftOverlayMode());
+    assertUnreachable(type, `handleClick: unhandled case "${type}"`);
   };
 
   useHotkey('Escape', () => {

ts/hooks/useZoomingShortcut.ts

@@ -1,24 +1,24 @@
 import useKey from 'react-use/lib/useKey';
 import { ZOOM_FACTOR } from '../session/constants';
 
-export function useZoomShortcuts() {
-  const changeZoom = async (
-    change: { typeOfChange: 'delta'; delta: number } | { typeOfChange: 'reset' }
-  ) => {
-    let value: number = await window.getSettingValue('zoom-factor-setting');
-    if (typeof value !== 'number') {
-      value = ZOOM_FACTOR.DEFAULT;
-    }
-    if (change.typeOfChange === 'reset') {
-      await window.setSettingValue('zoom-factor-setting', value);
-      window.updateZoomFactor();
-      return;
-    }
-    value = Math.min(Math.max(value + change.delta, ZOOM_FACTOR.MIN), ZOOM_FACTOR.MAX);
+const changeZoom = async (
+  change: { typeOfChange: 'delta'; delta: number } | { typeOfChange: 'reset' }
+) => {
+  let value: number = await window.getSettingValue('zoom-factor-setting');
+  if (typeof value !== 'number') {
+    value = ZOOM_FACTOR.DEFAULT;
+  }
+  if (change.typeOfChange === 'reset') {
     await window.setSettingValue('zoom-factor-setting', value);
     window.updateZoomFactor();
-  };
+    return;
+  }
+  value = Math.min(Math.max(value + change.delta, ZOOM_FACTOR.MIN), ZOOM_FACTOR.MAX);
+  await window.setSettingValue('zoom-factor-setting', value);
+  window.updateZoomFactor();
+};
 
+export function useZoomShortcuts() {
   useKey(
     event => (event.ctrlKey || event.metaKey) && (event.key === '+' || event.key === '='),
     event => {

ts/localization/localeTools.ts

@@ -137,7 +137,7 @@ export type GetMessageArgs<T extends MergedLocalizerTokens> = T extends MergedLo
 
 export type TrArgs = GetMessageArgs<MergedLocalizerTokens>;
 
-export type WithTrArgs = { tr: TrArgs };
+export type WithTrArgs = { trArgs: TrArgs };
 
 export function tStrippedWithObj<T extends MergedLocalizerTokens>(opts: GetMessageArgs<T>): string {
   const builder = new LocalizedStringBuilder<T>(opts.token as T, localeInUse).stripIt();

ts/state/ducks/modalDialog.tsx

@@ -135,7 +135,7 @@ export const initialModalState: ModalState = {
   groupMembersModal: null,
   userProfileModal: null,
   nickNameModal: null,
-  userSettingsModal: { userSettingsPage: 'privacy' },
+  userSettingsModal: null,
   onionPathModal: null,
   enterPasswordModal: null,
   deleteAccountModal: null,