Merge branch 'change-to-new-spacings-in-all-settings-views-under-vpn-…

…des-1456'
mullvad · Dec 4, 2024 · 62cba60 · 62cba60
2 parents 40f2934 + 02c46a2
commit 62cba60
Show file tree

Hide file tree

Showing 37 changed files with 654 additions and 327 deletions.
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx
@@ -3,8 +3,9 @@ import styled from 'styled-components';
 
 import { useHistory } from '../lib/history';
 import { useBoolean } from '../lib/utility-hooks';
+import { Spacings } from '../tokens';
 import * as AppButton from './AppButton';
-import { measurements, spacings } from './common-styles';
+import { measurements } from './common-styles';
 import { BackAction } from './KeyboardNavigation';
 import { Layout, SettingsContainer } from './Layout';
 import {
@@ -24,7 +25,7 @@ const StyledContent = styled.div({
 });
 
 const StyledButtonGroup = styled.div({
-  margin: `${spacings.spacing6} ${measurements.horizontalViewMargin}`,
+  margin: `${Spacings.spacing6} ${measurements.horizontalViewMargin}`,
 });
 
 export default function Debug() {

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx
@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
-import { measurements, spacings } from './common-styles';
+import { Colors, Spacings } from '../tokens';
+import { Flex } from './common/layout/Flex';
+import { measurements } from './common-styles';
 import HeaderBar from './HeaderBar';
 import { NavigationScrollbars } from './NavigationBar';
 
@@ -13,7 +14,7 @@ export const Container = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 1,
-  backgroundColor: colors.blue,
+  backgroundColor: Colors.blue,
   overflow: 'hidden',
 });
 
@@ -25,7 +26,7 @@ export const Layout = styled.div({
 });
 
 export const SettingsContainer = styled(Container)({
-  backgroundColor: colors.darkBlue,
+  backgroundColor: Colors.darkBlue,
 });
 
 export const SettingsNavigationScrollbars = styled(NavigationScrollbars)({
@@ -40,32 +41,39 @@ export const SettingsContent = styled.div({
   marginBottom: measurements.verticalViewMargin,
 });
 
-export const SettingsStack = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: spacings.spacing5,
-});
-
 export const Footer = styled.div({
   display: 'flex',
   flexDirection: 'column',
   flex: 0,
-  padding: `${spacings.spacing6} ${measurements.horizontalViewMargin} ${measurements.verticalViewMargin}`,
+  padding: `${Spacings.spacing6} ${measurements.horizontalViewMargin} ${measurements.verticalViewMargin}`,
   [`${SettingsContent} &&`]: {
     paddingBottom: 0,
   },
 });
 
-export const Spacing = styled.div<{ height: string }>((props) => ({
-  height: props.height,
-}));
+export const SettingsStack = styled(Flex).attrs({
+  $flexDirection: 'column',
+  $gap: Spacings.spacing5,
+})({});
 
-export const ButtonStack = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: spacings.spacing5,
-  margin: `0 ${spacings.spacing6}`,
+export const SettingsGroup = styled(Flex).attrs({
+  $flex: 1,
+  $flexDirection: 'column',
+})({});
+
+export const ButtonStack = styled(Flex).attrs(() => ({
+  $flexDirection: 'column',
+  $gap: Spacings.spacing5,
+  $margin: `0 ${Spacings.spacing6}`,
+}))({
   [`${Footer} &&`]: {
-    margin: `0 ${spacings.spacing3}`,
+    margin: `0 ${Spacings.spacing3}`,
   },
 });
+
+export const LabelStack = styled(Flex).attrs(() => ({
+  $flexGrow: 1,
+  $flexDirection: 'row',
+  $alignItems: 'center',
+  $gap: Spacings.spacing3,
+}))({});
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx
@@ -1,27 +1,30 @@
 import { useCallback } from 'react';
 
-import { colors, strings } from '../../config.json';
+import { strings } from '../../config.json';
 import { messages } from '../../shared/gettext';
 import { getDownloadUrl } from '../../shared/version';
 import { useAppContext } from '../context';
 import { useHistory } from '../lib/history';
 import { RoutePath } from '../lib/routes';
 import { useSelector } from '../redux/store';
+import { Colors } from '../tokens';
 import { RedButton } from './AppButton';
 import * as Cell from './cell';
+import { TitleBig } from './common/text';
 import { BackAction } from './KeyboardNavigation';
 import {
   ButtonStack,
   Footer,
+  LabelStack,
   Layout,
   SettingsContainer,
   SettingsContent,
+  SettingsGroup,
   SettingsNavigationScrollbars,
   SettingsStack,
 } from './Layout';
 import { NavigationBar, NavigationContainer, NavigationItems, TitleBarItem } from './NavigationBar';
-import SettingsHeader, { HeaderTitle } from './SettingsHeader';
-import { StyledCellIcon } from './SettingsStyles';
+import SettingsHeader from './SettingsHeader';
 
 export default function Support() {
   const history = useHistory();
@@ -52,44 +55,44 @@ export default function Support() {
             <SettingsNavigationScrollbars fillContainer>
               <SettingsContent>
                 <SettingsHeader>
-                  <HeaderTitle>{messages.pgettext('navigation-bar', 'Settings')}</HeaderTitle>
+                  <TitleBig>{messages.pgettext('navigation-bar', 'Settings')}</TitleBig>
                 </SettingsHeader>
 
                 <SettingsStack>
                   {showSubSettings ? (
                     <>
-                      <Cell.Group $noMarginBottom>
+                      <SettingsGroup>
                         <UserInterfaceSettingsButton />
                         <MultihopButton />
                         <DaitaButton />
                         <VpnSettingsButton />
-                      </Cell.Group>
+                      </SettingsGroup>
 
                       {showSplitTunneling && (
-                        <Cell.Group $noMarginBottom>
+                        <SettingsGroup>
                           <SplitTunnelingButton />
-                        </Cell.Group>
+                        </SettingsGroup>
                       )}
                     </>
                   ) : (
-                    <Cell.Group $noMarginBottom>
+                    <SettingsGroup>
                       <UserInterfaceSettingsButton />
-                    </Cell.Group>
+                    </SettingsGroup>
                   )}
 
-                  <Cell.Group $noMarginBottom>
+                  <SettingsGroup>
                     <ApiAccessMethodsButton />
-                  </Cell.Group>
+                  </SettingsGroup>
 
-                  <Cell.Group $noMarginBottom>
+                  <SettingsGroup>
                     <SupportButton />
                     <AppVersionButton />
-                  </Cell.Group>
+                  </SettingsGroup>
 
                   {window.env.development && (
-                    <Cell.Group $noMarginBottom>
+                    <SettingsGroup>
                       <DebugButton />
-                    </Cell.Group>
+                    </SettingsGroup>
                   )}
                 </SettingsStack>
                 <Footer>
@@ -229,7 +232,7 @@ function AppVersionButton() {
 
     const message = !consistentVersion ? inconsistentVersionMessage : updateAvailableMessage;
 
-    alertIcon = <StyledCellIcon source="icon-alert" width={18} tintColor={colors.red} />;
+    alertIcon = <Cell.UntintedIcon source="icon-alert" width={18} tintColor={Colors.red} />;
     footer = (
       <Cell.CellFooter>
         <Cell.CellFooterText>{message}</Cell.CellFooterText>
@@ -246,8 +249,10 @@ function AppVersionButton() {
           source: 'icon-extLink',
           'aria-label': messages.pgettext('accessibility', 'Opens externally'),
         }}>
-        {alertIcon}
-        <Cell.Label>{messages.pgettext('settings-view', 'App version')}</Cell.Label>
+        <LabelStack>
+          {alertIcon}
+          <Cell.Label>{messages.pgettext('settings-view', 'App version')}</Cell.Label>
+        </LabelStack>
         <Cell.SubText>{appVersion}</Cell.SubText>
       </Cell.CellNavigationButton>
       {footer}

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../../config.json';
-import { hugeText, spacings, tinyText } from './common-styles';
+import { Colors, Spacings } from '../tokens';
+import { LabelTiny, TitleBig } from './common/text';
 
 export const Container = styled.div({
   flex: 0,
-  margin: `${spacings.spacing3} ${spacings.spacing5} ${spacings.spacing4}`,
+  margin: `${Spacings.spacing3} ${Spacings.spacing5} ${Spacings.spacing4}`,
 });
 
 export const ContentWrapper = styled.div({
@@ -15,13 +15,14 @@ export const ContentWrapper = styled.div({
   },
 });
 
-export const HeaderTitle = styled.span(hugeText, {
+export const HeaderTitle = styled(TitleBig)({
   wordWrap: 'break-word',
   hyphens: 'auto',
 });
-export const HeaderSubTitle = styled.span(tinyText, {
-  color: colors.white60,
-});
+
+export const HeaderSubTitle = styled(LabelTiny).attrs({
+  $color: Colors.white60,
+})({});
 
 interface ISettingsHeaderProps {
   children?: React.ReactNode;

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx
@@ -12,8 +12,8 @@ import { RoutePath } from '../lib/routes';
 import { useBoolean, useEffectEvent } from '../lib/utility-hooks';
 import settingsImportActions from '../redux/settings-import/actions';
 import { useSelector } from '../redux/store';
-import { measurements, normalText } from './common-styles';
-import { tinyText } from './common-styles';
+import { Flex } from './common/layout/Flex';
+import { measurements, normalText, tinyText } from './common-styles';
 import ImageView from './ImageView';
 import { BackAction } from './KeyboardNavigation';
 import { Footer, Layout, SettingsContainer } from './Layout';
@@ -25,20 +25,7 @@ import {
   TitleBarItem,
 } from './NavigationBar';
 import SettingsHeader, { HeaderSubTitle, HeaderTitle } from './SettingsHeader';
-import { SmallButton, SmallButtonGrid } from './SmallButton';
-import { SmallButtonColor } from './SmallButton';
-
-const ContentContainer = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-});
-
-const Content = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flex: 1,
-});
+import { SmallButton, SmallButtonColor, SmallButtonGrid } from './SmallButton';
 
 const StyledSmallButtonGrid = styled(SmallButtonGrid)({
   margin: `0 ${measurements.horizontalViewMargin}`,
@@ -157,8 +144,7 @@ export default function SettingsImport() {
               />
             </NavigationItems>
           </NavigationBar>
-
-          <ContentContainer>
+          <Flex $flexDirection="column" $flex={1}>
             <SettingsHeader>
               <HeaderTitle>
                 {messages.pgettext('settings-import', 'Server IP override')}
@@ -171,7 +157,7 @@ export default function SettingsImport() {
               </HeaderSubTitle>
             </SettingsHeader>
 
-            <Content>
+            <Flex $flexDirection="column" $flex={1}>
               <StyledSmallButtonGrid>
                 <SmallButton onClick={navigateTextImport}>
                   {messages.pgettext('settings-import', 'Import via text')}
@@ -182,7 +168,7 @@ export default function SettingsImport() {
               </StyledSmallButtonGrid>
 
               <SettingsImportStatus status={importStatus} />
-            </Content>
+            </Flex>
 
             <Footer>
               <SmallButton
@@ -211,7 +197,7 @@ export default function SettingsImport() {
                 'Clearing the imported overrides changes the server IPs, in the Select location view, back to default.',
               )}
             />
-          </ContentContainer>
+          </Flex>
         </SettingsContainer>
       </Layout>
     </BackAction>

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsStyles.tsx