fix: adjust dark mode UI colors and borders for elevated containers

Author: pawanakapkv

src/context/ThemeContext.tsx

@@ -32,7 +32,19 @@ const ThemeWrapper = ({ children }: { children: ReactNode }) => {
   };
 
   const muiTheme: Theme = useMemo(
-    () => createTheme({ palette: { mode } }),
+    () =>
+      createTheme({
+        palette: {
+          mode,
+          ...(mode === 'dark' && {
+            background: {
+              default: '#1f2937', // Tailwind gray-800
+              paper: '#374151',   // Tailwind gray-700 for natural elevation
+            },
+            divider: 'rgba(255, 255, 255, 0.12)', // Subtle border
+          }),
+        },
+      }),
     [mode]
   );
 

src/pages/Contributors/Contributors.tsx

@@ -78,14 +78,14 @@ const ContributorsPage = () => {
                     textAlign: "center",
                     p: 2,
                     borderRadius: "10px",
-                    border: "1px solid #E0E0E0",
+                    border: 1,
+                    borderColor: "divider",
                     boxShadow: "0 4px 10px rgba(0,0,0,0.1)",
-                    transition: "transform 0.3s ease-in-out",
+                    transition: "transform 0.3s ease-in-out, border-color 0.3s",
                     "&:hover": {
                       transform: "scale(1.05)",
                       boxShadow: "0 8px 15px rgba(0,0,0,0.2)",
-                      borderColor: "#C0C0C0",
-                      outlineColor: "#B3B3B3",
+                      borderColor: "text.disabled",
                     },
                   }}
                 >

src/pages/Tracker/Tracker.tsx

@@ -166,7 +166,7 @@ const Home: React.FC = () => {
   return (
     <Container maxWidth="lg" sx={{ mt: 4, minHeight: "80vh", color: theme.palette.text.primary }}>
       {/* Auth Form */}
-      <Paper elevation={1} sx={{ p: 2, mb: 4, backgroundColor: theme.palette.background.paper }}>
+      <Paper elevation={1} sx={{ p: 2, mb: 4, backgroundColor: theme.palette.background.paper, border: 1, borderColor: "divider" }}>
         <form onSubmit={handleSubmit}>
           <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
             <TextField
@@ -299,7 +299,7 @@ const Home: React.FC = () => {
 
       {loading ? (
   <Box sx={{ maxHeight: "400px", overflowY: "auto" }}>
-    <TableContainer component={Paper}>
+    <TableContainer component={Paper} sx={{ border: 1, borderColor: "divider" }}>
       <Table size="small">
         <TableHead>
           <TableRow>
@@ -341,6 +341,8 @@ const Home: React.FC = () => {
       p: 4,
       textAlign: "center",
       backgroundColor: theme.palette.background.paper,
+      border: 1,
+      borderColor: "divider",
     }}
   >
     <Typography variant="h6" gutterBottom>
@@ -355,7 +357,7 @@ const Home: React.FC = () => {
 
   <Box sx={{ maxHeight: "400px", overflowY: "auto" }}>
 
-          <TableContainer component={Paper}>
+          <TableContainer component={Paper} sx={{ border: 1, borderColor: "divider" }}>
 
             <Table size="small">