Refactor buttons style

Change-type: patch
Changelog-entry: Refactor buttons style
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>

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

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>`

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

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: [],
 			});
 		}
 	}

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>

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;

lib/gui/app/theme.ts

@@ -44,7 +44,7 @@ export const colors = {
 	},
 	primary: {
 		foreground: '#fff',
-		background: '#2297de',
+		background: '#00aeef',
 	},
 	secondary: {
 		foreground: '#000',