Sytle: UI improvement & Update Readme

src/assets/styles/layout.scss

@@ -5,7 +5,7 @@
   overflow: hidden;
 
   &__left {
-    flex: 1 0 228px;
+    flex: 1 0 200px;
     display: flex;
     height: 100%;
     width: 100%;
@@ -21,23 +21,23 @@
     -moz-user-select: none;
     -ms-user-select: none;
     overflow: hidden;
-    border-right: 1px solid var(--divider-color);
+    // border-right: 1px solid var(--divider-color);
     // background-color: var(--background-color-alpha);
 
     // $maxLogo: 100px;
 
     .the-logo {
       position: relative;
-      flex: 1 0 58px;
+      flex: 1 0 47px;
       // width: 100%;
       display: flex;
       height: 100%;
-      padding: 0px 20px;
+      padding: 0px 15px;
       flex-direction: column;
       justify-content: center;
       align-items: flex-start;
       align-self: stretch;
-      border-bottom: 1px solid var(--divider-color);
+      // border-bottom: 1px solid var(--divider-color);
       // max-width: $maxLogo + 32px;
       // max-height: $maxLogo;
       // margin: 0 auto;
@@ -119,7 +119,7 @@
     }
 
     .layout__left .the-logo {
-      flex: 1 0 58px;
+      flex: 1 0 47px;
     }
 
     .layout__right .the-content {

src/assets/styles/page.scss

@@ -13,12 +13,13 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-bottom: 1px solid var(--divider-color);
+    // border-bottom: 1px solid var(--divider-color);
   }
 
   .base-container {
     height: 100%;
     overflow: hidden;
+    border-radius: 10px;
     // border-top-left-radius: var(--border-radius);
 
     > section {
@@ -27,11 +28,11 @@
       width: 100%;
       height: 100%;
       overflow: auto;
-      padding: 16px 0;
+      padding: 10px 0;
       box-sizing: border-box;
       scrollbar-gutter: stable;
       .base-content {
-        width: calc(100% - 16px * 2);
+        width: calc(100% - 10px * 2);
         margin: 0 auto;
       }
     }

src/components/connection/connection-item.tsx

@@ -58,7 +58,9 @@ export const ConnectionItem = (props: Props) => {
 
             {!!metadata.process && <Tag>{metadata.process}</Tag>}
 
-            {chains?.length > 0 && <Tag>{chains[value.chains.length - 1]}</Tag>}
+            {chains?.length > 0 && (
+              <Tag>{[...chains].reverse().join(" / ")}</Tag>
+            )}
 
             <Tag>{dayjs(start).fromNow()}</Tag>
 

src/components/layout/layout-item.tsx

@@ -26,10 +26,10 @@ export const LayoutItem = (props: Props) => {
         sx={[
           {
             borderRadius: 2,
-            marginLeft: 1.5,
+            marginLeft: 1.25,
             paddingLeft: 1.5,
             paddingRight: 1,
-            marginRight: 1.5,
+            marginRight: 1.25,
             textAlign: "left",
             "& .MuiListItemText-primary": {
               color: "text.primary",
@@ -54,7 +54,7 @@ export const LayoutItem = (props: Props) => {
       >
         <ListItemIcon>{icon}</ListItemIcon>
         <ListItemText
-          sx={{ textAlign: "center", marginLeft: "-20px" }}
+          sx={{ textAlign: "center", marginLeft: "-35px" }}
           primary={children}
         />
       </ListItemButton>

src/components/layout/layout-traffic.tsx

@@ -89,7 +89,7 @@ export const LayoutTraffic = () => {
 
   return (
     <Box
-      width="188px"
+      width="150px"
       position="relative"
       onClick={trafficRef.current?.toggleStyle}
     >

src/components/proxy/proxy-render.tsx

@@ -47,7 +47,7 @@ export const ProxyRender = (props: RenderProps) => {
         style={{
           background: itembackgroundcolor,
           height: "64px",
-          margin: "8px 16px",
+          margin: "8px 8px",
           borderRadius: "8px",
         }}
         onClick={() => onHeadState(group.name, { open: !headState?.open })}

src/components/setting/setting-verge.tsx

@@ -167,6 +167,7 @@ const SettingVerge = ({ onError }: Props) => {
           <Input
             value={startup_script}
             disabled
+            sx={{ width: 230 }}
             endAdornment={
               <>
                 <Button

src/components/test/test-box.tsx

@@ -26,7 +26,7 @@ export const TestBox = styled(Box)(({ theme, "aria-selected": selected }) => {
     display: "block",
     cursor: "pointer",
     textAlign: "left",
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 8,
     boxShadow: theme.shadows[2],
     padding: "8px 16px",
     boxSizing: "border-box",