feat(layout): add logo & update style

src/assets/styles/index.scss

@@ -6,17 +6,24 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+:root {
+  --primary-main: #5b5c9d;
+  --text-primary: #637381;
+  --selection-color: #f5f5f5;
+}
+
+::selection {
+  color: var(--selection-color);
+  background-color: var(--primary-main);
 }
 
 *::-webkit-scrollbar {
-  width: 8px;
+  width: 6px;
+  height: 6px;
   background: transparent;
 }
 *::-webkit-scrollbar-thumb {
-  border-radius: 8px;
+  border-radius: 6px;
   background-color: rgba(#909399, 0.5);
 }
 

src/assets/styles/layout.scss

@@ -1,28 +1,42 @@
 .layout {
   width: 100%;
-  height: 100vh;
   display: flex;
+  overflow: hidden;
 
   &__sidebar {
     position: relative;
-    height: 100%;
     flex: 1 0 25%;
-    max-width: 250px;
+    height: 100vh;
+    max-width: 225px;
+    min-width: 125px;
     overflow: hidden auto;
   }
 
   &__content {
+    position: relative;
     flex: 1 1 75%;
-    height: 100%;
+    height: 100vh;
+    overflow: overlay;
+    box-sizing: border-box;
+  }
+
+  &__logo {
+    width: 100%;
+    height: auto;
+    max-width: 180px;
+    max-height: 180px;
+    margin: 0 auto;
+    padding: 8px 8px 0;
+    user-select: none;
+    text-align: center;
     box-sizing: border-box;
-    overflow: hidden auto;
   }
 
   &__traffic {
     position: absolute;
     left: 0;
     right: 0;
-    bottom: 18px;
+    bottom: 8px;
 
     > div {
       margin: 0 auto;

src/main.tsx

@@ -1,3 +1,4 @@
+/// <reference types="vite/client" />
 import "./assets/styles/index.scss";
 
 import React from "react";

src/pages/_layout.tsx

@@ -1,14 +1,9 @@
 import { useMemo } from "react";
 import { Route, Routes } from "react-router-dom";
 import { useRecoilValue } from "recoil";
-import {
-  createTheme,
-  List,
-  Paper,
-  ThemeProvider,
-  Typography,
-} from "@mui/material";
+import { createTheme, List, Paper, ThemeProvider } from "@mui/material";
 import { atomPaletteMode } from "../states/setting";
+import LogoSvg from "../assets/image/logo.svg";
 import LogPage from "../pages/log";
 import HomePage from "../pages/home";
 import ProxyPage from "../pages/proxy";
@@ -45,8 +40,19 @@ const Layout = () => {
   ];
 
   const theme = useMemo(() => {
-    const bgcolor = paletteMode === "light" ? "#f5f5f5" : "#000";
-    document.documentElement.style.background = bgcolor;
+    if (paletteMode === "light") {
+      document.documentElement.style.background = "#f5f5f5";
+      document.documentElement.style.setProperty(
+        "--selection-color",
+        "#f5f5f5"
+      );
+    } else {
+      document.documentElement.style.background = "#000";
+      document.documentElement.style.setProperty(
+        "--selection-color",
+        "#d5d5d5"
+      );
+    }
 
     return createTheme({
       palette: {
@@ -66,13 +72,9 @@ const Layout = () => {
     <ThemeProvider theme={theme}>
       <Paper square elevation={0} className="layout">
         <div className="layout__sidebar">
-          <Typography
-            variant="h3"
-            component="h1"
-            sx={{ my: 2, px: 2, textAlign: "center", userSelect: "none" }}
-          >
-            Clash Verge
-          </Typography>
+          <div className="layout__logo">
+            <img src={LogoSvg} width="100%" alt="" />
+          </div>
 
           <List sx={{ userSelect: "none" }}>
             {routers.map((router) => (