Client: use colors from theme

packages/client/src/pages/PortalSettings/categories/developer-tools/index.js

@@ -48,6 +48,8 @@ import PluginSDK from "./PluginSDK";
 import { Badge } from "@docspace/shared/components/badge";
 import { SECTION_HEADER_HEIGHT } from "@docspace/shared/components/section/Section.constants";
 
+import { globalColors } from "@docspace/shared/themes";
+
 const DeveloperToolsWrapper = (props) => {
   const { loadBaseInfo, currentDeviceType } = props;
   const navigate = useNavigate();
@@ -77,7 +79,7 @@ const DeveloperToolsWrapper = (props) => {
 
       <Badge
         label={t("Common:BetaLabel")}
-        backgroundColor="#533ED1"
+        backgroundColor={globalColors.mainPurple}
         fontSize="9px"
         borderRadius="50px"
         noHover={true}

packages/client/src/pages/PortalSettings/categories/integration/LDAP/styled-components/StyledCerticateDialog.js

@@ -48,6 +48,16 @@ const StyledCertificateDialogBody = styled(Box)`
     border-radius: 3px;
     padding: 4px;
     margin-bottom: 8px;
+
+    & > p {
+      color: ${(props) =>
+        props.theme.client.settings.integration.ldap.textColor};
+    }
+  }
+
+  .ldap-error-text {
+    color: ${(props) =>
+      props.theme.client.settings.integration.ldap.errorColor};
   }
 `;
 

packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/CertificateDialog.js

@@ -114,34 +114,34 @@ const CertificateDialog = ({
             </Text>
           </Box>
           <Box className="ldap-settings-crt-details">
-            <Text as="p" color="#A3A9AE">
+            <Text as="p">
               {t("LdapSettingsSerialNumber")}: {cerficateIssue.serialNumber}
             </Text>
 
-            <Text as="p" color="#A3A9AE">
+            <Text as="p">
               {t("LdapSettingsIssuerName")}: {cerficateIssue.issuerName}
             </Text>
 
-            <Text as="p" color="#A3A9AE">
+            <Text as="p">
               {t("LdapSettingsSubjectName")}: {cerficateIssue.subjectName}
             </Text>
 
-            <Text as="p" color="#A3A9AE">
+            <Text as="p">
               {t("LdapSettingsValidFrom")}: {cerficateIssue.validFrom}
             </Text>
 
-            <Text as="p" color="#A3A9AE">
+            <Text as="p">
               {t("LdapSettingsValidUntil")}: {cerficateIssue.validUntil}
             </Text>
 
-            <Text as="p" color="#A3A9AE">
+            <Text as="p">
               {t("LdapSettingsUniqueHash")}: {cerficateIssue.uniqueHash}
             </Text>
           </Box>
           {hasError && (
             <Box>
               {cerficateIssue.errors.map((err) => (
-                <Text color="#F24724">{mapError(err)}</Text>
+                <Text className="ldap-error-text">{mapError(err)}</Text>
               ))}
             </Box>
           )}

packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/ToggleAutoSync.js

@@ -32,6 +32,7 @@ import { Text } from "@docspace/shared/components/text";
 import { ToggleButton } from "@docspace/shared/components/toggle-button";
 import { Badge } from "@docspace/shared/components/badge";
 import { toastr } from "@docspace/shared/components/toast";
+import { globalColors } from "@docspace/shared/themes";
 
 const borderProp = { radius: "6px" };
 
@@ -92,7 +93,7 @@ const ToggleAutoSync = ({
             </Text>
             {!isLdapAvailable && (
               <Badge
-                backgroundColor="#EDC409"
+                backgroundColor={globalColors.favoritesStatus}
                 label={t("Common:Paid")}
                 className="toggle-caption_title_badge"
                 isPaidBadge={true}

packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/ToggleLDAP.js

@@ -32,6 +32,7 @@ import { Text } from "@docspace/shared/components/text";
 import { ToggleButton } from "@docspace/shared/components/toggle-button";
 import { Badge } from "@docspace/shared/components/badge";
 import { PRODUCT_NAME } from "@docspace/shared/constants";
+import { globalColors } from "@docspace/shared/themes";
 
 const borderProp = { radius: "6px" };
 
@@ -87,7 +88,7 @@ const ToggleLDAP = ({
             </Text>
             {!isLdapAvailable && (
               <Badge
-                backgroundColor="#EDC409"
+                backgroundColor={globalColors.favoritesStatus}
                 label={t("Common:Paid")}
                 className="toggle-caption_title_badge"
                 isPaidBadge={true}

packages/client/src/pages/PortalSettings/categories/integration/index.js

@@ -42,6 +42,7 @@ import PluginPage from "./Plugins";
 import { Badge } from "@docspace/shared/components/badge";
 import { Box } from "@docspace/shared/components/box";
 import { SECTION_HEADER_HEIGHT } from "@docspace/shared/components/section/Section.constants";
+import { globalColors } from "@docspace/shared/themes";
 
 const IntegrationWrapper = (props) => {
   const {
@@ -103,7 +104,7 @@ const IntegrationWrapper = (props) => {
 
         <Badge
           label={t("Common:BetaLabel")}
-          backgroundColor="#533ED1"
+          backgroundColor={globalColors.mainPurple}
           fontSize="9px"
           borderRadius="50px"
           noHover={true}