fix(Note): convert Note component to tsx and standardize padding

adi-herwana-nus · cysjonathan · commit 381498305334 · 2025-10-13T21:59:51.000+08:00
- collapse ErrorCard into Note component
diff --git a/client/app/bundles/course/assessment/pages/AssessmentMonitoring/PulseGrid.tsx b/client/app/bundles/course/assessment/pages/AssessmentMonitoring/PulseGrid.tsx
@@ -4,8 +4,8 @@ import { WatchGroup } from 'types/channels/liveMonitoring';
 import { MonitoringRequestData } from 'types/course/assessment/monitoring';
 
 import BetaChip from 'lib/components/core/BetaChip';
-import ErrorCard from 'lib/components/core/ErrorCard';
 import Page from 'lib/components/core/layouts/Page';
+import Note from 'lib/components/core/Note';
 import useTranslation from 'lib/hooks/useTranslation';
 
 import translations from '../../translations';
@@ -54,8 +54,9 @@ const PulseGrid = (props: PulseGridProps): JSX.Element => {
 
   if (rejected)
     return (
-      <ErrorCard
+      <Note
         message={t(translations.cannotConnectToLiveMonitoringChannel)}
+        severity="error"
       />
     );
 
diff --git a/client/app/bundles/course/assessment/submission/components/answers/ForumPostResponse/index.jsx b/client/app/bundles/course/assessment/submission/components/answers/ForumPostResponse/index.jsx
@@ -4,7 +4,7 @@ import { Typography } from '@mui/material';
 import PropTypes from 'prop-types';
 
 import { questionShape } from 'course/assessment/submission/propTypes';
-import Error from 'lib/components/core/ErrorCard';
+import Error from 'lib/components/core/Note';
 import FormRichTextField from 'lib/components/form/fields/RichTextField';
 import toast from 'lib/hooks/toast';
 
diff --git a/client/app/bundles/course/assessment/submissions/components/tables/SubmissionsTable.tsx b/client/app/bundles/course/assessment/submissions/components/tables/SubmissionsTable.tsx
@@ -117,9 +117,7 @@ const SubmissionsTable: FC<Props> = (props) => {
 
   if (submissions.length === 0)
     return (
-      <Page.PaddedSection>
-        <Note message={intl.formatMessage(translations.noSubmissionsMessage)} />
-      </Page.PaddedSection>
+      <Note message={intl.formatMessage(translations.noSubmissionsMessage)} />
     );
 
   return (
diff --git a/client/app/bundles/course/discussion/topics/components/lists/TopicList.tsx b/client/app/bundles/course/discussion/topics/components/lists/TopicList.tsx
@@ -45,11 +45,7 @@ const TopicList: FC<TopicListProps> = (props) => {
   }
 
   if (topicList.length === 0) {
-    return (
-      <Grid item style={{ position: 'relative', width: '100%' }} xs>
-        <Note message={t(translations.noTopic)} />
-      </Grid>
-    );
+    return <Note message={t(translations.noTopic)} />;
   }
 
   return (
diff --git a/client/app/bundles/course/enrol-requests/pages/UserRequests/index.tsx b/client/app/bundles/course/enrol-requests/pages/UserRequests/index.tsx
@@ -82,9 +82,7 @@ const UserRequests: FC<Props> = (props) => {
       rejectedEnrolRequests.length === 0
     ) {
       return (
-        <Page.PaddedSection>
-          <Note message={intl.formatMessage(translations.noEnrolRequests)} />
-        </Page.PaddedSection>
+        <Note message={intl.formatMessage(translations.noEnrolRequests)} />
       );
     }
     return undefined;
diff --git a/client/app/bundles/course/forum/pages/ForumTopicShow/index.tsx b/client/app/bundles/course/forum/pages/ForumTopicShow/index.tsx
@@ -126,8 +126,8 @@ const ForumTopicShow: FC = () => {
       <Box className="my-3 space-y-6">
         {topicNote && (
           <Note
-            color={forumTopic.isResolved ? 'success' : undefined}
             message={topicNote}
+            severity={forumTopic.isResolved ? 'success' : 'warning'}
           />
         )}
         <TopicPostTrees level={0} postIdsArray={forumTopic.postTreeIds} />
diff --git a/client/app/bundles/course/group/pages/GroupShow/index.jsx b/client/app/bundles/course/group/pages/GroupShow/index.jsx
@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
-import ErrorCard from 'lib/components/core/ErrorCard';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
 import Note from 'lib/components/core/Note';
 
@@ -72,8 +71,9 @@ const Category = ({
   }
   if (hasFetchError) {
     return (
-      <ErrorCard
+      <Note
         message={<FormattedMessage {...translations.fetchFailure} />}
+        severity="error"
       />
     );
   }
diff --git a/client/app/bundles/course/user-email-subscriptions/UserEmailSubscriptions.tsx b/client/app/bundles/course/user-email-subscriptions/UserEmailSubscriptions.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
-import ErrorCard from 'lib/components/core/ErrorCard';
 import LoadingIndicator from 'lib/components/core/LoadingIndicator';
+import Note from 'lib/components/core/Note';
 import { DataHandle } from 'lib/hooks/router/dynamicNest';
 import { useAppDispatch } from 'lib/hooks/store';
 import useTranslation from 'lib/hooks/useTranslation';
@@ -39,7 +39,7 @@ const UserEmailSubscriptions = (): JSX.Element => {
   if (status === 'loading') return <LoadingIndicator />;
 
   if (status === 'error')
-    return <ErrorCard message={t(translations.fetchFailure)} />;
+    return <Note message={t(translations.fetchFailure)} severity="error" />;
 
   return <UserEmailSubscriptionsTable />;
 };
diff --git a/client/app/lib/components/core/ErrorCard.jsx b/client/app/lib/components/core/ErrorCard.jsx
diff --git a/client/app/lib/components/core/Note.jsx b/client/app/lib/components/core/Note.jsx
diff --git a/client/app/lib/components/core/Note.tsx b/client/app/lib/components/core/Note.tsx
@@ -0,0 +1,53 @@
+import { FC, ReactNode } from 'react';
+import { defineMessages } from 'react-intl';
+import { Card, CardContent, CardHeader, Typography } from '@mui/material';
+
+import useTranslation from 'lib/hooks/useTranslation';
+
+const translations = defineMessages({
+  noteHeader: {
+    id: 'lib.components.core.Note.noteHeader',
+    defaultMessage: 'Note',
+  },
+  errorHeader: {
+    id: 'lib.components.core.Note.errorHeader',
+    defaultMessage: 'Error',
+  },
+});
+
+type NoteSeverity = 'success' | 'warning' | 'error';
+
+const NoteSeverityMapper = {
+  success: { bg: 'bg-green-200', text: 'text-green-600' },
+  warning: { bg: 'bg-orange-200', text: 'text-orange-600' },
+  error: { bg: 'bg-red-200', text: 'text-red-900' },
+};
+
+const Note: FC<{ message: string | ReactNode; severity?: NoteSeverity }> = (
+  props,
+) => {
+  const { t } = useTranslation();
+  const severity = props.severity ?? 'warning';
+
+  return (
+    <Card className="m-5">
+      <CardHeader
+        className={`${NoteSeverityMapper[severity].bg} p-5`}
+        title={
+          severity === 'error'
+            ? t(translations.errorHeader)
+            : t(translations.noteHeader)
+        }
+        titleTypographyProps={{
+          variant: 'body2',
+          className: `font-bold ${NoteSeverityMapper[severity].text}`,
+        }}
+      />
+      <CardContent className="p-5">
+        <Typography variant="body2">{props.message}</Typography>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default Note;
diff --git a/client/app/lib/components/wrappers/Preload.tsx b/client/app/lib/components/wrappers/Preload.tsx
@@ -1,7 +1,7 @@
 import { DependencyList, useEffect, useState } from 'react';
 import { AxiosError } from 'axios';
 
-import ErrorCard from 'lib/components/core/ErrorCard';
+import Note from 'lib/components/core/Note';
 import toast from 'lib/hooks/toast';
 import useTranslation from 'lib/hooks/useTranslation';
 import messagesTranslations from 'lib/translations/messages';
@@ -70,7 +70,9 @@ const Preload = <Data,>(props: PreloadProps<Data>): JSX.Element => {
   }, props.syncsWith ?? []);
 
   if (failed)
-    return <ErrorCard message={t(messagesTranslations.fetchingError)} />;
+    return (
+      <Note message={t(messagesTranslations.fetchingError)} severity="error" />
+    );
 
   const refreshable = (element: JSX.Element): JSX.Element =>
     loading ? props.render : element;
diff --git a/client/locales/en.json b/client/locales/en.json
@@ -6993,6 +6993,9 @@
   "lib.components.core.Note.noteHeader": {
     "defaultMessage": "Note"
   },
+  "lib.components.core.Note.errorHeader": {
+    "defaultMessage": "Error"
+  },
   "lib.components.core.banners.ServerUnreachableBanner.refreshPage": {
     "defaultMessage": "Refresh page"
   },
diff --git a/client/locales/ko.json b/client/locales/ko.json
@@ -6980,6 +6980,9 @@
   "lib.components.core.Note.noteHeader": {
     "defaultMessage": "노트"
   },
+  "lib.components.core.Note.errorHeader": {
+    "defaultMessage": "오류"
+  },
   "lib.components.core.banners.ServerUnreachableBanner.refreshPage": {
     "defaultMessage": "페이지 새로고침"
   },
diff --git a/client/locales/zh.json b/client/locales/zh.json
@@ -6959,6 +6959,9 @@
   "lib.components.core.Note.noteHeader": {
     "defaultMessage": "提示"
   },
+  "lib.components.core.Note.errorHeader": {
+    "defaultMessage": "错误"
+  },
   "lib.components.core.banners.ServerUnreachableBanner.refreshPage": {
     "defaultMessage": "刷新页面"
   },

Original file line number	Diff line number	Diff line change
`@@ -45,11 +45,7 @@ const TopicList: FC<TopicListProps> = (props) => {`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`if (topicList.length === 0) {`
`48`		`- return (`
`49`		`- <Grid item style={{ position: 'relative', width: '100%' }} xs>`
`50`		`- <Note message={t(translations.noTopic)} />`
`51`		`- </Grid>`
`52`		`- );`
	`48`	`+ return <Note message={t(translations.noTopic)} />;`
`53`	`49`	`}`
`54`	`50`
`55`	`51`	`return (`