refactor: Upgrade to the new UI (#521)

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

src/components/setting/mods/setting-comp.tsx

@@ -18,9 +18,11 @@ export const SettingItem: React.FC<ItemProps> = (props) => {
   const { label, extra, children, secondary } = props;
 
   const primary = !extra ? (
-    label
+    <Box sx={{ display: "flex", alignItems: "center", fontSize: "14px" }}>
+      <span>{label}</span>
+    </Box>
   ) : (
-    <Box sx={{ display: "flex", alignItems: "center" }}>
+    <Box sx={{ display: "flex", alignItems: "center", fontSize: "14px" }}>
       <span>{label}</span>
       {extra}
     </Box>
@@ -39,7 +41,17 @@ export const SettingList: React.FC<{
   children: ReactNode;
 }> = (props) => (
   <List>
-    <ListSubheader sx={{ background: "transparent" }} disableSticky>
+    <ListSubheader
+      sx={[
+        { background: "transparent", fontSize: "16px", fontWeight: "700" },
+        ({ palette }) => {
+          return {
+            color: palette.text.primary,
+          };
+        },
+      ]}
+      disableSticky
+    >
       {props.title}
     </ListSubheader>