improved ui

app/Components/ServerList.tsx

@@ -1,13 +1,10 @@
 import * as React from 'react';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
-import ListItemAvatar from '@mui/material/ListItemAvatar';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
 import Avatar from '@mui/material/Avatar';
-import { Grid } from "@mui/material";
+import { Grid, Card, CardContent, CardActions, Typography, Box, Chip } from "@mui/material";
 import ServerIcon from '@mui/icons-material/Dns';
+import SignalCellularAltIcon from '@mui/icons-material/SignalCellularAlt';
 import useAuth from '~/hooks/useAuth';
 import { signMessage } from './Metamask/Connections';
 import axios from 'axios';
@@ -35,23 +32,53 @@ function NodeItem({node}: {node: Node}) {
     }
 
     return (
-        <Grid size={6}>
+        <Grid size={{ xs: 12, sm: 6, md: 4 }}>
-            <ListItem>
+            <Card elevation={3} sx={{ height: '100%', display: 'flex', flexDirection: 'column', borderRadius: 2 }}>
-                <ListItemAvatar>
+                <CardContent sx={{ flexGrow: 1 }}>
-                    <Avatar>
+                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
-                        <ServerIcon />
+                        <Avatar sx={{ bgcolor: 'primary.main', mr: 2 }}>
-                    </Avatar>
+                            <ServerIcon />
-                </ListItemAvatar>
+                        </Avatar>
-                <ListItemText primary={node.ip} secondary={`Traffic: ${node.traffic}`} />
+                        <Typography variant="h6" component="div" noWrap>
-                <ButtonGroup
+                            {node.ip}
-                    disableElevation
+                        </Typography>
-                    variant="outlined"
+                    </Box>
-                    aria-label="Disabled button group"
+                    
-                >
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <Button onClick={() => disconnect({ip: node.ip})} color="secondary" >Disconnect</Button>
+                        <SignalCellularAltIcon color="action" fontSize="small" />
-                    <Button onClick={() => connect({ip: node.ip})}>Connect</Button>
+                        <Typography variant="body2" color="text.secondary">
-                </ButtonGroup>
+                            Traffic Load:
-            </ListItem>
+                        </Typography>
+                        <Chip 
+                            label={node.traffic} 
+                            size="small" 
+                            color={node.traffic > 5 ? "warning" : "success"} 
+                            variant="outlined" 
+                        />
+                    </Box>
+                </CardContent>
+                <CardActions sx={{ justifyContent: 'flex-end', p: 2, pt: 0 }}>
+                    <ButtonGroup
+                        disableElevation
+                        variant="contained"
+                        size="small"
+                    >
+                        <Button 
+                            onClick={() => disconnect({ip: node.ip})} 
+                            color="error" 
+                            variant="outlined"
+                        >
+                            Disconnect
+                        </Button>
+                        <Button 
+                            onClick={() => connect({ip: node.ip})}
+                            color="primary"
+                        >
+                            Connect
+                        </Button>
+                    </ButtonGroup>
+                </CardActions>
+            </Card>
         </Grid>
     );
 }
@@ -60,12 +87,15 @@ export default function FolderList() {
     const [nodes, setNodes] = React.useState([{ip: "57.158.82.48", traffic: 5},{ip: "10.0.0.3", traffic: 3},{ip: "10.0.0.4", traffic: 7}]);
 
     return (
-    <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
+        <Box sx={{ flexGrow: 1, p: 3 }}>
-        <Grid container spacing={2}>
+            <Typography variant="h4" gutterBottom component="div" sx={{ mb: 4, fontWeight: 'bold' }}>
-            {nodes.map((node, index) => (
+                Available Servers
-                <NodeItem key={index} node={node} />
+            </Typography>
-            ))}
+            <Grid container spacing={3}>
-        </Grid>
+                {nodes.map((node, index) => (
-    </List>
+                    <NodeItem key={index} node={node} />
+                ))}
+            </Grid>
+        </Box>
     );
 }

package-lock.json

@@ -60,6 +60,7 @@
       "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.5",
@@ -565,6 +566,7 @@
       "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
       "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -608,6 +610,7 @@
       "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
       "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.13.5",
@@ -1206,6 +1209,7 @@
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.5.tgz",
       "integrity": "sha512-8VVxFmp1GIm9PpmnQoCoYo0UWHoOrdA57tDL62vkpzEgvb/d71Wsbv4FRg7r1Gyx7PuSo0tflH34cdl/NvfHNQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.28.4",
         "@mui/core-downloads-tracker": "^7.3.5",
@@ -1594,6 +1598,7 @@
       "resolved": "https://registry.npmjs.org/@react-router/serve/-/serve-7.9.6.tgz",
       "integrity": "sha512-qIT8hp1RJ0VAHyXpfuwoO31b9evrjPLRhUugqYJ7BZLpyAwhRsJIaQvvj60yZwWBMF2/3LdZu7M39rf0FhL6Iw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@mjackson/node-fetch-server": "^0.2.0",
         "@react-router/express": "7.9.6",
@@ -2214,6 +2219,7 @@
       "integrity": "sha512-LCCV0HdSZZZb34qifBsyWlUmok6W7ouER+oQIGBScS8EsZsQbrtFTUrDX4hOl+CS6p7cnNC4td+qrSVGSCTUfQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -2235,6 +2241,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.6.tgz",
       "integrity": "sha512-p/jUvulfgU7oKtj6Xpk8cA2Y1xKTtICGpJYeJXz2YVO2UcvjQgeRMLDGfDeqeRW2Ta+0QNFwcc8X3GH8SxZz6w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2488,6 +2495,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.25",
         "caniuse-lite": "^1.0.30001754",
@@ -3126,6 +3134,7 @@
       "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
       "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
@@ -4456,6 +4465,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -4619,6 +4629,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4628,6 +4639,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
       "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -4656,6 +4668,7 @@
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.6.tgz",
       "integrity": "sha512-Y1tUp8clYRXpfPITyuifmSoE2vncSME18uVLgaqyxh9H35JWpIfzHo+9y3Fzh5odk/jxPW29IgLgzcdwxGqyNA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cookie": "^1.0.1",
         "set-cookie-parser": "^2.6.0"
@@ -5304,6 +5317,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -5419,6 +5433,7 @@
       "integrity": "sha512-NL8jTlbo0Tn4dUEXEsUg8KeyG/Lkmc4Fnzb8JXN/Ykm9G4HNImjtABMJgkQoVjOBN/j2WAwDTRytdqJbZsah7w==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",