Move a couple of files to typescript and remove unnecessary $timeout

Change-type: patch
Signed-off-by: Stevche Radevski <stevche@balena.io>

lib/gui/app/components/drive-selector/target-selector.jsx

@@ -150,6 +150,7 @@ const TargetSelector = (props) => {
 }
 
 TargetSelector.propTypes = {
+  targets: propTypes.array,
   disabled: propTypes.bool,
   openDriveSelector: propTypes.func,
   selection: propTypes.object,

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

@@ -14,158 +14,124 @@
  * limitations under the License.
  */
 
-'use strict'
+import * as _ from 'lodash';
+import * as propTypes from 'prop-types';
+import * as React from 'react';
+import styled from 'styled-components';
+import * as TargetSelector from '../../components/drive-selector/target-selector.jsx';
+import * as SvgIcon from '../../components/svg-icon/svg-icon.jsx';
+import * as selectionState from '../../models/selection-state';
+import * as settings from '../../models/settings';
+import * as store from '../../models/store';
+import * as analytics from '../../modules/analytics';
+import * as exceptionReporter from '../../modules/exception-reporter';
+import * as driveConstraints from '../../../../shared/drive-constraints';
+import * as utils from '../../../../shared/utils';
 
-const _ = require('lodash')
+const StepBorder = styled.div<{
-const propTypes = require('prop-types')
+	disabled: boolean;
-const React = require('react')
+	left?: boolean;
-const driveConstraints = require('../../../../shared/drive-constraints')
+	right?: boolean;
-const utils = require('../../../../shared/utils')
+}>`
-const TargetSelector = require('../../components/drive-selector/target-selector.jsx')
+	height: 2px;
-const SvgIcon = require('../../components/svg-icon/svg-icon.jsx')
+	background-color: ${props =>
-const selectionState = require('../../models/selection-state')
+		props.disabled
-const settings = require('../../models/settings')
+			? props.theme.customColors.dark.disabled.foreground
-const store = require('../../models/store')
+			: props.theme.customColors.dark.foreground};
-const analytics = require('../../modules/analytics')
+	position: absolute;
-const exceptionReporter = require('../../modules/exception-reporter')
+	width: 124px;
+	top: 19px;
+
+	left: ${props => (props.left ? '-67px' : undefined)};
+	right: ${props => (props.right ? '-67px' : undefined)};
+`;
 
-/**
- * @summary Get drive list label
- * @function
- * @public
- *
- * @returns {String} - 'list' of drives separated by newlines
- *
- * @example
- * console.log(getDriveListLabel())
- * > 'My Drive (/dev/disk1)\nMy Other Drive (/dev/disk2)'
- */
 const getDriveListLabel = () => {
-  return _.join(_.map(selectionState.getSelectedDrives(), (drive) => {
+	return _.join(
-    return `${drive.description} (${drive.displayName})`
+		_.map(selectionState.getSelectedDrives(), (drive: any) => {
-  }), '\n')
+			return `${drive.description} (${drive.displayName})`;
-}
+		}),
+		'\n',
+	);
+};
 
-/**
+const openDriveSelector = async (DriveSelectorService: any) => {
- * @summary Open drive selector
- * @function
- * @public
- * @param {Object} DriveSelectorService - drive selector service
- *
- * @example
- * openDriveSelector(DriveSelectorService);
- */
-const openDriveSelector = async (DriveSelectorService) => {
 	try {
-    const drive = await DriveSelectorService.open()
+		const drive = await DriveSelectorService.open();
 		if (!drive) {
-      return
+			return;
 		}
 
-    selectionState.selectDrive(drive.device)
+		selectionState.selectDrive(drive.device);
 
 		analytics.logEvent('Select drive', {
 			device: drive.device,
-      unsafeMode: settings.get('unsafeMode') && !settings.get('disableUnsafeMode'),
+			unsafeMode:
-      applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
+				settings.get('unsafeMode') && !settings.get('disableUnsafeMode'),
-      flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
+			applicationSessionUuid: (store as any).getState().toJS().applicationSessionUuid,
-    })
+			flashingWorkflowUuid: (store as any).getState().toJS().flashingWorkflowUuid,
+		});
 	} catch (error) {
-    exceptionReporter.report(error)
+		exceptionReporter.report(error);
-  }
 	}
+};
 
-/**
+const reselectDrive = (DriveSelectorService: any) => {
- * @summary Reselect a drive
+	openDriveSelector(DriveSelectorService);
- * @function
- * @public
- * @param {Object} DriveSelectorService - drive selector service
- *
- * @example
- * reselectDrive(DriveSelectorService);
- */
-const reselectDrive = (DriveSelectorService) => {
-  openDriveSelector(DriveSelectorService)
 	analytics.logEvent('Reselect drive', {
-    applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
+		applicationSessionUuid: (store as any).getState().toJS().applicationSessionUuid,
-    flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
+		flashingWorkflowUuid: (store as any).getState().toJS().flashingWorkflowUuid,
-  })
+	});
-}
+};
 
-/**
+const getMemoizedSelectedDrives = utils.memoize(
- * @summary Get memoized selected drives
+	selectionState.getSelectedDrives,
- * @function
+	_.isEqual,
- * @public
+);
- *
- * @example
- * getMemoizedSelectedDrives()
- */
-const getMemoizedSelectedDrives = utils.memoize(selectionState.getSelectedDrives, _.isEqual)
 
-/**
- * @summary Should the drive selection button be shown
- * @function
- * @public
- *
- * @returns {Boolean}
- *
- * @example
- * shouldShowDrivesButton()
- */
 const shouldShowDrivesButton = () => {
-  return !settings.get('disableExplicitDriveSelection')
+	return !settings.get('disableExplicitDriveSelection');
-}
+};
 
 const getDriveSelectionStateSlice = () => ({
 	showDrivesButton: shouldShowDrivesButton(),
 	driveListLabel: getDriveListLabel(),
-  targets: getMemoizedSelectedDrives()
+	targets: getMemoizedSelectedDrives(),
-})
+});
 
-const DriveSelector = ({
+export const DriveSelector = ({
 	webviewShowing,
 	disabled,
 	nextStepDisabled,
 	hasDrive,
 	flashing,
-  DriveSelectorService
+	DriveSelectorService,
-}) => {
+}: any) => {
 	// TODO: inject these from redux-connector
-  const [ {
+	const [
-    showDrivesButton,
+		{ showDrivesButton, driveListLabel, targets },
-    driveListLabel,
+		setStateSlice,
-    targets
+	] = React.useState(getDriveSelectionStateSlice());
-  }, setStateSlice ] = React.useState(getDriveSelectionStateSlice())
 
 	React.useEffect(() => {
-    return store.observe(() => {
+		return (store as any).observe(() => {
-      setStateSlice(getDriveSelectionStateSlice())
+			setStateSlice(getDriveSelectionStateSlice());
-    })
+		});
-  }, [])
+	}, []);
 
-  const showStepConnectingLines = !webviewShowing || !flashing
+	const showStepConnectingLines = !webviewShowing || !flashing;
 
 	return (
 		<div className="box text-center relative">
-
 			{showStepConnectingLines && (
 				<React.Fragment>
-          <div
+					<StepBorder disabled={disabled} left />
-            className="step-border-left"
+					<StepBorder disabled={nextStepDisabled} right />
-            disabled={disabled}
-          ></div>
-          <div
-            className="step-border-right"
-            disabled={nextStepDisabled}
-          ></div>
 				</React.Fragment>
 			)}
 
 			<div className="center-block">
-        <SvgIcon
+				<SvgIcon paths={['../../assets/drive.svg']} disabled={disabled} />
-          paths={[ '../../assets/drive.svg' ]}
-          disabled={disabled}
-        />
 			</div>
 
 			<div className="space-vertical-large">
@@ -182,15 +148,14 @@ const DriveSelector = ({
 				/>
 			</div>
 		</div>
-  )
+	);
-}
+};
 
 DriveSelector.propTypes = {
 	webviewShowing: propTypes.bool,
 	disabled: propTypes.bool,
 	nextStepDisabled: propTypes.bool,
 	hasDrive: propTypes.bool,
-  flashing: propTypes.bool
+	flashing: propTypes.bool,
-}
+	DriveSelectorService: propTypes.object,
-
+};
-module.exports = DriveSelector

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

@@ -14,123 +14,120 @@
  * limitations under the License.
  */
 
-'use strict'
+import * as _ from 'lodash';
+import * as path from 'path';
+import * as React from 'react';
+import { Modal, Txt } from 'rendition';
+import * as ProgressButton from '../../components/progress-button/progress-button.jsx';
+import * as SvgIcon from '../../components/svg-icon/svg-icon.jsx';
+import * as availableDrives from '../../models/available-drives';
+import * as flashState from '../../models/flash-state';
+import * as selection from '../../models/selection-state';
+import * as store from '../../models/store';
+import * as analytics from '../../modules/analytics';
+import * as driveScanner from '../../modules/drive-scanner';
+import * as imageWriter from '../../modules/image-writer';
+import * as progressStatus from '../../modules/progress-status';
+import * as notification from '../../os/notification';
+import * as constraints from '../../../../shared/drive-constraints';
+import * as messages from '../../../../shared/messages';
 
-const React = require('react')
+const COMPLETED_PERCENTAGE = 100;
-const _ = require('lodash')
+const SPEED_PRECISION = 2;
 
-const { Modal, Txt } = require('rendition')
+const getWarningMessages = (drives: any, image: any) => {
-const messages = require('../../../../shared/messages')
+	const warningMessages = [];
-const flashState = require('../../models/flash-state')
-const driveScanner = require('../../modules/drive-scanner')
-const progressStatus = require('../../modules/progress-status')
-const notification = require('../../os/notification')
-const analytics = require('../../modules/analytics')
-const imageWriter = require('../../modules/image-writer')
-const path = require('path')
-const store = require('../../models/store')
-const constraints = require('../../../../shared/drive-constraints')
-const availableDrives = require('../../models/available-drives')
-const selection = require('../../models/selection-state')
-const SvgIcon = require('../../components/svg-icon/svg-icon.jsx')
-const ProgressButton = require('../../components/progress-button/progress-button.jsx')
-
-const COMPLETED_PERCENTAGE = 100
-const SPEED_PRECISION = 2
-
-const getWarningMessages = (drives, image) => {
-  const warningMessages = []
 	for (const drive of drives) {
 		if (constraints.isDriveSizeLarge(drive)) {
-      warningMessages.push(messages.warning.largeDriveSize(drive))
+			warningMessages.push(messages.warning.largeDriveSize(drive));
 		} else if (!constraints.isDriveSizeRecommended(drive, image)) {
-      warningMessages.push(messages.warning.unrecommendedDriveSize(image, drive))
+			warningMessages.push(
+				messages.warning.unrecommendedDriveSize(image, drive),
+			);
 		}
 
 		// TODO(Shou): we should consider adding the same warning dialog for system drives and remove unsafe mode
 	}
 
-  return warningMessages
+	return warningMessages;
-}
+};
 
-const getErrorMessageFromCode = (errorCode) => {
+const getErrorMessageFromCode = (errorCode: string) => {
 	// TODO: All these error codes to messages translations
 	// should go away if the writer emitted user friendly
 	// messages on the first place.
 	if (errorCode === 'EVALIDATION') {
-    return messages.error.validation()
+		return messages.error.validation();
 	} else if (errorCode === 'EUNPLUGGED') {
-    return messages.error.driveUnplugged()
+		return messages.error.driveUnplugged();
 	} else if (errorCode === 'EIO') {
-    return messages.error.inputOutput()
+		return messages.error.inputOutput();
 	} else if (errorCode === 'ENOSPC') {
-    return messages.error.notEnoughSpaceInDrive()
+		return messages.error.notEnoughSpaceInDrive();
 	} else if (errorCode === 'ECHILDDIED') {
-    return messages.error.childWriterDied()
+		return messages.error.childWriterDied();
-  }
-  return ''
 	}
+	return '';
+};
 
-const flashImageToDrive = async ($timeout, $state) => {
+const flashImageToDrive = async (goToSuccess: () => void) => {
-  const devices = selection.getSelectedDevices()
+	const devices = selection.getSelectedDevices();
-  const image = selection.getImage()
+	const image: any = selection.getImage();
-  const drives = _.filter(availableDrives.getDrives(), (drive) => {
+	const drives = _.filter(availableDrives.getDrives(), (drive: any) => {
-    return _.includes(devices, drive.device)
+		return _.includes(devices, drive.device);
-  })
+	});
 
 	// eslint-disable-next-line no-magic-numbers
 	if (drives.length === 0 || flashState.isFlashing()) {
-    return ''
+		return '';
 	}
 
-  // Trigger Angular digests along with store updates, as the flash state
-  // updates. The angular components won't update without it.
-  // TODO: Remove once moved entirely to React
-  const unsubscribe = store.observe($timeout)
-
 	// Stop scanning drives when flashing
 	// otherwise Windows throws EPERM
-  driveScanner.stop()
+	driveScanner.stop();
 
-  const iconPath = '../../assets/icon.png'
+	const iconPath = '../../assets/icon.png';
-  const basename = path.basename(image.path)
+	const basename = path.basename(image.path);
 	try {
-    await imageWriter.flash(image.path, drives)
+		await imageWriter.flash(image.path, drives);
 		if (!flashState.wasLastFlashCancelled()) {
-      const flashResults = flashState.getFlashResults()
+			const flashResults: any = flashState.getFlashResults();
 			notification.send('Flash complete!', {
-        body: messages.info.flashComplete(basename, drives, flashResults.results.devices),
+				body: messages.info.flashComplete(
-        icon: iconPath
+					basename,
-      })
+					drives as any,
-      $state.go('success')
+					flashResults.results.devices,
+				),
+				icon: iconPath,
+			});
+			goToSuccess();
 		}
 	} catch (error) {
 		// When flashing is cancelled before starting above there is no error
 		if (!error) {
-      return ''
+			return '';
 		}
 
 		notification.send('Oops! Looks like the flash failed.', {
 			body: messages.error.flashFailure(path.basename(image.path), drives),
-      icon: iconPath
+			icon: iconPath,
-    })
+		});
 
-    let errorMessage = getErrorMessageFromCode(error.code)
+		let errorMessage = getErrorMessageFromCode(error.code);
 		if (!errorMessage) {
-      error.image = basename
+			error.image = basename;
-      analytics.logException(error)
+			analytics.logException(error);
-      errorMessage = messages.error.genericFlashError()
+			errorMessage = messages.error.genericFlashError();
 		}
 
-    return errorMessage
+		return errorMessage;
 	} finally {
-    availableDrives.setDrives([])
+		availableDrives.setDrives([]);
-    driveScanner.start()
+		driveScanner.start();
-    unsubscribe()
 	}
 
-  // Return ''
+	return '';
-}
+};
 
 /**
  * @summary Get progress button label
@@ -144,84 +141,94 @@ const flashImageToDrive = async ($timeout, $state) => {
  */
 const getProgressButtonLabel = () => {
 	if (!flashState.isFlashing()) {
-    return 'Flash!'
+		return 'Flash!';
 	}
 
-  return progressStatus.fromFlashState(flashState.getFlashState())
+	return progressStatus.fromFlashState(flashState.getFlashState());
-}
+};
 
-const formatSeconds = (totalSeconds) => {
+const formatSeconds = (totalSeconds: number) => {
 	if (!totalSeconds && !_.isNumber(totalSeconds)) {
-    return ''
+		return '';
 	}
 	// eslint-disable-next-line no-magic-numbers
-  const minutes = Math.floor(totalSeconds / 60)
+	const minutes = Math.floor(totalSeconds / 60);
 	// eslint-disable-next-line no-magic-numbers
-  const seconds = Math.floor(totalSeconds - minutes * 60)
+	const seconds = Math.floor(totalSeconds - minutes * 60);
 
-  return `${minutes}m${seconds}s`
+	return `${minutes}m${seconds}s`;
-}
+};
 
-const Flash = ({
+export const Flash = ({
-  shouldFlashStepBeDisabled, lastFlashErrorCode, progressMessage,
+	shouldFlashStepBeDisabled,
-  $timeout, $state, DriveSelectorService
+	lastFlashErrorCode,
-}) => {
+	progressMessage,
-  const state = flashState.getFlashState()
+	goToSuccess,
-  const isFlashing = flashState.isFlashing()
+	DriveSelectorService,
-  const flashErrorCode = lastFlashErrorCode()
+}: any) => {
+	const state: any = flashState.getFlashState();
+	const isFlashing = flashState.isFlashing();
+	const flashErrorCode = lastFlashErrorCode();
 
-  const [ warningMessages, setWarningMessages ] = React.useState([])
+	const [warningMessages, setWarningMessages] = React.useState<string[]>([]);
-  const [ errorMessage, setErrorMessage ] = React.useState('')
+	const [errorMessage, setErrorMessage] = React.useState('');
 
-  const handleWarningResponse = async (shouldContinue) => {
+	const handleWarningResponse = async (shouldContinue: boolean) => {
-    setWarningMessages([])
+		setWarningMessages([]);
 
 		if (!shouldContinue) {
-      DriveSelectorService.open()
+			DriveSelectorService.open();
-      return
+			return;
 		}
 
-    setErrorMessage(await flashImageToDrive($timeout, $state))
+		setErrorMessage(await flashImageToDrive(goToSuccess));
-  }
+	};
 
-  const handleFlashErrorResponse = (shouldRetry) => {
+	const handleFlashErrorResponse = (shouldRetry: boolean) => {
-    setErrorMessage('')
+		setErrorMessage('');
-    flashState.resetState()
+		flashState.resetState();
 		if (shouldRetry) {
 			analytics.logEvent('Restart after failure', {
-        applicationSessionUuid: store.getState().toJS().applicationSessionUuid,
+				applicationSessionUuid: (store as any).getState().toJS().applicationSessionUuid,
-        flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid
+				flashingWorkflowUuid: (store as any).getState().toJS().flashingWorkflowUuid,
-      })
+			});
 		} else {
-      selection.clear()
+			selection.clear();
-    }
 		}
+	};
 
 	const tryFlash = async () => {
-    const devices = selection.getSelectedDevices()
+		const devices = selection.getSelectedDevices();
-    const image = selection.getImage()
+		const image = selection.getImage();
-    const drives = _.filter(availableDrives.getDrives(), (drive) => {
+		const drives = _.filter(availableDrives.getDrives(), (drive: any) => {
-      return _.includes(devices, drive.device)
+			return _.includes(devices, drive.device);
-    })
+		});
 
 		// eslint-disable-next-line no-magic-numbers
 		if (drives.length === 0 || flashState.isFlashing()) {
-      return
+			return;
 		}
 
-    const hasDangerStatus = constraints.hasListDriveImageCompatibilityStatus(drives, image)
+		const hasDangerStatus = constraints.hasListDriveImageCompatibilityStatus(
+			drives,
+			image,
+		);
 		if (hasDangerStatus) {
-      setWarningMessages(getWarningMessages(drives, image))
+			setWarningMessages(getWarningMessages(drives, image));
-      return
+			return;
 		}
 
-    setErrorMessage(await flashImageToDrive($timeout, $state))
+		setErrorMessage(await flashImageToDrive(goToSuccess));
-  }
+	};
 
-  return <React.Fragment>
+	return (
+		<React.Fragment>
 			<div className="box text-center">
 				<div className="center-block">
-        <SvgIcon paths={[ '../../assets/flash.svg' ]} disabled={shouldFlashStepBeDisabled}/>
+					<SvgIcon
+						paths={['../../assets/flash.svg']}
+						disabled={shouldFlashStepBeDisabled}
+					/>
 				</div>
 
 				<div className="space-vertical-large">
@@ -232,53 +239,65 @@ const Flash = ({
 						percentage={state.percentage}
 						label={getProgressButtonLabel()}
 						disabled={Boolean(flashErrorCode) || shouldFlashStepBeDisabled}
-          callback={tryFlash}>
+						callback={tryFlash}
-        </ProgressButton>
+					></ProgressButton>
 
-        {
+					{isFlashing && (
-          isFlashing && <button className="button button-link button-abort-write" onClick={imageWriter.cancel}>
+						<button
+							className="button button-link button-abort-write"
+							onClick={imageWriter.cancel}
+						>
 							<span className="glyphicon glyphicon-remove-sign"></span>
 						</button>
-        }
+					)}
-        {
+					{!_.isNil(state.speed) && state.percentage !== COMPLETED_PERCENTAGE && (
-          !_.isNil(state.speed) && state.percentage !== COMPLETED_PERCENTAGE &&
 						<p className="step-footer step-footer-split">
-            {Boolean(state.speed) && <span >{`${state.speed.toFixed(SPEED_PRECISION)} MB/s`}</span>}
+							{Boolean(state.speed) && (
-            {!_.isNil(state.eta) && <span>{`ETA: ${formatSeconds(state.eta)}` }</span>}
+								<span>{`${state.speed.toFixed(SPEED_PRECISION)} MB/s`}</span>
+							)}
+							{!_.isNil(state.eta) && (
+								<span>{`ETA: ${formatSeconds(state.eta)}`}</span>
+							)}
 						</p>
-        }
+					)}
 
-        {
+					{Boolean(state.failed) && (
-          Boolean(state.failed) && <div className="target-status-wrap">
+						<div className="target-status-wrap">
 							<div className="target-status-line target-status-failed">
 								<span className="target-status-dot"></span>
 								<span className="target-status-quantity">{state.failed}</span>
-              <span className="target-status-message">{progressMessage.failed(state.failed)} </span>
+								<span className="target-status-message">
+									{progressMessage.failed(state.failed)}{' '}
+								</span>
 							</div>
 						</div>
-        }
+					)}
 				</div>
 			</div>
 
 			{/* eslint-disable-next-line no-magic-numbers */}
-    {warningMessages && warningMessages.length > 0 && <Modal
+			{warningMessages && warningMessages.length > 0 && (
+				<Modal
 					width={400}
 					titleElement={'Attention'}
 					cancel={() => handleWarningResponse(false)}
 					done={() => handleWarningResponse(true)}
 					cancelButtonProps={{
-        children: 'Change'
+						children: 'Change',
 					}}
 					action={'Continue'}
 					primaryButtonProps={{ primary: false, warning: true }}
 				>
-      {
+					{_.map(warningMessages, message => (
-        _.map(warningMessages, (message) => <Txt whitespace="pre-line" mt={2}>{message}</Txt>)
+						<Txt whitespace="pre-line" mt={2}>
-      }
+							{message}
+						</Txt>
+					))}
 				</Modal>
-    }
+			)}
 
-    {errorMessage && <Modal
+			{errorMessage && (
+				<Modal
 					width={400}
 					titleElement={'Attention'}
 					cancel={() => handleFlashErrorResponse(false)}
@@ -287,9 +306,7 @@ const Flash = ({
 				>
 					<Txt>{errorMessage}</Txt>
 				</Modal>
-    }
+			)}
-
 		</React.Fragment>
-}
+	);
-
+};
-module.exports = Flash

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

@@ -28,8 +28,8 @@ import * as middleEllipsis from '../../utils/middle-ellipsis';
 import * as messages from '../../../../shared/messages';
 import { bytesToClosestUnit } from '../../../../shared/units';
 
-import * as DriveSelector from './DriveSelector';
+import { DriveSelector } from './DriveSelector';
-import * as Flash from './Flash';
+import { Flash } from './Flash';
 
 const getDrivesTitle = (selection: any) => {
 	const drives = selection.getSelectedDrives();
@@ -55,7 +55,7 @@ const getImageBasename = (selection: any) => {
 	return selectionImageName || imageBasename;
 };
 
-const MainPage = ({ DriveSelectorService, $timeout, $state }: any) => {
+const MainPage = ({ DriveSelectorService, $state }: any) => {
 	const setRefresh = React.useState(false)[1];
 	const [isWebviewShowing, setIsWebviewShowing] = React.useState(false);
 	React.useEffect(() => {
@@ -127,8 +127,7 @@ const MainPage = ({ DriveSelectorService, $timeout, $state }: any) => {
 				<div className="col-xs">
 					<Flash
 						DriveSelectorService={DriveSelectorService}
-						$timeout={$timeout}
+						goToSuccess={() => $state.go('success')}
-						$state={$state}
 						shouldFlashStepBeDisabled={shouldFlashStepBeDisabled}
 						lastFlashErrorCode={lastFlashErrorCode}
 						progressMessage={progressMessage}

lib/gui/app/pages/main/main.ts

@@ -49,7 +49,7 @@ const Main = angular.module(MODULE_NAME, [
 
 Main.component(
 	'mainPage',
-	react2angular(MainPage, [], ['DriveSelectorService', '$timeout', '$state']),
+	react2angular(MainPage, [], ['DriveSelectorService', '$state']),
 );
 
 Main.config(($stateProvider: any) => {

lib/gui/app/pages/main/styles/_main.scss

@@ -64,28 +64,6 @@ img[disabled] {
   font-weight: 300;
 }
 
-%step-border {
-  height: 2px;
-  background-color: $palette-theme-dark-foreground;
-  position: absolute;
-  width: 124px;
-  top: 19px;
-
-  &[disabled] {
-    background-color: $palette-theme-dark-disabled-foreground;
-  }
-}
-
-.page-main .step-border-left {
-  @extend %step-border;
-  left: -67px;
-}
-
-.page-main .step-border-right {
-  @extend %step-border;
-  right: -67px;
-}
-
 .page-main .step-tooltip {
   display: block;
   margin: -5px auto -20px;

lib/gui/app/styled-components.js

@@ -31,6 +31,8 @@ const {
 const { colors } = require('./theme')
 
 const theme = {
+  // TODO: Standardize how the colors are specified to match with rendition's format.
+  customColors: colors,
   button: {
     border: {
       width: '0',

lib/gui/css/main.css

@@ -6342,21 +6342,6 @@ img[disabled] {
   font-size: 16px;
   font-weight: 300; }
 
-.page-main .step-border-left, .page-main .step-border-right {
-  height: 2px;
-  background-color: #fff;
-  position: absolute;
-  width: 124px;
-  top: 19px; }
-  .page-main .step-border-left[disabled], .page-main .step-border-right[disabled] {
-    background-color: #787c7f; }
-
-.page-main .step-border-left {
-  left: -67px; }
-
-.page-main .step-border-right {
-  right: -67px; }
-
 .page-main .step-tooltip {
   display: block;
   margin: -5px auto -20px;