Web:Studio:Styling Settings.

web/ASC.Web.Client/src/components/pages/Settings/categories/common/SettingsPageLayout.js

@@ -18,10 +18,10 @@ const StyledComponent = styled.div`
     margin-bottom: 20px;
   }
 
-  .category-item-wrapper:not(:last-child) {
+  /* .category-item-wrapper:not(:last-child) {
     border-bottom: 1px solid #eceef1;
     margin-bottom: 24px;
-  }
+  } */
 
   .category-item-description {
     color: ${(props) => props.theme.studio.settings.common.descriptionColor};
@@ -66,10 +66,11 @@ const SettingsPageLayout = ({ children }) => {
   useEffect(() => {
     window.addEventListener("resize", checkInnerWidth);
     return () => window.removeEventListener("resize", checkInnerWidth);
-  }, [checkInnerWidth]);
+  }, []);
 
   //TODO: Add menu, hide along the route
-  const isMobile = !!(isSmallTablet() || mobileView);
+  const isMobile = !!(isSmallTablet() && mobileView);
+
   return <>{children(isMobile)}</>;
 };
 

web/ASC.Web.Client/src/components/pages/Settings/categories/common/customization.js

@@ -28,6 +28,8 @@ const StyledComponent = styled.div`
   .category-item-wrapper:not(:last-child) {
     border-bottom: 1px solid #eceef1;
     margin-bottom: 24px;
+    // Add
+    padding-bottom: 24px;
   }
 
   .category-item-description {

web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/custom-titles.js

@@ -244,6 +244,11 @@ class CustomTitles extends React.Component {
     }
   };
 
+  onClickLink = (e) => {
+    e.preventDefault();
+    history.push(e.target.pathname);
+  };
+
   render() {
     const { t, theme, sectionWidth, isMobileView } = this.props;
     const {
@@ -270,7 +275,7 @@ class CustomTitles extends React.Component {
               "/settings/common/customization/custom-titles"
             )}
           >
-            {t("CustomTitles")}
+            {t("CustomTitlesWelcome")}
           </Link>
           <StyledArrowRightIcon size="small" color="#333333" />
         </div>
@@ -285,7 +290,7 @@ class CustomTitles extends React.Component {
         <FieldContainer
           id="fieldContainerWelcomePage"
           className="field-container-width"
-          labelText={t("Common:Title")}
+          labelText={`${t("Common:Title")}:`}
           isVertical={true}
         >
           <TextInput
@@ -304,10 +309,12 @@ class CustomTitles extends React.Component {
     ) : isMobileView ? (
       isMobileViewLanguageTimeSettings
     ) : (
-      <StyledComponent hasScroll={hasScroll}>
+      <StyledComponent hasScroll={hasScroll} className="category-item-wrapper">
         {this.checkInnerWidth() && !isMobileView && (
           <div className="category-item-heading">
-            <div className="category-item-title">{t("WelcomePageTitle")}</div>
+            <div className="category-item-title">
+              {t("CustomTitlesWelcome")}
+            </div>
             <HelpButton
               iconName="static/images/combined.shape.svg"
               size={12}

web/ASC.Web.Client/src/components/pages/Settings/categories/common/settingsCustomization/language-and-time-zone.js

@@ -524,7 +524,7 @@ class LanguageAndTimeZone extends React.Component {
     ) : isMobileView ? (
       isMobileViewLanguageTimeSettings
     ) : (
-      <StyledComponent hasScroll={hasScroll}>
+      <StyledComponent hasScroll={hasScroll} className="category-item-wrapper">
         {this.checkInnerWidth() && !isMobileView && (
           <div className="category-item-heading">
             <div className="category-item-title">