refactor: Upgrade to the new UI (#521)

Co-authored-by: MystiPanda <mystipanda@proton.me>

src/components/profile/profile-box.tsx

@@ -2,41 +2,43 @@ import { alpha, Box, styled } from "@mui/material";
 
 export const ProfileBox = styled(Box)(
   ({ theme, "aria-selected": selected }) => {
-    const { mode, primary, text, grey, background } = theme.palette;
+    const { mode, primary, text } = theme.palette;
     const key = `${mode}-${!!selected}`;
 
-    const backgroundColor = {
-      "light-true": alpha(primary.main, 0.2),
-      "light-false": alpha(background.paper, 0.75),
-      "dark-true": alpha(primary.main, 0.45),
-      "dark-false": alpha(grey[700], 0.45),
-    }[key]!;
+    const backgroundColor = mode === "light" ? "#ffffff" : "#282A36";
 
     const color = {
       "light-true": text.secondary,
       "light-false": text.secondary,
-      "dark-true": alpha(text.secondary, 0.85),
+      "dark-true": alpha(text.secondary, 0.65),
       "dark-false": alpha(text.secondary, 0.65),
     }[key]!;
 
     const h2color = {
       "light-true": primary.main,
       "light-false": text.primary,
-      "dark-true": primary.light,
+      "dark-true": primary.main,
       "dark-false": text.primary,
     }[key]!;
 
+    const borderLeft = {
+      "light-true": `3px solid ${primary.main}`,
+      "light-false": "none",
+      "dark-true": `3px solid ${primary.main}`,
+      "dark-false": "none",
+    }[key];
+
     return {
       position: "relative",
       width: "100%",
       display: "block",
       cursor: "pointer",
       textAlign: "left",
-      borderRadius: theme.shape.borderRadius,
-      boxShadow: theme.shadows[2],
       padding: "8px 16px",
       boxSizing: "border-box",
       backgroundColor,
+      borderLeft,
+      borderRadius: "8px",
       color,
       "& h2": { color: h2color },
     };

src/components/profile/profile-item.tsx

@@ -230,7 +230,14 @@ export const ProfileItem = (props: Props) => {
               {...attributes}
               {...listeners}
             >
-              <DragIndicator sx={{ cursor: "move", marginLeft: "-6px" }} />
+              <DragIndicator
+                sx={[
+                  { cursor: "move", marginLeft: "-6px" },
+                  ({ palette: { text } }) => {
+                    return { color: text.primary };
+                  },
+                ]}
+              />
             </Box>
 
             <Typography
@@ -303,11 +310,7 @@ export const ProfileItem = (props: Props) => {
             <span title="Updated Time">{parseExpire(updated)}</span>
           </Box>
         )}
-        <LinearProgress
-          variant="determinate"
-          value={progress}
-          color="inherit"
-        />
+        <LinearProgress variant="determinate" value={progress} />
       </ProfileBox>
 
       <Menu

src/components/profile/profile-viewer.tsx

@@ -15,12 +15,11 @@ import {
   InputLabel,
   MenuItem,
   Select,
-  Switch,
   styled,
   TextField,
 } from "@mui/material";
 import { createProfile, patchProfile } from "@/services/cmds";
-import { BaseDialog, Notice } from "@/components/base";
+import { BaseDialog, Notice, Switch } from "@/components/base";
 import { version } from "@root/package.json";
 import { FileInput } from "./file-input";