fix: visual improvements for the new background (#821)

* fix: make small adjustments to the new background

* fix: avatar

* fix: breadcrumbs alignment

* fix: card fixes

* fix: decrease rounded corners of card to match collapse style

* fix: update bookmark icon colo

* fix: invert margins on cc license

* fix: make table transparent

* fix: apply tab capitalization

package.json

@@ -111,7 +111,7 @@
     "@emotion/cache": "~11.11.0",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
-    "@graasp/sdk": "4.7.5",
+    "@graasp/sdk": "4.7.6",
     "@mui/icons-material": "5.15.15",
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "5.15.15",

src/Avatar/Avatar.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { TABLE_CATEGORIES } from '../utils/storybook';
 import Avatar from './Avatar';
 
-const meta: Meta<typeof Avatar> = {
+const meta = {
   title: 'Images/Avatar',
   component: Avatar,
 
@@ -19,40 +19,44 @@ const meta: Meta<typeof Avatar> = {
       },
     },
   },
-};
+} satisfies Meta<typeof Avatar>;
 
 export default meta;
 
-type Story = StoryObj<typeof Avatar>;
+type Story = StoryObj<typeof meta>;
 
-export const DefaultAvatar: Story = {
+export const DefaultAvatar = {
   args: {
     alt: 'myname',
     component: 'avatar',
   },
-};
+} satisfies Story;
 
-export const Loading: Story = {
+export const AvatarImage = {
   args: {
-    isLoading: true,
+    alt: 'Avatar',
     maxHeight: 100,
     maxWidth: 100,
+    component: 'avatar',
+    url: 'https://picsum.photos/100',
   },
-};
+} satisfies Story;
 
-export const ItemThumbnail: Story = {
+export const Loading = {
   args: {
+    alt: 'Loading Avatar',
+    isLoading: true,
     maxHeight: 100,
     maxWidth: 100,
-    url: 'https://picsum.photos/100',
   },
-};
+} satisfies Story;
 
-export const ItemThumbnailAvatar: Story = {
+export const ItemThumbnail = {
   args: {
+    alt: 'Item thumbnail',
+    component: 'img',
     maxHeight: 100,
     maxWidth: 100,
-    component: 'avatar',
     url: 'https://picsum.photos/100',
   },
-};
+} satisfies Story;

src/Avatar/Avatar.tsx

@@ -1,5 +1,6 @@
 import {
   Avatar as AvatarComponent,
+  Skeleton,
   SkeletonProps,
   SxProps,
 } from '@mui/material';
@@ -8,15 +9,10 @@ import Thumbnail from '../Thumbnail';
 
 type AvatarProps = {
   alt: string;
-  /**
-   * classname selector
-   * use maxWidth and maxHeight or sx
-   */
-  className?: string;
   /**
    * component used to display the avatar (img or avatar)
    */
-  component?: string;
+  component?: 'img' | 'avatar';
   id?: string;
   isLoading?: boolean;
   maxHeight?: string | number;
@@ -40,27 +36,26 @@ const Avatar = ({
   maxWidth = '100%',
   maxHeight = '100%',
   variant = 'circular',
-  component = 'img',
+  component = 'avatar',
   isLoading,
-  className,
-  // use a random string to trigger default avatar
-  url = 'broken-image',
+  url,
 }: AvatarProps): JSX.Element | null => {
-  // no default value wanted and no url and is not loading
-  if (!url && component !== 'avatar' && !isLoading) {
-    return null;
-  }
-
   if (component === 'avatar') {
-    return (
-      <AvatarComponent
-        id={id}
-        className={className}
-        alt={alt}
-        src={url}
-        sx={sx}
-      />
-    );
+    if (url) {
+      return <AvatarComponent id={id} alt={alt} src={url} />;
+    } else {
+      if (isLoading) {
+        return (
+          <Skeleton
+            variant={variant}
+            sx={sx}
+            width={maxWidth}
+            height={maxHeight}
+          />
+        );
+      }
+      return <AvatarComponent />;
+    }
   }
 
   return (

src/Card/Card.stories.tsx

@@ -8,7 +8,7 @@ import ItemBadges from '../ItemBadges/ItemBadges';
 import { TABLE_CATEGORIES } from '../utils/storybook';
 import Card from './Card';
 
-const meta: Meta<typeof Card> = {
+const meta = {
   title: 'Common/Card',
   component: Card,
 
@@ -19,10 +19,10 @@ const meta: Meta<typeof Card> = {
       },
     },
   },
-};
+} satisfies Meta<typeof Card>;
 
 export default meta;
-type Story = StoryObj<typeof Card>;
+type Story = StoryObj<typeof meta>;
 
 export const Example: Story = {
   args: {
@@ -50,7 +50,36 @@ export const Example: Story = {
       </IconButton>
     ),
   },
-};
+} satisfies Story;
+
+export const FullWidth = {
+  args: {
+    fullWidth: true,
+    name: 'my card title',
+    description:
+      'my card description might be really long that is why we cut it after some lines of text to allow some space for more data',
+    image: 'https://picsum.photos/200/100',
+    creator: 'graasp',
+    Actions: (
+      <>
+        <IconButton>
+          <AcUnitIcon />
+        </IconButton>
+        <IconButton>
+          <AcUnitIcon />
+        </IconButton>
+        <IconButton>
+          <AcUnitIcon />
+        </IconButton>
+      </>
+    ),
+    ItemMenu: (
+      <IconButton>
+        <MoreVertIcon />
+      </IconButton>
+    ),
+  },
+} satisfies Story;
 
 export const Badges: Story = {
   args: {

src/Card/Card.tsx

@@ -15,6 +15,14 @@ const StyledImage = styled('img')({
   objectFit: 'cover',
 });
 
+const StyledCard = styled(Card, {
+  shouldForwardProp: (prop) => prop !== 'fullWidth',
+})<{ fullWidth: boolean }>(({ theme, fullWidth }) => ({
+  borderRadius: theme.spacing(1),
+  boxShadow: theme.shadows[2],
+  width: fullWidth ? '100%' : 'max-content',
+}));
+
 type CardProps = {
   name: string;
   /**
@@ -36,6 +44,10 @@ type CardProps = {
   ItemMenu?: ReactElement;
   NameWrapper?: ({ children }: { children: JSX.Element }) => JSX.Element;
   sx?: SxProps;
+  /**
+   * Whether the card should expand to take all available space
+   */
+  fullWidth?: boolean;
   /**
    * thumbnail component, override image
    */
@@ -55,6 +67,7 @@ const Item: FC<CardProps> = ({
   NameWrapper,
   sx,
   Thumbnail,
+  fullWidth = false,
 }) => {
   const ThumbnailWrapper = styled(Box)({
     // use a square box to display the image
@@ -70,12 +83,8 @@ const Item: FC<CardProps> = ({
   };
 
   return (
-    <Card id={cardId} sx={sx}>
-      <Stack
-        sx={{ height, boxSizing: 'border-box' }}
-        direction='row'
-        spacing={1}
-      >
+    <StyledCard id={cardId} sx={sx} fullWidth={fullWidth}>
+      <Stack sx={{ height, boxSizing: 'border-box' }} direction='row' gap={2}>
         <ThumbnailWrapper>{renderImage()}</ThumbnailWrapper>
 
         <Stack
@@ -85,6 +94,7 @@ const Item: FC<CardProps> = ({
           // ensure that if there is no description the element still goes edge to edge
           width='100%'
           boxSizing='border-box'
+          marginTop={1}
         >
           <CardHeader
             name={name}
@@ -140,7 +150,7 @@ const Item: FC<CardProps> = ({
           )}
         </Stack>
       </Stack>
-    </Card>
+    </StyledCard>
   );
 };
 

src/Card/CardHeader.tsx

@@ -26,12 +26,12 @@ const CustomCardHeader: FC<CardHeaderProps> = ({
     >
       <Stack minWidth={0} direction='column'>
         <NameWrapper>
-          <Typography noWrap variant='subtitle1' sx={{ fontWeight: 'bold' }}>
+          <Typography noWrap variant='h3'>
             {name}
           </Typography>
         </NameWrapper>
         {creator && (
-          <Typography noWrap variant='caption'>
+          <Typography noWrap variant='body1' color='text.secondary'>
             {creator}
           </Typography>
         )}

src/Card/Cards.stories.tsx

@@ -0,0 +1,38 @@
+import { Meta, StoryObj, composeStories } from '@storybook/react';
+
+import Grid2 from '@mui/material/Unstable_Grid2';
+
+import * as CardStories from './Card.stories';
+
+const { FullWidth } = composeStories(CardStories);
+
+const meta = {
+  title: 'Common/Cards',
+  component: Grid2,
+  argTypes: {
+    xs: {
+      options: [3, 6, 12],
+      control: { type: 'radio' },
+    },
+  },
+} satisfies Meta<typeof Grid2>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const GridOfCards = {
+  args: {
+    xs: 6,
+  },
+  render: ({ xs }) => {
+    return (
+      <Grid2 container spacing={2}>
+        {Array.from(Array(12)).map((_, i) => (
+          <Grid2 key={`cardno${i}`} xs={xs}>
+            <FullWidth />
+          </Grid2>
+        ))}
+      </Grid2>
+    );
+  },
+} satisfies Story;

src/Collapse/Collapse.tsx

@@ -6,7 +6,7 @@ import AccordionSummary from '@mui/material/AccordionSummary';
 
 import { FC, ReactElement, useState } from 'react';
 
-import { COLLAPSE_MIN_HEIGHT } from '../constants';
+const COLLAPSE_MIN_HEIGHT = 56;
 
 export type CollapseProps = {
   children?: ReactElement;
@@ -49,6 +49,7 @@ const Collapse: FC<CollapseProps> = ({ title, content, sx, children }) => {
         {
           border: '1px solid rgba(0, 0, 0, .125)',
           boxShadow: 'none',
+          borderRadius: 2,
         },
         {
           '&:not(:last-child)': {

src/CreativeCommons/CreativeCommons.tsx

@@ -146,7 +146,7 @@ const CreativeCommons: FC<CreativeCommonsProps> = (props) => {
   );
 
   return (
-    <Stack paddingX={2} paddingY={3} sx={sx} width='min-content' spacing={2}>
+    <Stack paddingX={3} paddingY={2} sx={sx} width='min-content' spacing={2}>
       <Stack direction='row' spacing={2}>
         <CCIcon {...iconData.cc} />
         {additionalIcons}

src/Navigation/ExtraItemsNavigation.tsx

@@ -22,9 +22,7 @@ const ExtraItemsNavigation = ({
 }): JSX.Element[] | null => {
   return extraItems.map(({ icon, name, path, menuItems }) => (
     <CenterAlignWrapper>
-      {/* margin set to -2 as menu list has a default style for text indent
-        with the same value, So to align menu items with this box menu item */}
-      <Box display='flex' gap={2} ml={-2}>
+      <Box display='flex' gap={1}>
         {icon}
         <NavigationLink to={path}>
           <Typography>