Fix layout when the featured project is not showing

Changelog-entry: Fix layout when the featured project is not showing
Change-type: patch
This commit is contained in:
Alexis Svinartchouk 2020-11-26 13:10:20 +01:00
parent 2158e20380
commit f46176fd10
4 changed files with 6 additions and 2 deletions

View File

@ -23,7 +23,7 @@ import { StepButton } from '../../styled-components';
const FlashProgressBar = styled(ProgressBar)` const FlashProgressBar = styled(ProgressBar)`
> div { > div {
width: 220px; width: 100%;
height: 12px; height: 12px;
color: white !important; color: white !important;
text-shadow: none !important; text-shadow: none !important;
@ -33,7 +33,7 @@ const FlashProgressBar = styled(ProgressBar)`
} }
} }
width: 220px; width: 100%;
height: 12px; height: 12px;
margin-bottom: 6px; margin-bottom: 6px;
border-radius: 14px; border-radius: 14px;

View File

@ -156,6 +156,7 @@ interface FlashStepProps {
failed: number; failed: number;
speed?: number; speed?: number;
eta?: number; eta?: number;
width: string;
} }
export interface DriveWithWarnings extends constraints.DrivelistDrive { export interface DriveWithWarnings extends constraints.DrivelistDrive {
@ -262,6 +263,7 @@ export class FlashStep extends React.PureComponent<
<Flex <Flex
flexDirection="column" flexDirection="column"
alignItems="start" alignItems="start"
width={this.props.width}
style={this.props.style} style={this.props.style}
> >
<FlashSvg <FlashSvg

View File

@ -239,6 +239,7 @@ export class MainPage extends React.Component<
)} )}
<FlashStep <FlashStep
width={this.state.isWebviewShowing ? '220px' : '200px'}
goToSuccess={() => this.setState({ current: 'success' })} goToSuccess={() => this.setState({ current: 'success' })}
shouldFlashStepBeDisabled={shouldFlashStepBeDisabled} shouldFlashStepBeDisabled={shouldFlashStepBeDisabled}
isFlashing={this.state.isFlashing} isFlashing={this.state.isFlashing}

View File

@ -100,6 +100,7 @@ export const theme = _.merge({}, Theme, {
font-size: 16px; font-size: 16px;
&& { && {
width: 200px;
height: 48px; height: 48px;
} }