diff options
63 files changed, 112 insertions, 73 deletions
diff --git a/desktop/packages/mullvad-vpn/src/renderer/app.tsx b/desktop/packages/mullvad-vpn/src/renderer/app.tsx index 67e7a4db33..90af0cf22f 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/app.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/app.tsx @@ -39,13 +39,13 @@ import log, { ConsoleOutput } from '../shared/logging'; import { LogLevel } from '../shared/logging-types'; import { Scheduler } from '../shared/scheduler'; import AppRouter from './components/AppRouter'; -import { VariablesGlobalStyle } from './components/common/variables'; import ErrorBoundary from './components/ErrorBoundary'; import KeyboardNavigation from './components/KeyboardNavigation'; import Lang from './components/Lang'; import MacOsScrollbarDetection from './components/MacOsScrollbarDetection'; import { ModalContainer } from './components/Modal'; import { AppContext } from './context'; +import { Theme } from './lib/components'; import History, { ITransitionSpecification, transitions } from './lib/history'; import { loadTranslations } from './lib/load-translations'; import IpcOutput from './lib/logging'; @@ -296,9 +296,9 @@ export default class AppRenderer { <ErrorBoundary> <ModalContainer> <KeyboardNavigation> - <VariablesGlobalStyle> + <Theme> <AppRouter /> - </VariablesGlobalStyle> + </Theme> </KeyboardNavigation> {window.env.platform === 'darwin' && <MacOsScrollbarDetection />} </ModalContainer> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx index f1e5a5e5ae..af194e5ea8 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/ApiAccessMethods.tsx @@ -7,14 +7,14 @@ import { AccessMethodSetting } from '../../shared/daemon-rpc-types'; import { messages } from '../../shared/gettext'; import { useAppContext } from '../context'; import { useApiAccessMethodTest } from '../lib/api-access-methods'; +import { Flex } from '../lib/components'; +import { Spacings } from '../lib/foundations'; import { useHistory } from '../lib/history'; import { generateRoutePath } from '../lib/routeHelpers'; import { RoutePath } from '../lib/routes'; import { useBoolean } from '../lib/utility-hooks'; import { useSelector } from '../redux/store'; import * as Cell from './cell'; -import { Flex } from './common/layout'; -import { Spacings } from './common/variables'; import { ContextMenu, ContextMenuContainer, diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx index b3a88688e0..264b389f84 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/DaitaSettings.tsx @@ -5,13 +5,13 @@ import styled from 'styled-components'; import { strings } from '../../config.json'; import { messages } from '../../shared/gettext'; import { useAppContext } from '../context'; +import { Flex } from '../lib/components'; +import { Spacings } from '../lib/foundations'; import { useHistory } from '../lib/history'; import { useBoolean } from '../lib/utility-hooks'; import { useSelector } from '../redux/store'; import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup'; import * as Cell from './cell'; -import { Flex } from './common/layout'; -import { Spacings } from './common/variables'; import InfoButton from './InfoButton'; import { BackAction } from './KeyboardNavigation'; import { Layout, SettingsContainer } from './Layout'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx index a1aa849b50..fee86b00cc 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Debug.tsx @@ -1,10 +1,10 @@ import { useCallback } from 'react'; import styled from 'styled-components'; +import { Spacings } from '../lib/foundations'; import { useHistory } from '../lib/history'; import { useBoolean } from '../lib/utility-hooks'; import * as AppButton from './AppButton'; -import { Spacings } from './common/variables'; import { measurements } from './common-styles'; import { BackAction } from './KeyboardNavigation'; import { Layout, SettingsContainer } from './Layout'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx index 6145d902ce..62babaac38 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Layout.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; -import { Flex } from './common/layout'; -import { Colors, Spacings } from './common/variables'; +import { Flex } from '../lib/components'; +import { Colors, Spacings } from '../lib/foundations'; import { measurements } from './common-styles'; import HeaderBar from './HeaderBar'; import { NavigationScrollbars } from './NavigationBar'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx index ef002c023d..c4e6293f10 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/MultiButton.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; -import { ButtonProps } from './common/molecules'; +import { ButtonProps } from '../lib/components'; const ButtonRow = styled.div({ display: 'flex', diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx index 68e2451b41..e7e16b395a 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/MultihopSettings.tsx @@ -4,12 +4,12 @@ import { sprintf } from 'sprintf-js'; import { strings } from '../../config.json'; import { messages } from '../../shared/gettext'; import log from '../../shared/logging'; +import { Flex } from '../lib/components'; import { useRelaySettingsUpdater } from '../lib/constraint-updater'; import { useHistory } from '../lib/history'; import { useSelector } from '../redux/store'; import { AriaDescription, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup'; import * as Cell from './cell'; -import { Flex } from './common/layout'; import { StyledIllustration } from './DaitaSettings'; import { BackAction } from './KeyboardNavigation'; import { Layout, SettingsContainer } from './Layout'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx index a63754a691..ab9965250a 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationArea.tsx @@ -17,6 +17,8 @@ import { } from '../../shared/notifications'; import { useAppContext } from '../context'; import useActions from '../lib/actionsHook'; +import { Link } from '../lib/components'; +import { Colors } from '../lib/foundations'; import { transitions, useHistory } from '../lib/history'; import { formatHtml } from '../lib/html-formatter'; import { @@ -27,8 +29,6 @@ import { RoutePath } from '../lib/routes'; import accountActions from '../redux/account/actions'; import { IReduxState, useSelector } from '../redux/store'; import * as AppButton from './AppButton'; -import { Link } from './common/text'; -import { Colors } from './common/variables'; import { ModalAlert, ModalAlertType, ModalMessage, ModalMessageList } from './Modal'; import { NotificationActions, diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx index 12f9fbef6e..bdc81af686 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx @@ -4,9 +4,9 @@ import styled from 'styled-components'; import { colors } from '../../config.json'; import { messages } from '../../shared/gettext'; import { InAppNotificationIndicatorType } from '../../shared/notifications/notification'; +import { IconButton } from '../lib/components'; import { useEffectEvent, useLastDefinedValue, useStyledRef } from '../lib/utility-hooks'; import * as AppButton from './AppButton'; -import { IconButton } from './common/molecules'; import { tinyText } from './common-styles'; import ImageView from './ImageView'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx index 2294d74a7d..f2c4c2760a 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/Settings.tsx @@ -3,12 +3,11 @@ import { useCallback } from 'react'; import { strings } from '../../config.json'; import { messages } from '../../shared/gettext'; import { useAppContext } from '../context'; +import { Button, TitleBig } from '../lib/components'; import { useHistory } from '../lib/history'; import { RoutePath } from '../lib/routes'; import { useSelector } from '../redux/store'; import * as Cell from './cell'; -import { Button } from './common/molecules'; -import { TitleBig } from './common/text'; import { BackAction } from './KeyboardNavigation'; import { ButtonStack, diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx index adb8357ac8..8aa8686cb6 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsHeader.tsx @@ -1,9 +1,8 @@ import * as React from 'react'; import styled from 'styled-components'; -import { Flex } from './common/layout'; -import { LabelTiny, TitleBig } from './common/text'; -import { Colors, Spacings } from './common/variables'; +import { Flex, LabelTiny, TitleBig } from '../lib/components'; +import { Colors, Spacings } from '../lib/foundations'; export const HeaderTitle = styled(TitleBig)({ wordWrap: 'break-word', diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx index 8da1f41e87..8b7169ab06 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsImport.tsx @@ -7,12 +7,12 @@ import { messages } from '../../shared/gettext'; import { useScheduler } from '../../shared/scheduler'; import { useAppContext } from '../context'; import useActions from '../lib/actionsHook'; +import { Flex } from '../lib/components'; import { transitions, useHistory } from '../lib/history'; 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 { Flex } from './common/layout/Flex'; import { measurements, normalText, tinyText } from './common-styles'; import ImageView from './ImageView'; import { BackAction } from './KeyboardNavigation'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx index 97254d5e3f..4070b7dba5 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettings.tsx @@ -10,6 +10,8 @@ import { } from '../../shared/application-types'; import { messages } from '../../shared/gettext'; import { useAppContext } from '../context'; +import { Flex, FootnoteMini } from '../lib/components'; +import { Colors, Spacings } from '../lib/foundations'; import { useHistory } from '../lib/history'; import { formatHtml } from '../lib/html-formatter'; import { useEffectEvent, useStyledRef } from '../lib/utility-hooks'; @@ -17,9 +19,6 @@ import { IReduxState } from '../redux/store'; import Accordion from './Accordion'; import * as AppButton from './AppButton'; import * as Cell from './cell'; -import { Flex } from './common/layout/Flex'; -import { FootnoteMini } from './common/text/FootnoteMini'; -import { Colors, Spacings } from './common/variables'; import { CustomScrollbarsRef } from './CustomScrollbars'; import ImageView from './ImageView'; import { BackAction } from './KeyboardNavigation'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx index 5423c8a212..0d6fba2591 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SplitTunnelingSettingsStyles.tsx @@ -1,9 +1,9 @@ import styled from 'styled-components'; import { colors } from '../../config.json'; +import { Spacings } from '../lib/foundations'; import * as AppButton from './AppButton'; import * as Cell from './cell'; -import { Spacings } from './common/variables'; import { measurements, normalText } from './common-styles'; import ImageView from './ImageView'; import { NavigationScrollbars } from './NavigationBar'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx index 7c58f43ab0..5754ebce72 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/VpnSettings.tsx @@ -8,6 +8,7 @@ import { messages } from '../../shared/gettext'; import log from '../../shared/logging'; import { useAppContext } from '../context'; import { useRelaySettingsUpdater } from '../lib/constraint-updater'; +import { Colors, Spacings } from '../lib/foundations'; import { useHistory } from '../lib/history'; import { formatHtml } from '../lib/html-formatter'; import { useTunnelProtocol } from '../lib/relay-settings-hooks'; @@ -19,7 +20,6 @@ import * as AppButton from './AppButton'; import { AriaDescription, AriaDetails, AriaInput, AriaInputGroup, AriaLabel } from './AriaGroup'; import * as Cell from './cell'; import Selector, { SelectorItem } from './cell/Selector'; -import { Colors, Spacings } from './common/variables'; import CustomDnsSettings from './CustomDnsSettings'; import InfoButton, { InfoIcon } from './InfoButton'; import { BackAction } from './KeyboardNavigation'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx index 8f0336c13c..181b874251 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/CellButton.tsx @@ -1,8 +1,8 @@ import React, { useContext } from 'react'; import styled from 'styled-components'; -import { Center } from '../common/layout'; -import { Colors, Spacings } from '../common/variables'; +import { Center } from '../../lib/components'; +import { Colors, Spacings } from '../../lib/foundations'; import { IImageViewProps } from '../ImageView'; import { CellDisabledContext } from './Container'; import { Icon } from './Label'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx index 551b5d7c20..9394acf7f0 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Container.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; -import { Spacings } from '../common/variables'; +import { Spacings } from '../../lib/foundations'; import { Row } from './Row'; const StyledContainer = styled(Row)({ diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx index 058c96db82..cd575dc9a0 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Footer.tsx @@ -1,7 +1,7 @@ import styled from 'styled-components'; -import { LabelTiny } from '../common/text'; -import { Colors, Spacings } from '../common/variables'; +import { LabelTiny } from '../../lib/components'; +import { Colors, Spacings } from '../../lib/foundations'; export const CellFooter = styled.div({ margin: `${Spacings.spacing1} ${Spacings.spacing6} 0px`, diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx index 5bce2c71af..8b5cacb82d 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Label.tsx @@ -1,7 +1,7 @@ import React, { useContext } from 'react'; import styled from 'styled-components'; -import { Colors, Spacings } from '../common/variables'; +import { Colors, Spacings } from '../../lib/foundations'; import { buttonText, normalText, tinyText } from '../common-styles'; import ImageView, { IImageViewProps } from '../ImageView'; import { CellButton } from './CellButton'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx index 002b3ac478..c73b106b88 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/cell/Section.tsx @@ -2,11 +2,11 @@ import React, { useEffect } from 'react'; import styled from 'styled-components'; import { useAppContext } from '../../context'; +import { Colors, Spacings } from '../../lib/foundations'; import { useHistory } from '../../lib/history'; import { useBoolean, useEffectEvent } from '../../lib/utility-hooks'; import Accordion from '../Accordion'; import ChevronButton from '../ChevronButton'; -import { Colors, Spacings } from '../common/variables'; import { buttonText, openSans, sourceSansPro } from '../common-styles'; import { Container } from './Container'; import { Row } from './Row'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts index 51ddba958f..89692c79f6 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common-styles.ts @@ -1,6 +1,6 @@ import React from 'react'; -import { Colors, Spacings } from './common/variables'; +import { Colors, Spacings } from '../lib/foundations'; export const openSans: React.CSSProperties = { fontFamily: 'Open Sans', diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Container.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Container.tsx index 79e8ed316a..565c6bcd04 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Container.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Container.tsx @@ -1,8 +1,8 @@ import React from 'react'; import styled from 'styled-components'; -import { Spacings } from '../variables'; -import { Flex, FlexProps } from './Flex'; +import { Flex, FlexProps } from '../../../lib/components'; +import { Spacings } from '../../../lib/foundations'; export interface ContainerProps extends FlexProps { size?: '3' | '4'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx index a0126bcd1d..63eb062f1b 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/ConnectionActionButton.tsx @@ -3,8 +3,8 @@ import { useCallback } from 'react'; import { messages } from '../../../shared/gettext'; import log from '../../../shared/logging'; import { useAppContext } from '../../context'; +import { Button } from '../../lib/components'; import { useSelector } from '../../redux/store'; -import { Button } from '../common/molecules'; export default function ConnectionActionButton() { const tunnelState = useSelector((state) => state.connection.status.state); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx index 7a6ab7d968..07ad034e98 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/main-view/SelectLocationButton.tsx @@ -5,11 +5,11 @@ import { ICustomList } from '../../../shared/daemon-rpc-types'; import { messages, relayLocations } from '../../../shared/gettext'; import log from '../../../shared/logging'; import { useAppContext } from '../../context'; +import { Button, ButtonProps } from '../../lib/components'; import { transitions, useHistory } from '../../lib/history'; import { RoutePath } from '../../lib/routes'; import { IRelayLocationCountryRedux, RelaySettingsRedux } from '../../redux/settings/reducers'; import { useSelector } from '../../redux/store'; -import { Button, ButtonProps } from '../common/molecules'; import ImageView from '../ImageView'; import { MultiButton } from '../MultiButton'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx index 539a7e46c3..5280ec9df7 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/app-info/components/AppVersionListItem.tsx @@ -3,9 +3,9 @@ import { useCallback } from 'react'; import { messages } from '../../../../../shared/gettext'; import { getDownloadUrl } from '../../../../../shared/version'; import { useAppContext } from '../../../../context'; +import { Colors } from '../../../../lib/foundations'; import { useSelector } from '../../../../redux/store'; import * as Cell from '../../../cell'; -import { Colors } from '../../../common/variables'; import { LabelStack } from '../../../Layout'; export function AppVersionListItem() { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx index df5453a68f..6bfe45b7a9 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/changelog/ChangelogView.tsx @@ -4,13 +4,11 @@ import styled from 'styled-components'; import { links } from '../../../../config.json'; import { messages } from '../../../../shared/gettext'; import { useAppContext } from '../../../context'; +import { BodySmall, Button, Flex, TitleBig, TitleLarge } from '../../../lib/components'; +import { Container } from '../../../lib/components'; +import { Colors, Spacings } from '../../../lib/foundations'; import { useHistory } from '../../../lib/history'; import { useSelector } from '../../../redux/store'; -import { Flex } from '../../common/layout'; -import { Container } from '../../common/layout/Container'; -import { Button } from '../../common/molecules/'; -import { BodySmall, TitleBig, TitleLarge } from '../../common/text'; -import { Colors, Spacings } from '../../common/variables'; import ImageView from '../../ImageView'; import { BackAction } from '../../KeyboardNavigation'; import { Layout, SettingsContainer } from '../../Layout'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts new file mode 100644 index 0000000000..54e8908581 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/index.ts @@ -0,0 +1,3 @@ +export * from './layout'; +export * from './typography'; +export * from './molecules'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Center.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Center.tsx index 3222bb9719..3222bb9719 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Center.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Center.tsx diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Container.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Container.tsx new file mode 100644 index 0000000000..66a76c02ec --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Container.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import styled from 'styled-components'; + +import { Spacings } from '../../foundations'; +import { Flex, FlexProps } from './Flex'; + +export interface ContainerProps extends FlexProps { + size?: '3' | '4'; + children: React.ReactNode; +} + +const sizes: Record<'3' | '4', string> = { + '3': `calc(100% - ${Spacings.spacing6} * 2)`, + '4': `calc(100% - ${Spacings.spacing5} * 2)`, +}; + +const StyledFlex = styled(Flex)<{ $size: string }>((props) => ({ + width: props.$size, + margin: 'auto', +})); + +export const Container = React.forwardRef<HTMLDivElement, ContainerProps>( + ({ size = '4', ...props }, ref) => { + return <StyledFlex ref={ref} $size={sizes[size]} {...props} />; + }, +); + +Container.displayName = 'Container'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Flex.tsx index 13a4804fa9..cba52c5f9f 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Flex.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Flex.tsx @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; -import { Spacings } from '../variables'; +import { Spacings } from '../../foundations'; import { Layout, LayoutProps } from './Layout'; export interface FlexProps extends LayoutProps { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Layout.tsx index 03e4d5371d..925dded272 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/Layout.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Layout.tsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; -import { Spacings } from '../variables'; +import { Spacings } from '../../foundations'; import { margin } from './margin'; import { padding } from './padding'; import { LayoutSpacings } from './types'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/VariablesGlobalStyle.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Theme.tsx index fbd7487dc5..5d0e86f30e 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/VariablesGlobalStyle.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/Theme.tsx @@ -1,11 +1,25 @@ import React from 'react'; import { createGlobalStyle } from 'styled-components'; -import { colors, fontFamilies, fontSizes, fontWeights, lineHeights, radius, spacings } from './'; +import { + colors, + fontFamilies, + fontSizes, + fontWeights, + lineHeights, + radius, + spacings, +} from '../../foundations/variables'; type VariablesProps = React.PropsWithChildren<object>; -const GlobalStyle = createGlobalStyle` +const Reset = createGlobalStyle` + button { + all: unset; + } +`; + +const VariablesGlobalStyle = createGlobalStyle` :root { ${Object.entries({ ...colors, @@ -19,10 +33,11 @@ const GlobalStyle = createGlobalStyle` } `; -export const VariablesGlobalStyle = ({ children }: VariablesProps) => { +export const Theme = ({ children }: VariablesProps) => { return ( <> - <GlobalStyle /> + <Reset /> + <VariablesGlobalStyle /> {children} </> ); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/index.ts index 885ab32d4b..654de0780d 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/index.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/index.ts @@ -1,3 +1,5 @@ export * from './Center'; +export * from './Container'; export * from './Flex'; export * from './Layout'; +export * from './Theme'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/margin.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/margin.ts index bcc32fcaee..266aa63e7f 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/margin.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/margin.ts @@ -1,4 +1,4 @@ -import { Spacings } from '../variables'; +import { Spacings } from '../../foundations'; import { LayoutSpacings } from './types'; export const all = (margin: Spacings) => ({ margin }); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/padding.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/padding.ts index 16c66f6e64..c806c73309 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/padding.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/padding.ts @@ -1,4 +1,4 @@ -import { Spacings } from '../variables'; +import { Spacings } from '../../foundations'; import { LayoutSpacings } from './types'; export const all = (padding: Spacings) => ({ padding }); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/types.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/types.ts index 1f6ff5407f..cd044bb1b9 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/layout/types.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/layout/types.ts @@ -1,4 +1,4 @@ -import { Spacings } from '../variables'; +import { Spacings } from '../../foundations'; export interface LayoutSpacings { all?: 'string'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/mixins/button-reset.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/mixins/button-reset.ts index 4ef5844150..4ef5844150 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/mixins/button-reset.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/mixins/button-reset.ts diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/mixins/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/mixins/index.ts index c546f737b6..c546f737b6 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/mixins/index.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/mixins/index.ts diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/Button.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/Button.tsx index ca8ff74883..bc1979dcf6 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/Button.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/Button.tsx @@ -1,10 +1,10 @@ import React, { forwardRef } from 'react'; import styled from 'styled-components'; +import { Colors, Radius, Spacings } from '../../foundations'; import { Flex } from '../layout'; import { buttonReset } from '../mixins'; -import { BodySmallSemiBold } from '../text'; -import { Colors, Radius, Spacings } from '../variables'; +import { BodySmallSemiBold } from '../typography'; export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { variant?: 'primary' | 'success' | 'destructive'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/IconButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/IconButton.tsx index 6d43fef048..1e59dd6790 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/IconButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/IconButton.tsx @@ -1,9 +1,9 @@ import React, { forwardRef } from 'react'; import styled from 'styled-components'; -import ImageView from '../../ImageView'; +import ImageView from '../../../components/ImageView'; +import { Colors } from '../../foundations'; import { buttonReset } from '../mixins'; -import { Colors } from '../variables'; export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/index.ts index 66f0cf90a7..66f0cf90a7 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/molecules/index.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/molecules/index.ts diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmall.tsx index 18ab10e202..18ab10e202 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmall.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmall.tsx diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmallSemiBold.tsx index f70a2c7b11..f70a2c7b11 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/BodySmallSemiBold.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/BodySmallSemiBold.tsx diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/FootnoteMini.tsx index 77d563e03c..77d563e03c 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/FootnoteMini.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/FootnoteMini.tsx diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx index f7a952e67e..f7a952e67e 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/LabelTiny.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/LabelTiny.tsx diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Link.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Link.tsx index e1bb272120..32d18b4861 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Link.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Link.tsx @@ -1,10 +1,10 @@ import React, { useCallback } from 'react'; import styled from 'styled-components'; -import { useHistory } from '../../../lib/history'; -import { RoutePath } from '../../../lib/routes'; +import { Colors, Radius } from '../../foundations'; +import { useHistory } from '../../history'; +import { RoutePath } from '../../routes'; import { buttonReset } from '../mixins'; -import { Colors, Radius } from '../variables'; import { Text, TextProps } from './Text'; export interface LinkProps extends TextProps, Omit<React.HtmlHTMLAttributes<'button'>, 'color'> { diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx index 33b0cdc6d9..a590fbe119 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/Text.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/Text.tsx @@ -1,8 +1,8 @@ import { forwardRef } from 'react'; import styled from 'styled-components'; -import { TransientProps } from '../../../lib/styles'; -import { Colors, Typography, typography, TypographyProperties } from '../variables'; +import { Colors, Typography, typography, TypographyProperties } from '../../foundations'; +import { TransientProps } from '../../styles'; export type TextProps = React.PropsWithChildren<{ variant?: Typography; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleBig.tsx index 4b3b1d84ef..4b3b1d84ef 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleBig.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleBig.tsx diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleLarge.tsx index c80814362e..c80814362e 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleLarge.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleLarge.tsx diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleMedium.tsx index 5e188698a4..5e188698a4 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/TitleMedium.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/TitleMedium.tsx diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/index.ts index 542c9d5642..542c9d5642 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/text/index.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/typography/index.ts diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/index.ts new file mode 100644 index 0000000000..aca74a1d15 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/index.ts @@ -0,0 +1,2 @@ +export * from './tokens'; +export * from './variables'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/color-tokens.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/color-tokens.ts index fe42f71f4e..fe42f71f4e 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/tokens/color-tokens.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/color-tokens.ts diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/index.ts index 3c59aa34fd..3c59aa34fd 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/tokens/index.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/index.ts diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/radius-tokens.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/radius-tokens.ts index 7eecb31eca..7eecb31eca 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/tokens/radius-tokens.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/radius-tokens.ts diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/spacing-tokens.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/spacing-tokens.ts index 4216dde90a..4216dde90a 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/tokens/spacing-tokens.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/spacing-tokens.ts diff --git a/desktop/packages/mullvad-vpn/src/renderer/tokens/typography-tokens.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/typography-tokens.ts index 9d42a89c9f..9d42a89c9f 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/tokens/typography-tokens.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/tokens/typography-tokens.ts diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/color-variables.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/color-variables.ts index c048456544..679951ec67 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/color-variables.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/color-variables.ts @@ -1,4 +1,4 @@ -import { ColorTokens } from '../../../tokens'; +import { ColorTokens } from '../tokens'; export const colors = { '--color-darker-blue': ColorTokens.darkBlue, diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/index.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/index.ts index 3cabd68ee7..177588fbbd 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/index.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/index.ts @@ -2,4 +2,3 @@ export * from './color-variables'; export * from './radius-variables'; export * from './typography-variables'; export * from './spacing-variables'; -export * from './VariablesGlobalStyle'; diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/radius-variables.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/radius-variables.ts index 78ea604156..8334deded7 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/radius-variables.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/radius-variables.ts @@ -1,4 +1,4 @@ -import { RadiusTokens } from '../../../tokens'; +import { RadiusTokens } from '../tokens'; export const radius = { '--radius-4': RadiusTokens.radius4, diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/spacing-variables.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/spacing-variables.ts index b6929f070d..add1d0315c 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/spacing-variables.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/spacing-variables.ts @@ -1,4 +1,4 @@ -import { SpacingTokens } from '../../../tokens'; +import { SpacingTokens } from '../tokens'; export const spacings = { '--spacing-1': SpacingTokens.spacing1, diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/typography-variables.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/typography-variables.ts index 68f6530c26..121bb2af89 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/common/variables/typography-variables.ts +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/foundations/variables/typography-variables.ts @@ -1,9 +1,4 @@ -import { - FontFamilyTokens, - FontSizeTokens, - FontWeightTokens, - LineHeightTokens, -} from '../../../tokens'; +import { FontFamilyTokens, FontSizeTokens, FontWeightTokens, LineHeightTokens } from '../tokens'; export const fontFamilies = { '--font-family-open-sans': FontFamilyTokens.openSans, diff --git a/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts b/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts index 96754811a6..921a029a06 100644 --- a/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts +++ b/desktop/packages/mullvad-vpn/src/shared/notifications/notification.ts @@ -1,4 +1,4 @@ -import { LinkProps } from '../../renderer/components/common/text'; +import { LinkProps } from '../../renderer/lib/components'; export type NotificationAction = { type: 'open-url'; |