fix styles

src/components/proxy/proxy-item-mini.tsx

@@ -122,12 +122,28 @@ export const ProxyItemMini = (props: Props) => {
               </Typography>
             )}
             {!!proxy.provider && (
-              <TypeBox component="span">{proxy.provider}</TypeBox>
+              <TypeBox color="text.secondary" component="span">
+                {proxy.provider}
+              </TypeBox>
+            )}
+            <TypeBox color="text.secondary" component="span">
+              {proxy.type}
+            </TypeBox>
+            {proxy.udp && (
+              <TypeBox color="text.secondary" component="span">
+                UDP
+              </TypeBox>
+            )}
+            {proxy.xudp && (
+              <TypeBox color="text.secondary" component="span">
+                XUDP
+              </TypeBox>
+            )}
+            {proxy.tfo && (
+              <TypeBox color="text.secondary" component="span">
+                TFO
+              </TypeBox>
             )}
-            <TypeBox component="span">{proxy.type}</TypeBox>
-            {proxy.udp && <TypeBox component="span">UDP</TypeBox>}
-            {proxy.xudp && <TypeBox component="span">XUDP</TypeBox>}
-            {proxy.tfo && <TypeBox component="span">TFO</TypeBox>}
           </Box>
         )}
       </Box>
@@ -200,8 +216,8 @@ const Widget = styled(Box)(({ theme: { typography } }) => ({
 const TypeBox = styled(Box)(({ theme: { palette, typography } }) => ({
   display: "inline-block",
   border: "1px solid #ccc",
-  borderColor: palette.mode === "light" ? "#d9d9d9" : "#424242",
-  color: palette.mode === "light" ? "#8c8c8c" : "#ffffff",
+  borderColor: "text.secondary",
+  color: "text.secondary",
   borderRadius: 4,
   fontSize: 10,
   fontFamily: typography.fontFamily,

src/components/proxy/proxy-render.tsx

@@ -45,7 +45,7 @@ export const ProxyRender = (props: RenderProps) => {
         dense
         style={{
           background: itembackgroundcolor,
-          height: "64px",
+          height: "100%",
           margin: "8px 8px",
           borderRadius: "8px",
         }}
@@ -81,7 +81,6 @@ export const ProxyRender = (props: RenderProps) => {
           primary={<StyledPrimary>{group.name}</StyledPrimary>}
           secondary={
             <ListItemTextChild
-              color="text.secondary"
               sx={{
                 overflow: "hidden",
                 display: "flex",
@@ -91,7 +90,9 @@ export const ProxyRender = (props: RenderProps) => {
             >
               <Box sx={{ marginTop: "2px" }}>
                 <StyledTypeBox>{group.type}</StyledTypeBox>
-                <StyledSubtitle>{group.now}</StyledSubtitle>
+                <StyledSubtitle sx={{ color: "text.secondary" }}>
+                  {group.now}
+                </StyledSubtitle>
               </Box>
             </ListItemTextChild>
           }
@@ -179,7 +180,7 @@ export const ProxyRender = (props: RenderProps) => {
 };
 
 const StyledPrimary = styled("span")`
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 700;
   line-height: 1.5;
   overflow: hidden;
@@ -187,7 +188,7 @@ const StyledPrimary = styled("span")`
   white-space: nowrap;
 `;
 const StyledSubtitle = styled("span")`
-  font-size: 12px;
+  font-size: 13px;
   overflow: hidden;
   color: text.secondary;
   text-overflow: ellipsis;