Refactor UI grid to use rendition

Change-type: patch
Changelog-entry: Refactor UI grid to use rendition
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>

lib/gui/app/components/progress-button/progress-button.tsx

@@ -84,7 +84,9 @@ export class ProgressButton extends React.PureComponent<ProgressButtonProps> {
 			return (
 				<>
 					<Flex
+						alignItems="baseline"
 						justifyContent="space-between"
+						width="100%"
 						style={{
 							marginTop: 42,
 							marginBottom: '6px',

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

@@ -22,7 +22,14 @@ import * as _ from 'lodash';
 import { GPTPartition, MBRPartition } from 'partitioninfo';
 import * as path from 'path';
 import * as React from 'react';
-import { ButtonProps, Card as BaseCard, Input, Modal, Txt } from 'rendition';
+import {
+	ButtonProps,
+	Card as BaseCard,
+	Input,
+	Modal,
+	Txt,
+	Flex,
+} from 'rendition';
 import styled from 'styled-components';
 
 import * as errors from '../../../../shared/errors';
@@ -464,25 +471,22 @@ export class SourceSelector extends React.Component<
 
 		return (
 			<>
-				<div
+				<Flex
-					className="box text-center relative"
+					flexDirection="column"
+					alignItems="center"
 					onDrop={this.onDrop}
 					onDragEnter={this.onDragEnter}
 					onDragOver={this.onDragOver}
 				>
-					<div className="center-block">
 					<SVGIcon
 						contents={imageLogo}
-							fallback={<ImageSvg width="40px" height="40px" />}
+						fallback={<ImageSvg width="40px" />}
 					/>
-					</div>
 
-					<div className="space-vertical-large">
 					{hasImage ? (
 						<>
 							<StepNameButton
 								plain
-									fontSize={16}
 								onClick={this.showSelectedImageDetails}
 								tooltip={imageName || imageBasename}
 							>
@@ -493,9 +497,7 @@ export class SourceSelector extends React.Component<
 									Remove
 								</ChangeButton>
 							)}
-								<DetailsText>
+							<DetailsText>{shared.bytesToClosestUnit(imageSize)}</DetailsText>
-									{shared.bytesToClosestUnit(imageSize)}
-								</DetailsText>
 						</>
 					) : (
 						<>
@@ -517,8 +519,7 @@ export class SourceSelector extends React.Component<
 							/>
 						</>
 					)}
-					</div>
+				</Flex>
-				</div>
 
 				{this.state.warning != null && (
 					<Modal

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

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

lib/gui/app/pages/main/DriveSelector.tsx

@@ -16,8 +16,7 @@
 
 import { scanner } from 'etcher-sdk';
 import * as React from 'react';
-import styled from 'styled-components';
+import { Flex } from 'rendition';
-
 import { TargetSelector } from '../../components/target-selector/target-selector-button';
 import { TargetSelectorModal } from '../../components/target-selector/target-selector-modal';
 import {
@@ -30,27 +29,8 @@ import {
 import * as settings from '../../models/settings';
 import { observe } from '../../models/store';
 import * as analytics from '../../modules/analytics';
-
 import DriveSvg from '../../../assets/drive.svg';
 
-const StepBorder = styled.div<{
-	disabled: boolean;
-	left?: boolean;
-	right?: boolean;
-}>`
-	height: 2px;
-	background-color: ${(props) =>
-		props.disabled
-			? props.theme.colors.dark.disabled.foreground
-			: props.theme.colors.dark.foreground};
-	position: absolute;
-	width: 124px;
-	top: 19px;
-
-	left: ${(props) => (props.left ? '-67px' : undefined)};
-	right: ${(props) => (props.right ? '-67px' : undefined)};
-`;
-
 const getDriveListLabel = () => {
 	return getSelectedDrives()
 		.map((drive: any) => {
@@ -100,17 +80,13 @@ export const selectAllTargets = (
 };
 
 interface DriveSelectorProps {
-	webviewShowing: boolean;
 	disabled: boolean;
-	nextStepDisabled: boolean;
 	hasDrive: boolean;
 	flashing: boolean;
 }
 
 export const DriveSelector = ({
-	webviewShowing,
 	disabled,
-	nextStepDisabled,
 	hasDrive,
 	flashing,
 }: DriveSelectorProps) => {
@@ -129,22 +105,10 @@ export const DriveSelector = ({
 		});
 	}, []);
 
-	const showStepConnectingLines = !webviewShowing || !flashing;
-
 	return (
-		<div className="box text-center relative">
+		<Flex flexDirection="column" alignItems="center">
-			{showStepConnectingLines && (
-				<>
-					<StepBorder disabled={disabled} left />
-					<StepBorder disabled={nextStepDisabled} right />
-				</>
-			)}
-
-			<div className="center-block">
 			<DriveSvg className={disabled ? 'disabled' : ''} width="40px" />
-			</div>
 
-			<div className="space-vertical-large">
 			<TargetSelector
 				disabled={disabled}
 				show={!hasDrive && showDrivesButton}
@@ -160,7 +124,6 @@ export const DriveSelector = ({
 				targets={targets}
 				image={image}
 			/>
-			</div>
 
 			{showTargetSelectorModal && (
 				<TargetSelectorModal
@@ -171,6 +134,6 @@ export const DriveSelector = ({
 					}}
 				></TargetSelectorModal>
 			)}
-		</div>
+		</Flex>
 	);
 };

lib/gui/app/pages/main/Flash.tsx

@@ -234,15 +234,12 @@ export class FlashStep extends React.PureComponent<
 	public render() {
 		return (
 			<>
-				<div className="box text-center">
+				<Flex flexDirection="column" alignItems="center">
-					<div className="center-block">
 					<FlashSvg
 						width="40px"
 						className={this.props.shouldFlashStepBeDisabled ? 'disabled' : ''}
 					/>
-					</div>
 
-					<div className="space-vertical-large">
 					<ProgressButton
 						type={this.props.step}
 						active={this.props.isFlashing}
@@ -265,6 +262,7 @@ export class FlashStep extends React.PureComponent<
 								justifyContent="space-between"
 								fontSize="14px"
 								color="#7e8085"
+								width="100%"
 							>
 								{!_.isNil(this.props.speed) && (
 									<Txt>{this.props.speed.toFixed(SPEED_PRECISION)} MB/s</Txt>
@@ -288,8 +286,7 @@ export class FlashStep extends React.PureComponent<
 							</div>
 						</div>
 					)}
-					</div>
+				</Flex>
-				</div>
 
 				{this.state.warningMessages.length > 0 && (
 					<Modal

lib/gui/app/pages/main/MainPage.tsx

@@ -78,6 +78,26 @@ function getImageBasename() {
 	return selectionImageName || imageBasename;
 }
 
+const StepBorder = styled.div<{
+	disabled: boolean;
+	left?: boolean;
+	right?: boolean;
+}>`
+	position: relative;
+	height: 2px;
+	background-color: ${(props) =>
+		props.disabled
+			? props.theme.colors.dark.disabled.foreground
+			: props.theme.colors.dark.foreground};
+	width: 120px;
+	top: 19px;
+
+	left: ${(props) => (props.left ? '-67px' : undefined)};
+	margin-right: ${(props) => (props.left ? '-120px' : undefined)};
+	right: ${(props) => (props.right ? '-67px' : undefined)};
+	margin-left: ${(props) => (props.right ? '-120px' : undefined)};
+`;
+
 interface MainPageStateFromStore {
 	isFlashing: boolean;
 	hasImage: boolean;
@@ -193,46 +213,37 @@ export class MainPage extends React.Component<
 					/>
 				)}
 
-				<Flex
+				<Flex m="110px 55px" justifyContent="space-between">
-					className="page-main row around-xs"
-					style={{ margin: '110px 50px' }}
-				>
-					<div className="col-xs">
 					<SourceSelector
 						flashing={this.state.isFlashing}
-							afterSelected={(source: SourceOptions) =>
+						afterSelected={(source: SourceOptions) => this.setState({ source })}
-								this.setState({ source })
-							}
 					/>
-					</div>
 
-					<div className="col-xs">
+					{(!this.state.isWebviewShowing || !this.state.isFlashing) && (
+						<Flex>
+							<StepBorder disabled={shouldDriveStepBeDisabled} left />
+						</Flex>
+					)}
+
 					<DriveSelector
-							webviewShowing={this.state.isWebviewShowing}
 						disabled={shouldDriveStepBeDisabled}
-							nextStepDisabled={shouldFlashStepBeDisabled}
 						hasDrive={this.state.hasDrive}
 						flashing={this.state.isFlashing}
 					/>
-					</div>
 
-					{this.state.isFlashing && (
+					{(!this.state.isWebviewShowing || !this.state.isFlashing) && (
-						<div
+						<Flex>
-							className={`featured-project ${
+							<StepBorder disabled={shouldFlashStepBeDisabled} right />
-								this.state.isFlashing && this.state.isWebviewShowing
+						</Flex>
-									? 'fp-visible'
+					)}
-									: ''
+
-							}`}
+					{this.state.isFlashing && this.state.isWebviewShowing && (
-						>
+						<>
 							<FeaturedProject
 								onWebviewShow={(isWebviewShowing: boolean) => {
 									this.setState({ isWebviewShowing });
 								}}
 							/>
-						</div>
-					)}
-
-					<div>
 							<ReducedFlashingInfos
 								imageLogo={this.state.imageLogo}
 								imageName={middleEllipsis(this.state.imageName, 16)}
@@ -242,11 +253,13 @@ export class MainPage extends React.Component<
 										: ''
 								}
 								driveTitle={middleEllipsis(this.state.driveTitle, 16)}
-							shouldShow={this.state.isFlashing && this.state.isWebviewShowing}
+								shouldShow={
+									this.state.isFlashing && this.state.isWebviewShowing
+								}
 							/>
-					</div>
+						</>
+					)}
 
-					<div className="col-xs">
 					<FlashStep
 						goToSuccess={() => this.setState({ current: 'success' })}
 						shouldFlashStepBeDisabled={shouldFlashStepBeDisabled}
@@ -259,7 +272,6 @@ export class MainPage extends React.Component<
 						speed={state.speed}
 						eta={state.eta}
 					/>
-					</div>
 				</Flex>
 			</>
 		);

lib/gui/app/styled-components.tsx

@@ -54,7 +54,6 @@ export const StepButton = styled((props: ButtonProps) => (
 	<BaseButton {...props}></BaseButton>
 ))`
 	color: #ffffff;
-	margin: auto;
 `;
 
 export const ChangeButton = styled(Button)`