From 94a0be3b057d9e0974dc78bbdd886a8849626407 Mon Sep 17 00:00:00 2001
From: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>
Date: Thu, 20 Feb 2020 15:36:13 +0100
Subject: [PATCH] Refactor buttons style

Change-type: patch
Changelog-entry: Refactor buttons style
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>
---
 .../drive-selector/target-selector.tsx        |  3 +-
 .../flash-another/flash-another.tsx           |  1 +
 .../progress-button/progress-button.tsx       |  1 +
 .../source-selector/source-selector.tsx       | 14 ++---
 lib/gui/app/pages/main/Flash.tsx              |  7 +--
 lib/gui/app/styled-components.tsx             | 53 +++++++++++--------
 lib/gui/app/theme.ts                          |  2 +-
 7 files changed, 42 insertions(+), 39 deletions(-)

diff --git a/lib/gui/app/components/drive-selector/target-selector.tsx b/lib/gui/app/components/drive-selector/target-selector.tsx
index f3998fe0..f9dd930b 100644
--- a/lib/gui/app/components/drive-selector/target-selector.tsx
+++ b/lib/gui/app/components/drive-selector/target-selector.tsx
@@ -133,7 +133,8 @@ export function TargetSelector(props: TargetSelectorProps) {
 
 	return (
 		<StepButton
-			tabindex={targets.length > 0 ? -1 : 2}
+			primary
+			tabIndex={targets.length > 0 ? -1 : 2}
 			disabled={props.disabled}
 			onClick={props.openDriveSelector}
 		>
diff --git a/lib/gui/app/components/flash-another/flash-another.tsx b/lib/gui/app/components/flash-another/flash-another.tsx
index c993b559..7083ace3 100644
--- a/lib/gui/app/components/flash-another/flash-another.tsx
+++ b/lib/gui/app/components/flash-another/flash-another.tsx
@@ -17,6 +17,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import { position, right } from 'styled-system';
+
 import { BaseButton, ThemedProvider } from '../../styled-components';
 
 const Div = styled.div<any>`
diff --git a/lib/gui/app/components/progress-button/progress-button.tsx b/lib/gui/app/components/progress-button/progress-button.tsx
index 31869572..052baa5b 100644
--- a/lib/gui/app/components/progress-button/progress-button.tsx
+++ b/lib/gui/app/components/progress-button/progress-button.tsx
@@ -134,6 +134,7 @@ export class ProgressButton extends React.Component<ProgressButtonProps> {
 		return (
 			<StepSelection>
 				<StepButton
+					primary
 					onClick={this.props.callback}
 					disabled={this.props.disabled}
 				>
diff --git a/lib/gui/app/components/source-selector/source-selector.tsx b/lib/gui/app/components/source-selector/source-selector.tsx
index 8d9af912..e0d0e7b9 100644
--- a/lib/gui/app/components/source-selector/source-selector.tsx
+++ b/lib/gui/app/components/source-selector/source-selector.tsx
@@ -173,7 +173,7 @@ const URLSelector = ({ done }: { done: (imageURL: string) => void }) => {
 };
 
 interface Flow {
-	icon: any;
+	icon?: JSX.Element;
 	onClick: (evt: MouseEvent) => void;
 	label: string;
 }
@@ -206,7 +206,6 @@ export type Source =
 export interface SourceOptions {
 	imagePath: string;
 	SourceType: Source;
-	sourceParams?: any[];
 }
 
 interface SourceSelectorProps {
@@ -229,7 +228,7 @@ export class SourceSelector extends React.Component<
 > {
 	private unsubscribe: () => void;
 	private afterSelected: SourceSelectorProps['afterSelected'];
-	public flows: Flow[];
+	private flows: Flow[];
 
 	constructor(props: SourceSelectorProps) {
 		super(props);
@@ -359,11 +358,7 @@ export class SourceSelector extends React.Component<
 		}
 	}
 
-	private async selectImageByPath({
-		imagePath,
-		SourceType,
-		sourceParams,
-	}: SourceOptions) {
+	private async selectImageByPath({ imagePath, SourceType }: SourceOptions) {
 		try {
 			imagePath = await replaceWindowsNetworkDriveLetter(imagePath);
 		} catch (error) {
@@ -410,7 +405,6 @@ export class SourceSelector extends React.Component<
 			this.afterSelected({
 				imagePath,
 				SourceType,
-				sourceParams,
 			});
 		} catch (error) {
 			const imageError = errors.createUserError({
@@ -452,7 +446,6 @@ export class SourceSelector extends React.Component<
 			this.selectImageByPath({
 				imagePath,
 				SourceType: sourceDestination.File,
-				sourceParams: [],
 			});
 		} catch (error) {
 			exceptionReporter.report(error);
@@ -465,7 +458,6 @@ export class SourceSelector extends React.Component<
 			this.selectImageByPath({
 				imagePath: file.path,
 				SourceType: sourceDestination.File,
-				sourceParams: [],
 			});
 		}
 	}
diff --git a/lib/gui/app/pages/main/Flash.tsx b/lib/gui/app/pages/main/Flash.tsx
index df5298f4..c6ca6005 100644
--- a/lib/gui/app/pages/main/Flash.tsx
+++ b/lib/gui/app/pages/main/Flash.tsx
@@ -22,6 +22,7 @@ import * as constraints from '../../../../shared/drive-constraints';
 import * as messages from '../../../../shared/messages';
 import { DriveSelectorModal } from '../../components/drive-selector/DriveSelectorModal';
 import { ProgressButton } from '../../components/progress-button/progress-button';
+import { SourceOptions } from '../../components/source-selector/source-selector';
 import { SVGIcon } from '../../components/svg-icon/svg-icon';
 import * as availableDrives from '../../models/available-drives';
 import * as flashState from '../../models/flash-state';
@@ -73,7 +74,7 @@ const getErrorMessageFromCode = (errorCode: string) => {
 
 async function flashImageToDrive(
 	goToSuccess: () => void,
-	source: any,
+	sourceOptions: SourceOptions,
 ): Promise<string> {
 	const devices = selection.getSelectedDevices();
 	const image: any = selection.getImage();
@@ -92,7 +93,7 @@ async function flashImageToDrive(
 	const iconPath = '../../assets/icon.png';
 	const basename = path.basename(image.path);
 	try {
-		await imageWriter.flash(image.path, drives, source);
+		await imageWriter.flash(image.path, drives, sourceOptions);
 		if (!flashState.wasLastFlashCancelled()) {
 			const flashResults: any = flashState.getFlashResults();
 			notification.send(
@@ -308,7 +309,7 @@ export const Flash = ({
 				>
 					<Txt>
 						{_.map(errorMessage.split('\n'), (message, key) => (
-							<p key={`${message}-${key}`}>{message}</p>
+							<p key={key}>{message}</p>
 						))}
 					</Txt>
 				</Modal>
diff --git a/lib/gui/app/styled-components.tsx b/lib/gui/app/styled-components.tsx
index 03d8cfc4..110b4944 100644
--- a/lib/gui/app/styled-components.tsx
+++ b/lib/gui/app/styled-components.tsx
@@ -33,19 +33,21 @@ const theme = {
 			opacity: 1,
 		},
 		extend: () => `
-      width: 200px;
-      height: 48px;
-      font-size: 16px;
+      && {
+				width: 200px;
+				height: 48px;
+				font-size: 16px;
 
-      &:disabled {
-        background-color: ${colors.dark.disabled.background};
-        color: ${colors.dark.disabled.foreground};
-        opacity: 1;
+				&:disabled {
+					background-color: ${colors.dark.disabled.background};
+					color: ${colors.dark.disabled.foreground};
+					opacity: 1;
 
-        &:hover {
-          background-color: ${colors.dark.disabled.background};
-          color: ${colors.dark.disabled.foreground};
-        }
+					&:hover {
+						background-color: ${colors.dark.disabled.background};
+						color: ${colors.dark.disabled.foreground};
+					}
+				}
       }
     `,
 	},
@@ -79,22 +81,27 @@ export const StepButton = styled((props: ButtonProps) => (
 	margin: auto;
 `;
 
-export const ChangeButton = styled(BaseButton)`
-	color: ${colors.primary.background};
-	padding: 0;
-	width: 100%;
-	height: auto;
+export const ChangeButton = styled(Button)`
+	&& {
+		border-radius: 24px;
+		color: ${colors.primary.background};
+		padding: 0;
+		height: 18px;
+		font-size: 14px;
 
-	&:enabled {
-		&:hover,
-		&:focus,
-		&:active {
-			color: #8f9297;
+		&:enabled {
+			&:hover,
+			&:focus,
+			&:active {
+				color: #8f9297;
+			}
 		}
+		${space}
 	}
-	${space}
 `;
-export const StepNameButton = styled(BaseButton)`
+export const StepNameButton = styled(Button)`
+	border-radius: 24px;
+	margin: auto;
 	display: flex;
 	justify-content: center;
 	align-items: center;
diff --git a/lib/gui/app/theme.ts b/lib/gui/app/theme.ts
index bfebe600..aeaefa33 100644
--- a/lib/gui/app/theme.ts
+++ b/lib/gui/app/theme.ts
@@ -44,7 +44,7 @@ export const colors = {
 	},
 	primary: {
 		foreground: '#fff',
-		background: '#2297de',
+		background: '#00aeef',
 	},
 	secondary: {
 		foreground: '#000',