feat: Material You!

src/assets/styles/index.scss

@@ -17,6 +17,8 @@ body {
   --selection-color: #f5f5f5;
   --scroller-color: #90939980;
   --background-color: #ffffff;
+  --background-color-alpha: rgba(24, 103, 192, 0.1);
+  --border-radius: 12px;
 }
 
 ::selection {

src/assets/styles/layout.scss

@@ -18,6 +18,7 @@
     -moz-user-select: none;
     -ms-user-select: none;
     overflow: hidden;
+    background-color: var(--background-color-alpha);
 
     $maxLogo: 100px;
 
@@ -71,6 +72,7 @@
     position: relative;
     flex: 1 1 75%;
     height: 100%;
+    background-color: var(--background-color-alpha);
 
     .the-bar {
       position: absolute;
@@ -87,8 +89,8 @@
       position: absolute;
       top: 0;
       left: 0;
-      right: 2px;
-      bottom: 10px;
+      right: 28px;
+      bottom: 28px;
     }
   }
 }

src/assets/styles/page.scss

@@ -6,7 +6,7 @@
 
   > header {
     flex: 0 0 58px;
-    width: 90%;
+    width: 100%;
     // max-width: 850px;
     margin: 0 auto;
     padding-right: 4px;
@@ -16,20 +16,27 @@
     justify-content: space-between;
   }
 
-  > section {
-    position: relative;
-    flex: 1 1 100%;
-    width: 100%;
+  .base-container {
     height: 100%;
-    overflow: auto;
-    padding: 8px 0;
-    box-sizing: border-box;
-    scrollbar-gutter: stable;
+    overflow: hidden;
+    border-radius: var(--border-radius);
+
+    > section {
+      position: relative;
+      flex: 1 1 100%;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+      padding: 28px 0;
+      box-sizing: border-box;
+      scrollbar-gutter: stable;
+      background-color: var(--background-color);
 
-    .base-content {
-      width: 90%;
-      // max-width: 850px;
-      margin: 0 auto;
+      .base-content {
+        width: 90%;
+        // max-width: 850px;
+        margin: 0 auto;
+      }
     }
   }
 }

src/components/base/base-page.tsx

@@ -23,11 +23,13 @@ export const BasePage: React.FC<Props> = (props) => {
           {header}
         </header>
 
-        <section>
-          <div className="base-content" style={contentStyle} data-windrag>
-            {children}
-          </div>
-        </section>
+        <div className="base-container">
+          <section>
+            <div className="base-content" style={contentStyle} data-windrag>
+              {children}
+            </div>
+          </section>
+        </div>
       </div>
     </BaseErrorBoundary>
   );

src/components/layout/layout-item.tsx

@@ -15,7 +15,7 @@ export const LayoutItem = (props: LinkProps) => {
         selected={!!match}
         sx={[
           {
-            borderRadius: 2,
+            borderRadius: 8,
             textAlign: "center",
             "& .MuiListItemText-primary": { color: "text.secondary" },
           },

src/components/layout/use-custom-theme.ts

@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from "react";
 import { useRecoilState } from "recoil";
-import { createTheme, Theme } from "@mui/material";
+import { alpha, createTheme, Theme } from "@mui/material";
 import { appWindow } from "@tauri-apps/api/window";
 import { atomThemeMode } from "@/services/states";
 import { defaultTheme, defaultDarkTheme } from "@/pages/_theme";
@@ -93,6 +93,10 @@ export const useCustomTheme = () => {
     rootEle.style.setProperty("--selection-color", selectColor);
     rootEle.style.setProperty("--scroller-color", scrollColor);
     rootEle.style.setProperty("--primary-main", theme.palette.primary.main);
+    rootEle.style.setProperty(
+      "--background-color-alpha",
+      alpha(theme.palette.primary.main, 0.1)
+    );
 
     // inject css
     let style = document.querySelector("style#verge-theme");