From a7aeedb8c2992f39bb3adda549d605645ef7339c Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Thu, 12 Sep 2024 16:44:40 +0200
Subject: [PATCH] wip

---
 src/frontend/apps/impress/.env                |  2 +-
 .../src/cunningham/cunningham-style.css       |  7 +++
 .../src/cunningham/cunningham-tokens.css      |  6 +-
 .../src/cunningham/cunningham-tokens.ts       |  6 +-
 .../docs/docs-grid/components/DocsGrid.tsx    | 63 +++++++++++--------
 .../components/DocsGridContainer.tsx          | 27 ++++----
 6 files changed, 64 insertions(+), 47 deletions(-)

diff --git a/src/frontend/apps/impress/.env b/src/frontend/apps/impress/.env
index e04335f5..033fe399 100644
--- a/src/frontend/apps/impress/.env
+++ b/src/frontend/apps/impress/.env
@@ -1,4 +1,4 @@
 NEXT_PUBLIC_API_ORIGIN=
 NEXT_PUBLIC_Y_PROVIDER_URL=
 NEXT_PUBLIC_MEDIA_URL=
-NEXT_PUBLIC_THEME=dsfr
+NEXT_PUBLIC_THEME=openDesk
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
index 6028dc68..b4e834b3 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
@@ -37,6 +37,13 @@
   font-size: var(--c--components--datagrid--header--size);
 }
 
+.c__datagrid__table__container > table {
+  th:first-child,
+  td:first-child {
+    padding-left: 24px;
+  }
+}
+
 /**
  * Modal
 */
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
index 05280b60..001ceafa 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css
@@ -81,13 +81,13 @@
   --c--theme--font--sizes--ml: 0.938rem;
   --c--theme--font--sizes--xl: 1.5rem;
   --c--theme--font--sizes--t: 0.6875rem;
-  --c--theme--font--weights--thin: 100;
+  --c--theme--font--weights--thin: 200;
   --c--theme--font--weights--light: 300;
   --c--theme--font--weights--regular: 400;
   --c--theme--font--weights--medium: 500;
   --c--theme--font--weights--bold: 600;
-  --c--theme--font--weights--extrabold: 800;
-  --c--theme--font--weights--black: 900;
+  --c--theme--font--weights--extrabold: 700;
+  --c--theme--font--weights--black: 800;
   --c--theme--font--families--base: 'Roboto Flex Variable', sans-serif;
   --c--theme--font--families--accent: 'Roboto Flex Variable', sans-serif;
   --c--theme--font--letterspacings--h1: normal;
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
index bacc968a..a92b70b1 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts
@@ -90,13 +90,13 @@ export const tokens = {
             t: '0.6875rem',
           },
           weights: {
-            thin: 100,
+            thin: 200,
             light: 300,
             regular: 400,
             medium: 500,
             bold: 600,
-            extrabold: 800,
-            black: 900,
+            extrabold: 700,
+            black: 800,
           },
           families: {
             base: '"Roboto Flex Variable", sans-serif',
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
index 8f2e1472..caf1ebe2 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx
@@ -1,9 +1,9 @@
 import { DataGrid, SortModel, usePagination } from '@openfun/cunningham-react';
-import React, { useEffect, useState } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { createGlobalStyle } from 'styled-components';
 
-import { Card, StyledLink, Text, TextErrors } from '@/components';
+import { Box, Card, StyledLink, Text, TextErrors } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import {
   Doc,
@@ -45,7 +45,7 @@ function formatSortModel(sortModel: SortModelItem): DocsOrdering | undefined {
   }
 }
 
-export const DocsGrid = () => {
+export const DocsGrid = ({ topSlot }: { topSlot?: ReactNode }) => {
   const { colorsTokens } = useCunninghamTheme();
   const transRole = useTransRole();
   const { t } = useTranslation();
@@ -83,26 +83,48 @@ export const DocsGrid = () => {
 
   return (
     <Card
-      $padding={{ bottom: 'small', horizontal: 'big' }}
-      $margin={{ all: 'big', top: 'none' }}
+      $margin={{ all: 'big' }}
       $overflow="auto"
       aria-label={t(`Datagrid of the documents page {{page}}`, { page })}
     >
       <DocsGridStyle />
-      <Text
-        $weight="bold"
-        as="h2"
-        $theme="primary"
-        $margin={{ bottom: 'none' }}
-        $variation="600"
+      <Box
+        style={{
+          padding: '1.5rem',
+          display: 'flex',
+          alignItems: 'center',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+        }}
       >
-        {t('Documents')}
-      </Text>
-
+        <Text
+          $weight="bold"
+          as="h2"
+          $theme="primary"
+          $margin="none"
+          $variation="600"
+        >
+          {t('Documents')}
+        </Text>
+        <div>{topSlot}</div>
+      </Box>
       {error && <TextErrors causes={error.cause} />}
 
       <DataGrid
         columns={[
+          {
+            headerName: t('Document name'),
+            field: 'title',
+            renderCell: ({ row }) => {
+              return (
+                <StyledLink href={`/docs/${row.id}`}>
+                  <Text $weight="bold" $theme="greyscale" $variation="900">
+                    {row.title}
+                  </Text>
+                </StyledLink>
+              );
+            },
+          },
           {
             headerName: '',
             id: 'visibility',
@@ -125,19 +147,6 @@ export const DocsGrid = () => {
               );
             },
           },
-          {
-            headerName: t('Document name'),
-            field: 'title',
-            renderCell: ({ row }) => {
-              return (
-                <StyledLink href={`/docs/${row.id}`}>
-                  <Text $weight="bold" $theme="greyscale" $variation="900">
-                    {row.title}
-                  </Text>
-                </StyledLink>
-              );
-            },
-          },
           {
             headerName: t('Created at'),
             field: 'created_at',
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridContainer.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridContainer.tsx
index 880f5652..65b98fdb 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridContainer.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridContainer.tsx
@@ -2,7 +2,7 @@ import { Button } from '@openfun/cunningham-react';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Box, Card } from '@/components';
+import { Box } from '@/components';
 import { ModalCreateDoc } from '@/features/docs/doc-management';
 
 import { DocsGrid } from './DocsGrid';
@@ -13,18 +13,19 @@ export const DocsGridContainer = () => {
 
   return (
     <Box $overflow="auto">
-      <Card $margin="big" $padding="tiny">
-        <Box $align="flex-end" $justify="center">
-          <Button
-            onClick={() => {
-              setIsModalCreateOpen(true);
-            }}
-          >
-            {t('Create a new document')}
-          </Button>
-        </Box>
-      </Card>
-      <DocsGrid />
+      <DocsGrid
+        topSlot={
+          <Box $align="flex-end" $justify="center">
+            <Button
+              onClick={() => {
+                setIsModalCreateOpen(true);
+              }}
+            >
+              {t('Create a new document')}
+            </Button>
+          </Box>
+        }
+      />
       {isModalCreateOpen && (
         <ModalCreateDoc onClose={() => setIsModalCreateOpen(false)} />
       )}