♿️(frontend) change panel text color

- change text color displayed when panel of teams or mail domains is empty to create more contrast between text and background colors
numerique-gouv · Jul 31, 2024 · f1d46b9 · f1d46b9
1 parent 3d38eca
commit f1d46b9
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 16 deletions.
diff --git a/src/frontend/apps/desk/src/features/mail-domains/components/panel/ItemList.tsx b/src/frontend/apps/desk/src/features/mail-domains/components/panel/ItemList.tsx
@@ -44,7 +44,7 @@ export const ItemList = () => {
         scrollContainer={containerRef.current}
         as="ul"
         $margin={{ top: 'none' }}
-        $padding={{ all: 'none' }}
+        $padding="none"
         role="listbox"
       >
         <ItemListState
@@ -76,21 +76,16 @@ const ItemListState = ({
 
   if (isLoading) {
     return (
-      <Box $align="center" $margin={{ all: 'large' }}>
+      <Box $align="center" $margin="large">
         <Loader aria-label={t('mail domains list loading')} />
       </Box>
     );
   }
 
   if (!mailDomains?.length) {
     return (
-      <Box $justify="center" $margin={{ all: 'small' }}>
-        <Text
-          as="p"
-          $margin={{ vertical: 'none' }}
-          $theme="greyscale"
-          $variation="500"
-        >
+      <Box $justify="center" $margin="small">
+        <Text as="p" $margin={{ vertical: 'none' }}>
           {t(`0 mail domain to display.`)}
         </Text>
       </Box>

diff --git a/src/frontend/apps/desk/src/features/teams/teams-panel/components/TeamList.tsx b/src/frontend/apps/desk/src/features/teams/teams-panel/components/TeamList.tsx
@@ -40,15 +40,10 @@ const TeamListState = ({ isLoading, isError, teams }: PanelTeamsStateProps) => {
   if (!teams?.length) {
     return (
       <Box $justify="center" $margin="small">
-        <Text
-          as="p"
-          $margin={{ vertical: 'none' }}
-          $theme="greyscale"
-          $variation="500"
-        >
+        <Text as="p" $margin={{ vertical: 'none' }}>
           {t('0 group to display.')}
         </Text>
-        <Text as="p" $theme="greyscale" $variation="500">
+        <Text as="p">
           {t(
             'Create your first team by clicking on the "Create a new team" button.',
           )}