Web:Studio:Fix loaders styles.

web/ASC.Web.Client/src/components/pages/Settings/Layout/Section/loaderSectionHeader.js

@@ -1,9 +1,16 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import Loaders from "@appserver/common/components/Loaders";
 import { isDesktop as isDesktopUtils } from "@appserver/components/utils/device";
 import { isTablet } from "react-device-detect";
 
+const tabletStyles = css`
+  padding-top: 12px;
+  .loader {
+    width: 184px;
+  }
+`;
+
 const StyledLoader = styled.div`
   padding-top: 8px;
 
@@ -12,18 +19,12 @@ const StyledLoader = styled.div`
   }
 
   @media (min-width: 600px) {
-    padding-top: 12px;
+    ${tabletStyles}
-    .loader {
-      width: 184px;
-    }
   }
 
   ${isTablet &&
   css`
-    padding-top: 12px;
+    ${tabletStyles}
-    .loader {
-      width: 184px;
-    }
   `}
 
   @media (min-width: 1025px) {

web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/loaderCustomization.js

@@ -1,7 +1,57 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import Loaders from "@appserver/common/components/Loaders";
 
+import { isTablet } from "react-device-detect";
+
+const tabletStyles = css`
+  .header {
+    display: block;
+    width: ${(props) =>
+      props.lngTZSettings
+        ? "283px"
+        : props.welcomePage
+        ? "201px"
+        : props.portalRenaming
+        ? "150px"
+        : 0};
+    padding-bottom: 16px;
+  }
+
+  .description {
+    display: none;
+  }
+
+  .title {
+    display: block;
+    width: ${(props) =>
+      props.lngTZSettings
+        ? "65px"
+        : props.welcomePage
+        ? "31px"
+        : props.portalRenaming
+        ? "113px"
+        : 0};
+  }
+
+  .combo-box {
+    display: block;
+    width: 350px;
+  }
+
+  .field-container {
+    display: block;
+    width: 350px;
+  }
+
+  .save-cancel-buttons {
+    display: block;
+    position: static;
+    width: 350px;
+    padding: 0 0 24px 0;
+  }
+`;
+
 const StyledLoader = styled.div`
   .header {
     display: none;
@@ -14,26 +64,23 @@ const StyledLoader = styled.div`
 
   .title {
     width: ${(props) => (props.portalRenaming ? "49px" : "63.7px")};
-    height: 20px;
+
     padding-bottom: 4px;
   }
 
   .title-long {
     display: block;
     width: 68px;
-    height: 20px;
     padding-bottom: 4px;
   }
 
   .combo-box {
     display: block;
-    height: 32px;
     width: 100%;
     padding-bottom: 24px;
   }
 
   .field-container {
-    height: 20px;
     width: 100%;
     padding-bottom: 12px;
   }
@@ -48,87 +95,49 @@ const StyledLoader = styled.div`
   }
 
   @media (min-width: 600px) {
-    .header {
+    ${tabletStyles}
-      display: block;
-      width: ${(props) =>
-        props.lngTZSettings
-          ? "283px"
-          : props.welcomePage
-          ? "201px"
-          : props.portalRenaming
-          ? "150px"
-          : 0};
-      height: 22px;
-      padding-bottom: 16px;
-    }
-
-    .description {
-      display: none;
-    }
-
-    .title {
-      display: block;
-      width: ${(props) =>
-        props.lngTZSettings
-          ? "65px"
-          : props.welcomePage
-          ? "31px"
-          : props.portalRenaming
-          ? "113px"
-          : 0};
-      height: 20px;
-    }
-
-    .combo-box {
-      display: block;
-      width: 350px;
-    }
-
-    .field-container {
-      display: block;
-      height: 20px;
-      width: 350px;
-    }
-
-    .save-cancel-buttons {
-      display: block;
-      position: static;
-      width: 350px;
-      height: 32px;
-      padding: 0 0 24px 0;
-    }
   }
+
+  ${isTablet &&
+  `
+    ${tabletStyles}
+  `}
 `;
 
-const loaderCustomization = ({
+const LoaderCustomization = ({
   lngTZSettings,
   portalRenaming,
   welcomePage,
 }) => {
+  const heightSaveCancelButtons = window.innerWidth < 600 ? "40px" : "32px";
+
   return (
     <StyledLoader
       lngTZSettings={lngTZSettings}
       portalRenaming={portalRenaming}
       welcomePage={welcomePage}
     >
-      <Loaders.Rectangle className="header" />
+      <Loaders.Rectangle height="22px" className="header" />
 
       {portalRenaming && (
         <Loaders.Rectangle height="80px" className="description" />
       )}
 
-      <Loaders.Rectangle className="title" />
+      <Loaders.Rectangle height="20px" className="title" />
-      <Loaders.Rectangle className="combo-box" />
+      <Loaders.Rectangle height="32px" className="combo-box" />
       {lngTZSettings && (
         <>
-          <Loaders.Rectangle className="field-container" />
+          <Loaders.Rectangle height="20px" className="field-container" />
-          <Loaders.Rectangle className="title-long" />
+          <Loaders.Rectangle height="20px" className="title-long" />
-          <Loaders.Rectangle className="combo-box" />
+          <Loaders.Rectangle height="32px" className="combo-box" />
         </>
       )}
-      <Loaders.Rectangle height="40px" className="save-cancel-buttons" />
+      <Loaders.Rectangle
+        height={heightSaveCancelButtons}
+        className="save-cancel-buttons"
+      />
     </StyledLoader>
   );
 };
 
-export default loaderCustomization;
+export default LoaderCustomization;

web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/loaderCustomizationNavbar.js

@@ -5,7 +5,6 @@ import Loaders from "@appserver/common/components/Loaders";
 const StyledLoader = styled.div`
   .title-long {
     width: 283px;
-    height: 22px;
     padding-bottom: 8px;
   }
 
@@ -16,32 +15,30 @@ const StyledLoader = styled.div`
 
   .link {
     width: 57px;
-    height: 20px;
     padding-bottom: 20px;
   }
 
   .title {
     display: block;
     width: 132px;
-    height: 22px;
     padding-bottom: 8px;
   }
 `;
 
-const loaderCustomizationNavbar = () => {
+const LoaderCustomizationNavbar = () => {
   return (
     <StyledLoader>
-      <Loaders.Rectangle className="title-long" />
+      <Loaders.Rectangle height="22px" className="title-long" />
       <Loaders.Rectangle height="100px" className="width" />
-      <Loaders.Rectangle className="link" />
+      <Loaders.Rectangle height="20px" className="link" />
 
-      <Loaders.Rectangle className="title" />
+      <Loaders.Rectangle height="22px" className="title" />
       <Loaders.Rectangle height="80px" className="width" />
 
-      <Loaders.Rectangle className="title" />
+      <Loaders.Rectangle height="22px" className="title" />
       <Loaders.Rectangle height="20px" className="width" />
     </StyledLoader>
   );
 };
 
-export default loaderCustomizationNavbar;
+export default LoaderCustomizationNavbar;

web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/loaderDescriptionCustomization.js

@@ -1,14 +1,25 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import Loaders from "@appserver/common/components/Loaders";
+import { isTablet } from "react-device-detect";
+
+const tabletStyles = css`
+  .description {
+    width: 684px;
+    padding-bottom: 20px;
+  }
+`;
 
 const StyledLoader = styled.div`
   @media (min-width: 600px) {
-    .description {
+    ${tabletStyles}
-      width: 684px;
-      padding-bottom: 20px;
-    }
   }
+
+  ${isTablet &&
+  css`
+    ${tabletStyles}
+  `}
+
   @media (min-width: 1024px) {
     .description {
       width: 700px;
@@ -16,12 +27,12 @@ const StyledLoader = styled.div`
   }
 `;
 
-const loaderDescriptionCustomization = () => {
+const LoaderDescriptionCustomization = () => {
   return (
     <StyledLoader>
-      <Loaders.Rectangle className="description" />
+      <Loaders.Rectangle height="40px" className="description" />
     </StyledLoader>
   );
 };
 
-export default loaderDescriptionCustomization;
+export default LoaderDescriptionCustomization;