mirror of
https://github.com/balena-io/etcher.git
synced 2025-07-29 06:06:33 +00:00
Refactor buttons style
Change-type: patch Changelog-entry: Refactor buttons style Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>
This commit is contained in:
parent
124e8af649
commit
94a0be3b05
@ -133,7 +133,8 @@ export function TargetSelector(props: TargetSelectorProps) {
|
||||
|
||||
return (
|
||||
<StepButton
|
||||
tabindex={targets.length > 0 ? -1 : 2}
|
||||
primary
|
||||
tabIndex={targets.length > 0 ? -1 : 2}
|
||||
disabled={props.disabled}
|
||||
onClick={props.openDriveSelector}
|
||||
>
|
||||
|
@ -17,6 +17,7 @@
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { position, right } from 'styled-system';
|
||||
|
||||
import { BaseButton, ThemedProvider } from '../../styled-components';
|
||||
|
||||
const Div = styled.div<any>`
|
||||
|
@ -134,6 +134,7 @@ export class ProgressButton extends React.Component<ProgressButtonProps> {
|
||||
return (
|
||||
<StepSelection>
|
||||
<StepButton
|
||||
primary
|
||||
onClick={this.props.callback}
|
||||
disabled={this.props.disabled}
|
||||
>
|
||||
|
@ -173,7 +173,7 @@ const URLSelector = ({ done }: { done: (imageURL: string) => void }) => {
|
||||
};
|
||||
|
||||
interface Flow {
|
||||
icon: any;
|
||||
icon?: JSX.Element;
|
||||
onClick: (evt: MouseEvent) => void;
|
||||
label: string;
|
||||
}
|
||||
@ -206,7 +206,6 @@ export type Source =
|
||||
export interface SourceOptions {
|
||||
imagePath: string;
|
||||
SourceType: Source;
|
||||
sourceParams?: any[];
|
||||
}
|
||||
|
||||
interface SourceSelectorProps {
|
||||
@ -229,7 +228,7 @@ export class SourceSelector extends React.Component<
|
||||
> {
|
||||
private unsubscribe: () => void;
|
||||
private afterSelected: SourceSelectorProps['afterSelected'];
|
||||
public flows: Flow[];
|
||||
private flows: Flow[];
|
||||
|
||||
constructor(props: SourceSelectorProps) {
|
||||
super(props);
|
||||
@ -359,11 +358,7 @@ export class SourceSelector extends React.Component<
|
||||
}
|
||||
}
|
||||
|
||||
private async selectImageByPath({
|
||||
imagePath,
|
||||
SourceType,
|
||||
sourceParams,
|
||||
}: SourceOptions) {
|
||||
private async selectImageByPath({ imagePath, SourceType }: SourceOptions) {
|
||||
try {
|
||||
imagePath = await replaceWindowsNetworkDriveLetter(imagePath);
|
||||
} catch (error) {
|
||||
@ -410,7 +405,6 @@ export class SourceSelector extends React.Component<
|
||||
this.afterSelected({
|
||||
imagePath,
|
||||
SourceType,
|
||||
sourceParams,
|
||||
});
|
||||
} catch (error) {
|
||||
const imageError = errors.createUserError({
|
||||
@ -452,7 +446,6 @@ export class SourceSelector extends React.Component<
|
||||
this.selectImageByPath({
|
||||
imagePath,
|
||||
SourceType: sourceDestination.File,
|
||||
sourceParams: [],
|
||||
});
|
||||
} catch (error) {
|
||||
exceptionReporter.report(error);
|
||||
@ -465,7 +458,6 @@ export class SourceSelector extends React.Component<
|
||||
this.selectImageByPath({
|
||||
imagePath: file.path,
|
||||
SourceType: sourceDestination.File,
|
||||
sourceParams: [],
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -22,6 +22,7 @@ import * as constraints from '../../../../shared/drive-constraints';
|
||||
import * as messages from '../../../../shared/messages';
|
||||
import { DriveSelectorModal } from '../../components/drive-selector/DriveSelectorModal';
|
||||
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 * as availableDrives from '../../models/available-drives';
|
||||
import * as flashState from '../../models/flash-state';
|
||||
@ -73,7 +74,7 @@ const getErrorMessageFromCode = (errorCode: string) => {
|
||||
|
||||
async function flashImageToDrive(
|
||||
goToSuccess: () => void,
|
||||
source: any,
|
||||
sourceOptions: SourceOptions,
|
||||
): Promise<string> {
|
||||
const devices = selection.getSelectedDevices();
|
||||
const image: any = selection.getImage();
|
||||
@ -92,7 +93,7 @@ async function flashImageToDrive(
|
||||
const iconPath = '../../assets/icon.png';
|
||||
const basename = path.basename(image.path);
|
||||
try {
|
||||
await imageWriter.flash(image.path, drives, source);
|
||||
await imageWriter.flash(image.path, drives, sourceOptions);
|
||||
if (!flashState.wasLastFlashCancelled()) {
|
||||
const flashResults: any = flashState.getFlashResults();
|
||||
notification.send(
|
||||
@ -308,7 +309,7 @@ export const Flash = ({
|
||||
>
|
||||
<Txt>
|
||||
{_.map(errorMessage.split('\n'), (message, key) => (
|
||||
<p key={`${message}-${key}`}>{message}</p>
|
||||
<p key={key}>{message}</p>
|
||||
))}
|
||||
</Txt>
|
||||
</Modal>
|
||||
|
@ -33,19 +33,21 @@ const theme = {
|
||||
opacity: 1,
|
||||
},
|
||||
extend: () => `
|
||||
width: 200px;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
&& {
|
||||
width: 200px;
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
|
||||
&:disabled {
|
||||
background-color: ${colors.dark.disabled.background};
|
||||
color: ${colors.dark.disabled.foreground};
|
||||
opacity: 1;
|
||||
&:disabled {
|
||||
background-color: ${colors.dark.disabled.background};
|
||||
color: ${colors.dark.disabled.foreground};
|
||||
opacity: 1;
|
||||
|
||||
&:hover {
|
||||
background-color: ${colors.dark.disabled.background};
|
||||
color: ${colors.dark.disabled.foreground};
|
||||
}
|
||||
&:hover {
|
||||
background-color: ${colors.dark.disabled.background};
|
||||
color: ${colors.dark.disabled.foreground};
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
},
|
||||
@ -79,22 +81,27 @@ export const StepButton = styled((props: ButtonProps) => (
|
||||
margin: auto;
|
||||
`;
|
||||
|
||||
export const ChangeButton = styled(BaseButton)`
|
||||
color: ${colors.primary.background};
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
export const ChangeButton = styled(Button)`
|
||||
&& {
|
||||
border-radius: 24px;
|
||||
color: ${colors.primary.background};
|
||||
padding: 0;
|
||||
height: 18px;
|
||||
font-size: 14px;
|
||||
|
||||
&:enabled {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: #8f9297;
|
||||
&:enabled {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: #8f9297;
|
||||
}
|
||||
}
|
||||
${space}
|
||||
}
|
||||
${space}
|
||||
`;
|
||||
export const StepNameButton = styled(BaseButton)`
|
||||
export const StepNameButton = styled(Button)`
|
||||
border-radius: 24px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
@ -44,7 +44,7 @@ export const colors = {
|
||||
},
|
||||
primary: {
|
||||
foreground: '#fff',
|
||||
background: '#2297de',
|
||||
background: '#00aeef',
|
||||
},
|
||||
secondary: {
|
||||
foreground: '#000',
|
||||
|
Loading…
x
Reference in New Issue
Block a user