diff options
Diffstat (limited to 'gui/src')
29 files changed, 177 insertions, 186 deletions
diff --git a/gui/src/renderer/components/AccountStyles.tsx b/gui/src/renderer/components/AccountStyles.tsx index f66485e3d6..108c1d4e96 100644 --- a/gui/src/renderer/components/AccountStyles.tsx +++ b/gui/src/renderer/components/AccountStyles.tsx @@ -17,8 +17,8 @@ export const AccountContainer = styled.div({ }); export const AccountRow = styled.div({ - padding: '0 24px', - marginBottom: '24px', + padding: '0 22px', + marginBottom: '20px', }); const AccountRowText = styled.span({ @@ -30,7 +30,6 @@ export const AccountRowLabel = styled(AccountRowText)({ fontSize: '13px', fontWeight: 600, lineHeight: '20px', - letterSpacing: -0.2, marginBottom: '9px', color: colors.white60, }); @@ -49,11 +48,11 @@ export const AccountOutOfTime = styled(AccountRowValue)({ export const AccountFooter = styled.div({ display: 'flex', flexDirection: 'column', - padding: '0 24px', + padding: '0 22px', }); const buttonStyle = { - marginBottom: 24, + marginBottom: '18px', }; export const StyledRedeemVoucherButton = styled(RedeemVoucherButton)(buttonStyle); diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx index 0645f03ff7..38c035de32 100644 --- a/gui/src/renderer/components/AdvancedSettings.tsx +++ b/gui/src/renderer/components/AdvancedSettings.tsx @@ -4,11 +4,7 @@ import { sprintf } from 'sprintf-js'; import { BridgeState, RelayProtocol, TunnelProtocol } from '../../shared/daemon-rpc-types'; import { messages } from '../../shared/gettext'; import { WgKeyState } from '../redux/settings/reducers'; -import styles, { - BlockWhenDisconnectedLabel, - InputFrame, - TunnelProtocolSelector, -} from './AdvancedSettingsStyles'; +import styles, { InputFrame, TunnelProtocolSelector } from './AdvancedSettingsStyles'; import * as AppButton from './AppButton'; import * as Cell from './Cell'; import { Container, Layout } from './Layout'; @@ -185,9 +181,9 @@ export default class AdvancedSettings extends Component<IProps, IState> { </Cell.Footer> <Cell.Container> - <BlockWhenDisconnectedLabel> + <Cell.Label> {messages.pgettext('advanced-settings-view', 'Always require VPN')} - </BlockWhenDisconnectedLabel> + </Cell.Label> <Cell.Switch isOn={this.props.blockWhenDisconnected} onChange={this.setBlockWhenDisconnected} diff --git a/gui/src/renderer/components/AdvancedSettingsStyles.tsx b/gui/src/renderer/components/AdvancedSettingsStyles.tsx index 721df6cf55..899bb5cc02 100644 --- a/gui/src/renderer/components/AdvancedSettingsStyles.tsx +++ b/gui/src/renderer/components/AdvancedSettingsStyles.tsx @@ -8,10 +8,6 @@ export const InputFrame = styled(Cell.InputFrame)({ flex: 0, }); -export const BlockWhenDisconnectedLabel = styled(Cell.Label)({ - letterSpacing: -0.5, -}); - export const TunnelProtocolSelector = (styled(Selector)({ marginBottom: 0, }) as unknown) as new <T>() => Selector<T>; @@ -32,10 +28,10 @@ export default { flex: 0, }), advanced_settings__tunnel_protocol: Styles.createViewStyle({ - marginBottom: 24, + marginBottom: 20, }), advanced_settings__wgkeys_cell: Styles.createViewStyle({ - marginBottom: 24, + marginBottom: 20, }), advanced_settings__wg_no_key: Styles.createTextStyle({ fontFamily: 'Open Sans', @@ -44,27 +40,6 @@ export default { lineHeight: 20, color: colors.red, marginTop: 12, - paddingHorizontal: 24, - }), - advanced_settings__cell_hover: Styles.createButtonStyle({ - backgroundColor: colors.blue80, - }), - advanced_settings__cell_selected_hover: Styles.createButtonStyle({ - backgroundColor: colors.green, - }), - advanced_settings__cell_icon_invisible: Styles.createViewStyle({ - opacity: 0, - }), - advanced_settings__cell_label: Styles.createTextStyle({ - fontFamily: 'DINPro', - fontSize: 20, - fontWeight: '900', - lineHeight: 26, - letterSpacing: -0.2, - color: colors.white, - flex: 0, - }), - advanced_settings__cell_footer_internet_warning_label: Styles.createTextStyle({ - marginTop: 4, + paddingHorizontal: 20, }), }; diff --git a/gui/src/renderer/components/AppButtonStyles.tsx b/gui/src/renderer/components/AppButtonStyles.tsx index e8100ca82c..fd77e231d8 100644 --- a/gui/src/renderer/components/AppButtonStyles.tsx +++ b/gui/src/renderer/components/AppButtonStyles.tsx @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { colors } from '../../config.json'; +import { buttonText } from './common-styles'; export const StyledLabelContainer = styled.div((props: { textAdjustment: number }) => ({ display: 'flex', @@ -8,13 +8,8 @@ export const StyledLabelContainer = styled.div((props: { textAdjustment: number paddingLeft: `${props.textAdjustment < 0 ? Math.abs(props.textAdjustment) : 0}px`, })); -export const StyledLabel = styled.span({ - fontFamily: 'DINPro', - fontSize: '20px', - fontWeight: 900, - lineHeight: '26px', +export const StyledLabel = styled.span(buttonText, { flex: 1, - color: colors.white, textAlign: 'center', }); @@ -35,5 +30,5 @@ export const StyledButtonContent = styled.div({ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', - padding: 9, + padding: '9px', }); diff --git a/gui/src/renderer/components/Cell.tsx b/gui/src/renderer/components/Cell.tsx index 4abcb9f49e..085a18e3cc 100644 --- a/gui/src/renderer/components/Cell.tsx +++ b/gui/src/renderer/components/Cell.tsx @@ -15,12 +15,12 @@ export { StyledFooter as Footer, StyledFooterBoldText as FooterBoldText, StyledFooterText as FooterText, - StyledIcon as UntintedIcon, StyledInputFrame as InputFrame, StyledSectionTitle as SectionTitle, StyledSubText as SubText, StyledTintedIcon as Icon, } from './CellStyles'; +export { default as UntintedIcon } from './ImageView'; const CellSectionContext = React.createContext<boolean>(false); const CellDisabledContext = React.createContext<boolean>(false); diff --git a/gui/src/renderer/components/CellStyles.tsx b/gui/src/renderer/components/CellStyles.tsx index 9ae67f733c..7c4d8c13bb 100644 --- a/gui/src/renderer/components/CellStyles.tsx +++ b/gui/src/renderer/components/CellStyles.tsx @@ -1,14 +1,15 @@ import React from 'react'; import styled from 'styled-components'; import { colors } from '../../config.json'; +import { buttonText, mediumText, smallText } from './common-styles'; import ImageView, { IImageViewProps } from './ImageView'; export const StyledContainer = styled.div({ display: 'flex', backgroundColor: colors.blue, alignItems: 'center', - paddingLeft: '16px', - paddingRight: '12px', + paddingLeft: '22px', + paddingRight: '16px', }); export const StyledSection = styled.div({ @@ -16,15 +17,10 @@ export const StyledSection = styled.div({ flexDirection: 'column', }); -export const StyledSectionTitle = styled.span({ +export const StyledSectionTitle = styled.span(buttonText, { backgroundColor: colors.blue, - padding: '14px 24px', + padding: '14px 16px 14px 22px', marginBottom: '1px', - fontFamily: 'DINPro', - fontSize: '20px', - fontWeight: 900, - lineHeight: '26px', - color: colors.white, }); interface IStyledCellButtonProps { @@ -34,7 +30,7 @@ interface IStyledCellButtonProps { export const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps) => ({ display: 'flex', - padding: '0 16px', + padding: '0 16px 0 22px', marginBottom: '1px', flex: 1, alignItems: 'center', @@ -51,33 +47,23 @@ export const StyledCellButton = styled.button({}, (props: IStyledCellButtonProps }, })); -export const StyledLabel = styled.div({}, (props: { disabled: boolean }) => ({ - margin: '14px 0 14px 8px', +export const StyledLabel = styled.div(buttonText, (props: { disabled: boolean }) => ({ + margin: '14px 0', flex: 1, - fontFamily: 'DINPro', - fontSize: '20px', - fontWeight: 900, - lineHeight: '26px', - letterSpacing: -0.2, color: props.disabled ? colors.white40 : colors.white, textAlign: 'left', })); -export const StyledSubText = styled.span({ +export const StyledSubText = styled.span(smallText, { color: colors.white60, - fontFamily: 'Open Sans', - fontSize: '13px', fontWeight: 800, flex: -1, textAlign: 'right', marginLeft: '8px', + marginRight: '8px', }); -export const StyledIcon = styled(ImageView)({ - marginLeft: '8px', -}); - -export const StyledTintedIcon = styled(StyledIcon).attrs((props: IImageViewProps) => ({ +export const StyledTintedIcon = styled(ImageView).attrs((props: IImageViewProps) => ({ tintColor: props.tintColor ?? colors.white60, tintHoverColor: props.tintHoverColor ?? props.tintColor ?? colors.white60, }))((props: IImageViewProps) => ({ @@ -87,17 +73,10 @@ export const StyledTintedIcon = styled(StyledIcon).attrs((props: IImageViewProps })); export const StyledFooter = styled.div({ - padding: '8px 24px 24px', + padding: '6px 22px 20px', }); -export const StyledFooterText = styled.span({ - fontFamily: 'Open Sans', - fontSize: '13px', - fontWeight: 600, - lineHeight: '20px', - letterSpacing: -0.2, - color: colors.white80, -}); +export const StyledFooterText = styled.span(smallText); export const StyledFooterBoldText = styled(StyledFooterText)({ fontWeight: 900, @@ -107,15 +86,13 @@ export const StyledInputFrame = styled.div({ flexGrow: 0, backgroundColor: 'rgba(255,255,255,0.1)', borderRadius: '4px', - padding: '4px', + padding: '4px 8px', }); const inputTextStyles: React.CSSProperties = { - fontFamily: 'Open Sans', - fontSize: '20px', + ...mediumText, fontWeight: 600, - lineHeight: '26px', - height: '26px', + height: '28px', textAlign: 'right', padding: '0px', }; diff --git a/gui/src/renderer/components/ChevronButton.tsx b/gui/src/renderer/components/ChevronButton.tsx index aed6bacaec..0c08408dff 100644 --- a/gui/src/renderer/components/ChevronButton.tsx +++ b/gui/src/renderer/components/ChevronButton.tsx @@ -13,8 +13,6 @@ const Icon = styled(Cell.Icon)({ flex: 0, alignSelf: 'stretch', justifyContent: 'center', - paddingRight: '16px', - paddingLeft: '16px', }); export default function ChevronButton(props: IProps) { diff --git a/gui/src/renderer/components/CityRow.tsx b/gui/src/renderer/components/CityRow.tsx index 65f8e1075c..91b9faa31e 100644 --- a/gui/src/renderer/components/CityRow.tsx +++ b/gui/src/renderer/components/CityRow.tsx @@ -25,11 +25,15 @@ interface IProps { } const Button = styled(Cell.CellButton)((props: { selected: boolean }) => ({ - paddingRight: 0, - paddingLeft: 32, + paddingRight: '16px', + paddingLeft: '34px', backgroundColor: !props.selected ? colors.blue40 : undefined, })); +const StyledChevronButton = styled(ChevronButton)({ + marginLeft: '18px', +}); + export default class CityRow extends Component<IProps> { private buttonRef = React.createRef<HTMLButtonElement>(); @@ -83,7 +87,9 @@ export default class CityRow extends Component<IProps> { /> <Cell.Label>{this.props.name}</Cell.Label> - {hasChildren && <ChevronButton onClick={this.toggleCollapse} up={this.props.expanded} />} + {hasChildren && ( + <StyledChevronButton onClick={this.toggleCollapse} up={this.props.expanded} /> + )} </Button> {hasChildren && ( diff --git a/gui/src/renderer/components/ConnectionPanel.tsx b/gui/src/renderer/components/ConnectionPanel.tsx index 24bcc1c4cf..156a46ff89 100644 --- a/gui/src/renderer/components/ConnectionPanel.tsx +++ b/gui/src/renderer/components/ConnectionPanel.tsx @@ -61,7 +61,6 @@ const styles = { lineHeight: 15, fontWeight: '600', color: 'rgb(255, 255, 255)', - letterSpacing: -0.2, }), header: Styles.createViewStyle({ flexDirection: 'row', diff --git a/gui/src/renderer/components/CountryRow.tsx b/gui/src/renderer/components/CountryRow.tsx index 35a082a27a..7d07f5776e 100644 --- a/gui/src/renderer/components/CountryRow.tsx +++ b/gui/src/renderer/components/CountryRow.tsx @@ -31,8 +31,13 @@ const styles = { }; const Button = styled(Cell.CellButton)({ - paddingRight: 0, - paddingLeft: 16, + paddingRight: '16px', + // The actual padding is 22px except for the tick icon which has 18. + paddingLeft: '18px', +}); + +const StyledChevronButton = styled(ChevronButton)({ + marginLeft: '18px', }); export default class CountryRow extends Component<IProps> { @@ -94,7 +99,7 @@ export default class CountryRow extends Component<IProps> { /> <Cell.Label>{this.props.name}</Cell.Label> {hasChildren ? ( - <ChevronButton onClick={this.toggleCollapse} up={this.props.expanded} /> + <StyledChevronButton onClick={this.toggleCollapse} up={this.props.expanded} /> ) : null} </Button> diff --git a/gui/src/renderer/components/ErrorBoundary.tsx b/gui/src/renderer/components/ErrorBoundary.tsx index aa0fbba3b6..8be0e8b5b8 100644 --- a/gui/src/renderer/components/ErrorBoundary.tsx +++ b/gui/src/renderer/components/ErrorBoundary.tsx @@ -29,7 +29,6 @@ const styles = { fontSize: 24, fontWeight: '900', lineHeight: 30, - letterSpacing: -0.5, color: colors.white60, marginBottom: 4, }), @@ -38,7 +37,7 @@ const styles = { fontSize: 14, lineHeight: 20, color: colors.white40, - marginHorizontal: 20, + marginHorizontal: 22, textAlign: 'center', }), email: Styles.createTextStyle({ diff --git a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx index a8049095c3..7a719729dd 100644 --- a/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx +++ b/gui/src/renderer/components/ExpiredAccountErrorViewStyles.tsx @@ -14,11 +14,13 @@ export const StyledAccountTokenLabel = styled(AccountTokenLabel)({ }); export const ModalCellContainer = styled(Cell.Container)({ - marginTop: '16px', + marginTop: '18px', + paddingLeft: '12px', + paddingRight: '12px', }); const buttonStyle = { - marginBottom: 24, + marginBottom: '18px', }; export const StyledBuyCreditButton = styled(AppButton.GreenButton)(buttonStyle); @@ -31,7 +33,7 @@ export default { }, container: Styles.createViewStyle({ flex: 1, - paddingTop: 24, + paddingTop: 22, // ReactXP don't allow setting 'minHeight' and don't allow percentages. This will work well // without the '@ts-ignore' when moving away from ReactXP. // @ts-ignore @@ -39,19 +41,20 @@ export default { }), body: Styles.createViewStyle({ flex: 1, - paddingHorizontal: 24, + paddingHorizontal: 22, }), footer: Styles.createViewStyle({ flex: 0, - paddingVertical: 24, - paddingHorizontal: 24, + paddingTop: 18, + paddingBottom: 22, + paddingHorizontal: 22, backgroundColor: colors.darkBlue, }), title: Styles.createTextStyle({ fontFamily: 'DINPro', - fontSize: 32, + fontSize: 30, fontWeight: '900', - lineHeight: 40, + lineHeight: 38, color: colors.white, marginBottom: 8, }), @@ -61,7 +64,7 @@ export default { lineHeight: 20, fontWeight: '600', color: colors.white, - marginBottom: 24, + marginBottom: 20, }), statusIcon: Styles.createViewStyle({ alignSelf: 'center', diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx index 22de5ea050..2d09759be3 100644 --- a/gui/src/renderer/components/HeaderBar.tsx +++ b/gui/src/renderer/components/HeaderBar.tsx @@ -20,7 +20,7 @@ const headerBarStyleColorMap = { }; const HeaderBarContainer = styled.div({}, (props: { barStyle?: HeaderBarStyle }) => ({ - padding: '12px', + padding: '12px 16px', paddingTop: process.platform === 'darwin' ? '24px' : '12px', backgroundColor: headerBarStyleColorMap[props.barStyle ?? HeaderBarStyle.default], })); @@ -29,6 +29,8 @@ const HeaderBarContent = styled.div({ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', + // In views without the brand components we still want the Header to have the same height. + minHeight: '51px', }); interface IHeaderBarProps { @@ -56,13 +58,12 @@ const Title = styled.span({ fontSize: '24px', fontWeight: 900, lineHeight: '30px', - letterSpacing: -0.5, color: colors.white80, marginLeft: '9px', }); const Logo = styled(ImageView)({ - margin: '4px 0 3px 6px', + margin: '4px 0 3px', }); export function Brand() { diff --git a/gui/src/renderer/components/Launch.tsx b/gui/src/renderer/components/Launch.tsx index 7f1e40dbd4..62c561c7b8 100644 --- a/gui/src/renderer/components/Launch.tsx +++ b/gui/src/renderer/components/Launch.tsx @@ -20,7 +20,6 @@ const styles = { fontSize: 24, fontWeight: '900', lineHeight: 30, - letterSpacing: -0.5, color: colors.white60, marginBottom: 4, }), @@ -28,6 +27,7 @@ const styles = { fontFamily: 'Open Sans', fontSize: 14, lineHeight: 20, + marginHorizontal: 22, color: colors.white40, textAlign: 'center', }), diff --git a/gui/src/renderer/components/LoginStyles.tsx b/gui/src/renderer/components/LoginStyles.tsx index d935eb195e..2cd9a8debb 100644 --- a/gui/src/renderer/components/LoginStyles.tsx +++ b/gui/src/renderer/components/LoginStyles.tsx @@ -50,10 +50,9 @@ export const AccountDropdownItemButtonLabel = styled(Cell.Label)({ export default { login_footer: Styles.createViewStyle({ flex: 0, - paddingTop: 16, - paddingBottom: 24, - paddingLeft: 24, - paddingRight: 24, + paddingTop: 18, + paddingBottom: 22, + paddingHorizontal: 22, backgroundColor: colors.darkBlue, }), status_icon: Styles.createViewStyle({ @@ -68,8 +67,8 @@ export default { overflow: 'visible', paddingTop: 0, paddingBottom: 0, - paddingLeft: 24, - paddingRight: 24, + paddingLeft: 22, + paddingRight: 22, marginTop: 83, marginBottom: 0, marginRight: 0, @@ -116,15 +115,14 @@ export default { fontSize: 13, fontWeight: '600', lineHeight: 18, - letterSpacing: -0.2, marginBottom: 8, }), + // TODO: Use bigText in comonStyles when converted from ReactXP title: Styles.createTextStyle({ fontFamily: 'DINPro', - fontSize: 32, + fontSize: 30, fontWeight: '900', - lineHeight: 44, - letterSpacing: -0.7, + lineHeight: 40, color: colors.white, marginBottom: 7, flex: 0, @@ -134,7 +132,6 @@ export default { fontSize: 13, lineHeight: 15, fontWeight: '600', - letterSpacing: -0.2, color: colors.white80, marginBottom: 8, }), diff --git a/gui/src/renderer/components/Modal.tsx b/gui/src/renderer/components/Modal.tsx index a9fffbed9a..ae46c414fc 100644 --- a/gui/src/renderer/components/Modal.tsx +++ b/gui/src/renderer/components/Modal.tsx @@ -77,7 +77,7 @@ const ModalAlertIcon = styled.div({ const ModalAlertButtonContainer = styled.div({ display: 'flex', flexDirection: 'column', - marginTop: '16px', + marginTop: '18px', }); interface IModalAlertProps { @@ -158,7 +158,7 @@ export class ModalAlert extends React.Component<IModalAlertProps> { export const ModalMessage = styled.span({ fontFamily: 'Open Sans', - fontSize: '14px', + fontSize: '13px', fontWeight: 500, lineHeight: '20px', color: colors.white80, diff --git a/gui/src/renderer/components/NotificationBanner.tsx b/gui/src/renderer/components/NotificationBanner.tsx index a4ee59f9ce..5a9948b8bd 100644 --- a/gui/src/renderer/components/NotificationBanner.tsx +++ b/gui/src/renderer/components/NotificationBanner.tsx @@ -33,7 +33,7 @@ export const NotificationOpenLinkActionButton = styled.button({ flex: 1, justifyContent: 'center', cursor: 'default', - padding: '0 5px', + padding: '4px', background: 'transparent', border: 'none', }); @@ -68,6 +68,7 @@ export const NotificationContent = styled.div({ display: 'flex', flexDirection: 'column', flex: 1, + paddingRight: '4px', }); export const NotificationActions = styled.div({ @@ -75,7 +76,6 @@ export const NotificationActions = styled.div({ flex: 0, flexDirection: 'column', justifyContent: 'center', - marginLeft: 5, }); interface INotificationIndicatorProps { @@ -128,7 +128,7 @@ const Collapsible = styled.div({}, (props: ICollapsibleProps) => { const Content = styled.div({ display: 'flex', flexDirection: 'row', - padding: '8px 10px 8px 20px', + padding: '8px 12px 8px 16px', height: 'fit-content', }); diff --git a/gui/src/renderer/components/RelayRow.tsx b/gui/src/renderer/components/RelayRow.tsx index f7f3998ab5..ff1614d846 100644 --- a/gui/src/renderer/components/RelayRow.tsx +++ b/gui/src/renderer/components/RelayRow.tsx @@ -16,7 +16,7 @@ interface IProps { const Button = styled(Cell.CellButton)((props: { selected: boolean }) => ({ paddingRight: 0, - paddingLeft: 48, + paddingLeft: '50px', backgroundColor: !props.selected ? colors.blue20 : undefined, })); diff --git a/gui/src/renderer/components/RelayStatusIndicator.tsx b/gui/src/renderer/components/RelayStatusIndicator.tsx index 26c7f616a1..4b6b5fea45 100644 --- a/gui/src/renderer/components/RelayStatusIndicator.tsx +++ b/gui/src/renderer/components/RelayStatusIndicator.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import styled from 'styled-components'; import { Component, Styles, View } from 'reactxp'; import { colors } from '../../config.json'; import * as Cell from './Cell'; @@ -8,8 +9,8 @@ const styles = { width: 16, height: 16, borderRadius: 8, - marginLeft: 12, - marginRight: 4, + marginLeft: 4, + marginRight: 12, }), inactive: Styles.createViewStyle({ backgroundColor: colors.red95, @@ -19,6 +20,10 @@ const styles = { }), }; +const TickIcon = styled(Cell.Icon)({ + marginRight: '8px', +}); + interface IProps { active: boolean; selected: boolean; @@ -27,7 +32,7 @@ interface IProps { export default class RelayStatusIndicator extends Component<IProps> { public render() { return this.props.selected ? ( - <Cell.Icon tintColor={colors.white} source="icon-tick" height={24} width={24} /> + <TickIcon tintColor={colors.white} source="icon-tick" height={24} width={24} /> ) : ( <View style={[styles.relayStatus, this.props.active ? styles.active : styles.inactive]} /> ); diff --git a/gui/src/renderer/components/Selector.tsx b/gui/src/renderer/components/Selector.tsx index 57f2323cef..2ba66ece29 100644 --- a/gui/src/renderer/components/Selector.tsx +++ b/gui/src/renderer/components/Selector.tsx @@ -19,7 +19,7 @@ interface ISelectorProps<T> { } const Section = styled(Cell.Section)({ - marginBottom: 24, + marginBottom: 20, }); export default class Selector<T> extends React.Component<ISelectorProps<T>> { @@ -55,6 +55,7 @@ export default class Selector<T> extends React.Component<ISelectorProps<T>> { const StyledCellIcon = styled(Cell.Icon)((props: { visible: boolean }) => ({ opacity: props.visible ? 1 : 0, + marginRight: '8px', })); interface ISelectorCellProps<T> { diff --git a/gui/src/renderer/components/Settings.tsx b/gui/src/renderer/components/Settings.tsx index f01bfd7036..53bc8aedc8 100644 --- a/gui/src/renderer/components/Settings.tsx +++ b/gui/src/renderer/components/Settings.tsx @@ -15,7 +15,7 @@ import { TitleBarItem, } from './NavigationBar'; import SettingsHeader, { HeaderTitle } from './SettingsHeader'; -import styles, { OutOfTimeSubText } from './SettingsStyles'; +import styles, { CellIcon, OutOfTimeSubText } from './SettingsStyles'; import { LoginState } from '../redux/account/reducers'; @@ -168,7 +168,7 @@ export default class Settings extends Component<IProps> { ? inconsistentVersionMessage : updateAvailableMessage; - icon = <Cell.UntintedIcon source="icon-alert" tintColor={colors.red} />; + icon = <CellIcon source="icon-alert" tintColor={colors.red} />; footer = ( <View style={styles.cellFooter}> <Text style={styles.cellFooterLabel}>{message}</Text> @@ -215,7 +215,7 @@ export default class Settings extends Component<IProps> { </Cell.CellButton> <Cell.CellButton onClick={this.props.onViewSelectLanguage}> - <Cell.UntintedIcon width={24} height={24} source="icon-language" /> + <CellIcon width={24} height={24} source="icon-language" /> <Cell.Label> { // TRANSLATORS: Navigation button to the 'Language' settings view diff --git a/gui/src/renderer/components/SettingsHeader.tsx b/gui/src/renderer/components/SettingsHeader.tsx index 9ddfa171c2..4cbd1c2077 100644 --- a/gui/src/renderer/components/SettingsHeader.tsx +++ b/gui/src/renderer/components/SettingsHeader.tsx @@ -6,19 +6,21 @@ const styles = { header: { default: Styles.createViewStyle({ flex: 0, - paddingTop: 4, - paddingRight: 24, - paddingLeft: 24, - paddingBottom: 24, + paddingTop: 2, + paddingRight: 20, + paddingLeft: 20, + paddingBottom: 20, }), }, + // TODO: Use bigText in comonStyles when converted from ReactXP title: Styles.createTextStyle({ fontFamily: 'DINPro', - fontSize: 32, + fontSize: 30, fontWeight: '900', - lineHeight: 36, + lineHeight: 34, color: colors.white, }), + // TODO: Use smallText in comonStyles when converted from ReactXP subtitle: Styles.createTextStyle({ fontFamily: 'Open Sans', fontSize: 13, @@ -26,7 +28,6 @@ const styles = { overflow: 'visible', color: colors.white80, lineHeight: 20, - letterSpacing: -0.2, }), spacer: Styles.createViewStyle({ height: 8, diff --git a/gui/src/renderer/components/SettingsStyles.tsx b/gui/src/renderer/components/SettingsStyles.tsx index 1406fba209..806afb45ef 100644 --- a/gui/src/renderer/components/SettingsStyles.tsx +++ b/gui/src/renderer/components/SettingsStyles.tsx @@ -7,6 +7,10 @@ export const OutOfTimeSubText = styled(Cell.SubText)((props: { isOutOfTime: bool color: props.isOutOfTime ? colors.red : undefined, })); +export const CellIcon = styled(Cell.UntintedIcon)({ + marginRight: '8px', +}); + export default { settings: Styles.createViewStyle({ backgroundColor: colors.darkBlue, @@ -27,27 +31,24 @@ export default { flex: 1, }, cellSpacer: Styles.createViewStyle({ - height: 24, + height: 20, flex: 0, }), cellFooter: Styles.createViewStyle({ - paddingTop: 8, - paddingRight: 24, - paddingBottom: 24, - paddingLeft: 24, + paddingTop: 6, + paddingHorizontal: 22, + paddingBottom: 20, }), quitButtonFooter: Styles.createViewStyle({ - paddingTop: 24, - paddingBottom: 19, - paddingLeft: 24, - paddingRight: 24, + paddingTop: 20, + paddingBottom: 22, + paddingHorizontal: 22, }), cellFooterLabel: Styles.createTextStyle({ fontFamily: 'Open Sans', fontSize: 13, fontWeight: '600', lineHeight: 20, - letterSpacing: -0.2, color: colors.white60, }), }; diff --git a/gui/src/renderer/components/SupportStyles.tsx b/gui/src/renderer/components/SupportStyles.tsx index 5c5915bcd4..eaee5770e7 100644 --- a/gui/src/renderer/components/SupportStyles.tsx +++ b/gui/src/renderer/components/SupportStyles.tsx @@ -4,7 +4,7 @@ import { colors } from '../../config.json'; import * as AppButton from './AppButton'; export const StyledBlueButton = styled(AppButton.BlueButton)({ - marginBottom: 16, + marginBottom: 18, }); export default { @@ -46,10 +46,9 @@ export default { overflow: 'hidden', }), support__footer: Styles.createViewStyle({ - paddingTop: 16, - paddingBottom: 16, - paddingLeft: 24, - paddingRight: 24, + paddingTop: 18, + paddingBottom: 22, + paddingHorizontal: 22, flexDirection: 'column', flex: 0, }), @@ -91,7 +90,6 @@ export default { overflow: 'visible', color: colors.white60, lineHeight: 20, - letterSpacing: -0.2, }), support__sent_email: Styles.createTextStyle({ fontWeight: '900', @@ -106,11 +104,11 @@ export default { color: colors.green, }), support__send_status: Styles.createTextStyle({ + // TODO: Use bigText in comonStyles when converted from ReactXP fontFamily: 'DINPro', - fontSize: 34, + fontSize: 30, fontWeight: '900', - lineHeight: 38, - letterSpacing: -0.9, + lineHeight: 34, color: colors.white, marginBottom: 4, }), diff --git a/gui/src/renderer/components/Switch.tsx b/gui/src/renderer/components/Switch.tsx index 5279181cda..ff56843e79 100644 --- a/gui/src/renderer/components/Switch.tsx +++ b/gui/src/renderer/components/Switch.tsx @@ -18,8 +18,8 @@ const PAN_DISTANCE = 10; const SwitchContainer = styled.div({}, (props: { disabled: boolean }) => ({ position: 'relative', - width: '52px', - height: '32px', + width: '48px', + height: '30px', borderColor: props.disabled ? colors.white20 : colors.white80, borderWidth: '2px', borderStyle: 'solid', @@ -35,10 +35,10 @@ const Knob = styled.div({}, (props: { isOn: boolean; isPressed: boolean; disable return { position: 'absolute', - height: '24px', - borderRadius: '12px', + height: '22px', + borderRadius: '11px', transition: 'all 200ms linear', - width: props.isPressed ? '28px' : '24px', + width: props.isPressed ? '26px' : '22px', backgroundColor, // When enabled the button should be placed all the way to the right (100%) minus padding (2px). left: props.isOn ? 'calc(100% - 2px)' : '2px', diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx index 7136f18e13..04236750ee 100644 --- a/gui/src/renderer/components/TunnelControl.tsx +++ b/gui/src/renderer/components/TunnelControl.tsx @@ -1,10 +1,10 @@ import * as React from 'react'; import styled from 'styled-components'; -import { colors } from '../../config.json'; import { TunnelState } from '../../shared/daemon-rpc-types'; import { messages } from '../../shared/gettext'; import ConnectionPanelContainer from '../containers/ConnectionPanelContainer'; import * as AppButton from './AppButton'; +import { bigText } from './common-styles'; import ImageView from './ImageView'; import Marquee from './Marquee'; import { MultiButton } from './MultiButton'; @@ -23,7 +23,7 @@ interface ITunnelControlProps { } const SwitchLocationButton = styled(AppButton.TransparentButton)({ - marginBottom: 16, + marginBottom: '18px', }); const Secured = styled(SecuredLabel)({ @@ -38,15 +38,15 @@ const Footer = styled.div({ display: 'flex', flexDirection: 'column', flex: 0, - paddingBottom: '16px', - paddingLeft: '24px', - paddingRight: '24px', + paddingBottom: '22px', + paddingLeft: '22px', + paddingRight: '22px', }); const Body = styled.div({ display: 'flex', flexDirection: 'column', - padding: '0 24px', + padding: '0 22px', marginTop: '176px', flex: 1, }); @@ -64,13 +64,12 @@ const Location = styled.div({ }); const StyledMarquee = styled(Marquee)({ - fontFamily: 'DINPro', - fontSize: '34px', - lineHeight: '38px', - fontWeight: 900, + ...bigText, overflow: 'hidden', - letterSpacing: -0.9, - color: colors.white, +}); + +const SelectedLocationChevron = styled(AppButton.Icon)({ + margin: '0 4px', }); export default class TunnelControl extends React.Component<ITunnelControlProps> { @@ -86,7 +85,7 @@ export default class TunnelControl extends React.Component<ITunnelControlProps> const SelectedLocation = () => ( <SwitchLocationButton onClick={this.props.onSelectLocation}> <AppButton.Label>{this.props.selectedRelayName}</AppButton.Label> - <AppButton.Icon height={12} width={7} source="icon-chevron" /> + <SelectedLocationChevron height={12} width={7} source="icon-chevron" /> </SwitchLocationButton> ); diff --git a/gui/src/renderer/components/WireguardKeys.tsx b/gui/src/renderer/components/WireguardKeys.tsx index c2df53eeaa..0f8d3407f4 100644 --- a/gui/src/renderer/components/WireguardKeys.tsx +++ b/gui/src/renderer/components/WireguardKeys.tsx @@ -121,8 +121,8 @@ export default class WireguardKeys extends Component<IProps, IState> { )} </View> - <View style={styles.wgkeys__row}>{this.getGenerateButton()}</View> - <View style={styles.wgkeys__row}> + <View style={styles.wgkeys__button_row}>{this.getGenerateButton()}</View> + <View style={styles.wgkeys__button_row}> <AppButton.BlueButton disabled={this.isVerifyButtonDisabled()} onClick={this.handleVerifyKeyPress}> @@ -131,7 +131,7 @@ export default class WireguardKeys extends Component<IProps, IState> { </AppButton.Label> </AppButton.BlueButton> </View> - <View style={styles.wgkeys__row}> + <View style={[styles.wgkeys__button_row, styles.wgkeys__last_button]}> <AppButton.BlockingButton disabled={this.props.isOffline} onClick={this.props.onVisitWebsiteKey}> diff --git a/gui/src/renderer/components/WireguardKeysStyles.tsx b/gui/src/renderer/components/WireguardKeysStyles.tsx index 6bbd29cde5..b5b18cc6cd 100644 --- a/gui/src/renderer/components/WireguardKeysStyles.tsx +++ b/gui/src/renderer/components/WireguardKeysStyles.tsx @@ -25,8 +25,15 @@ export default { }), wgkeys__row: Styles.createViewStyle({ paddingVertical: 0, - paddingHorizontal: 24, - marginBottom: 24, + paddingHorizontal: 22, + marginBottom: 20, + }), + wgkeys__button_row: Styles.createViewStyle({ + paddingHorizontal: 22, + marginBottom: 18, + }), + wgkeys__last_button: Styles.createViewStyle({ + marginBottom: 22, }), wgkeys__row_label: Styles.createTextStyle({ flex: 1, @@ -34,7 +41,6 @@ export default { fontSize: 13, fontWeight: '600', lineHeight: 20, - letterSpacing: -0.2, color: colors.white60, marginBottom: 9, }), diff --git a/gui/src/renderer/components/common-styles.ts b/gui/src/renderer/components/common-styles.ts new file mode 100644 index 0000000000..d08ad4f863 --- /dev/null +++ b/gui/src/renderer/components/common-styles.ts @@ -0,0 +1,30 @@ +import { colors } from '../../config.json'; + +export const smallText = { + fontFamily: 'Open Sans', + fontSize: '13px', + fontWeight: 600, + lineHeight: '20px', + color: colors.white80, +}; + +export const mediumText = { + fontFamily: 'Open Sans', + fontSize: '18px', + lineHeight: '24px', +}; + +export const buttonText = { + ...mediumText, + fontFamily: 'DINPro', + fontWeight: 900, + color: colors.white, +}; + +export const bigText = { + fontFamily: 'DINPro', + fontSize: '30px', + fontWeight: 900, + lineHeight: '34px', + color: colors.white, +}; |