♻️️(frontend) adapt mail-domain module

With all the changes, the mail part has been a little affected by these changes. We therefore adapt so that this part works as before
2026-08-17 21:25:52 +02:00 · 2024-10-15 15:00:54 +02:00
parent f4b18627db
commit 9e082c2146
8 changed files with 106 additions and 105 deletions
@@ -2,7 +2,7 @@ import { Button } from '@openfun/cunningham-react';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';

-import { Box, DropButton, IconOptions, Text } from '@/components';
+import { Box, DropButton, IconOptions } from '@/components';

 import { MailDomain, Role } from '../../domains/types';
 import { Access } from '../types';
@@ -60,7 +60,7 @@ export const AccessAction = ({
                </span>
              }
            >
-              <Text $theme="primary">{t('Update role')}</Text>
+              {t('Update role')}
            </Button>
          )}
          {mailDomain.abilities.delete && (
@@ -77,7 +77,7 @@ export const AccessAction = ({
                </span>
              }
            >
-              <Text $theme="primary">{t('Remove from domain')}</Text>
+              {t('Remove from domain')}
            </Button>
          )}
        </Box>
@@ -105,11 +105,11 @@ export const AccessesGrid = ({
  }, [data?.count, pageSize, setPagesCount]);

  return (
-    <Card
-      $padding={{ bottom: 'small' }}
-      $margin={{ all: 'big', top: 'none' }}
-      $overflow="auto"
-      $css={`
+    <Box $padding={{ horizontal: 'big' }}>
+      <Card
+        size="full"
+        $overflow="auto"
+        $css={`
          & .c__pagination__goto {
            display: none;
          }
@@ -122,56 +122,57 @@ export const AccessesGrid = ({
            text-align: right;
          }
      `}
-      aria-label={t('Accesses list card')}
-    >
-      {error && <TextErrors causes={error.cause} />}
+        aria-label={t('Accesses list card')}
+      >
+        {error && <TextErrors causes={error.cause} />}

-      <DataGrid
-        columns={[
-          {
-            id: 'icon-user',
-            renderCell() {
-              return (
-                <Box $direction="row" $align="center">
-                  <IconUser
-                    aria-label={t('Access icon')}
-                    width={20}
-                    height={20}
-                    color={colorsTokens()['primary-600']}
-                  />
-                </Box>
-              );
+        <DataGrid
+          columns={[
+            {
+              id: 'icon-user',
+              renderCell() {
+                return (
+                  <Box $direction="row" $align="center">
+                    <IconUser
+                      aria-label={t('Access icon')}
+                      width={20}
+                      height={20}
+                      color={colorsTokens()['primary-500']}
+                    />
+                  </Box>
+                );
+              },
            },
-          },
-          {
-            headerName: t('Names'),
-            field: 'user.name',
-          },
-          {
-            field: 'user.email',
-            headerName: t('Emails'),
-          },
-          {
-            field: 'localizedRole',
-            headerName: t('Roles'),
-          },
-          {
-            id: 'column-actions',
-            renderCell: ({ row }) => (
-              <AccessAction
-                mailDomain={mailDomain}
-                access={row}
-                currentRole={currentRole}
-              />
-            ),
-          },
-        ]}
-        rows={accesses}
-        isLoading={isLoading}
-        pagination={pagination}
-        onSortModelChange={setSortModel}
-        sortModel={sortModel}
-      />
-    </Card>
+            {
+              headerName: t('Names'),
+              field: 'user.name',
+            },
+            {
+              field: 'user.email',
+              headerName: t('Emails'),
+            },
+            {
+              field: 'localizedRole',
+              headerName: t('Roles'),
+            },
+            {
+              id: 'column-actions',
+              renderCell: ({ row }) => (
+                <AccessAction
+                  mailDomain={mailDomain}
+                  access={row}
+                  currentRole={currentRole}
+                />
+              ),
+            },
+          ]}
+          rows={accesses}
+          isLoading={isLoading}
+          pagination={pagination}
+          onSortModelChange={setSortModel}
+          sortModel={sortModel}
+        />
+      </Card>
+    </Box>
  );
 };
@@ -44,7 +44,6 @@ export const ItemList = () => {
          void fetchNextPage();
        }}
        scrollContainer={containerRef.current}
-        as="ul"
        $margin={{ top: 'none' }}
        $padding="none"
        role="listbox"
@@ -49,7 +49,7 @@ export const Panel = () => {
            ? t(`Close the mail domains panel`)
            : t(`Open the mail domains panel`)
        }
-        $color={colorsTokens()['primary-600']}
+        $color={colorsTokens()['primary-500']}
        $css={`
          position: absolute;
          right: -1.2rem;
@@ -40,7 +40,7 @@ export const PanelActions = () => {
        onClick={changeOrdering}
        $radius="100%"
        $background={isSortAsc ? colorsTokens()['primary-200'] : 'transparent'}
-        $color={colorsTokens()['primary-600']}
+        $color={colorsTokens()['primary-500']}
      >
        <IconSort width={30} height={30} aria-hidden="true" />
      </BoxButton>
@@ -35,7 +35,7 @@ export const PanelMailDomains = ({ mailDomain }: MailDomainProps) => {
  };

  const activeStyle = `
-    border-right: 4px solid ${colorsTokens()['primary-600']};
+    border-right: 4px solid ${colorsTokens()['primary-500']};
    background: ${colorsTokens()['primary-400']};
     span {
      color: ${colorsTokens()['primary-text']};
@@ -92,7 +92,7 @@ export const PanelMailDomains = ({ mailDomain }: MailDomainProps) => {
            />
            <Text
              $weight="bold"
-              $color={colorsTokens()['greyscale-600']}
+              $color={colorsTokens()['greyscale-500']}
              $css={`
              display: inline-block;
              width: 10rem;
@@ -99,49 +99,50 @@ export function MailDomainsContent({ mailDomain }: { mailDomain: MailDomain }) {
        showMailBoxCreationForm={setIsCreateMailboxFormVisible}
      />

-      <Card
-        $padding={{ bottom: 'small' }}
-        $margin={{ all: 'big', top: 'none' }}
-        $overflow="auto"
-        aria-label={t('Mailboxes list card')}
-      >
-        {error && <TextErrors causes={error.cause} />}
+      <Box $padding="small">
+        <Card
+          size="full"
+          $overflow="auto"
+          aria-label={t('Mailboxes list card')}
+        >
+          {error && <TextErrors causes={error.cause} />}

-        <DataGrid
-          columns={[
-            {
-              field: 'name',
-              headerName: t('Names'),
-              renderCell: ({ row }) => (
-                <Text
-                  $weight="bold"
-                  $theme="primary"
-                  $css="text-transform: capitalize;"
-                >
-                  {row.name}
-                </Text>
-              ),
-            },
-            {
-              field: 'email',
-              headerName: t('Emails'),
-            },
-          ]}
-          rows={viewMailboxes}
-          isLoading={isLoading}
-          onSortModelChange={setSortModel}
-          sortModel={sortModel}
-          pagination={{
-            ...pagination,
-            displayGoto: false,
-          }}
-          aria-label={t('Mailboxes list')}
-          hideEmptyPlaceholderImage={true}
-          emptyPlaceholderLabel={t(
-            'No mail box was created with this mail domain.',
-          )}
-        />
-      </Card>
+          <DataGrid
+            columns={[
+              {
+                field: 'name',
+                headerName: t('Names'),
+                renderCell: ({ row }) => (
+                  <Text
+                    $weight="bold"
+                    $theme="primary"
+                    $css="text-transform: capitalize;"
+                  >
+                    {row.name}
+                  </Text>
+                ),
+              },
+              {
+                field: 'email',
+                headerName: t('Emails'),
+              },
+            ]}
+            rows={viewMailboxes}
+            isLoading={isLoading}
+            onSortModelChange={setSortModel}
+            sortModel={sortModel}
+            pagination={{
+              ...pagination,
+              displayGoto: false,
+            }}
+            aria-label={t('Mailboxes list')}
+            hideEmptyPlaceholderImage={true}
+            emptyPlaceholderLabel={t(
+              'No mail box was created with this mail domain.',
+            )}
+          />
+        </Card>
+      </Box>
    </>
  );
 }
@@ -262,7 +262,6 @@ const Form = ({
          </Box>

          <Text
-            $theme="primary"
            $size="1rem"
            $display="inline-block"
            $css={`
@@ -309,6 +308,7 @@ const FieldMailBox = ({ name, label, methods, text }: FieldMailBoxProps) => {
          state={fieldState.error ? 'error' : 'default'}
          text={fieldState?.error?.message ? fieldState.error.message : text}
          {...methods.register(name)}
+          fullWidth
        />
      )}
    />