Updated report header.

src/app/(main)/reports/[id]/Report.js

@@ -8,6 +8,10 @@ export const ReportContext = createContext(null);
 export function Report({ reportId, defaultParameters, children, ...props }) {
   const report = useReport(reportId, defaultParameters);
 
+  if (!report) {
+    return null;
+  }
+
   return (
     <ReportContext.Provider value={{ ...report }}>
       <div {...props} className={styles.container}>

src/app/(main)/reports/[id]/Report.module.css

@@ -3,23 +3,3 @@
   grid-template-rows: max-content 1fr;
   grid-template-columns: max-content 1fr;
 }
-
-.header {
-  grid-row: 1 / 2;
-  grid-column: 1 / 3;
-  margin-bottom: 40px;
-}
-
-.menu {
-  width: 300px;
-  padding-right: 20px;
-  border-right: 1px solid var(--base300);
-  grid-row: 2/3;
-  grid-column: 1 / 2;
-}
-
-.body {
-  padding-left: 20px;
-  grid-row: 2/3;
-  grid-column: 2 / 3;
-}

src/app/(main)/reports/[id]/ReportBody.js

@@ -1,4 +1,4 @@
-import styles from './Report.module.css';
+import styles from './ReportBody.module.css';
 
 export function ReportBody({ children }) {
   return <div className={styles.body}>{children}</div>;

src/app/(main)/reports/[id]/ReportBody.module.css

@@ -0,0 +1,5 @@
+.body {
+  padding-left: 20px;
+  grid-row: 2/3;
+  grid-column: 2 / 3;
+}

src/app/(main)/reports/[id]/ReportHeader.js

@@ -1,11 +1,9 @@
 import { useContext } from 'react';
 import { useRouter } from 'next/navigation';
-import { Icon, LoadingButton, InlineEditField, useToasts, Loading } from 'react-basics';
-import PageHeader from 'components/layout/PageHeader';
+import { Icon, LoadingButton, InlineEditField, useToasts } from 'react-basics';
 import { useMessages, useApi } from 'components/hooks';
 import { ReportContext } from './Report';
 import styles from './ReportHeader.module.css';
-import reportStyles from './Report.module.css';
 import { REPORT_TYPES } from 'lib/constants';
 
 export function ReportHeader({ icon }) {
@@ -48,9 +46,13 @@ export function ReportHeader({ icon }) {
     updateReport({ description });
   };
 
-  const Title = () => {
-    return (
-      <div className={styles.header}>
+  if (!report) {
+    return null;
+  }
+
+  return (
+    <div className={styles.header}>
+      <div>
         <div className={styles.type}>
           {formatMessage(
             labels[Object.keys(REPORT_TYPES).find(key => REPORT_TYPES[key] === report?.type)],
@@ -66,17 +68,17 @@ export function ReportHeader({ icon }) {
             onCommit={handleNameChange}
           />
         </div>
+        <div className={styles.description}>
+          <InlineEditField
+            key={description}
+            name="description"
+            value={description}
+            placeholder={`+ ${formatMessage(labels.addDescription)}`}
+            onCommit={handleDescriptionChange}
+          />
+        </div>
       </div>
-    );
-  };
-
-  if (!report) {
-    return <Loading />;
-  }
-
-  return (
-    <div className={reportStyles.header}>
-      <PageHeader title={<Title />}>
+      <div className={styles.actions}>
         <LoadingButton
           variant="primary"
           isLoading={isCreating || isUpdating}
@@ -85,15 +87,6 @@ export function ReportHeader({ icon }) {
         >
           {formatMessage(labels.save)}
         </LoadingButton>
-      </PageHeader>
-      <div className={styles.description}>
-        <InlineEditField
-          key={description}
-          name="description"
-          value={description}
-          placeholder={`+ ${formatMessage(labels.addDescription)}`}
-          onCommit={handleDescriptionChange}
-        />
       </div>
     </div>
   );

src/app/(main)/reports/[id]/ReportHeader.module.css

@@ -1,20 +1,36 @@
-.description {
-  color: var(--font-color300);
-}
-
 .header {
   display: grid;
+  grid-template-columns: 1fr min-content;
+  align-items: center;
+  grid-row: 1 / 2;
+  grid-column: 1 / 3;
+  margin: 20px 0 40px 0;
 }
 
 .title {
   display: flex;
   flex-direction: row;
-  gap: 10px;
+  align-items: center;
+  font-size: 24px;
+  font-weight: 700;
+  gap: 20px;
+  height: 60px;
 }
 
 .type {
   font-size: 11px;
+  font-weight: 700;
   text-transform: uppercase;
   color: var(--base600);
-  line-height: 30px;
+}
+
+.description {
+  color: var(--font-color300);
+  max-width: 500px;
+  height: 30px;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
 }

src/app/(main)/reports/[id]/ReportMenu.js

@@ -1,4 +1,4 @@
-import styles from './Report.module.css';
+import styles from './ReportMenu.module.css';
 
 export function ReportMenu({ children }) {
   return <div className={styles.menu}>{children}</div>;

src/app/(main)/reports/[id]/ReportMenu.module.css

@@ -0,0 +1,7 @@
+.menu {
+  width: 300px;
+  padding-right: 20px;
+  border-right: 1px solid var(--base300);
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+}