Client: fix badges color

2024-07-24 16:32:22 +03:00 · 2024-07-24 16:32:22 +03:00 · e277c8ac7b
commit e277c8ac7b
parent 7a64964df2
16 changed files with 110 additions and 22 deletions
--- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/AccountsItemTitle.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/AccountsItemTitle.js
@ -116,7 +116,11 @@ const AccountsItemTitle = ({
              className="sso-badge"
              label={t("Common:SSO")}
              color={globalColors.white}
-              backgroundColor={globalColors.mainGreen}
+              backgroundColor={
+                theme.isBase
+                  ? globalColors.secondGreen
+                  : globalColors.secondGreenDark
+              }
              fontSize={"9px"}
              fontWeight={800}
              noHover
@ -135,7 +139,11 @@ const AccountsItemTitle = ({
              className="ldap-badge"
              label={t("Common:LDAP")}
              color={globalColors.white}
-              backgroundColor={globalColors.secondPurple}
+              backgroundColor={
+                theme.isBase
+                  ? globalColors.secondPurple
+                  : globalColors.secondPurpleDark
+              }
              fontSize={"9px"}
              fontWeight={800}
              noHover
--- a/packages/client/src/pages/Home/Section/AccountsBody/Badges.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/Badges.js
@ -131,7 +131,11 @@ const Badges = ({
          className="accounts-badge"
          label={t("Common:LDAP")}
          color={globalColors.white}
-          backgroundColor={globalColors.secondPurple}
+          backgroundColor={
+            theme.isBase
+              ? globalColors.secondPurple
+              : globalColors.secondPurpleDark
+          }
          fontSize={"9px"}
          fontWeight={800}
          noHover
@ -144,7 +148,11 @@ const Badges = ({
          className="accounts-badge"
          label={t("SSO")}
          color={globalColors.white}
-          backgroundColor={globalColors.mainGreen}
+          backgroundColor={
+            theme.isBase
+              ? globalColors.secondGreen
+              : globalColors.secondGreenDark
+          }
          fontSize={"9px"}
          fontWeight={800}
          noHover
@ -156,7 +164,11 @@ const Badges = ({
        <StyledPaidBadge
          className="paid-badge accounts-badge"
          label={t("Paid")}
-          backgroundColor={globalColors.favoritesStatus}
+          backgroundColor={
+            theme.isBase
+              ? globalColors.favoritesStatus
+              : globalColors.favoriteStatusDark
+          }
          fontSize={"9px"}
          fontWeight={800}
          lineHeight={"13px"}
--- a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
+++ b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
@ -395,7 +395,11 @@ const SectionHeaderContent = (props) => {
              <div className="header">{translatedHeader}</div>
              {isNeedPaidIcon ? (
                <Badge
-                  backgroundColor={globalColors.favoritesStatus}
+                  backgroundColor={
+                    theme.isBase
+                      ? globalColors.favoritesStatus
+                      : globalColors.favoriteStatusDark
+                  }
                  label={t("Common:Paid")}
                  fontWeight="700"
                  className="settings-section_badge"
--- a/packages/client/src/pages/PortalSettings/categories/common/Branding/CommonWhiteLabel.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Branding/CommonWhiteLabel.js
@ -68,7 +68,11 @@ const CommonWhiteLabel = ({
        {!isSettingPaid && (
          <Badge
            className="paid-badge"
-            backgroundColor={globalColors.favoritesStatus}
+            backgroundColor={
+              theme.isBase
+                ? globalColors.favoritesStatus
+                : globalColors.favoriteStatusDark
+            }
            label={t("Common:Paid")}
            isPaidBadge={true}
          />
--- a/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Branding/whitelabel.js
@ -289,7 +289,11 @@ const WhiteLabel = (props) => {
          <Badge
            className="paid-badge"
            fontWeight="700"
-            backgroundColor={globalColors.favoritesStatus}
+            backgroundColor={
+              theme.isBase
+                ? globalColors.favoritesStatus
+                : globalColors.favoriteStatusDark
+            }
            label={t("Common:Paid")}
            isPaidBadge={true}
          />
--- a/packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js
+++ b/packages/client/src/pages/PortalSettings/categories/common/Customization/dns-settings.js
@ -291,7 +291,11 @@ const DNSSettings = (props) => {
            <Badge
              className="paid-badge"
              fontWeight="700"
-              backgroundColor={globalColors.favoritesStatus}
+              backgroundColor={
+                theme.isBase
+                  ? globalColors.favoritesStatus
+                  : globalColors.favoriteStatusDark
+              }
              label={t("Common:Paid")}
              isPaidBadge={true}
            />
--- a/packages/client/src/pages/PortalSettings/categories/data-management/backup/auto-backup/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/data-management/backup/auto-backup/index.js
@ -506,7 +506,11 @@ class AutomaticBackup extends React.PureComponent {
              </Text>
              {!isEnableAuto && (
                <Badge
-                  backgroundColor={globalColors.favoritesStatus}
+                  backgroundColor={
+                    theme.isBase
+                      ? globalColors.favoritesStatus
+                      : globalColors.favoriteStatusDark
+                  }
                  label={t("Common:Paid")}
                  fontWeight="700"
                  className="auto-backup_badge"
--- a/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/ToggleAutoSync.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/ToggleAutoSync.js
@ -93,7 +93,11 @@ const ToggleAutoSync = ({
            </Text>
            {!isLdapAvailable && (
              <Badge
-                backgroundColor={globalColors.favoritesStatus}
+                backgroundColor={
+                  theme.isBase
+                    ? globalColors.favoritesStatus
+                    : globalColors.favoriteStatusDark
+                }
                label={t("Common:Paid")}
                className="toggle-caption_title_badge"
                isPaidBadge={true}
--- a/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/ToggleLDAP.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/LDAP/sub-components/ToggleLDAP.js
@ -87,7 +87,11 @@ const ToggleLDAP = ({
            </Text>
            {!isLdapAvailable && (
              <Badge
-                backgroundColor={globalColors.favoritesStatus}
+                backgroundColor={
+                  theme.isBase
+                    ? globalColors.favoritesStatus
+                    : globalColors.favoriteStatusDark
+                }
                label={t("Common:Paid")}
                className="toggle-caption_title_badge"
                isPaidBadge={true}
--- a/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/ToggleSSO.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/SingleSignOn/sub-components/ToggleSSO.js
@ -97,7 +97,11 @@ const ToggleSSO = ({ enableSso, ssoToggle, isSSOAvailable }) => {
          </Text>
          {!isSSOAvailable && (
            <Badge
-              backgroundColor={globalColors.favoritesStatus}
+              backgroundColor={
+                theme.isBase
+                  ? globalColors.favoritesStatus
+                  : globalColors.favoriteStatusDark
+              }
              label={t("Common:Paid")}
              fontWeight="700"
              className="toggle-caption_title_badge"
--- a/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/integration/ThirdPartyServicesSettings/index.js
@ -295,7 +295,11 @@ class ThirdPartyServices extends React.Component {
                  </Text>
                  <Badge
                    className="paid-badge"
-                    backgroundColor={globalColors.favoritesStatus}
+                    backgroundColor={
+                      theme.isBase
+                        ? globalColors.favoritesStatus
+                        : globalColors.favoriteStatusDark
+                    }
                    fontWeight="700"
                    label={t("Common:Paid")}
                    isPaidBadge={true}
--- a/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sub-components/HistoryMainContent.js
@ -319,7 +319,11 @@ const HistoryMainContent = (props) => {
        <Badge
          className="paid-badge"
          fontWeight="700"
-          backgroundColor={globalColors.favoritesStatus}
+          backgroundColor={
+            theme.isBase
+              ? globalColors.favoritesStatus
+              : globalColors.favoriteStatusDark
+          }
          label={t("Common:Paid")}
          isPaidBadge={true}
        />
--- a/packages/client/src/pages/PortalSettings/categories/storage-management/Quotas.js
+++ b/packages/client/src/pages/PortalSettings/categories/storage-management/Quotas.js
@ -69,7 +69,11 @@ const QuotasComponent = (props) => {

        {!isStatisticsAvailable && (
          <Badge
-            backgroundColor={globalColors.favoritesStatus}
+            backgroundColor={
+              theme.isBase
+                ? globalColors.favoritesStatus
+                : globalColors.favoriteStatusDark
+            }
            label={t("Common:Paid")}
            className="paid-badge"
            isPaidBadge
--- a/packages/client/src/pages/PortalSettings/categories/storage-management/Statistics.js
+++ b/packages/client/src/pages/PortalSettings/categories/storage-management/Statistics.js
@ -92,7 +92,11 @@ const StatisticsComponent = (props) => {
        </StyledMainTitle>
        {!isStatisticsAvailable && (
          <Badge
-            backgroundColor={globalColors.favoritesStatus}
+            backgroundColor={
+              theme.isBase
+                ? globalColors.favoritesStatus
+                : globalColors.favoriteStatusDark
+            }
            label={t("Common:Paid")}
            className="paid-badge"
            isPaidBadge
--- a/packages/client/src/pages/PortalSettings/components/MobileCategoryWrapper.js
+++ b/packages/client/src/pages/PortalSettings/components/MobileCategoryWrapper.js
@ -110,7 +110,11 @@ const MobileCategoryWrapper = (props) => {
        </Link>
        {withPaidBadge && (
          <Badge
-            backgroundColor={globalColors.favoritesStatus}
+            backgroundColor={
+              theme.isBase
+                ? globalColors.favoritesStatus
+                : globalColors.favoriteStatusDark
+            }
            label={badgeLabel}
            isPaidBadge={true}
            className="paid-badge"
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/index.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/main-profile/index.js
@ -229,7 +229,11 @@ const MainProfile = (props) => {
              className="sso-badge"
              label={t("Common:SSO")}
              color={globalColors.white}
-              backgroundColor={globalColors.mainGreen}
+              backgroundColor={
+                theme.isBase
+                  ? globalColors.secondGreen
+                  : globalColors.secondGreenDark
+              }
              fontSize={"9px"}
              fontWeight={800}
              noHover
@ -243,7 +247,11 @@ const MainProfile = (props) => {
              className="sso-badge"
              label={t("Common:LDAP")}
              color={globalColors.white}
-              backgroundColor={globalColors.secondPurple}
+              backgroundColor={
+                theme.isBase
+                  ? globalColors.secondPurple
+                  : globalColors.secondPurpleDark
+              }
              fontSize={"9px"}
              fontWeight={800}
              noHover
@ -269,7 +277,11 @@ const MainProfile = (props) => {
                  className="sso-badge"
                  label={t("Common:SSO")}
                  color={globalColors.white}
-                  backgroundColor={globalColors.mainGreen}
+                  backgroundColor={
+                    theme.isBase
+                      ? globalColors.secondGreen
+                      : globalColors.secondGreenDark
+                  }
                  fontSize={"9px"}
                  fontWeight={800}
                  noHover
@ -288,7 +300,11 @@ const MainProfile = (props) => {
                  className="ldap-badge"
                  label={t("Common:LDAP")}
                  color={globalColors.white}
-                  backgroundColor={globalColors.secondPurple}
+                  backgroundColor={
+                    theme.isBase
+                      ? globalColors.secondPurple
+                      : globalColors.secondPurpleDark
+                  }
                  fontSize={"9px"}
                  fontWeight={800}
                  noHover