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: {