fix(front): fix design

SARDONYX-sard · Oct 10, 2023 · 92563f2 · 92563f2
1 parent 32c3150
commit 92563f2
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 59 deletions.
diff --git a/frontend/src/components/editor_list.tsx b/frontend/src/components/editor_list.tsx
@@ -1,4 +1,4 @@
-import { Tooltip } from "@mui/material";
+import { Tooltip, InputLabel, FormControl } from "@mui/material";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import { selectEditorMode } from "../utils/editor";
@@ -11,20 +11,22 @@ type Props = {
 
 export const SelectEditorMode = ({ editorMode, setEditorMode }: Props) => {
   return (
-    <Tooltip title="Editor Mode" placement="top">
+    <FormControl>
+      <InputLabel htmlFor="editor-select">Editor Mode</InputLabel>
       <Select
         name={editorMode ?? "default"}
         onChange={(e) => {
           const presetEditor = selectEditorMode(e.target.value);
           setEditorMode(presetEditor);
         }}
+        label="Editor Mode"
         labelId="editor-select-label"
         id="editor-select"
         value={editorMode ?? "default"}
       >
         <MenuItem value={"default"}>Default</MenuItem>
         <MenuItem value={"vim"}>Vim</MenuItem>
       </Select>
-    </Tooltip>
+    </FormControl>
   );
 };
diff --git a/frontend/src/components/form.tsx b/frontend/src/components/form.tsx
@@ -141,7 +141,7 @@ export function ConvertForm() {
                       person
                       <br />
                       &quot;[...]/animations/DynamicAnimationReplacer/&quot;
-                      -&gt; Convert only 3rd person
+                      -&gt; Convert 3rd person
                     </>
                   }
                 />

diff --git a/frontend/src/components/pages/converter.tsx b/frontend/src/components/pages/converter.tsx
@@ -1,13 +1,14 @@
 "use client";
 
 import { ConvertForm } from "@/components/form";
-import { useDynStyle, useToastLimit } from "@/hooks";
+import { useDynStyle, useInjectScript, useToastLimit } from "@/hooks";
 import { Box } from "@mui/material";
 import { Toaster } from "react-hot-toast";
 
 export default function Converter() {
   useToastLimit(1);
   useDynStyle();
+  useInjectScript();
 
   return (
     <>

diff --git a/frontend/src/components/pages/loading.tsx b/frontend/src/components/pages/loading.tsx
@@ -15,7 +15,7 @@ export default function Loading() {
         }}
       >
         <h1>Loading...</h1>
-        <CircularProgress />
+        <CircularProgress sx={{ marginTop: "20px" }} />
       </Box>
     </>
   );

diff --git a/frontend/src/components/pages/settings.tsx b/frontend/src/components/pages/settings.tsx
@@ -1,20 +1,23 @@
 "use client";
 
 import AceEditor from "react-ace";
-import type { EditorMode } from "@/utils/editor";
 import { Box } from "@mui/material";
+import InputLabel from "@mui/material/InputLabel";
+import type { EditorMode } from "@/utils/editor";
 import { SelectEditorMode } from "@/components/editor_list";
 import { SelectStyleList } from "@/components/style_list";
 import { Toaster } from "react-hot-toast";
 import { selectEditorMode } from "@/utils/editor";
 import { useDynStyle, useInjectScript, useStorageState } from "@/hooks";
 
+import "ace-builds/src-noconflict/ext-code_lens";
 import "ace-builds/src-noconflict/ext-language_tools";
 import "ace-builds/src-noconflict/keybinding-vim";
 import "ace-builds/src-noconflict/mode-css";
 import "ace-builds/src-noconflict/mode-javascript";
+import "ace-builds/src-noconflict/snippets/css";
+import "ace-builds/src-noconflict/snippets/javascript";
 import "ace-builds/src-noconflict/theme-one_dark";
-import InputLabel from "@mui/material/InputLabel";
 
 export default function Settings() {
   const [style, setStyle] = useDynStyle();
@@ -44,45 +47,47 @@ export default function Settings() {
           width: "95%",
           backgroundColor: "#2424248c",
         }}
-        height="300px"
-        mode="css"
-        theme="one_dark"
-        value={style}
-        debounceChangePeriod={500}
         onChange={(value) => {
           setStyle(value);
           localStorage.setItem("customCSS", value);
           setPreset("0");
         }}
+        fontSize={"1rem"}
+        height="300px"
+        mode="css"
+        theme="one_dark"
+        value={style}
+        setOptions={{ useWorker: false }}
         placeholder="{ body: url('https://localhost' }"
         name="Custom CSS"
         enableBasicAutocompletion
         enableLiveAutocompletion
         enableSnippets
         keyboardHandler={selectEditorMode(editorMode)}
         highlightActiveLine
+        tabSize={2}
         editorProps={{ $blockScrolling: true }}
       />
 
-      <Box
-        sx={{
+      <div
+        style={{
           display: "flex",
-          justifyContent: "space-around",
-          width: "80%",
-          marginTop: "20px",
-          maxHeight: "20%",
+          justifyContent: "space-between",
+          width: "40%",
+          marginTop: "30px"
         }}
       >
-        <SelectStyleList
-          preset={preset}
-          setPreset={setPreset}
-          setStyle={setStyle}
-        />
-        <SelectEditorMode
-          editorMode={selectEditorMode(editorMode)}
-          setEditorMode={setEditorKeyMode}
-        />
-      </Box>
+          <SelectEditorMode
+            editorMode={selectEditorMode(editorMode)}
+            setEditorMode={setEditorKeyMode}
+          />
+
+          <SelectStyleList
+            preset={preset}
+            setPreset={setPreset}
+            setStyle={setStyle}
+          />
+      </div>
 
       <InputLabel error sx={{ marginTop: "20px" }}>
         Custom JavaScript(Please do not execute untrusted scripts)
@@ -92,10 +97,6 @@ export default function Settings() {
           width: "95%",
           backgroundColor: "#2424248c",
         }}
-        height="200px"
-        mode="javascript"
-        theme="one_dark"
-        value={script}
         onChange={(value) => {
           localStorage.setItem("customJS", value);
           setScript(value);
@@ -105,13 +106,20 @@ export default function Settings() {
     p.innerText = 'Hello';
     document.body.appendChild(p);
 )()"
-        name="Custom JavaScript"
+        editorProps={{ $blockScrolling: true }}
         enableBasicAutocompletion
         enableLiveAutocompletion
         enableSnippets
-        keyboardHandler={selectEditorMode(editorMode)}
+        fontSize={"1rem"}
+        height="250px"
         highlightActiveLine
-        editorProps={{ $blockScrolling: true }}
+        keyboardHandler={selectEditorMode(editorMode)}
+        mode="javascript"
+        name="Custom JavaScript"
+        setOptions={{ useWorker: false }}
+        tabSize={2}
+        theme="one_dark"
+        value={script}
       />
     </Box>
   );

diff --git a/frontend/src/components/style_list.tsx b/frontend/src/components/style_list.tsx
@@ -1,4 +1,4 @@
-import { Tooltip } from "@mui/material";
+import { FormControl, Tooltip, InputLabel } from "@mui/material";
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import { selectPreset, presetStyles } from "../utils/styles";
@@ -13,28 +13,31 @@ export const SelectStyleList = ({ preset, setPreset, setStyle }: Props) => {
   return (
     <Tooltip
       title="You can choose a CSS preset. NOTE: The moment you edit the preset, Yourself CSS will be overwritten."
-      placement="right"
+      placement="top"
     >
-      <Select
-        sx={{ marginLeft: "50px" }}
-        name={preset}
-        onChange={(e) => {
-          const presetNumber = selectPreset(e.target.value);
-          setPreset(presetNumber);
-          if (presetNumber === "0") {
-            setStyle(localStorage.getItem("customCSS") ?? "");
-            return;
-          }
-          setStyle(presetStyles[presetNumber]);
-        }}
-        labelId="style-select-label"
-        id="style-select"
-        value={preset}
-      >
-        <MenuItem value={"0"}>Yourself CSS</MenuItem>
-        <MenuItem value={"1"}>Preset1</MenuItem>
-        <MenuItem value={"2"}>Preset2</MenuItem>
-      </Select>
+      <FormControl>
+        <InputLabel htmlFor="style-select">CSS preset</InputLabel>
+        <Select
+          name={preset}
+          onChange={(e) => {
+            const presetNumber = selectPreset(e.target.value);
+            setPreset(presetNumber);
+            if (presetNumber === "0") {
+              setStyle(localStorage.getItem("customCSS") ?? "");
+              return;
+            }
+            setStyle(presetStyles[presetNumber]);
+          }}
+          label="CSS Presets"
+          labelId="style-select-label"
+          id="style-select"
+          value={preset}
+        >
+          <MenuItem value={"0"}>Custom</MenuItem>
+          <MenuItem value={"1"}>Preset1</MenuItem>
+          <MenuItem value={"2"}>Preset2</MenuItem>
+        </Select>
+      </FormControl>
     </Tooltip>
   );
 };
diff --git a/frontend/src/utils/styles.ts b/frontend/src/utils/styles.ts
@@ -11,7 +11,7 @@ const preset1 = `body {
   background-color: #2424248c !important;
 }
 
-.Mui-error {
+p.Mui-error {
   color: #ff1655;
   background-color: #2f2e2eba;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -141,7 +141,7 @@ export function ConvertForm() { @@
                           person
                           <br />
                           &quot;[...]/animations/DynamicAnimationReplacer/&quot;
-                          -&gt; Convert only 3rd person
+                          -&gt; Convert 3rd person
                         </>
                       }
                     />
@@ Expand Down @@