🎨 style(inviteUsers): add bold and color to user count labels in campaign, project and workspace settings

Author: marcbon

src/common/components/inviteUsers/campaignSettings.tsx

@@ -8,6 +8,7 @@ import {
   Notification,
   Button,
   getColor,
+  MD,
 } from '@appquality/unguess-design-system';
 import { useAppSelector } from 'src/app/hooks';
 import { Trans, useTranslation } from 'react-i18next';
@@ -240,8 +241,15 @@ export const CampaignSettings = () => {
                         marginRight: appTheme.space.xs,
                       }}
                     />
-                    {t('__PERMISSION_SETTINGS_CAMPAIGN_USERS')} ({campaignCount}
-                    )
+                    <MD isBold>
+                      {t('__PERMISSION_SETTINGS_CAMPAIGN_USERS')}{' '}
+                      <Span
+                        isBold={false}
+                        style={{ color: appTheme.palette.grey[600] }}
+                      >
+                        ({campaignCount})
+                      </Span>
+                    </MD>
                   </UsersLabel>
                   <UsersContainer>
                     {campaignUsers?.items.map((user) => (
@@ -274,8 +282,15 @@ export const CampaignSettings = () => {
                               marginRight: appTheme.space.xs,
                             }}
                           />
-                          {t('__PERMISSION_SETTINGS_PROJECT_USERS')} (
-                          {projectCount})
+                          <MD isBold>
+                            {t('__PERMISSION_SETTINGS_PROJECT_USERS')}{' '}
+                            <Span
+                              isBold={false}
+                              style={{ color: appTheme.palette.grey[600] }}
+                            >
+                              ({projectCount})
+                            </Span>
+                          </MD>
                         </UsersLabel>
                       </StyledAccordion.Label>
                     </StyledAccordion.Header>
@@ -305,8 +320,15 @@ export const CampaignSettings = () => {
                               marginRight: appTheme.space.xs,
                             }}
                           />
-                          {t('__PERMISSION_SETTINGS_WORKSPACE_USERS')} (
-                          {workspaceCount})
+                          <MD isBold>
+                            {t('__PERMISSION_SETTINGS_WORKSPACE_USERS')}{' '}
+                            <Span
+                              isBold={false}
+                              style={{ color: appTheme.palette.grey[600] }}
+                            >
+                              ({workspaceCount})
+                            </Span>
+                          </MD>
                         </UsersLabel>
                       </StyledAccordion.Label>
                     </StyledAccordion.Header>

src/common/components/inviteUsers/projectSettings.tsx

@@ -8,6 +8,7 @@ import {
   Notification,
   Button,
   getColor,
+  MD,
 } from '@appquality/unguess-design-system';
 import { useAppSelector } from 'src/app/hooks';
 import { Trans, useTranslation } from 'react-i18next';
@@ -214,7 +215,15 @@ export const ProjectSettings = () => {
                         marginRight: appTheme.space.xs,
                       }}
                     />
-                    {t('__PERMISSION_SETTINGS_PROJECT_USERS')} ({projectCount})
+                    <MD isBold>
+                      {t('__PERMISSION_SETTINGS_PROJECT_USERS')}{' '}
+                      <Span
+                        isBold={false}
+                        style={{ color: appTheme.palette.grey[600] }}
+                      >
+                        ({projectCount})
+                      </Span>
+                    </MD>
                   </UsersLabel>
                   <UsersContainer>
                     {projectUsers?.items.map((user) => (
@@ -249,8 +258,15 @@ export const ProjectSettings = () => {
                               marginRight: appTheme.space.xs,
                             }}
                           />
-                          {t('__PERMISSION_SETTINGS_WORKSPACE_USERS')} (
-                          {workspaceCount})
+                          <MD isBold>
+                            {t('__PERMISSION_SETTINGS_WORKSPACE_USERS')}{' '}
+                            <Span
+                              isBold={false}
+                              style={{ color: appTheme.palette.grey[600] }}
+                            >
+                              ({workspaceCount})
+                            </Span>
+                          </MD>
                         </UsersLabel>
                       </StyledAccordion.Label>
                     </StyledAccordion.Header>

src/common/components/inviteUsers/workspaceSettings.tsx

@@ -8,6 +8,7 @@ import {
   Notification,
   Button,
   getColor,
+  MD,
 } from '@appquality/unguess-design-system';
 import { useAppSelector } from 'src/app/hooks';
 import { Trans, useTranslation } from 'react-i18next';
@@ -192,8 +193,15 @@ export const WorkspaceSettings = () => {
                         marginRight: appTheme.space.xs,
                       }}
                     />
-                    {t('__PERMISSION_SETTINGS_WORKSPACE_USERS')} (
-                    {workspaceCount})
+                    <MD isBold>
+                      {t('__PERMISSION_SETTINGS_WORKSPACE_USERS')}{' '}
+                      <Span
+                        isBold={false}
+                        style={{ color: appTheme.palette.grey[600] }}
+                      >
+                        ({workspaceCount})
+                      </Span>
+                    </MD>
                   </UsersLabel>
                   <UsersContainer>
                     {workspaceUsers?.items.map((user) => (