Add primary colors to default flow

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

lib/gui/app/components/flash-results/flash-results.tsx

@@ -34,24 +34,24 @@ import { middleEllipsis } from '../../utils/middle-ellipsis';
 import { Modal, Table } from '../../styled-components';
 
 const ErrorsTable = styled((props) => <Table<FlashError> {...props} />)`
-&&& [data-display='table-head'],
+	&&& [data-display='table-head'],
-&&& [data-display='table-body'] {
+	&&& [data-display='table-body'] {
-	> [data-display='table-row'] {
+		> [data-display='table-row'] {
-		> [data-display='table-cell'] {
+			> [data-display='table-cell'] {
-			&:first-child {
+				&:first-child {
-				width: 30%;
+					width: 30%;
-			}
+				}
 
-			&:nth-child(2) {
+				&:nth-child(2) {
-				width: 20%;
+					width: 20%;
-			}
+				}
 
-			&:last-child {
+				&:last-child {
-				width: 50%;
+					width: 50%;
+				}
 			}
 		}
 	}
-}
 `;
 const DoneIcon = (props: {
 	skipped: boolean;

lib/gui/app/components/source-selector/source-selector.tsx

@@ -214,10 +214,13 @@ interface Flow {
 }
 
 const FlowSelector = styled(
-	({ flow, ...props }: { flow: Flow; props?: ButtonProps }) => (
+	({ flow, ...props }: { flow: Flow } & ButtonProps) => (
 		<StepButton
-			plain
+			plain={!props.primary}
-			onClick={(evt) => flow.onClick(evt)}
+			primary={props.primary}
+			onClick={(evt: React.MouseEvent<Element, MouseEvent>) =>
+				flow.onClick(evt)
+			}
 			icon={flow.icon}
 			{...props}
 		>
@@ -273,6 +276,7 @@ interface SourceSelectorState {
 	showImageDetails: boolean;
 	showURLSelector: boolean;
 	showDriveSelector: boolean;
+	defaultFlowActive: boolean;
 }
 
 export class SourceSelector extends React.Component<
@@ -289,6 +293,7 @@ export class SourceSelector extends React.Component<
 			showImageDetails: false,
 			showURLSelector: false,
 			showDriveSelector: false,
+			defaultFlowActive: true,
 		};
 
 		// Bind `this` since it's used in an event's callback
@@ -534,6 +539,10 @@ export class SourceSelector extends React.Component<
 		});
 	}
 
+	private setDefaultFlowActive(defaultFlowActive: boolean) {
+		this.setState({ defaultFlowActive });
+	}
+
 	// TODO add a visual change when dragging a file over the selector
 	public render() {
 		const { flashing } = this.props;
@@ -600,12 +609,15 @@ export class SourceSelector extends React.Component<
 					) : (
 						<>
 							<FlowSelector
+								primary={this.state.defaultFlowActive}
 								key="Flash from file"
 								flow={{
 									onClick: () => this.openImageSelector(),
 									label: 'Flash from file',
 									icon: <FileSvg height="1em" fill="currentColor" />,
 								}}
+								onMouseEnter={() => this.setDefaultFlowActive(false)}
+								onMouseLeave={() => this.setDefaultFlowActive(true)}
 							/>
 							<FlowSelector
 								key="Flash from URL"
@@ -614,6 +626,8 @@ export class SourceSelector extends React.Component<
 									label: 'Flash from URL',
 									icon: <LinkSvg height="1em" fill="currentColor" />,
 								}}
+								onMouseEnter={() => this.setDefaultFlowActive(false)}
+								onMouseLeave={() => this.setDefaultFlowActive(true)}
 							/>
 							<FlowSelector
 								key="Clone drive"
@@ -622,6 +636,8 @@ export class SourceSelector extends React.Component<
 									label: 'Clone drive',
 									icon: <CopySvg height="1em" fill="currentColor" />,
 								}}
+								onMouseEnter={() => this.setDefaultFlowActive(false)}
+								onMouseLeave={() => this.setDefaultFlowActive(true)}
 							/>
 						</>
 					)}

lib/gui/app/theme.ts

@@ -1,21 +1,21 @@
 /*
-* Copyright 2018 balena.io
+ * Copyright 2018 balena.io
-*
+ *
-* Licensed under the Apache License, Version 2.0 (the "License"),
+ * Licensed under the Apache License, Version 2.0 (the "License"),
-* you may not use this file except in compliance with the License.
+ * you may not use this file except in compliance with the License.
-* You may obtain a copy of the License at
+ * You may obtain a copy of the License at
-*
+ *
-*    http://www.apache.org/licenses/LICENSE-2.0
+ *    http://www.apache.org/licenses/LICENSE-2.0
-*
+ *
-* Unless required by applicable law or agreed to in writing, software
+ * Unless required by applicable law or agreed to in writing, software
-* distributed under the License is distributed on an "AS IS" BASIS,
+ * distributed under the License is distributed on an "AS IS" BASIS,
-* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-* See the License for the specific language governing permissions and
+ * See the License for the specific language governing permissions and
-* limitations under the License.
+ * limitations under the License.
-*/
+ */
 
-import * as _ from "lodash";
+import * as _ from 'lodash';
-import { Theme } from "rendition";
+import { Theme } from 'rendition';
 
 export const colors = {
 	dark: {