Sytle: UI improvement & Update Readme

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",