✨(frontend) replace grommet Heading

CHANGELOG.md

@@ -8,6 +8,10 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+### Changed
+
+- Replace grommet Heading (#2410)
+
 ## [4.5.0] - 2023-09-15
 
 ### Changed

src/frontend/apps/lti_site/apps/classroom/components/SelectContent/SelectContentResource/index.tsx

@@ -1,5 +1,6 @@
-import { Box, Heading } from 'grommet';
+import { Box } from 'grommet';
 import { useCreateClassroom } from 'lib-classroom';
+import { Heading } from 'lib-components';
 import React from 'react';
 import { useIntl } from 'react-intl';
 

src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardInstructor/index.tsx

@@ -1,7 +1,7 @@
 import { Select } from '@openfun/cunningham-react';
-import { Box, Heading, Pagination, Paragraph, Text } from 'grommet';
+import { Box, Pagination, Paragraph, Text } from 'grommet';
 import { Maybe } from 'lib-common';
-import { FileDepository, Loader } from 'lib-components';
+import { FileDepository, Heading, Loader } from 'lib-components';
 import React, { FocusEvent, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -153,6 +153,7 @@ export const DashboardInstructor = ({
           onBlur={onBlurTitle}
           onFocus={onFocusTitle}
           suppressContentEditableWarning={true}
+          style={{ lineHeight: '50px' }}
         >
           {fileDepository.title || intl.formatMessage(messages.noTitle)}
         </Heading>

src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/index.tsx

@@ -1,5 +1,5 @@
-import { Box, Grid, Heading, Paragraph } from 'grommet';
-import { FileDepository, Loader, useResponsive } from 'lib-components';
+import { Box, Grid, Paragraph } from 'grommet';
+import { FileDepository, Heading, Loader, useResponsive } from 'lib-components';
 import React from 'react';
 import { FormattedMessage, defineMessages } from 'react-intl';
 

src/frontend/apps/lti_site/apps/deposit/components/SelectContent/SelectContentResource/index.tsx

@@ -1,4 +1,5 @@
-import { Box, Heading } from 'grommet';
+import { Box } from 'grommet';
+import { Heading } from 'lib-components';
 import React from 'react';
 import { useIntl } from 'react-intl';
 

src/frontend/apps/lti_site/apps/markdown/components/SelectContent/SelectContentResource/index.tsx

@@ -1,4 +1,5 @@
-import { Box, Heading } from 'grommet';
+import { Box } from 'grommet';
+import { Heading } from 'lib-components';
 import { useCreateMarkdownDocument } from 'lib-markdown';
 import React from 'react';
 import { useIntl } from 'react-intl';

src/frontend/apps/lti_site/components/DashboardDocument/index.tsx

@@ -1,6 +1,7 @@
 import { Box } from 'grommet';
 import {
   Document,
+  Heading,
   ObjectStatusPicker,
   UploadManagerStatus,
   UploadableObjectProgress,
@@ -13,7 +14,6 @@ import React, { useEffect } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { DashboardInternalHeading } from 'components/Dashboard/DashboardInternalHeading';
 import { pollForTrack } from 'data/sideEffects/pollForTrack';
 
 import { DashboardDocumentPaneButtons } from './DashboardDocumentPaneButtons';
@@ -54,10 +54,6 @@ const DashboardDocumentInnerContainer = styled.div`
   padding: 1rem;
 `;
 
-const DashboardDocumentInternalHeading = styled(DashboardInternalHeading)`
-  padding: 0 1rem 0 0;
-`;
-
 const CommonStatusLine = ({
   document,
   documentUploadStatus,
@@ -66,9 +62,13 @@ const CommonStatusLine = ({
   documentUploadStatus?: UploadManagerStatus;
 }) => (
   <Box align="center" direction="row">
-    <DashboardDocumentInternalHeading>
+    <Heading
+      level={5}
+      style={{ margin: 0, paddingRight: '1rem' }}
+      color="var(--c--theme--colors--secondary-text)"
+    >
       <FormattedMessage {...messages.title} />
-    </DashboardDocumentInternalHeading>
+    </Heading>
     <ObjectStatusPicker object={document} uploadStatus={documentUploadStatus} />
   </Box>
 );
@@ -109,9 +109,13 @@ const DashboardDocument = (props: DashboardDocumentProps) => {
             />
             {intl.formatMessage(messages[READY])}
             <Box align="center" direction="row" margin={{ top: 'small' }}>
-              <DashboardDocumentInternalHeading>
+              <Heading
+                level={5}
+                style={{ margin: 0, paddingRight: '1rem' }}
+                color="var(--c--theme--colors--secondary-text)"
+              >
                 {intl.formatMessage(messages.filename)}
-              </DashboardDocumentInternalHeading>
+              </Heading>
               <div>{document.filename}</div>
             </Box>
           </Box>

src/frontend/apps/lti_site/components/PortabilityRequest/index.tsx

@@ -1,6 +1,11 @@
-import { Box, Button, Heading, Paragraph } from 'grommet';
+import { Box, Button, Paragraph } from 'grommet';
 import { Clock } from 'grommet-icons';
-import { DecodedJwtLTI, PortabilityConfig, useJwt } from 'lib-components';
+import {
+  DecodedJwtLTI,
+  Heading,
+  PortabilityConfig,
+  useJwt,
+} from 'lib-components';
 import React from 'react';
 import toast from 'react-hot-toast';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -94,12 +99,12 @@ export const PortabilityRequest = ({
 
   return (
     <Box direction="column" pad="medium" align="center">
-      <Heading level={6} margin={{ bottom: 'small' }}>
+      <Heading level={5}>
         <FormattedMessage {...messages.resourceRequiresPortability} />
       </Heading>
       {portabilityRequested ? (
         <React.Fragment>
-          <Paragraph>
+          <Paragraph margin={{ top: 'small' }}>
             <FormattedMessage
               {...messages.resourcePortabilityAlreadyRequested}
             />
@@ -108,7 +113,7 @@ export const PortabilityRequest = ({
         </React.Fragment>
       ) : (
         <React.Fragment>
-          <Paragraph>
+          <Paragraph margin={{ top: 'small' }}>
             <FormattedMessage {...messages.pleaseMakeRequest} />
           </Paragraph>
           <Button

src/frontend/apps/lti_site/components/SelectContent/SelectContentTargetedResource/index.tsx

@@ -1,6 +1,7 @@
-import { Box, Heading } from 'grommet';
+import { Box } from 'grommet';
 import {
   Document,
+  Heading,
   Live,
   LiveModeType,
   Loader,