Web: Files: Fixed styles.

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/StyledBackup.js

@@ -5,6 +5,8 @@ const INPUT_LENGTH = "350px";
 const TEXT_LENGTH = "476px";
 
 const commonStyles = css`
+  margin-right: 16px;
+
   .radio-button_text {
     margin-right: 7px;
     margin-left: 8px;
@@ -46,6 +48,7 @@ const StyledManualBackup = styled.div`
 
 const StyledAutoBackup = styled.div`
   ${commonStyles}
+
   .automatic-backup_main {
     margin-bottom: 30px;
     .radio-button_text {
@@ -76,12 +79,14 @@ const StyledAutoBackup = styled.div`
   .backup_modules {
     margin-left: 60px;
   }
+`;
+
+const StyledStoragesModule = styled.div`
   .backup_storages-buttons {
     margin-left: -63px;
     margin-top: 40px;
   }
 `;
-
 const StyledRestoreBackup = styled.div`
   ${commonStyles}
 
@@ -133,38 +138,48 @@ const StyledModules = styled.div`
 `;
 
 const StyledScheduleComponent = styled.div`
-  .time_options,
+  .additional_options {
+    max-width: ${INPUT_LENGTH};
+    display: grid;
+    grid-template-columns: ${(props) =>
+      props.weeklySchedule || props.monthlySchedule ? "1fr 1fr" : "1fr"};
+    grid-gap: 8px;
+  }
+
   .weekly_option,
   .month_options {
-    width: 171px;
+    max-width: 171px;
+    width: 100%;
     .drop-down_variable-size {
-      width: 171px !important;
+      max-width: 171px !important;
+      width: 100% !important;
     }
   }
   .schedule-backup_combobox {
     display: inline-block;
-    margin-right: 8px;
     margin-top: 8px;
   }
 
   .main_options {
     max-width: 363px;
   }
-  .days_option {
-    width: ${(props) =>
-      props.weeklySchedule || props.monthlySchedule
-        ? `${INPUT_LENGTH}`
-        : "171px"};
+  .days_option,
+  .time_options {
+    max-width: ${INPUT_LENGTH};
+    width: 100%;
     .drop-down_variable-size {
-      width: ${(props) =>
-        props.weeklySchedule || props.monthlySchedule
-          ? `${INPUT_LENGTH}`
-          : "171px"} !important;
+      max-width: ${INPUT_LENGTH} !important;
+      width: 100% !important;
     }
   }
+
   .max_copies {
     width: 100%;
     max-width: ${INPUT_LENGTH};
+    .drop-down_variable-size {
+      max-width: ${INPUT_LENGTH};
+      width: 100% !important;
+    }
   }
   .combo-button {
     width: 100% !important;
@@ -351,4 +366,5 @@ export {
   StyledBackupList,
   StyledManualBackup,
   StyledAutoBackup,
+  StyledStoragesModule,
 };

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/ScheduleComponent.js

@@ -51,52 +51,54 @@ const ScheduleComponent = ({
           dropDownMaxHeight={500}
           className="schedule-backup_combobox days_option"
         />
-        {weeklySchedule && (
+        <div className="additional_options">
+          {weeklySchedule && (
+            <ComboBox
+              options={weekdaysLabelArray}
+              selectedOption={{
+                key: 0,
+                label: selectedWeekdayLabel,
+              }}
+              onSelect={onSelectWeekDay}
+              isDisabled={isLoadingData || isDisableOptions}
+              noBorder={false}
+              scaled={false}
+              scaledOptions={true}
+              dropDownMaxHeight={400}
+              className="schedule-backup_combobox weekly_option"
+            />
+          )}
+          {monthlySchedule && (
+            <ComboBox
+              options={monthNumbersArray}
+              selectedOption={{
+                key: 0,
+                label: selectedMonthDay,
+              }}
+              onSelect={onSelectMonthNumber}
+              isDisabled={isLoadingData || isDisableOptions}
+              noBorder={false}
+              scaled={false}
+              scaledOptions={true}
+              dropDownMaxHeight={400}
+              className="schedule-backup_combobox month_options"
+            />
+          )}
           <ComboBox
-            options={weekdaysLabelArray}
+            options={hoursArray}
             selectedOption={{
               key: 0,
-              label: selectedWeekdayLabel,
+              label: selectedHour,
             }}
-            onSelect={onSelectWeekDay}
+            onSelect={onSelectTime}
             isDisabled={isLoadingData || isDisableOptions}
             noBorder={false}
             scaled={false}
             scaledOptions={true}
             dropDownMaxHeight={400}
-            className="schedule-backup_combobox weekly_option"
+            className="schedule-backup_combobox time_options"
           />
-        )}
-        {monthlySchedule && (
-          <ComboBox
-            options={monthNumbersArray}
-            selectedOption={{
-              key: 0,
-              label: selectedMonthDay,
-            }}
-            onSelect={onSelectMonthNumber}
-            isDisabled={isLoadingData || isDisableOptions}
-            noBorder={false}
-            scaled={false}
-            scaledOptions={true}
-            dropDownMaxHeight={400}
-            className="schedule-backup_combobox month_options"
-          />
-        )}
-        <ComboBox
-          options={hoursArray}
-          selectedOption={{
-            key: 0,
-            label: selectedHour,
-          }}
-          onSelect={onSelectTime}
-          isDisabled={isLoadingData || isDisableOptions}
-          noBorder={false}
-          scaled={false}
-          scaledOptions={true}
-          dropDownMaxHeight={400}
-          className="schedule-backup_combobox time_options"
-        />
+        </div>
       </div>
       <div className="maxCopiesOption">
         <ComboBox

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/storages/AmazonStorage.js

@@ -3,7 +3,7 @@ import { withTranslation } from "react-i18next";
 import AmazonSettings from "../../consumer-storage-settings/AmazonSettings";
 import Button from "@appserver/components/button";
 import ScheduleComponent from "../../sub-components-automatic-backup/ScheduleComponent";
-import { StyledAutoBackup } from "../../StyledBackup";
+import { StyledStoragesModule } from "../../StyledBackup";
 class AmazonStorage extends React.Component {
   constructor(props) {
     super(props);
@@ -138,7 +138,7 @@ class AmazonStorage extends React.Component {
     } = this.props;
 
     return (
-      <StyledAutoBackup>
+      <StyledStoragesModule>
         <AmazonSettings
           formSettings={formSettings}
           onChange={this.onChange}
@@ -193,7 +193,7 @@ class AmazonStorage extends React.Component {
             />
           </div>
         )}
-      </StyledAutoBackup>
+      </StyledStoragesModule>
     );
   }
 }

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/storages/GoogleCloudStorage.js

@@ -3,7 +3,7 @@ import { withTranslation } from "react-i18next";
 import GoogleCloudSettings from "../../consumer-storage-settings/GoogleCloudSettings";
 import Button from "@appserver/components/button";
 import ScheduleComponent from "../../sub-components-automatic-backup/ScheduleComponent";
-import { StyledAutoBackup } from "../../StyledBackup";
+import { StyledStoragesModule } from "../../StyledBackup";
 class GoogleCloudStorage extends React.Component {
   constructor(props) {
     super(props);
@@ -104,7 +104,7 @@ class GoogleCloudStorage extends React.Component {
     } = this.props;
 
     return (
-      <StyledAutoBackup>
+      <StyledStoragesModule>
         <GoogleCloudSettings
           formSettings={formSettings}
           onChange={this.onChange}
@@ -155,7 +155,7 @@ class GoogleCloudStorage extends React.Component {
             />
           </div>
         )}
-      </StyledAutoBackup>
+      </StyledStoragesModule>
     );
   }
 }

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/storages/RackspaceStorage.js

@@ -3,7 +3,7 @@ import { withTranslation } from "react-i18next";
 import RackspaceSettings from "../../consumer-storage-settings/RackspaceSettings";
 import Button from "@appserver/components/button";
 import ScheduleComponent from "../../sub-components-automatic-backup/ScheduleComponent";
-import { StyledAutoBackup } from "../../StyledBackup";
+import { StyledStoragesModule } from "../../StyledBackup";
 class RackspaceStorage extends React.Component {
   constructor(props) {
     super(props);
@@ -117,7 +117,7 @@ class RackspaceStorage extends React.Component {
     } = this.props;
 
     return (
-      <StyledAutoBackup>
+      <StyledStoragesModule>
         <RackspaceSettings
           formSettings={formSettings}
           onChange={this.onChange}
@@ -172,7 +172,7 @@ class RackspaceStorage extends React.Component {
             />
           </div>
         )}
-      </StyledAutoBackup>
+      </StyledStoragesModule>
     );
   }
 }

web/ASC.Web.Client/src/components/pages/Settings/categories/data-management/sub-components-automatic-backup/storages/SelectelStorage.js

@@ -3,7 +3,7 @@ import { withTranslation } from "react-i18next";
 import SelectelSettings from "../../consumer-storage-settings/SelectelSettings";
 import Button from "@appserver/components/button";
 import ScheduleComponent from "../../sub-components-automatic-backup/ScheduleComponent";
-import { StyledAutoBackup } from "../../StyledBackup";
+import { StyledStoragesModule } from "../../StyledBackup";
 class SelectelStorage extends React.Component {
   constructor(props) {
     super(props);
@@ -111,7 +111,7 @@ class SelectelStorage extends React.Component {
     } = this.props;
 
     return (
-      <StyledAutoBackup>
+      <StyledStoragesModule>
         <SelectelSettings
           formSettings={formSettings}
           onChange={this.onChange}
@@ -167,7 +167,7 @@ class SelectelStorage extends React.Component {
             />
           </div>
         )}
-      </StyledAutoBackup>
+      </StyledStoragesModule>
     );
   }
 }