jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-29 14:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor buttons style

Browse Source 
Change-type: patch
Changelog-entry: Refactor buttons style
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>
This commit is contained in:
Lorenzo Alberto Maria Ambrosi 2020-02-20 15:36:13 +01:00
parent 124e8af649
commit 94a0be3b05
7 changed files with 42 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/gui/app/components/drive-selector/target-selector.tsx
View File

@ -133,7 +133,8 @@ export function TargetSelector(props: TargetSelectorProps) {
return ( return (
<StepButton <StepButton
tabindex={targets.length > 0 ? -1 : 2} primary
tabIndex={targets.length > 0 ? -1 : 2}
disabled={props.disabled} disabled={props.disabled}
onClick={props.openDriveSelector} onClick={props.openDriveSelector}
> >

1
lib/gui/app/components/flash-another/flash-another.tsx
View File

@ -17,6 +17,7 @@
import * as React from 'react'; import * as React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { position, right } from 'styled-system'; import { position, right } from 'styled-system';
import { BaseButton, ThemedProvider } from '../../styled-components'; import { BaseButton, ThemedProvider } from '../../styled-components';
const Div = styled.div<any>` const Div = styled.div<any>`

1
lib/gui/app/components/progress-button/progress-button.tsx
View File

@ -134,6 +134,7 @@ export class ProgressButton extends React.Component<ProgressButtonProps> {
return ( return (
<StepSelection> <StepSelection>
<StepButton <StepButton
primary
onClick={this.props.callback} onClick={this.props.callback}
disabled={this.props.disabled} disabled={this.props.disabled}
> >

14
lib/gui/app/components/source-selector/source-selector.tsx
View File

@ -173,7 +173,7 @@ const URLSelector = ({ done }: { done: (imageURL: string) => void }) => {
}; };
interface Flow { interface Flow {
icon: any; icon?: JSX.Element;
onClick: (evt: MouseEvent) => void; onClick: (evt: MouseEvent) => void;
label: string; label: string;
} }
@ -206,7 +206,6 @@ export type Source =
export interface SourceOptions { export interface SourceOptions {
imagePath: string; imagePath: string;
SourceType: Source; SourceType: Source;
sourceParams?: any[];
} }
interface SourceSelectorProps { interface SourceSelectorProps {
@ -229,7 +228,7 @@ export class SourceSelector extends React.Component<
> { > {
private unsubscribe: () => void; private unsubscribe: () => void;
private afterSelected: SourceSelectorProps['afterSelected']; private afterSelected: SourceSelectorProps['afterSelected'];
public flows: Flow[]; private flows: Flow[];
constructor(props: SourceSelectorProps) { constructor(props: SourceSelectorProps) {
super(props); super(props);
@ -359,11 +358,7 @@ export class SourceSelector extends React.Component<
} }
} }
private async selectImageByPath({ private async selectImageByPath({ imagePath, SourceType }: SourceOptions) {
imagePath,
SourceType,
sourceParams,
}: SourceOptions) {
try { try {
imagePath = await replaceWindowsNetworkDriveLetter(imagePath); imagePath = await replaceWindowsNetworkDriveLetter(imagePath);
} catch (error) { } catch (error) {
@ -410,7 +405,6 @@ export class SourceSelector extends React.Component<
this.afterSelected({ this.afterSelected({
imagePath, imagePath,
SourceType, SourceType,
sourceParams,
}); });
} catch (error) { } catch (error) {
const imageError = errors.createUserError({ const imageError = errors.createUserError({
@ -452,7 +446,6 @@ export class SourceSelector extends React.Component<
this.selectImageByPath({ this.selectImageByPath({
imagePath, imagePath,
SourceType: sourceDestination.File, SourceType: sourceDestination.File,
sourceParams: [],
}); });
} catch (error) { } catch (error) {
exceptionReporter.report(error); exceptionReporter.report(error);
@ -465,7 +458,6 @@ export class SourceSelector extends React.Component<
this.selectImageByPath({ this.selectImageByPath({
imagePath: file.path, imagePath: file.path,
SourceType: sourceDestination.File, SourceType: sourceDestination.File,
sourceParams: [],
}); });
} }
} }

7
lib/gui/app/pages/main/Flash.tsx
View File

@ -22,6 +22,7 @@ import * as constraints from '../../../../shared/drive-constraints';
import * as messages from '../../../../shared/messages'; import * as messages from '../../../../shared/messages';
import { DriveSelectorModal } from '../../components/drive-selector/DriveSelectorModal'; import { DriveSelectorModal } from '../../components/drive-selector/DriveSelectorModal';
import { ProgressButton } from '../../components/progress-button/progress-button'; import { ProgressButton } from '../../components/progress-button/progress-button';
import { SourceOptions } from '../../components/source-selector/source-selector';
import { SVGIcon } from '../../components/svg-icon/svg-icon'; import { SVGIcon } from '../../components/svg-icon/svg-icon';
import * as availableDrives from '../../models/available-drives'; import * as availableDrives from '../../models/available-drives';
import * as flashState from '../../models/flash-state'; import * as flashState from '../../models/flash-state';
@ -73,7 +74,7 @@ const getErrorMessageFromCode = (errorCode: string) => {
async function flashImageToDrive( async function flashImageToDrive(
goToSuccess: () => void, goToSuccess: () => void,
source: any, sourceOptions: SourceOptions,
): Promise<string> { ): Promise<string> {
const devices = selection.getSelectedDevices(); const devices = selection.getSelectedDevices();
const image: any = selection.getImage(); const image: any = selection.getImage();
@ -92,7 +93,7 @@ async function flashImageToDrive(
const iconPath = '../../assets/icon.png'; const iconPath = '../../assets/icon.png';
const basename = path.basename(image.path); const basename = path.basename(image.path);
try { try {
await imageWriter.flash(image.path, drives, source); await imageWriter.flash(image.path, drives, sourceOptions);
if (!flashState.wasLastFlashCancelled()) { if (!flashState.wasLastFlashCancelled()) {
const flashResults: any = flashState.getFlashResults(); const flashResults: any = flashState.getFlashResults();
notification.send( notification.send(
@ -308,7 +309,7 @@ export const Flash = ({
> >
<Txt> <Txt>
{_.map(errorMessage.split('\n'), (message, key) => ( {_.map(errorMessage.split('\n'), (message, key) => (
<p key={`${message}-${key}`}>{message}</p> <p key={key}>{message}</p>
))} ))}
</Txt> </Txt>
</Modal> </Modal>

53
lib/gui/app/styled-components.tsx
View File

@ -33,19 +33,21 @@ const theme = {
opacity: 1, opacity: 1,
}, },
extend: () => ` extend: () => `
width: 200px; && {
height: 48px; width: 200px;
font-size: 16px; height: 48px;
font-size: 16px;
&:disabled { &:disabled {
background-color: ${colors.dark.disabled.background}; background-color: ${colors.dark.disabled.background};
color: ${colors.dark.disabled.foreground}; color: ${colors.dark.disabled.foreground};
opacity: 1; opacity: 1;
&:hover { &:hover {
background-color: ${colors.dark.disabled.background}; background-color: ${colors.dark.disabled.background};
color: ${colors.dark.disabled.foreground}; color: ${colors.dark.disabled.foreground};
} }
}
} }
`, `,
}, },
@ -79,22 +81,27 @@ export const StepButton = styled((props: ButtonProps) => (
margin: auto; margin: auto;
`; `;
export const ChangeButton = styled(BaseButton)` export const ChangeButton = styled(Button)`
color: ${colors.primary.background}; && {
padding: 0; border-radius: 24px;
width: 100%; color: ${colors.primary.background};
height: auto; padding: 0;
height: 18px;
font-size: 14px;
&:enabled { &:enabled {
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
color: #8f9297; color: #8f9297;
}
} }
${space}
} }
${space}
`; `;
export const StepNameButton = styled(BaseButton)` export const StepNameButton = styled(Button)`
border-radius: 24px;
margin: auto;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

2
lib/gui/app/theme.ts
View File

@ -44,7 +44,7 @@ export const colors = {
}, },
primary: { primary: {
foreground: '#fff', foreground: '#fff',
background: '#2297de', background: '#00aeef',
}, },
secondary: { secondary: {
foreground: '#000', foreground: '#000',