♿️(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

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,7 +76,7 @@ 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>
     );
@@ -84,13 +84,8 @@ const ItemListState = ({
 
   if (!mailDomains?.length) {
     return (
-      <Box $justify="center" $margin={{ all: 'small' }}>
+      <Box $justify="center" $margin="small">
-        <Text
+        <Text as="p" $margin={{ vertical: 'none' }}>
-          as="p"
-          $margin={{ vertical: 'none' }}
-          $theme="greyscale"
-          $variation="500"
-        >
           {t(`0 mail domain to display.`)}
         </Text>
       </Box>

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
+        <Text as="p" $margin={{ vertical: 'none' }}>
-          as="p"
-          $margin={{ vertical: 'none' }}
-          $theme="greyscale"
-          $variation="500"
-        >
           {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.',
           )}