Merge pull request #173 from daithihearn/ui-enhancements-3

UI enhancements 3
daithihearn · Jul 5, 2023 · ee0bacf · ee0bacf
2 parents aa33fb5 + fc89e1c
commit ee0bacf
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "frontend",
-    "version": "7.2.0",
+    "version": "7.2.1",
     "description": "React frontend for the Cards 110",
     "author": "Daithi Hearn",
     "license": "MIT",

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,7 +1,7 @@
 {
   "short_name": "Cards 110",
   "name": "Cards 110",
-  "version": "7.2.0",
+  "version": "7.2.1",
   "icons": [
     {
       "src": "./assets/favicon.png",

diff --git a/src/components/Game/PlayerCard.tsx b/src/components/Game/PlayerCard.tsx
@@ -10,6 +10,7 @@ import {
     Stack,
     Box,
     useTheme,
+    CardHeader,
 } from "@mui/material"
 import { styled } from "@mui/system"
 import { getRound } from "caches/GameSlice"
@@ -21,6 +22,7 @@ import { Player } from "model/Player"
 import Leaderboard from "components/Leaderboard/Leaderboard"
 import { Suit } from "model/Suit"
 import { RoundStatus } from "model/Round"
+import { FormatName } from "utils/FormattingUtils"
 
 interface PlayerRowI {
     player: Player
@@ -214,6 +216,15 @@ const PlayerCard: React.FC<PlayerRowI> = ({ player, className }) => {
                 isCurrentPlayer ? "highlight-player-" + theme.palette.mode : ""
             }>
             <Card className="no-shadow">
+                <CardContent className="player-name-container">
+                    <Typography
+                        variant="h4"
+                        component="h4"
+                        className="score-text bg-dark text-light">
+                        {FormatName(profile.name, 7)}
+                    </Typography>
+                </CardContent>
+
                 <CardMedia
                     image={profile.picture}
                     onClick={toggleLeaderboardModal}

diff --git a/src/components/Header/NavBar.tsx b/src/components/Header/NavBar.tsx
@@ -105,7 +105,7 @@ const NavBar = () => {
                                 edge="start"
                                 color="inherit"
                                 onClick={navigateHome}>
-                                <HomeButton />
+                                <HomeButton fontSize="large" />
                             </IconButton>
                         </Grid>
 
@@ -115,7 +115,7 @@ const NavBar = () => {
                                     edge="end"
                                     color="inherit"
                                     onClick={handleClick}>
-                                    <MenuButton />
+                                    <MenuButton fontSize="large" />
                                 </IconButton>
                                 <Menu
                                     anchorEl={anchorEl}

diff --git a/src/components/MyGames/MyGames.tsx b/src/components/MyGames/MyGames.tsx
@@ -78,9 +78,15 @@ const MyGames = () => {
                                             cursor: "pointer",
                                         }}>
                                         {isGameActive(row) ? (
-                                            <PlayIcon />
+                                            <PlayIcon
+                                                fontSize="large"
+                                                aria-label="Play Game"
+                                            />
                                         ) : (
-                                            <VisibilityIcon />
+                                            <VisibilityIcon
+                                                fontSize="large"
+                                                aria-label="View Game"
+                                            />
                                         )}
                                     </ListItemIcon>
 
@@ -98,10 +104,10 @@ const MyGames = () => {
 
                                     <ListItemSecondaryAction>
                                         {isWinner(row, myProfile.id!) && (
-                                            <VictoryIcon />
+                                            <VictoryIcon fontSize="large" />
                                         )}
                                         {isLoser(row, myProfile.id!) && (
-                                            <FailureIcon />
+                                            <FailureIcon fontSize="large" />
                                         )}
                                     </ListItemSecondaryAction>
                                 </ListItem>

diff --git a/src/pages/Game/_game.scss b/src/pages/Game/_game.scss
@@ -54,9 +54,14 @@
     border-radius: 16%;
 }
 
+.player-name-container {
+    padding-top: 0.2em !important;
+    padding-bottom: 0.2em !important;
+}
+
 .player-score-container {
-    padding-top: 0.25em;
-    padding-bottom: 0.25em;
+    padding-top: 0.5em !important;
+    padding-bottom: 0.5em !important;
 }
 
 .no-shadow {
@@ -178,7 +183,7 @@
 @media (max-width: 420px) {
 
     .player-score-container {
-        padding: 10px 0px 10px 0px !important;
+        padding: 2px 0px 2px 0px !important;
 
     }
 

diff --git a/src/utils/FormattingUtils.ts b/src/utils/FormattingUtils.ts
@@ -1,6 +1,6 @@
 const MAX_LENGTH = 20
 
-export const FormatName = (name: string) =>
+export const FormatName = (name: string, maxLength?: number) =>
     name
         .split("@")[0]
         .split(RegExp("[ .,]+"))
@@ -11,4 +11,4 @@ export const FormatName = (name: string) =>
                   word.slice(1).toLocaleLowerCase(),
         )
         .join(" ")
-        .substring(0, MAX_LENGTH)
+        .substring(0, maxLength ?? MAX_LENGTH)