+

Made everything look way better.

frontend/src/pages/games.css

@@ -19,3 +19,92 @@
 .bar-fg-blue {
   background-color: blue;
 }
+
+.gender-icon {
+  background: linear-gradient(
+    45deg,
+    #FF69B4 0%,    /* Pink */
+    #8A2BE2 50%,   /* Purple */
+    #4169E1 100%   /* Blue */
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  display: inline-block; /* Ensure icon remains visible */
+}
+
+.rarity-1 {
+  color: #9d9d9d !important;
+  border: 4px solid #9d9d9d;
+}
+
+.rarity-2 {
+  color: #ffffff !important;
+  border: 4px solid #ffffff;
+}
+
+.rarity-3 {
+  color: #15ff00 !important;
+  border: 4px solid #1eff00;
+}
+
+.rarity-4 {
+  color: #0070dd !important;
+  border: 4px solid #0070dd;
+}
+
+.rarity-5 {
+  color: #a335ee !important;
+  border: 4px solid #a335ee;
+}
+
+.rarity-6 {
+  color: #ff8000 !important;
+  border: 4px solid #ff8000;
+}
+
+.rarity-7 {
+  color: #fa0101 !important;
+  border: 4px solid #fa0101;
+}
+
+
+.rarity-image {
+  border-radius: 3px;
+}
+
+.rarity-name-1 {
+  color: #9d9d9d !important;
+  font-weight: bold !important;
+}
+
+.rarity-name-2 {
+  color: #ffffff !important;
+  font-weight: bold !important;
+}
+
+.rarity-name-3 {
+  color: #15ff00 !important;
+  font-weight: bold !important;
+}
+
+.rarity-name-4 {
+  color: #0070dd !important;
+  font-weight: bold !important;
+}
+
+.rarity-name-5 {
+  color: #a335ee !important;
+  font-weight: bold !important;
+}
+
+.rarity-name-6 {
+  color: #ff8000 !important;
+  font-weight: bold !important;
+}
+
+.rarity-name-7 {
+  color: #fa0101 !important;
+  font-weight: bold !important;
+}

frontend/src/pages/games.jsx

@@ -10,6 +10,8 @@ import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import PetsIcon from '@mui/icons-material/Pets';
 import WcIcon from '@mui/icons-material/Wc';
 import WorkIcon from '@mui/icons-material/Work';
+import HeartIcon from '@mui/icons-material/Favorite';
+import WaterDropIcon from '@mui/icons-material/WaterDrop';
 
 import defaultCharacterImage from '../assets/default-character.png';
 import defaultItemImage from '../assets/default-item.png';
@@ -90,7 +92,12 @@ const GamesPage = () => {
         <Typography variant="h4" sx={{ mb: 4 }}>No Character Found</Typography>
         <Button
           variant="contained"
-          sx={{ backgroundColor: '#764ACB', '&:hover': { backgroundColor: '#5e3aa2' } }}
+          sx={{ 
+            backgroundColor: '#764ACB', 
+            '&:hover': { 
+              backgroundColor: '#9865f7' 
+            } 
+          }}
           component={Link}
           to="/create-character"
         >
@@ -101,12 +108,12 @@ const GamesPage = () => {
   }
 
   return (
-    <Box sx={{ p: 3, color: '#fff' }}>
+    <Box sx={{ p: 3, background: 'rgba(30, 30, 47, 0.9)', borderRadius: '8px', marginTop: '40px' }}>
       <Grid2 container spacing={3}>
         {/* Character Image and Details */}
         <Grid2 item xs={12} md={4}>
-          <Box sx={{ border: '1px solid #444', borderRadius: '3px', p: 2, backgroundColor: '#2e2e3f' }}>
-            <Card sx={{ width: '100%', backgroundColor: '#1e1e2f', color: '#fff' }}>
+          <Box sx={{ border: '1px solid #444', borderRadius: '3px', p: 2, backgroundColor: '#2e2e3f'}}>
+            <Card sx={{ width: '100%', backgroundColor: '#1e1e2f', color: '#fff', height: '635px' }}>
               <CardMedia
                 component="img"
                 height="300"
@@ -116,11 +123,11 @@ const GamesPage = () => {
               />
               <CardContent>
                 <Typography variant="h4" sx={{ mb: 4, color: '#fff' }}>{character.CharName}</Typography>
-                <Typography variant="h5"><PaidIcon sx={{color: 'gold'}}/> <strong>Gold:</strong> {character.Gold}</Typography>
-                <Typography variant="h5"><CalendarTodayIcon sx={{}}/> <strong>Age:</strong> {character.Age}</Typography>
-                <Typography variant="h5"><PetsIcon sx={{}}/> <strong>Race:</strong> {character.Race}</Typography>
-                <Typography variant="h5"><WcIcon sx={{}}/> <strong>Sex:</strong> {character.Sex}</Typography>
-                <Typography variant="h5"><WorkIcon sx={{}}/> <strong>Job:</strong> {character.Job}</Typography>
+                <Typography variant="h5"><PaidIcon sx={{ color: 'gold' }} /> <strong>Gold:</strong> {character.Gold}</Typography>
+                <Typography variant="h5"><CalendarTodayIcon sx={{ color: '#C0C0C0' }} /> <strong>Age:</strong> {character.Age}</Typography>
+                <Typography variant="h5"><PetsIcon sx={{ color: '#8B4513' }} /> <strong>Race:</strong> {character.Race}</Typography>
+                <Typography variant="h5"><WcIcon className="gender-icon" sx={{ fontSize: 'inherit' }} /> <strong>Sex:</strong> {character.Sex}</Typography>
+                <Typography variant="h5"><WorkIcon sx={{ color: '#CD7F32' }} /> <strong>Job:</strong> {character.Job}</Typography>
               </CardContent>
             </Card>
           </Box>
@@ -131,6 +138,7 @@ const GamesPage = () => {
           <Box sx={{ display: 'flex', gap: 2, mb: 4, width: '885px' }}>
             <Box sx={{ flex: 1, backgroundColor: '#2e2e3f', borderRadius: '8px', p: 2, border: '1px solid #444' }}>
               <Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between', color: '#fff' }}>
+                <HeartIcon sx={{color: "red"}}/>
                 <span>Health</span>
                 <span>{character.currentHealth}/{character.maxHealth}</span>
               </Typography>
@@ -143,6 +151,7 @@ const GamesPage = () => {
             </Box>
             <Box sx={{ flex: 1, backgroundColor: '#2e2e3f', borderRadius: '8px', p: 2, border: '1px solid #444' }}>
               <Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between', color: '#fff' }}>
+                <WaterDropIcon sx={{color: 'blue'}}/>
                 <span>Mana</span>
                 <span>{character.currentMana}/{character.maxMana}</span>
               </Typography>
@@ -159,7 +168,20 @@ const GamesPage = () => {
           <Box sx={{ mb: 4 }}>
             <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
               <Typography variant="h5" sx={{ color: '#fff', mr: 1 }}>Description</Typography>
-              <IconButton onClick={handleEditOpen} sx={{ marginLeft: '10px', color: '#fff', backgroundColor: '#764ACB', borderRadius: '4px', p: 1, width: '50px' }}>
+              <IconButton 
+                onClick={handleEditOpen} 
+                sx={{ 
+                  marginLeft: '10px', 
+                  color: '#fff', 
+                  backgroundColor: '#764ACB', 
+                  borderRadius: '4px', 
+                  p: 1, 
+                  width: '50px',
+                  '&:hover': {
+                    backgroundColor: '#9865f7'
+                  }
+                }}
+              >
                 <EditIcon />
               </IconButton>
             </Box>
@@ -193,16 +215,35 @@ const GamesPage = () => {
               {inventory.map((item, index) => (
                 <Grid2 item xs={12} sm={4} md={2} key={index}>
                   <Card sx={{ backgroundColor: '#1e1e2f', color: '#fff' }}>
+                    <Box sx={{
+                      display: 'flex',
+                      justifyContent: 'center',
+                      alignItems: 'center',
+                      padding: '8px'
+                    }}>
                       <CardMedia
                         component="img"
                         height="128px"
+                        width="128px"
                         image={item.Img || defaultItemImage}
                         alt={item.ItemName}
-                      sx={{ borderRadius: '3px' }}
+                        className={`rarity-${item.Rarity} rarity-image`}
+                        sx={{
+                          objectFit: 'contain',
+                          width: '128px'
+                        }}
                       />
+                    </Box>
                     <CardContent>
-                      <Typography variant="h6" color="#fff">{item.ItemName}</Typography>
-                      <Typography variant="body2" color="#fff">Value: {item.GoldValue}</Typography>
+                      <Typography
+                        variant="h6"
+                        className={`rarity-name-${item.Rarity}`}
+                      >
+                        {item.ItemName}
+                      </Typography>
+                      <Typography variant="body2" color="#fff">
+                        Value: {item.GoldValue}
+                      </Typography>
                     </CardContent>
                   </Card>
                 </Grid2>
@@ -254,8 +295,28 @@ const GamesPage = () => {
           />
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleEditClose}>Cancel</Button>
-          <Button onClick={handleSaveDescription}>Save</Button>
+          <Button 
+            onClick={handleEditClose}
+            sx={{
+              color: '#fff',
+              '&:hover': {
+                backgroundColor: '#9865f7'
+              }
+            }}
+          >
+            Cancel
+          </Button>
+          <Button 
+            onClick={handleSaveDescription}
+            sx={{
+              color: '#fff',
+              '&:hover': {
+                backgroundColor: '#9865f7'
+              }
+            }}
+          >
+            Save
+          </Button>
         </DialogActions>
       </Dialog>
     </Box>