diff --git a/lib/gui/app/components/flash-results/flash-results.tsx b/lib/gui/app/components/flash-results/flash-results.tsx index 064df007..2eaaee95 100644 --- a/lib/gui/app/components/flash-results/flash-results.tsx +++ b/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) => {...props} />)` -&&& [data-display='table-head'], -&&& [data-display='table-body'] { - > [data-display='table-row'] { - > [data-display='table-cell'] { - &:first-child { - width: 30%; - } + &&& [data-display='table-head'], + &&& [data-display='table-body'] { + > [data-display='table-row'] { + > [data-display='table-cell'] { + &:first-child { + width: 30%; + } - &:nth-child(2) { - width: 20%; - } + &:nth-child(2) { + width: 20%; + } - &:last-child { - width: 50%; + &:last-child { + width: 50%; + } } } } -} `; const DoneIcon = (props: { skipped: boolean; diff --git a/lib/gui/app/components/source-selector/source-selector.tsx b/lib/gui/app/components/source-selector/source-selector.tsx index 2c39a15d..21332b8d 100644 --- a/lib/gui/app/components/source-selector/source-selector.tsx +++ b/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) => ( flow.onClick(evt)} + plain={!props.primary} + primary={props.primary} + onClick={(evt: React.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< ) : ( <> this.openImageSelector(), label: 'Flash from file', icon: , }} + onMouseEnter={() => this.setDefaultFlowActive(false)} + onMouseLeave={() => this.setDefaultFlowActive(true)} /> , }} + onMouseEnter={() => this.setDefaultFlowActive(false)} + onMouseLeave={() => this.setDefaultFlowActive(true)} /> , }} + onMouseEnter={() => this.setDefaultFlowActive(false)} + onMouseLeave={() => this.setDefaultFlowActive(true)} /> )} diff --git a/lib/gui/app/theme.ts b/lib/gui/app/theme.ts index d45b45c9..ee1e27ad 100644 --- a/lib/gui/app/theme.ts +++ b/lib/gui/app/theme.ts @@ -1,21 +1,21 @@ /* -* Copyright 2018 balena.io -* -* Licensed under the Apache License, Version 2.0 (the "License"), -* you may not use this file except in compliance with the License. -* You may obtain a copy of the License at -* -* http://www.apache.org/licenses/LICENSE-2.0 -* -* Unless required by applicable law or agreed to in writing, software -* distributed under the License is distributed on an "AS IS" BASIS, -* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -* See the License for the specific language governing permissions and -* limitations under the License. -*/ + * Copyright 2018 balena.io + * + * Licensed under the Apache License, Version 2.0 (the "License"), + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ -import * as _ from "lodash"; -import { Theme } from "rendition"; +import * as _ from 'lodash'; +import { Theme } from 'rendition'; export const colors = { dark: {