diff --git a/lib/gui/app/components/drive-selector/target-selector.jsx b/lib/gui/app/components/drive-selector/target-selector.jsx index 27b846ad..f81f8ecf 100644 --- a/lib/gui/app/components/drive-selector/target-selector.jsx +++ b/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, diff --git a/lib/gui/app/pages/main/DriveSelector.tsx b/lib/gui/app/pages/main/DriveSelector.tsx index b7900c83..2d344939 100644 --- a/lib/gui/app/pages/main/DriveSelector.tsx +++ b/lib/gui/app/pages/main/DriveSelector.tsx @@ -14,183 +14,148 @@ * 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 propTypes = require('prop-types') -const React = require('react') -const driveConstraints = require('../../../../shared/drive-constraints') -const utils = require('../../../../shared/utils') -const TargetSelector = require('../../components/drive-selector/target-selector.jsx') -const SvgIcon = require('../../components/svg-icon/svg-icon.jsx') -const selectionState = require('../../models/selection-state') -const settings = require('../../models/settings') -const store = require('../../models/store') -const analytics = require('../../modules/analytics') -const exceptionReporter = require('../../modules/exception-reporter') +const StepBorder = styled.div<{ + disabled: boolean; + left?: boolean; + right?: boolean; +}>` + height: 2px; + background-color: ${props => + props.disabled + ? props.theme.customColors.dark.disabled.foreground + : props.theme.customColors.dark.foreground}; + position: absolute; + 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 `${drive.description} (${drive.displayName})` - }), '\n') -} + return _.join( + _.map(selectionState.getSelectedDrives(), (drive: any) => { + return `${drive.description} (${drive.displayName})`; + }), + '\n', + ); +}; -/** - * @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() - if (!drive) { - return - } +const openDriveSelector = async (DriveSelectorService: any) => { + try { + const drive = await DriveSelectorService.open(); + if (!drive) { + return; + } - selectionState.selectDrive(drive.device) + selectionState.selectDrive(drive.device); - analytics.logEvent('Select drive', { - device: drive.device, - unsafeMode: settings.get('unsafeMode') && !settings.get('disableUnsafeMode'), - applicationSessionUuid: store.getState().toJS().applicationSessionUuid, - flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid - }) - } catch (error) { - exceptionReporter.report(error) - } -} + analytics.logEvent('Select drive', { + device: drive.device, + unsafeMode: + settings.get('unsafeMode') && !settings.get('disableUnsafeMode'), + applicationSessionUuid: (store as any).getState().toJS().applicationSessionUuid, + flashingWorkflowUuid: (store as any).getState().toJS().flashingWorkflowUuid, + }); + } catch (error) { + exceptionReporter.report(error); + } +}; -/** - * @summary Reselect a drive - * @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, - flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid - }) -} +const reselectDrive = (DriveSelectorService: any) => { + openDriveSelector(DriveSelectorService); + analytics.logEvent('Reselect drive', { + applicationSessionUuid: (store as any).getState().toJS().applicationSessionUuid, + flashingWorkflowUuid: (store as any).getState().toJS().flashingWorkflowUuid, + }); +}; -/** - * @summary Get memoized selected drives - * @function - * @public - * - * @example - * getMemoizedSelectedDrives() - */ -const getMemoizedSelectedDrives = utils.memoize(selectionState.getSelectedDrives, _.isEqual) +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() -}) + showDrivesButton: shouldShowDrivesButton(), + driveListLabel: getDriveListLabel(), + targets: getMemoizedSelectedDrives(), +}); -const DriveSelector = ({ - webviewShowing, - disabled, - nextStepDisabled, - hasDrive, - flashing, - DriveSelectorService -}) => { - // TODO: inject these from redux-connector - const [ { - showDrivesButton, - driveListLabel, - targets - }, setStateSlice ] = React.useState(getDriveSelectionStateSlice()) +export const DriveSelector = ({ + webviewShowing, + disabled, + nextStepDisabled, + hasDrive, + flashing, + DriveSelectorService, +}: any) => { + // TODO: inject these from redux-connector + const [ + { showDrivesButton, driveListLabel, targets }, + setStateSlice, + ] = React.useState(getDriveSelectionStateSlice()); - React.useEffect(() => { - return store.observe(() => { - setStateSlice(getDriveSelectionStateSlice()) - }) - }, []) + React.useEffect(() => { + return (store as any).observe(() => { + setStateSlice(getDriveSelectionStateSlice()); + }); + }, []); - const showStepConnectingLines = !webviewShowing || !flashing + const showStepConnectingLines = !webviewShowing || !flashing; - return ( -
+ return ( +
+ {showStepConnectingLines && ( + + + + + )} - {showStepConnectingLines && ( - -
-
- - )} +
+ +
-
- -
- -
- openDriveSelector(DriveSelectorService)} - reselectDrive={() => reselectDrive(DriveSelectorService)} - flashing={flashing} - constraints={driveConstraints} - targets={targets} - /> -
-
- ) -} +
+ openDriveSelector(DriveSelectorService)} + reselectDrive={() => reselectDrive(DriveSelectorService)} + flashing={flashing} + constraints={driveConstraints} + targets={targets} + /> +
+
+ ); +}; DriveSelector.propTypes = { - webviewShowing: propTypes.bool, - disabled: propTypes.bool, - nextStepDisabled: propTypes.bool, - hasDrive: propTypes.bool, - flashing: propTypes.bool -} - -module.exports = DriveSelector + webviewShowing: propTypes.bool, + disabled: propTypes.bool, + nextStepDisabled: propTypes.bool, + hasDrive: propTypes.bool, + flashing: propTypes.bool, + DriveSelectorService: propTypes.object, +}; diff --git a/lib/gui/app/pages/main/Flash.tsx b/lib/gui/app/pages/main/Flash.tsx index 3098004b..6350318f 100644 --- a/lib/gui/app/pages/main/Flash.tsx +++ b/lib/gui/app/pages/main/Flash.tsx @@ -14,282 +14,299 @@ * 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 _ = require('lodash') +const COMPLETED_PERCENTAGE = 100; +const SPEED_PRECISION = 2; -const { Modal, Txt } = require('rendition') -const messages = require('../../../../shared/messages') -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 getWarningMessages = (drives: any, image: any) => { + const warningMessages = []; + for (const drive of drives) { + if (constraints.isDriveSizeLarge(drive)) { + warningMessages.push(messages.warning.largeDriveSize(drive)); + } else if (!constraints.isDriveSizeRecommended(drive, image)) { + warningMessages.push( + messages.warning.unrecommendedDriveSize(image, drive), + ); + } -const COMPLETED_PERCENTAGE = 100 -const SPEED_PRECISION = 2 + // TODO(Shou): we should consider adding the same warning dialog for system drives and remove unsafe mode + } -const getWarningMessages = (drives, image) => { - const warningMessages = [] - for (const drive of drives) { - if (constraints.isDriveSizeLarge(drive)) { - warningMessages.push(messages.warning.largeDriveSize(drive)) - } else if (!constraints.isDriveSizeRecommended(drive, image)) { - warningMessages.push(messages.warning.unrecommendedDriveSize(image, drive)) - } + return warningMessages; +}; - // TODO(Shou): we should consider adding the same warning dialog for system drives and remove unsafe mode - } +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(); + } else if (errorCode === 'EUNPLUGGED') { + return messages.error.driveUnplugged(); + } else if (errorCode === 'EIO') { + return messages.error.inputOutput(); + } else if (errorCode === 'ENOSPC') { + return messages.error.notEnoughSpaceInDrive(); + } else if (errorCode === 'ECHILDDIED') { + return messages.error.childWriterDied(); + } + return ''; +}; - return warningMessages -} +const flashImageToDrive = async (goToSuccess: () => void) => { + const devices = selection.getSelectedDevices(); + const image: any = selection.getImage(); + const drives = _.filter(availableDrives.getDrives(), (drive: any) => { + return _.includes(devices, drive.device); + }); -const getErrorMessageFromCode = (errorCode) => { - // 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() - } else if (errorCode === 'EUNPLUGGED') { - return messages.error.driveUnplugged() - } else if (errorCode === 'EIO') { - return messages.error.inputOutput() - } else if (errorCode === 'ENOSPC') { - return messages.error.notEnoughSpaceInDrive() - } else if (errorCode === 'ECHILDDIED') { - return messages.error.childWriterDied() - } - return '' -} + // eslint-disable-next-line no-magic-numbers + if (drives.length === 0 || flashState.isFlashing()) { + return ''; + } -const flashImageToDrive = async ($timeout, $state) => { - const devices = selection.getSelectedDevices() - const image = selection.getImage() - const drives = _.filter(availableDrives.getDrives(), (drive) => { - return _.includes(devices, drive.device) - }) + // Stop scanning drives when flashing + // otherwise Windows throws EPERM + driveScanner.stop(); - // eslint-disable-next-line no-magic-numbers - if (drives.length === 0 || flashState.isFlashing()) { - return '' - } + const iconPath = '../../assets/icon.png'; + const basename = path.basename(image.path); + try { + await imageWriter.flash(image.path, drives); + if (!flashState.wasLastFlashCancelled()) { + const flashResults: any = flashState.getFlashResults(); + notification.send('Flash complete!', { + body: messages.info.flashComplete( + basename, + drives as any, + flashResults.results.devices, + ), + icon: iconPath, + }); + goToSuccess(); + } + } catch (error) { + // When flashing is cancelled before starting above there is no error + if (!error) { + 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) + notification.send('Oops! Looks like the flash failed.', { + body: messages.error.flashFailure(path.basename(image.path), drives), + icon: iconPath, + }); - // Stop scanning drives when flashing - // otherwise Windows throws EPERM - driveScanner.stop() + let errorMessage = getErrorMessageFromCode(error.code); + if (!errorMessage) { + error.image = basename; + analytics.logException(error); + errorMessage = messages.error.genericFlashError(); + } - const iconPath = '../../assets/icon.png' - const basename = path.basename(image.path) - try { - await imageWriter.flash(image.path, drives) - if (!flashState.wasLastFlashCancelled()) { - const flashResults = flashState.getFlashResults() - notification.send('Flash complete!', { - body: messages.info.flashComplete(basename, drives, flashResults.results.devices), - icon: iconPath - }) - $state.go('success') - } - } catch (error) { - // When flashing is cancelled before starting above there is no error - if (!error) { - return '' - } + return errorMessage; + } finally { + availableDrives.setDrives([]); + driveScanner.start(); + } - notification.send('Oops! Looks like the flash failed.', { - body: messages.error.flashFailure(path.basename(image.path), drives), - icon: iconPath - }) - - let errorMessage = getErrorMessageFromCode(error.code) - if (!errorMessage) { - error.image = basename - analytics.logException(error) - errorMessage = messages.error.genericFlashError() - } - - return errorMessage - } finally { - availableDrives.setDrives([]) - driveScanner.start() - unsubscribe() - } - - // Return '' -} + return ''; +}; /** -* @summary Get progress button label -* @function -* @public -* -* @returns {String} progress button label -* -* @example -* const label = FlashController.getProgressButtonLabel() -*/ + * @summary Get progress button label + * @function + * @public + * + * @returns {String} progress button label + * + * @example + * const label = FlashController.getProgressButtonLabel() + */ const getProgressButtonLabel = () => { - if (!flashState.isFlashing()) { - return 'Flash!' - } + if (!flashState.isFlashing()) { + return 'Flash!'; + } - return progressStatus.fromFlashState(flashState.getFlashState()) -} + return progressStatus.fromFlashState(flashState.getFlashState()); +}; -const formatSeconds = (totalSeconds) => { - if (!totalSeconds && !_.isNumber(totalSeconds)) { - return '' - } - // eslint-disable-next-line no-magic-numbers - const minutes = Math.floor(totalSeconds / 60) - // eslint-disable-next-line no-magic-numbers - const seconds = Math.floor(totalSeconds - minutes * 60) +const formatSeconds = (totalSeconds: number) => { + if (!totalSeconds && !_.isNumber(totalSeconds)) { + return ''; + } + // eslint-disable-next-line no-magic-numbers + const minutes = Math.floor(totalSeconds / 60); + // eslint-disable-next-line no-magic-numbers + const seconds = Math.floor(totalSeconds - minutes * 60); - return `${minutes}m${seconds}s` -} + return `${minutes}m${seconds}s`; +}; -const Flash = ({ - shouldFlashStepBeDisabled, lastFlashErrorCode, progressMessage, - $timeout, $state, DriveSelectorService -}) => { - const state = flashState.getFlashState() - const isFlashing = flashState.isFlashing() - const flashErrorCode = lastFlashErrorCode() +export const Flash = ({ + shouldFlashStepBeDisabled, + lastFlashErrorCode, + progressMessage, + goToSuccess, + DriveSelectorService, +}: any) => { + const state: any = flashState.getFlashState(); + const isFlashing = flashState.isFlashing(); + const flashErrorCode = lastFlashErrorCode(); - const [ warningMessages, setWarningMessages ] = React.useState([]) - const [ errorMessage, setErrorMessage ] = React.useState('') + const [warningMessages, setWarningMessages] = React.useState([]); + const [errorMessage, setErrorMessage] = React.useState(''); - const handleWarningResponse = async (shouldContinue) => { - setWarningMessages([]) + const handleWarningResponse = async (shouldContinue: boolean) => { + setWarningMessages([]); - if (!shouldContinue) { - DriveSelectorService.open() - return - } + if (!shouldContinue) { + DriveSelectorService.open(); + return; + } - setErrorMessage(await flashImageToDrive($timeout, $state)) - } + setErrorMessage(await flashImageToDrive(goToSuccess)); + }; - const handleFlashErrorResponse = (shouldRetry) => { - setErrorMessage('') - flashState.resetState() - if (shouldRetry) { - analytics.logEvent('Restart after failure', { - applicationSessionUuid: store.getState().toJS().applicationSessionUuid, - flashingWorkflowUuid: store.getState().toJS().flashingWorkflowUuid - }) - } else { - selection.clear() - } - } + const handleFlashErrorResponse = (shouldRetry: boolean) => { + setErrorMessage(''); + flashState.resetState(); + if (shouldRetry) { + analytics.logEvent('Restart after failure', { + applicationSessionUuid: (store as any).getState().toJS().applicationSessionUuid, + flashingWorkflowUuid: (store as any).getState().toJS().flashingWorkflowUuid, + }); + } else { + selection.clear(); + } + }; - const tryFlash = async () => { - const devices = selection.getSelectedDevices() - const image = selection.getImage() - const drives = _.filter(availableDrives.getDrives(), (drive) => { - return _.includes(devices, drive.device) - }) + const tryFlash = async () => { + const devices = selection.getSelectedDevices(); + const image = selection.getImage(); + const drives = _.filter(availableDrives.getDrives(), (drive: any) => { + return _.includes(devices, drive.device); + }); - // eslint-disable-next-line no-magic-numbers - if (drives.length === 0 || flashState.isFlashing()) { - return - } + // eslint-disable-next-line no-magic-numbers + if (drives.length === 0 || flashState.isFlashing()) { + return; + } - const hasDangerStatus = constraints.hasListDriveImageCompatibilityStatus(drives, image) - if (hasDangerStatus) { - setWarningMessages(getWarningMessages(drives, image)) - return - } + const hasDangerStatus = constraints.hasListDriveImageCompatibilityStatus( + drives, + image, + ); + if (hasDangerStatus) { + setWarningMessages(getWarningMessages(drives, image)); + return; + } - setErrorMessage(await flashImageToDrive($timeout, $state)) - } + setErrorMessage(await flashImageToDrive(goToSuccess)); + }; - return -
-
- -
+ return ( + +
+
+ +
-
- - +
+ - { - isFlashing && - } - { - !_.isNil(state.speed) && state.percentage !== COMPLETED_PERCENTAGE && -

- {Boolean(state.speed) && {`${state.speed.toFixed(SPEED_PRECISION)} MB/s`}} - {!_.isNil(state.eta) && {`ETA: ${formatSeconds(state.eta)}` }} -

- } + {isFlashing && ( + + )} + {!_.isNil(state.speed) && state.percentage !== COMPLETED_PERCENTAGE && ( +

+ {Boolean(state.speed) && ( + {`${state.speed.toFixed(SPEED_PRECISION)} MB/s`} + )} + {!_.isNil(state.eta) && ( + {`ETA: ${formatSeconds(state.eta)}`} + )} +

+ )} - { - Boolean(state.failed) &&
-
- - {state.failed} - {progressMessage.failed(state.failed)} -
-
- } -
-
+ {Boolean(state.failed) && ( +
+
+ + {state.failed} + + {progressMessage.failed(state.failed)}{' '} + +
+
+ )} +
+
- {/* eslint-disable-next-line no-magic-numbers */} - {warningMessages && warningMessages.length > 0 && handleWarningResponse(false)} - done={() => handleWarningResponse(true)} - cancelButtonProps={{ - children: 'Change' - }} - action={'Continue'} - primaryButtonProps={{ primary: false, warning: true }} - > - { - _.map(warningMessages, (message) => {message}) - } - - } + {/* eslint-disable-next-line no-magic-numbers */} + {warningMessages && warningMessages.length > 0 && ( + handleWarningResponse(false)} + done={() => handleWarningResponse(true)} + cancelButtonProps={{ + children: 'Change', + }} + action={'Continue'} + primaryButtonProps={{ primary: false, warning: true }} + > + {_.map(warningMessages, message => ( + + {message} + + ))} + + )} - {errorMessage && handleFlashErrorResponse(false)} - done={() => handleFlashErrorResponse(true)} - action={'Retry'} - > - {errorMessage} - - } - - -} - -module.exports = Flash + {errorMessage && ( + handleFlashErrorResponse(false)} + done={() => handleFlashErrorResponse(true)} + action={'Retry'} + > + {errorMessage} + + )} + + ); +}; diff --git a/lib/gui/app/pages/main/MainPage.tsx b/lib/gui/app/pages/main/MainPage.tsx index b5afb878..df02e39a 100644 --- a/lib/gui/app/pages/main/MainPage.tsx +++ b/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 * as Flash from './Flash'; +import { DriveSelector } from './DriveSelector'; +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) => {
$state.go('success')} shouldFlashStepBeDisabled={shouldFlashStepBeDisabled} lastFlashErrorCode={lastFlashErrorCode} progressMessage={progressMessage} diff --git a/lib/gui/app/pages/main/main.ts b/lib/gui/app/pages/main/main.ts index 3de9ed2c..5e236a34 100644 --- a/lib/gui/app/pages/main/main.ts +++ b/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) => { diff --git a/lib/gui/app/pages/main/styles/_main.scss b/lib/gui/app/pages/main/styles/_main.scss index 6f1d4c27..48a6dfe7 100644 --- a/lib/gui/app/pages/main/styles/_main.scss +++ b/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; diff --git a/lib/gui/app/styled-components.js b/lib/gui/app/styled-components.js index cd332ab5..5b8bd26a 100644 --- a/lib/gui/app/styled-components.js +++ b/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', diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css index d5740a87..1185b980 100644 --- a/lib/gui/css/main.css +++ b/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;