WEb: files: ManualBackup: Changed styles.

This commit is contained in:
Tatiana Lopaeva 2022-02-08 10:52:00 +03:00
parent aac83608a2
commit 7d4069a559
3 changed files with 84 additions and 61 deletions

View File

@ -420,7 +420,7 @@ class RestoreBackup extends React.Component {
) : (
<StyledRestoreBackup>
<div className="restore-description">
<Text className="backup-description">
<Text className="restore-description">
{t("DataRestoreDescription")}
</Text>
</div>
@ -514,14 +514,14 @@ class RestoreBackup extends React.Component {
label={t("UserNotification")}
/>
<Text className="backup-description restore-source restore-warning">
<Text className="restore-description restore-source restore-warning">
{t("Common:Warning")}
{"!"}
</Text>
<Text className="backup-description ">
<Text className="restore-description">
{t("RestoreSettingsWarning")}
</Text>
<Text className="backup-description restore-warning_link">
<Text className="restore-description restore-warning_link">
{t("RestoreSettingsLink")}
</Text>

View File

@ -12,15 +12,12 @@ const commonStyles = css`
.radio-button_text {
margin-right: 7px;
margin-left: 8px;
margin-left: 4px;
font-size: 13px;
font-weight: 600;
}
.backup_radio-button {
margin-bottom: 16px;
&:last-of-type {
margin-bottom: 24px;
}
margin-bottom: 4px;
}
.backup_combo {
@ -43,6 +40,7 @@ const commonStyles = css`
max-width: ${TEXT_LENGTH};
font-size: 12px;
line-height: 15px;
margin-left: 24px;
}
`;
@ -50,6 +48,17 @@ const StyledManualBackup = styled.div`
${commonStyles}
.manual-backup_buttons {
margin-top: 16px;
margin-left: 24px;
}
.select-folder_file-input {
margin-left: 24px;
margin-top: 16px;
}
.manual-backup_storages-module {
margin-left: 24px;
.manual-backup_buttons {
margin-left: 0px;
}
}
`;
@ -97,6 +106,12 @@ const StyledStoragesModule = styled.div`
const StyledRestoreBackup = styled.div`
${commonStyles}
.restore-description {
max-width: ${TEXT_LENGTH};
font-size: 12px;
line-height: 15px;
}
.restore-source {
font-weight: 600;
margin-top: 30px;
@ -141,10 +156,14 @@ const StyledRestoreBackup = styled.div`
.restore-backup_modules {
margin-top: 24px;
}
.backup_radio-button {
margin-bottom: 16px;
}
`;
const StyledModules = styled.div`
margin-bottom: 32px;
margin-bottom: 24px;
.backup-description {
${(props) => props.isDisabled && `color: #A3A9AE`}

View File

@ -137,61 +137,65 @@ class ThirdPartyStorageModule extends React.PureComponent {
return (
<StyledManualBackup>
<ComboBox
options={availableOptions}
selectedOption={{ key: 0, label: selectedStorage }}
onSelect={this.onSelect}
isDisabled={isLoadingData || isInitialLoading}
noBorder={false}
scaled
scaledOptions
dropDownMaxHeight={400}
className="backup_combo"
/>
{selectedId === ThirdPartyStorages.GoogleId && !isInitialLoading && (
<GoogleCloudStorage
isLoadingData={isLoadingData}
availableStorage={availableStorage}
isMaxProgress={isMaxProgress}
selectedId={selectedId}
onMakeCopyIntoStorage={this.onMakeCopyIntoStorage}
isInvalidForm={this.isInvalidForm}
<div className="manual-backup_storages-module">
<ComboBox
options={availableOptions}
selectedOption={{ key: 0, label: selectedStorage }}
onSelect={this.onSelect}
isDisabled={isLoadingData || isInitialLoading}
noBorder={false}
scaled
scaledOptions
dropDownMaxHeight={400}
className="backup_combo"
/>
)}
{selectedId === ThirdPartyStorages.RackspaceId && !isInitialLoading && (
<RackspaceStorage
isLoadingData={isLoadingData}
availableStorage={availableStorage}
isMaxProgress={isMaxProgress}
selectedId={selectedId}
onMakeCopyIntoStorage={this.onMakeCopyIntoStorage}
isInvalidForm={this.isInvalidForm}
/>
)}
{selectedId === ThirdPartyStorages.GoogleId && !isInitialLoading && (
<GoogleCloudStorage
isLoadingData={isLoadingData}
availableStorage={availableStorage}
isMaxProgress={isMaxProgress}
selectedId={selectedId}
onMakeCopyIntoStorage={this.onMakeCopyIntoStorage}
isInvalidForm={this.isInvalidForm}
/>
)}
{selectedId === ThirdPartyStorages.SelectelId && !isInitialLoading && (
<SelectelStorage
isLoadingData={isLoadingData}
availableStorage={availableStorage}
isMaxProgress={isMaxProgress}
selectedId={selectedId}
onMakeCopyIntoStorage={this.onMakeCopyIntoStorage}
isInvalidForm={this.isInvalidForm}
/>
)}
{selectedId === ThirdPartyStorages.RackspaceId &&
!isInitialLoading && (
<RackspaceStorage
isLoadingData={isLoadingData}
availableStorage={availableStorage}
isMaxProgress={isMaxProgress}
selectedId={selectedId}
onMakeCopyIntoStorage={this.onMakeCopyIntoStorage}
isInvalidForm={this.isInvalidForm}
/>
)}
{selectedId === ThirdPartyStorages.AmazonId && !isInitialLoading && (
<AmazonStorage
isLoadingData={isLoadingData}
availableStorage={availableStorage}
isMaxProgress={isMaxProgress}
selectedId={selectedId}
onMakeCopyIntoStorage={this.onMakeCopyIntoStorage}
isInvalidForm={this.isInvalidForm}
/>
)}
{selectedId === ThirdPartyStorages.SelectelId &&
!isInitialLoading && (
<SelectelStorage
isLoadingData={isLoadingData}
availableStorage={availableStorage}
isMaxProgress={isMaxProgress}
selectedId={selectedId}
onMakeCopyIntoStorage={this.onMakeCopyIntoStorage}
isInvalidForm={this.isInvalidForm}
/>
)}
{selectedId === ThirdPartyStorages.AmazonId && !isInitialLoading && (
<AmazonStorage
isLoadingData={isLoadingData}
availableStorage={availableStorage}
isMaxProgress={isMaxProgress}
selectedId={selectedId}
onMakeCopyIntoStorage={this.onMakeCopyIntoStorage}
isInvalidForm={this.isInvalidForm}
/>
)}
</div>
</StyledManualBackup>
);
}