Change font to SourceSansPro and fix hover color

Changelog-entry: Change font to SourceSansPro and fix hover color
Change-type: patch

lib/gui/app/components/drive-selector/target-selector.tsx

@@ -118,7 +118,7 @@ export function TargetSelector(props: TargetSelectorProps) {
 		}
 		return (
 			<>
-				<StepNameButton plain tooltip={props.tooltip}>
+				<StepNameButton plain tooltip={props.tooltip} fontSize={16}>
 					{targets.length} Targets
 				</StepNameButton>
 				{!props.flashing && (

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<
 							<>
 								<StepNameButton
 									plain
+									fontSize={16}
 									onClick={this.showSelectedImageDetails}
 									tooltip={imageName || imageBasename}
 								>
@@ -479,7 +481,7 @@ export class SourceSelector extends React.Component<
 								</DetailsText>
 							</>
 						) : (
-							<StepSelection>
+							<>
 								<FlowSelector
 									key="Flash from file"
 									flow={{
@@ -488,7 +490,6 @@ export class SourceSelector extends React.Component<
 										icon: <FontAwesomeIcon icon={faFile} />,
 									}}
 								/>
-								;
 								<FlowSelector
 									key="Flash from URL"
 									flow={{
@@ -497,8 +498,7 @@ export class SourceSelector extends React.Component<
 										icon: <FontAwesomeIcon icon={faLink} />,
 									}}
 								/>
-								;
+							</>
-							</StepSelection>
 						)}
 					</div>
 				</div>

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.colors.dark.disabled.foreground
-			: props.theme.customColors.dark.foreground};
+			: props.theme.colors.dark.foreground};
 	position: absolute;
 	width: 124px;
 	top: 19px;

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%;
 }

lib/gui/app/scss/main.scss

@@ -35,66 +35,26 @@ $disabled-opacity: 0.2;
 @import "./desktop";
 
 @font-face {
-  font-family: "Nunito";
+  font-family: "SourceSansPro";
-  src: url("./fonts/Nunito-Regular.woff2") format("woff2");
+  src: url("./fonts/SourceSansPro-Regular.ttf") format("truetype");
-  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-weight: 500;
   font-style: normal;
   font-display: block;
 }
 
 @font-face {
-  font-family: "CircularStd";
+  font-family: "SourceSansPro";
-  src: url("./fonts/CircularStd-Medium.woff2") format("woff2");
+  src: url("./fonts/SourceSansPro-SemiBold.ttf") format("truetype");
-  font-weight: 400;
+  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;

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.
+	font,
-	customColors: colors,
+	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) => <Button plain {...props} />)`
 export const StepButton = styled((props: ButtonProps) => (
 	<Button {...props}></Button>
 ))`
-	color: rgba(255, 255, 255, 0.7);
+	color: #ffffff;
 	margin: auto;
 `;
 

lib/gui/app/theme.ts

@@ -49,6 +49,7 @@ export const colors = {
 	secondary: {
 		foreground: '#000',
 		background: '#ddd',
+		main: '#fff',
 	},
 	warning: {
 		foreground: '#fff',

npm-shrinkwrap.json

@@ -14681,4 +14681,4 @@
       }
     }
   }
-}
+}