Web:Client:Fix styles.

packages/client/src/pages/PortalSettings/categories/security/StyledSecurity.js

@@ -36,7 +36,7 @@ export const StyledCategoryWrapper = styled.div`
   display: flex;
   flex-direction: row;
   gap: 4px;
-  margin-bottom: 16px;
+  margin-bottom: 8px;
   align-items: center;
 `;
 
@@ -126,4 +126,29 @@ export const StyledBruteForceProtection = styled.div`
   .mobile-description {
     margin-bottom: 12px;
   }
+
+  .description {
+    max-width: 700px;
+    padding-bottom: 19px;
+
+    .page-subtitle {
+      line-height: 20px;
+      color: ${(props) =>
+        props.theme.client.settings.security.descriptionColor};
+      padding-bottom: 7px;
+    }
+
+    .link {
+      line-height: 15px;
+      font-size: 13px;
+      font-weight: 600;
+      color: ${(props) =>
+        props.theme.client.settings.security.descriptionColor};
+      text-decoration: underline;
+    }
+
+    @media (max-width: 600px) {
+      padding-bottom: 20px;
+    }
+  }
 `;

packages/client/src/pages/PortalSettings/categories/security/access-portal/index.js

@@ -128,19 +128,9 @@ const AccessPortal = (props) => {
 
       <StyledSettingsSeparator />
       <CategoryWrapper
+        notTooltip={true}
         t={t}
-        title="Brute Force Protection"
+        title={t("BruteForceProtection")}
-        tooltipTitle={
-          <Trans
-            i18nKey="SessionLifetimeDescription"
-            ns="Settings"
-            t={t}
-            components={{
-              1: <strong></strong>,
-            }}
-          />
-        }
-        classNameTooltip="brute-force-protection"
       />
       <BruteForceProtectionSection />
 

packages/client/src/pages/PortalSettings/categories/security/sub-components/category-wrapper.js

@@ -7,7 +7,15 @@ import { Base } from "@docspace/components/themes";
 import { StyledCategoryWrapper, StyledTooltip } from "../StyledSecurity";
 
 const CategoryWrapper = (props) => {
-  const { t, title, tooltipTitle, tooltipUrl, theme, classNameTooltip } = props;
+  const {
+    t,
+    title,
+    tooltipTitle,
+    tooltipUrl,
+    theme,
+    classNameTooltip,
+    notTooltip,
+  } = props;
 
   const tooltip = () => (
     <StyledTooltip>
@@ -34,6 +42,7 @@ const CategoryWrapper = (props) => {
       <Text fontSize="16px" fontWeight="700">
         {title}
       </Text>
+      {!notTooltip && (
         <HelpButton
           className={classNameTooltip}
           iconName={InfoReactSvgUrl}
@@ -43,6 +52,7 @@ const CategoryWrapper = (props) => {
           getContent={tooltip}
           tooltipColor={theme.client.settings.security.owner.tooltipColor}
         />
+      )}
     </StyledCategoryWrapper>
   );
 };