Web: Backup: Fixed styles for backup.

This commit is contained in:
Tatiana Lopaeva 2022-03-11 16:40:00 +03:00
parent 934b9824d4
commit 36959d8eec
3 changed files with 46 additions and 45 deletions

View File

@ -145,12 +145,12 @@ class BackupMobileView extends React.Component {
onClick={() => this.onClickModule(section)} onClick={() => this.onClickModule(section)}
> >
{sectionTitle} {sectionTitle}
<StyledArrowRightIcon
className="backup-section_arrow-button"
size="small"
color="#333333"
/>
</Text> </Text>
<StyledArrowRightIcon
className="backup-section_arrow-button"
size="small"
color="#333333"
/>
</div> </div>
<Trans <Trans

View File

@ -117,7 +117,7 @@ const StyledAutoBackup = styled.div`
box-sizing: border-box; box-sizing: border-box;
} }
.auto-backup_buttons { .auto-backup_buttons {
${(props) => !props.isMobileOnly && "margin-bottom: 24px"} ${!isMobileOnly && "margin-bottom: 24px"}
} }
`; `;
@ -182,6 +182,9 @@ const StyledRestoreBackup = styled.div`
.backup_radio-button { .backup_radio-button {
margin-bottom: 16px; margin-bottom: 16px;
} }
.restore-backup_button {
${isMobileOnly && "width:100%"}
}
`; `;
const StyledModules = styled.div` const StyledModules = styled.div`
@ -244,47 +247,45 @@ const StyledScheduleComponent = styled.div`
max-width: 363px; max-width: 363px;
} }
${(props) => ${!isMobileOnly
!props.isMobileOnly ? css`
? css` .main_options {
.main_options { max-width: ${INPUT_LENGTH};
max-width: ${INPUT_LENGTH}; display: grid;
display: grid;
${(props) => ${(props) =>
props.weeklySchedule || props.monthlySchedule props.weeklySchedule || props.monthlySchedule
? css` ? css`
grid-template-areas: "days weekly-monthly time"; grid-template-areas: "days weekly-monthly time";
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
` `
: css` : css`
grid-template-areas: "days time"; grid-template-areas: "days time";
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
`}; `};
grid-gap: 8px; grid-gap: 8px;
}
`
: css`
.days_option {
grid-area: time;
max-width: ${INPUT_LENGTH};
width: 100%;
.drop-down_variable-size {
max-width: ${INPUT_LENGTH} !important;
width: 100% !important;
} }
` }
: css` `}
.days_option {
grid-area: time;
max-width: ${INPUT_LENGTH};
width: 100%;
.drop-down_variable-size {
max-width: ${INPUT_LENGTH} !important;
width: 100% !important;
}
}
`}
.time_options { .time_options {
grid-area: time; grid-area: time;
${(props) => ${isMobileOnly &&
props.isMobileOnly && css`
css` max-width: ${INPUT_LENGTH};
max-width: ${INPUT_LENGTH}; `};
`};
width: 100%; width: 100%;
.drop-down_variable-size { .drop-down_variable-size {
max-width: ${INPUT_LENGTH} !important; max-width: ${INPUT_LENGTH} !important;
@ -325,7 +326,7 @@ const StyledBackup = styled.div`
padding-bottom: 8px; padding-bottom: 8px;
} }
.layout-progress-bar { .layout-progress-bar {
${(props) => !props.isMobileOnly && "cursor: default;"} ${!isMobileOnly && "cursor: default;"}
} }
.backup_modules-description { .backup_modules-description {
@ -348,10 +349,9 @@ const StyledBackup = styled.div`
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
margin-right: 7.29px;
} }
.backup-section_arrow-button { .backup-section_arrow-button {
margin: auto 0; margin: auto 0 auto 7.29px;
} }
} }
} }

View File

@ -450,6 +450,7 @@ class RestoreBackup extends React.Component {
/> />
<Button <Button
className="restore-backup_button"
label={t("Common:Restore")} label={t("Common:Restore")}
onClick={this.onRestoreClick} onClick={this.onRestoreClick}
primary primary