profile-ui-to-mui

client/package.json

@@ -39,22 +39,21 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@flaticon/flaticon-uicons": "^3.3.1",
-    "@mui/icons-material": "^7.2.0",
-    "@mui/material": "^7.2.0",
+    "@mui/icons-material": "^7.3.4",
     "@tailwindcss/vite": "^4.1.12",
     "axios": "^1.8.1",
     "firebase": "^11.4.0",
     "framer-motion": "^12.4.7",
     "jotai": "^2.13.1",
-    "react": "^19.1.1",
+    "react": "^19.2.0",
     "react-dom": "^19.1.1",
-    "react-router-dom": "^7.2.0",
+    "react-router-dom": "^7.9.4",
     "tailwindcss": "^4.1.12"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "@vitejs/plugin-react-swc": "^4.0.0",
     "eslint": "^9.33.0",
     "eslint-plugin-react-hooks": "^5.2.0",

client/src/modules/404/index.tsx

@@ -33,4 +33,4 @@ const PageNotFound = () => {
   );
 };
 
-export default PageNotFound;
+export default PageNotFound;

client/src/modules/profile/components/aboutUser.tsx

@@ -1,46 +1,82 @@
-import { Link } from 'react-router-dom';
-import { getFullDay } from '../../../shared/utils/date';
+import React from "react";
+import { Link as RouterLink } from "react-router-dom";
+import { Box, Typography, Link, Stack, IconButton, useTheme } from "@mui/material";
+import { getFullDay } from "../../../shared/utils/date";
 
-const AboutUser = ({
-  className,
-  bio,
-  social_links,
-  joinedAt,
-}: {
+interface AboutUserProps {
   className?: string;
   bio: string;
   social_links: Record<string, string>;
   joinedAt: string;
-}) => {
+}
+
+const AboutUser: React.FC<AboutUserProps> = ({ className = "", bio, social_links, joinedAt }) => {
+  const theme = useTheme();
+
   return (
-    <div className={'md:w-[90%] md:mt-7 ' + className}>
-      <p className="text-xl leading-7">
-        {bio.length ? bio : 'Nothing to read here'}
-      </p>
+    <Box
+      className={className}
+      sx={{
+        width: { md: "90%" },
+        mt: { md: 7 },
+      }}
+    >
+      {/* Bio Section */}
+      <Typography variant="body1" sx={{ fontSize: "1.25rem", lineHeight: 1.7 }}>
+        {bio?.length ? bio : "Nothing to read here"}
+      </Typography>
 
-      <div className="flex gap-x-7 gap-y-2 flex-wrap my-7 items-center text-gray-700">
-        {Object.keys(social_links).map(key => {
+      {/* Social Links */}
+      <Stack
+        direction="row"
+        spacing={3}
+        flexWrap="wrap"
+        alignItems="center"
+        sx={{
+          my: 4,
+          color: theme.palette.text.secondary,
+        }}
+      >
+        {Object.keys(social_links).map((key) => {
           const link = social_links[key];
-          return link ? (
-            <Link to={link} key={key} target="_blank">
-              <i
-                className={
-                  'fi ' +
-                  (key !== 'website' ? 'fi-brands-' + key : 'fi-rr-globe') +
-                  ' text-2xl text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white transition-colors'
-                }
-              ></i>
+          if (!link) return null;
+
+          return (
+            <Link
+              component={RouterLink}
+              to={link}
+              key={key}
+              target="_blank"
+              rel="noopener noreferrer"
+              underline="none"
+            >
+              <IconButton
+                sx={{
+                  color: "text.secondary",
+                  transition: "color 0.2s",
+                  "&:hover": {
+                    color: "text.primary",
+                  },
+                }}
+              >
+                <i
+                  className={
+                    "fi " +
+                    (key !== "website" ? "fi-brands-" + key : "fi-rr-globe")
+                  }
+                  style={{ fontSize: "1.5rem" }}
+                />
+              </IconButton>
             </Link>
-          ) : (
-            ''
           );
         })}
-      </div>
+      </Stack>
 
-      <p className="text-xl leading-7 text-gray-500">
+      {/* Joined Date */}
+      <Typography variant="body1" sx={{ fontSize: "1.25rem", color: "text.secondary" }}>
         Joined on {getFullDay(joinedAt)}
-      </p>
-    </div>
+      </Typography>
+    </Box>
   );
 };