From 8fd0b6d64f5fc1268463df74f753c4daade89ca2 Mon Sep 17 00:00:00 2001
From: SARDONYX-sard <68905624+SARDONYX-sard@users.noreply.github.com>
Date: Fri, 17 Nov 2023 03:34:16 +0900
Subject: [PATCH] fix(front): fix inconsistencies in notification design

Fixed an issue where the dark mode design was not being applied on the settings page with a unified component.
---
 .../src/components/notifications/index.ts     |  3 +++
 .../{ => notifications}/progress_bar.tsx      |  3 +--
 .../src/components/notifications/toaster.tsx  | 22 +++++++++++++++++++
 frontend/src/components/pages/converter.tsx   | 15 ++-----------
 frontend/src/components/pages/settings.tsx    |  2 +-
 5 files changed, 29 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/components/notifications/index.ts
 rename frontend/src/components/{ => notifications}/progress_bar.tsx (87%)
 create mode 100644 frontend/src/components/notifications/toaster.tsx

diff --git a/frontend/src/components/notifications/index.ts b/frontend/src/components/notifications/index.ts
new file mode 100644
index 0000000..79028a9
--- /dev/null
+++ b/frontend/src/components/notifications/index.ts
@@ -0,0 +1,3 @@
+// @index('./*', f => `export * from '${f.path}'`)
+export * from './progress_bar';
+export * from './toaster';
diff --git a/frontend/src/components/progress_bar.tsx b/frontend/src/components/notifications/progress_bar.tsx
similarity index 87%
rename from frontend/src/components/progress_bar.tsx
rename to frontend/src/components/notifications/progress_bar.tsx
index 0b90df1..d644ab1 100644
--- a/frontend/src/components/progress_bar.tsx
+++ b/frontend/src/components/notifications/progress_bar.tsx
@@ -1,7 +1,6 @@
 import Box from '@mui/material/Box';
 import LinearProgress, { LinearProgressProps } from '@mui/material/LinearProgress';
 import Typography from '@mui/material/Typography';
-import * as React from 'react';
 
 function LinearProgressWithLabel(props: LinearProgressProps & { value: number }) {
   return (
@@ -20,7 +19,7 @@ type Props = {
   progress: number;
 };
 
-export default function LinearWithValueLabel({ progress }: Readonly<Props>) {
+export function LinearWithValueLabel({ progress }: Readonly<Props>) {
   return (
     <Box sx={{ width: '100%' }}>
       <LinearProgressWithLabel value={progress} />
diff --git a/frontend/src/components/notifications/toaster.tsx b/frontend/src/components/notifications/toaster.tsx
new file mode 100644
index 0000000..680bf73
--- /dev/null
+++ b/frontend/src/components/notifications/toaster.tsx
@@ -0,0 +1,22 @@
+import { Toaster as Toast, type ToasterProps } from 'react-hot-toast';
+
+/**
+ * Toaster wrapper with default style applied
+ * # INFO
+ * This was written for ease of changing the source code.
+ */
+export function Toaster(props: Readonly<ToasterProps>) {
+  return (
+    <Toast
+      position="bottom-right"
+      reverseOrder={false}
+      toastOptions={{
+        style: {
+          color: '#fff',
+          background: '#1a1919e1',
+        },
+      }}
+      {...props}
+    />
+  );
+}
diff --git a/frontend/src/components/pages/converter.tsx b/frontend/src/components/pages/converter.tsx
index ee6aaf2..b00461b 100644
--- a/frontend/src/components/pages/converter.tsx
+++ b/frontend/src/components/pages/converter.tsx
@@ -1,9 +1,7 @@
-'use client';
-
 import { Box } from '@mui/material';
-import { Toaster } from 'react-hot-toast';
 
 import { ConvertForm } from '@/components/form';
+import { Toaster } from '@/components/notifications';
 import { useDynStyle, useInjectScript, useLocale, useToastLimit } from '@/hooks';
 
 export default function Converter() {
@@ -26,16 +24,7 @@ export default function Converter() {
       >
         <ConvertForm />
       </Box>
-      <Toaster
-        position="bottom-right"
-        reverseOrder={false}
-        toastOptions={{
-          style: {
-            color: '#fff',
-            background: '#1a1919e1',
-          },
-        }}
-      />
+      <Toaster />
     </>
   );
 }
diff --git a/frontend/src/components/pages/settings.tsx b/frontend/src/components/pages/settings.tsx
index 0ff05c4..4e46c9c 100644
--- a/frontend/src/components/pages/settings.tsx
+++ b/frontend/src/components/pages/settings.tsx
@@ -3,9 +3,9 @@
 import { Box } from '@mui/material';
 import InputLabel from '@mui/material/InputLabel';
 import AceEditor from 'react-ace';
-import { Toaster } from 'react-hot-toast';
 
 import { SelectEditorMode, StyleList, TranslationList } from '@/components/lists';
+import { Toaster } from '@/components/notifications';
 import { useDynStyle, useInjectScript, useLocale, useStorageState, useTranslation } from '@/hooks';
 import { selectEditorMode, type EditorMode } from '@/utils/selector';