diff --git a/lib/gui/app/components/drive-selector/target-selector.tsx b/lib/gui/app/components/drive-selector/target-selector.tsx index fe35b9b9..4167075e 100644 --- a/lib/gui/app/components/drive-selector/target-selector.tsx +++ b/lib/gui/app/components/drive-selector/target-selector.tsx @@ -118,7 +118,7 @@ export function TargetSelector(props: TargetSelectorProps) { } return ( <> - + {targets.length} Targets {!props.flashing && ( diff --git a/lib/gui/app/components/source-selector/source-selector.tsx b/lib/gui/app/components/source-selector/source-selector.tsx index fbf3d963..42d06a6f 100644 --- a/lib/gui/app/components/source-selector/source-selector.tsx +++ b/lib/gui/app/components/source-selector/source-selector.tsx @@ -39,7 +39,6 @@ import { DetailsText, StepButton, StepNameButton, - StepSelection, } from '../../styled-components'; import { colors } from '../../theme'; import { middleEllipsis } from '../../utils/middle-ellipsis'; @@ -183,10 +182,12 @@ const FlowSelector = styled( }, )` border-radius: 24px; + color: rgba(255, 255, 255, 0.7); :enabled:hover { background-color: ${colors.primary.background}; color: ${colors.primary.foreground}; + font-weight: 600; svg { color: ${colors.primary.foreground}!important; @@ -464,6 +465,7 @@ export class SourceSelector extends React.Component< <> @@ -479,7 +481,7 @@ export class SourceSelector extends React.Component< ) : ( - + <> , }} /> - ; , }} /> - ; - + )} diff --git a/lib/gui/app/pages/main/DriveSelector.tsx b/lib/gui/app/pages/main/DriveSelector.tsx index 51e97e2e..2814536f 100644 --- a/lib/gui/app/pages/main/DriveSelector.tsx +++ b/lib/gui/app/pages/main/DriveSelector.tsx @@ -33,8 +33,8 @@ const StepBorder = styled.div<{ height: 2px; background-color: ${(props) => props.disabled - ? props.theme.customColors.dark.disabled.foreground - : props.theme.customColors.dark.foreground}; + ? props.theme.colors.dark.disabled.foreground + : props.theme.colors.dark.foreground}; position: absolute; width: 124px; top: 19px; diff --git a/lib/gui/app/pages/main/styles/_main.scss b/lib/gui/app/pages/main/styles/_main.scss index 66570361..b4fffc1f 100644 --- a/lib/gui/app/pages/main/styles/_main.scss +++ b/lib/gui/app/pages/main/styles/_main.scss @@ -141,7 +141,7 @@ img[disabled] { color: $palette-theme-dark-disabled-foreground; margin: 0 0 8px 0; font-size: 16px; - line-height: 1.5; + line-height: normal; height: 21px; width: 100%; } diff --git a/lib/gui/app/scss/fonts/CircularStd-Bold.woff2 b/lib/gui/app/scss/fonts/CircularStd-Bold.woff2 deleted file mode 100644 index 52a110af..00000000 Binary files a/lib/gui/app/scss/fonts/CircularStd-Bold.woff2 and /dev/null differ diff --git a/lib/gui/app/scss/fonts/CircularStd-Book.woff2 b/lib/gui/app/scss/fonts/CircularStd-Book.woff2 deleted file mode 100644 index acaa8148..00000000 Binary files a/lib/gui/app/scss/fonts/CircularStd-Book.woff2 and /dev/null differ diff --git a/lib/gui/app/scss/fonts/CircularStd-Medium.woff2 b/lib/gui/app/scss/fonts/CircularStd-Medium.woff2 deleted file mode 100644 index 6b6797b3..00000000 Binary files a/lib/gui/app/scss/fonts/CircularStd-Medium.woff2 and /dev/null differ diff --git a/lib/gui/app/scss/fonts/Nunito-Bold.woff2 b/lib/gui/app/scss/fonts/Nunito-Bold.woff2 deleted file mode 100644 index 891bdd17..00000000 Binary files a/lib/gui/app/scss/fonts/Nunito-Bold.woff2 and /dev/null differ diff --git a/lib/gui/app/scss/fonts/Nunito-Light.woff2 b/lib/gui/app/scss/fonts/Nunito-Light.woff2 deleted file mode 100644 index 9aa61af4..00000000 Binary files a/lib/gui/app/scss/fonts/Nunito-Light.woff2 and /dev/null differ diff --git a/lib/gui/app/scss/fonts/Nunito-Regular.woff2 b/lib/gui/app/scss/fonts/Nunito-Regular.woff2 deleted file mode 100644 index f2ba31fb..00000000 Binary files a/lib/gui/app/scss/fonts/Nunito-Regular.woff2 and /dev/null differ diff --git a/lib/gui/app/scss/fonts/SourceSansPro-Regular.ttf b/lib/gui/app/scss/fonts/SourceSansPro-Regular.ttf new file mode 100644 index 00000000..b422bf43 Binary files /dev/null and b/lib/gui/app/scss/fonts/SourceSansPro-Regular.ttf differ diff --git a/lib/gui/app/scss/fonts/SourceSansPro-SemiBold.ttf b/lib/gui/app/scss/fonts/SourceSansPro-SemiBold.ttf new file mode 100644 index 00000000..2908e0d7 Binary files /dev/null and b/lib/gui/app/scss/fonts/SourceSansPro-SemiBold.ttf differ diff --git a/lib/gui/app/scss/main.scss b/lib/gui/app/scss/main.scss index 76ffb808..2330dc95 100644 --- a/lib/gui/app/scss/main.scss +++ b/lib/gui/app/scss/main.scss @@ -35,66 +35,26 @@ $disabled-opacity: 0.2; @import "./desktop"; @font-face { - font-family: "Nunito"; - src: url("./fonts/Nunito-Regular.woff2") format("woff2"); - font-weight: normal; - font-style: normal; - font-display: block; -} - -@font-face { - font-family: "Nunito"; - src: url("./fonts/Nunito-Bold.woff2") format("woff2"); - font-weight: bold; - font-style: normal; - font-display: block; -} - -@font-face { - font-family: "Nunito"; - src: url("./fonts/Nunito-Light.woff2") format("woff2"); - font-weight: 300; - font-style: normal; - font-display: block; -} - -@font-face { - font-family: "CircularStd"; - src: url("./fonts/CircularStd-Bold.woff2") format("woff2"); - font-weight: bold; - font-style: normal; - font-display: block; -} - -@font-face { - font-family: "CircularStd"; - src: url("./fonts/CircularStd-Book.woff2") format("woff2"); + font-family: "SourceSansPro"; + src: url("./fonts/SourceSansPro-Regular.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: block; } @font-face { - font-family: "CircularStd"; - src: url("./fonts/CircularStd-Medium.woff2") format("woff2"); - font-weight: 400; + font-family: "SourceSansPro"; + src: url("./fonts/SourceSansPro-SemiBold.ttf") format("truetype"); + font-weight: 600; font-style: normal; font-display: block; } -.circular { - font-family: "CircularStd"; - font-weight: 500; -} -.nunito { - font-family: "Nunito"; -} - body { - letter-spacing: 0.5px; + letter-spacing: 0.1px; display: flex; flex-direction: column; - font-family: "CircularStd"; + font-family: "SourceSansPro"; > header { flex: 0 0 auto; diff --git a/lib/gui/app/styled-components.tsx b/lib/gui/app/styled-components.tsx index 41b5204a..fb55cf84 100644 --- a/lib/gui/app/styled-components.tsx +++ b/lib/gui/app/styled-components.tsx @@ -15,15 +15,22 @@ */ import * as React from 'react'; -import { Button, ButtonProps, Flex, Provider, Txt } from 'rendition'; +import { Button, ButtonProps, Provider, Txt } from 'rendition'; import styled from 'styled-components'; import { space } from 'styled-system'; import { colors } from './theme'; +const font = 'SourceSansPro'; const theme = { - // TODO: Standardize how the colors are specified to match with rendition's format. - customColors: colors, + font, + titleFont: font, + global: { + font: { + family: font, + }, + }, + colors, button: { border: { width: '0', @@ -33,10 +40,9 @@ const theme = { opacity: 1, }, extend: () => ` - && { + && { width: 200px; height: 48px; - font-size: 16px; &:disabled { background-color: ${colors.dark.disabled.background}; @@ -48,8 +54,8 @@ const theme = { color: ${colors.dark.disabled.foreground}; } } - } - `, + } + `, }, }; @@ -77,7 +83,7 @@ export const IconButton = styled((props) => ))` - color: rgba(255, 255, 255, 0.7); + color: #ffffff; margin: auto; `; diff --git a/lib/gui/app/theme.ts b/lib/gui/app/theme.ts index aeaefa33..c12d22b4 100644 --- a/lib/gui/app/theme.ts +++ b/lib/gui/app/theme.ts @@ -49,6 +49,7 @@ export const colors = { secondary: { foreground: '#000', background: '#ddd', + main: '#fff', }, warning: { foreground: '#fff', diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 95edc6aa..94515acb 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -14681,4 +14681,4 @@ } } } -} +} \ No newline at end of file