Add primary colors to default flow

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

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
-			onClick={(evt) => flow.onClick(evt)}
+			plain={!props.primary}
+			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

@@ -14,8 +14,8 @@
  * limitations under the License.
  */
 
-import * as _ from "lodash";
-import { Theme } from "rendition";
+import * as _ from 'lodash';
+import { Theme } from 'rendition';
 
 export const colors = {
 	dark: {