Modify published general notification semantics

Author: mmoila

client/src/components/SurveyLandingPage.tsx

@@ -135,60 +135,62 @@ export default function SurveyLandingPage({
           alt={tr.IconAltTexts.logoAltText}
         />
       </Box>
-      <PublishedGeneralNotification
-        isMobile={mediumWidth}
-        defaultOpen
-        variant={'external'}
-        sx={{
-          minWidth: mediumWidth ? 'auto' : '500px',
-          maxWidth: '800px',
-          alignSelf: 'center',
-          ...(notificationWidth && {
-            borderRadius: 0,
-            borderRight: 0,
-            borderLeft: 0,
-          }),
-        }}
-      />
-      <Box
-        className="middle-content"
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <div>
-          <Box
-            component="h1"
-            sx={(theme) => ({
-              ...styles(theme).heading,
-              ...styles(theme).title,
-            })}
-          >
-            <span>{survey.title?.[surveyLanguage]}</span>
-          </Box>
-          {survey.subtitle?.[surveyLanguage] && (
+      <Stack gap={0} flexDirection={'column-reverse'}>
+        <Box
+          className="middle-content"
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <div>
             <Box
-              component="h2"
+              component="h1"
               sx={(theme) => ({
                 ...styles(theme).heading,
-                ...styles(theme).subtitle,
+                ...styles(theme).title,
               })}
             >
-              <span>{survey.subtitle?.[surveyLanguage]}</span>
+              <span>{survey.title?.[surveyLanguage]}</span>
             </Box>
-          )}
-        </div>
-        <Button onClick={onStart}>
-          <Typography variant="body1" sx={(theme) => styles(theme).start}>
-            {continueUnfinished
-              ? tr.SurveyPage.continueSurveyLink
-              : tr.SurveyPage.startSurveyLink}
-          </Typography>
-        </Button>
-      </Box>
+            {survey.subtitle?.[surveyLanguage] && (
+              <Box
+                component="h2"
+                sx={(theme) => ({
+                  ...styles(theme).heading,
+                  ...styles(theme).subtitle,
+                })}
+              >
+                <span>{survey.subtitle?.[surveyLanguage]}</span>
+              </Box>
+            )}
+          </div>
+          <Button onClick={onStart}>
+            <Typography variant="body1" sx={(theme) => styles(theme).start}>
+              {continueUnfinished
+                ? tr.SurveyPage.continueSurveyLink
+                : tr.SurveyPage.startSurveyLink}
+            </Typography>
+          </Button>
+        </Box>
+        <PublishedGeneralNotification
+          isMobile={mediumWidth}
+          defaultOpen
+          variant={'external'}
+          sx={{
+            minWidth: mediumWidth ? 'auto' : '500px',
+            maxWidth: '800px',
+            alignSelf: 'center',
+            ...(notificationWidth && {
+              borderRadius: 0,
+              borderRight: 0,
+              borderLeft: 0,
+            }),
+          }}
+        />
+      </Stack>
       <Box
         className="footer-content"
         sx={{

client/src/components/admin/GeneralNotification/GeneralNotificationCard.tsx

@@ -1,8 +1,10 @@
+import { CssBaseline } from '@mui/material';
 import Image from '@tiptap/extension-image';
 import { Markdown } from '@tiptap/markdown';
 import { EditorContent, useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import React, { useEffect } from 'react';
+import '../TextEditor/styles.css';
 
 interface Props {
   content: string;
@@ -33,5 +35,9 @@ export function GeneralNotificationCard({ content }: Props) {
   if (!editor) {
     return null;
   }
-  return <EditorContent editor={editor} />;
+  return (
+    <CssBaseline>
+      <EditorContent editor={editor} />
+    </CssBaseline>
+  );
 }

client/src/components/admin/GeneralNotification/PublishedGeneralNotification.tsx

@@ -1,17 +1,18 @@
-import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { GeneralNotification } from '@interfaces/generalNotification';
-import { request } from '@src/utils/request';
-import { GeneralNotificationCard } from './GeneralNotificationCard';
-import { useToasts } from '@src/stores/ToastContext';
-import { useTranslations } from '@src/stores/TranslationContext';
+import { Campaign, ExpandLess, ExpandMore } from '@mui/icons-material';
 import {
   CardActionArea,
   Stack,
   SxProps,
   Typography,
   useTheme,
 } from '@mui/material';
-import { Campaign, ExpandLess, ExpandMore } from '@mui/icons-material';
+import { useToasts } from '@src/stores/ToastContext';
+import { useTranslations } from '@src/stores/TranslationContext';
+import { request } from '@src/utils/request';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
+
+import { GeneralNotificationCard } from './GeneralNotificationCard';
 
 interface Props {
   variant: 'internal' | 'external';
@@ -147,7 +148,11 @@ export function PublishedGeneralNotification({
       >
         {notifications.map((notification) => (
           <Fragment key={notification.id}>
-            <Typography variant="h6" sx={{ marginTop: '1rem' }}>
+            <Typography
+              variant="h6"
+              component={'h2'}
+              sx={{ marginTop: '1rem' }}
+            >
               {
                 notification.title[
                   variant === 'internal' ? language : surveyLanguage

client/src/components/admin/TextEditor/MenuBar.tsx

@@ -185,8 +185,8 @@ export function MenuBar({
           borderTopLeftRadius: '4px',
         }}
         disableTouchRipple
-        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-        className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
+        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+        className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
       >
         {tr.TextEditor.headerTitle}
       </Button>

client/src/components/admin/TextEditor/styles.css

@@ -13,7 +13,7 @@
     font-weight: 400;
     line-height: 1.18;
   }
-  h2 {
+  h3 {
     color: var(--primary-main);
     font-size: 1.125rem;
     font-weight: 700;