From 25f0914a8b3a171a7d7300c2833bf8674b0a18e1 Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Thu, 14 Nov 2024 17:09:35 +0100
Subject: [PATCH] wip

---
 src/frontend/apps/impress/cunningham.ts                  | 5 +++++
 src/frontend/apps/impress/src/components/Box.tsx         | 7 +++----
 .../doc-management/components/items/SimpleDocItem.tsx    | 9 ++-------
 .../features/docs/docs-grid/components/DocsGridList.tsx  | 5 +++--
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts
index ef7560ca4..80537bc40 100644
--- a/src/frontend/apps/impress/cunningham.ts
+++ b/src/frontend/apps/impress/cunningham.ts
@@ -67,6 +67,11 @@ const config = {
           alt: '',
         },
       },
+      global: {
+        hover: {
+          'greyscale-100': '#055fd214',
+        },
+      },
       components: {
         datagrid: {
           header: {
diff --git a/src/frontend/apps/impress/src/components/Box.tsx b/src/frontend/apps/impress/src/components/Box.tsx
index d3593a663..83514bef6 100644
--- a/src/frontend/apps/impress/src/components/Box.tsx
+++ b/src/frontend/apps/impress/src/components/Box.tsx
@@ -15,7 +15,7 @@ export interface BoxProps {
   $align?: CSSProperties['alignItems'];
   $background?: CSSProperties['background'];
   $color?: CSSProperties['color'];
-  $css?: string;
+  $css?: string | RuleSet<object>;
   $direction?: CSSProperties['flexDirection'];
   $display?: CSSProperties['display'];
   $effect?: 'show' | 'hide';
@@ -38,7 +38,6 @@ export interface BoxProps {
   $width?: CSSProperties['width'];
   $wrap?: CSSProperties['flexWrap'];
   $zIndex?: CSSProperties['zIndex'];
-  $styledCss?: RuleSet<object>;
 }
 
 export type BoxType = ComponentPropsWithRef<typeof Box>;
@@ -46,7 +45,7 @@ export type BoxType = ComponentPropsWithRef<typeof Box>;
 export const Box = styled('div')<BoxProps>`
   display: flex;
   flex-direction: column;
-  ${({ $styledCss }) => $styledCss && $styledCss}
+
   ${({ $align }) => $align && `align-items: ${$align};`}
   ${({ $background }) => $background && `background: ${$background};`}
   ${({ $color }) => $color && `color: ${$color};`}
@@ -75,7 +74,7 @@ export const Box = styled('div')<BoxProps>`
   ${({ $transition }) => $transition && `transition: ${$transition};`}
   ${({ $width }) => $width && `width: ${$width};`}
   ${({ $wrap }) => $wrap && `flex-wrap: ${$wrap};`}
-  ${({ $css }) => $css && `${$css};`}
+  ${({ $css }) => $css && (typeof $css === 'string' ? `${$css};` : $css)}
   ${({ $zIndex }) => $zIndex && `z-index: ${$zIndex};`}
   ${({ $effect }) => {
     let effect;
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/items/SimpleDocItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/items/SimpleDocItem.tsx
index e295c72d1..409206fd7 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/items/SimpleDocItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/items/SimpleDocItem.tsx
@@ -46,16 +46,11 @@ export const SimpleDocItem = ({ doc, isPinned = false, subText }: Props) => {
         {isPinned ? <PinnedDocumentIcon /> : <SimpleFileIcon />}
       </Box>
       <div>
-        <Text
-          $weight={500}
-          $variation="1000"
-          $size="sm"
-          $styledCss={ItemTextCss}
-        >
+        <Text $weight={500} $variation="1000" $size="sm" $css={ItemTextCss}>
           {doc.title}
         </Text>
 
-        <Text $variation="500" $size="xs" $styledCss={ItemTextCss}>
+        <Text $variation="500" $size="xs" $css={ItemTextCss}>
           {subText ??
             'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ante libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed imperdiet neque quam, sed euismod metus mollis ut. '}
         </Text>
diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridList.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridList.tsx
index b7db04aca..a501a4da0 100644
--- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridList.tsx
+++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridList.tsx
@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
 
 import { Box, Card, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
@@ -47,14 +48,14 @@ export const DocsGridList = () => {
       <section>
         <Box
           as="header"
-          $css={`
+          $css={css`
             display: flex;
             flex-direction: row;
             margin-bottom: ${spacings['100W']};
             font-size: ${themeTokens().font?.sizes.xs};
             color: ${colors['greyscale-500']};
             padding-bottom: ${spacings['150V']} ${spacings['100W']};
-        `}
+          `}
         >
           <Box $flex={7}>{t('Name')}</Box>