feat: update font and card description (#594)

* fix: update the font and collection card description * fix: remove unused code * fix: add a fallback to the font * fix: update graasp-ui version
graasp · Apr 15, 2024 · 5996665 · 5996665
1 parent 8153831
commit 5996665
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 47 deletions.
diff --git a/app/ThemeRegistry.tsx b/app/ThemeRegistry.tsx
@@ -9,13 +9,19 @@ import { ReactNode, useState } from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import { ThemeProvider } from '@mui/material/styles';
 
-import { theme } from '@graasp/ui';
+import { createGraaspTheme } from '@graasp/ui';
+
+import { nunito } from './fonts';
 
 type Props = {
   options: any;
   children: ReactNode;
 };
 
+const theme = createGraaspTheme({
+  fontFamily: `${nunito.style.fontFamily}, sans-serif`,
+});
+
 // This implementation is from emotion-js
 // https://github.com/emotion-js/emotion/issues/2928#issuecomment-1319747902
 // eslint-disable-next-line react/function-component-definition
@@ -72,7 +78,6 @@ export default function ThemeRegistry(props: Props) {
       />
     );
   });
-
   return (
     <CacheProvider value={cache}>
       <ThemeProvider theme={theme}>

diff --git a/app/fonts.ts b/app/fonts.ts
@@ -0,0 +1,8 @@
+import { Nunito } from 'next/font/google';
+
+// If loading a variable font, you don't need to specify the font weight
+// eslint-disable-next-line import/prefer-default-export
+export const nunito = Nunito({
+  subsets: ['latin'],
+  display: 'swap',
+});
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,12 +2,13 @@ import { Suspense } from 'react';
 import 'react-toastify/dist/ReactToastify.css';
 
 import ThemeRegistry from './ThemeRegistry';
+import { nunito } from './fonts';
 import Providers from './providers';
 
 const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     // TODO: change lang
-    <html lang="en">
+    <html lang="en" className={nunito.className}>
       <body>
         <Suspense>
           <Providers>

diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "@graasp/query-client": "3.0.1",
     "@graasp/sdk": "4.4.0",
     "@graasp/translations": "1.25.3",
-    "@graasp/ui": "4.13.0",
+    "@graasp/ui": "4.15.0",
     "@mui/icons-material": "5.15.14",
     "@mui/lab": "5.0.0-alpha.169",
     "@mui/material": "5.15.14",

diff --git a/src/components/collection/CollectionCard.tsx b/src/components/collection/CollectionCard.tsx
@@ -8,6 +8,7 @@ import {
   CardActions,
   CardContent,
   CardHeader,
+  Stack,
   Typography,
   styled,
   useTheme,
@@ -165,10 +166,7 @@ export const CollectionCard = ({ collection, showIsContentTag }: Props) => {
           }}
         />
         <CardContent sx={{ pt: 0 }}>
-          <Typography
-            variant="caption"
-            fontStyle={description ? 'inherit' : 'italic'}
-          >
+          <Typography fontStyle={description ? 'inherit' : 'italic'}>
             {description ? (
               <ContentDescription content={description} />
             ) : (
@@ -177,32 +175,39 @@ export const CollectionCard = ({ collection, showIsContentTag }: Props) => {
           </Typography>
         </CardContent>
       </CardActionArea>
-      <CardActions disableSpacing sx={{ pt: 0, paddingX: 2 }}>
-        <Avatar
-          url={authorAvatarUrl}
-          alt={t(LIBRARY.AVATAR_ALT, { name: creator?.name })}
-          component="avatar"
-          id={creator?.id}
-          maxWidth={30}
-          maxHeight={30}
-          variant="circular"
-          isLoading={isLoadingAvatar}
-          sx={{
-            maxWidth: 30,
-            maxHeight: 30,
-          }}
-        />
-        <Typography
-          variant="body2"
-          color="GrayText"
-          marginLeft={1}
-          fontSize={12}
-        >
-          {creator?.name}
-        </Typography>
-        <DownloadButton id={id} />
-        {member?.id && <CopyButton id={id} />}
-        <CopyLinkButton itemId={collection.id} />
+      <CardActions
+        disableSpacing
+        sx={{ pt: 0, paddingX: 2, justifyContent: 'space-between' }}
+      >
+        <Stack direction="row" spacing={1} alignItems="center">
+          <Avatar
+            url={authorAvatarUrl}
+            alt={t(LIBRARY.AVATAR_ALT, { name: creator?.name })}
+            component="avatar"
+            id={creator?.id}
+            maxWidth={30}
+            maxHeight={30}
+            variant="circular"
+            isLoading={isLoadingAvatar}
+            sx={{
+              maxWidth: 30,
+              maxHeight: 30,
+            }}
+          />
+          <Typography
+            variant="body2"
+            color="GrayText"
+            marginLeft={1}
+            fontSize={12}
+          >
+            {creator?.name}
+          </Typography>
+        </Stack>
+        <Box>
+          <DownloadButton id={id} />
+          {member?.id && <CopyButton id={id} />}
+          <CopyLinkButton itemId={collection.id} />
+        </Box>
       </CardActions>
     </StyledCard>
   );

diff --git a/src/components/collection/ContentDescription.tsx b/src/components/collection/ContentDescription.tsx
@@ -55,7 +55,7 @@ const ContentDescription = ({
 }: Props): JSX.Element => (
   <StyledDiv className="quill">
     <div className="ql-snow ql-disabled">
-      <div className="ql-editor">
+      <div className="ql-editor" style={{ padding: '0px' }}>
         <CollapsibleDescription
           collapsed={collapsed}
           numberOfLinesToShow={numberOfLinesToShow}

diff --git a/src/components/layout/HomeHeader.tsx b/src/components/layout/HomeHeader.tsx
@@ -71,19 +71,19 @@ const HomeHeader = () => {
           <Typography
             id={HOME_PAGE_TITLE_TEXT_ID}
             color="white"
-            variant="h1"
+            variant="display"
             marginLeft={2}
-            fontSize={{
-              xs: '2.5rem',
-              sm: '4rem',
-              md: '4.5rem',
-            }}
           >
             {t(LIBRARY.HOME_TITLE)}
           </Typography>
         </Box>
         <Box>
-          <Typography color="white" variant="h5" textAlign="center">
+          <Typography
+            color="white"
+            variant="h2"
+            fontWeight={300}
+            textAlign="center"
+          >
             {t(LIBRARY.HOME_SUBTITLE)}
           </Typography>
         </Box>

diff --git a/yarn.lock b/yarn.lock
@@ -1431,9 +1431,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@npm:4.13.0":
-  version: 4.13.0
-  resolution: "@graasp/ui@npm:4.13.0"
+"@graasp/ui@npm:4.15.0":
+  version: 4.15.0
+  resolution: "@graasp/ui@npm:4.15.0"
   dependencies:
     "@ag-grid-community/client-side-row-model": "npm:31.1.1"
     "@ag-grid-community/react": "npm:^31.1.1"
@@ -1465,7 +1465,7 @@ __metadata:
     react-router-dom: ^6.11.0
     stylis: ^4.1.3
     stylis-plugin-rtl: ^2.1.1
-  checksum: 10/2edb4c73072d313dd3b6d59252c28c2a5d653bae599cddb1591a83040d0f8c0de6486f95f62bb451d374c506d07d62f77f1c2771c47617a05b70c8d032d661b4
+  checksum: 10/990fb627fc03d4e831a55589f53c7e78380bd771ea34bbc5cf111e1849c18616fea440ff03a5b8a5e3379cb5fcda0a72759a90b846b70b430e37eb6d21f6f08e
   languageName: node
   linkType: hard
 
@@ -7768,7 +7768,7 @@ __metadata:
     "@graasp/query-client": "npm:3.0.1"
     "@graasp/sdk": "npm:4.4.0"
     "@graasp/translations": "npm:1.25.3"
-    "@graasp/ui": "npm:4.13.0"
+    "@graasp/ui": "npm:4.15.0"
     "@mui/icons-material": "npm:5.15.14"
     "@mui/lab": "npm:5.0.0-alpha.169"
     "@mui/material": "npm:5.15.14"