refactor(frontend): change label in lists

SARDONYX-sard · Feb 11, 2024 · e6ec0ee · e6ec0ee
1 parent 58a91f2
commit e6ec0ee
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 34 deletions.
diff --git a/frontend/src/components/buttons/backup_btn.tsx b/frontend/src/components/buttons/backup_btn.tsx
@@ -1,4 +1,5 @@
-import { FileOpen } from '@mui/icons-material';
+import FileDownloadIcon from '@mui/icons-material/FileDownload';
+import FileOpen from '@mui/icons-material/FileOpen';
 import { Button, type ButtonProps, Tooltip } from '@mui/material';
 import { type ReactNode } from 'react';
 
@@ -22,7 +23,6 @@ export const BackupButton = ({ buttonName, tooltipTitle, ...props }: Readonly<Pr
         minWidth: '120px',
         width: '120px',
       }}
-      startIcon={<FileOpen />}
       type="button"
       variant="outlined"
       {...props}
@@ -48,6 +48,7 @@ export const ImportBackupButton = () => {
       buttonName={t('backup-import-btn-name')}
       tooltipTitle={t('backup-import-tooltip')}
       onClick={handleClick}
+      startIcon={<FileOpen />}
     />
   );
 };
@@ -70,6 +71,7 @@ export const ExportBackupButton = () => {
       buttonName={t('backup-export-btn-name')}
       tooltipTitle={t('backup-export-tooltip')}
       onClick={handleClick}
+      startIcon={<FileDownloadIcon />}
     />
   );
 };
diff --git a/frontend/src/components/lists/editor_list.tsx b/frontend/src/components/lists/editor_list.tsx
@@ -25,9 +25,8 @@ export const SelectEditorMode = ({ editorMode, setEditorMode }: SelectEditorProp
 
   return (
     <FormControl variant="filled" sx={{ m: 1, minWidth: 105 }}>
-      <InputLabel htmlFor="editor-select">{t('editor-mode-list-label')}</InputLabel>
+      <InputLabel id="editor-select-label">{t('editor-mode-list-label')}</InputLabel>
       <Select
-        name={editorMode}
         onChange={handleChange}
         label="Editor Mode"
         labelId="editor-select-label"

diff --git a/frontend/src/components/lists/notice_position_list.tsx b/frontend/src/components/lists/notice_position_list.tsx
@@ -35,17 +35,14 @@ export const NoticePositionList = () => {
 
   return (
     <FormControl variant="filled" sx={{ m: 1, minWidth: 105 }}>
-      <InputLabel htmlFor="editor-select">{t('notice-position-list-label')}</InputLabel>
+      <InputLabel id="notice-position-label">{t('notice-position-list-label')}</InputLabel>
       <Select
-        name={'notify-position-list'}
-        onChange={handleChange}
+        id="notice-position"
+        inputProps={{ MenuProps: { disableScrollLock: true } }}
         label="Editor Mode"
-        labelId="editor-select-label"
-        id="editor-select"
+        labelId="notice-position-label"
+        onChange={handleChange}
         value={`${pos.vertical}_${pos.horizontal}`}
-        // NOTE: Without this, padding will be added to the body during popup in consideration of nest,
-        // and the design will be broken.
-        inputProps={{ MenuProps: { disableScrollLock: true } }}
       >
         <MenuItem value={'top_right'}>{t('notice-position-top-right')}</MenuItem>
         <MenuItem value={'top_center'}>{t('notice-position-top-center')}</MenuItem>

diff --git a/frontend/src/components/lists/select_log_level.tsx b/frontend/src/components/lists/select_log_level.tsx
@@ -14,7 +14,7 @@ interface IFormValues {
 export const SelectLogLevel = forwardRef<
   HTMLSelectElement,
   { value: LogLevel } & ReturnType<UseFormRegister<IFormValues>>
->(function SelectLogLevel({ onChange, onBlur, name, value }, ref) {
+>(function SelectLogLevel({ name, onChange, ...props }, ref) {
   const { t } = useTranslation();
 
   const handleChange = useCallback(
@@ -45,17 +45,13 @@ export const SelectLogLevel = forwardRef<
       <FormControl variant="filled" sx={{ m: 1, minWidth: 110 }}>
         <InputLabel id="log-level-select-label">{t('log-level-list-label')}</InputLabel>
         <Select
-          name={name}
-          ref={ref}
-          onChange={handleChange}
-          onBlur={onBlur}
-          labelId="log-level-select-label"
           id="log-level-select"
-          value={value}
-          label="log level"
-          // NOTE: Without this, padding will be added to the body during popup in consideration of nest,
-          // and the design will be broken.
           inputProps={{ MenuProps: { disableScrollLock: true } }}
+          label="log level"
+          labelId="log-level-select-label"
+          onChange={handleChange}
+          {...props}
+          ref={ref}
         >
           <MenuItem value={'trace'}>Trace</MenuItem>
           <MenuItem value={'debug'}>Debug</MenuItem>

diff --git a/frontend/src/components/lists/style_list.tsx b/frontend/src/components/lists/style_list.tsx
@@ -35,17 +35,14 @@ export const StyleList = ({ preset, setPreset, setStyle }: StyleListProps) => {
       placement="right-end"
     >
       <FormControl variant="filled" sx={{ m: 1, minWidth: 110 }}>
-        <InputLabel htmlFor="style-select">{t('css-preset-list-label')}</InputLabel>
+        <InputLabel id="style-select-label">{t('css-preset-list-label')}</InputLabel>
         <Select
-          name={preset}
-          onChange={handleChange}
+          id="style-select"
+          inputProps={{ MenuProps: { disableScrollLock: true } }}
           label="CSS Presets"
           labelId="style-select-label"
-          id="style-select"
+          onChange={handleChange}
           value={preset}
-          // NOTE: Without this, padding will be added to the body during popup in consideration of nest,
-          // and the design will be broken.
-          inputProps={{ MenuProps: { disableScrollLock: true } }}
         >
           <MenuItem value={'0'}>{t('css-preset-list-item0')}</MenuItem>
           <MenuItem value={'1'}>{t('css-preset-list-item1')}</MenuItem>

diff --git a/frontend/src/components/lists/translation_list.tsx b/frontend/src/components/lists/translation_list.tsx
@@ -18,17 +18,14 @@ export const TranslationList = () => {
   const locale = 'Locale';
   return (
     <FormControl variant="filled" sx={{ m: 1, minWidth: 135 }}>
-      <InputLabel htmlFor="style-select">{t('lang-preset-label')}</InputLabel>
+      <InputLabel id="locale-select-label">{t('lang-preset-label')}</InputLabel>
       <Select
         id="locale-select"
+        inputProps={{ MenuProps: { disableScrollLock: true } }}
         label={locale}
         labelId="locale-select-label"
-        name={locale}
         onChange={handleChange}
         value={lang}
-        // NOTE: Without this, padding will be added to the body during popup in consideration of nest,
-        // and the design will be broken.
-        inputProps={{ MenuProps: { disableScrollLock: true } }}
       >
         <MenuItem value={'auto'}>{t('lang-preset-auto')}</MenuItem>
         <MenuItem value={'en-US'}>English(US)</MenuItem>