feat(table): improve player name visualization

guilhermebkel · Mar 24, 2024 · 6de9ab9 · 6de9ab9
1 parent 3ed3e48
commit 6de9ab9
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 4 deletions.
diff --git a/packages/unoenty/src/pages/Table/CardDeck/index.tsx b/packages/unoenty/src/pages/Table/CardDeck/index.tsx
@@ -139,7 +139,7 @@ const CardDeck: React.FC<CardDeckProps> = (props) => {
 	const socket = useSocket()
 	const classes = useStyles()
 	const customClasses = useCustomStyles({
-		limitedNameWidth: 70,
+		limitedNameWidth: 120,
 		avatarTimerRemainingPercentage: buildPercentage(
 			socketStore.gameRoundRemainingTimeInSeconds as number,
 			socketStore.game?.maxRoundDurationInSeconds as number,
@@ -330,7 +330,7 @@ const CardDeck: React.FC<CardDeckProps> = (props) => {
 					<Grid item>
 						<Typography
 							variant="h3"
-							className={`${classes.title} ${customClasses.limitedName}`}
+							className={`${classes.playerName} ${customClasses.limitedName}`}
 						>
 							{player?.name}
 						</Typography>

diff --git a/packages/unoenty/src/pages/Table/CardDeck/styles.tsx b/packages/unoenty/src/pages/Table/CardDeck/styles.tsx
@@ -69,7 +69,8 @@ const useStyles = makeStyles((theme) => ({
 		color: colors.grayScale[12],
 		fontWeight: "lighter",
 	},
-	title: {
+	playerName: {
+		fontSize: 16,
 		fontWeight: "bold",
 		color: colors.grayScale[13],
 	},

diff --git a/packages/unoenty/src/pages/Table/CardDeckPlaceholder/index.tsx b/packages/unoenty/src/pages/Table/CardDeckPlaceholder/index.tsx
@@ -102,7 +102,7 @@ const CardDeckPlaceholder: React.FC<CardDeckPlaceholderProps> = (props) => {
 	const positionStyles = cardDeckPlaceholderPositionStylesMap[position]
 
 	const customClasses = useCustomStyles({
-		limitedNameWidth: 50,
+		limitedNameWidth: 80,
 		avatarTimerRemainingPercentage: buildPercentage(
 			socketStore.gameRoundRemainingTimeInSeconds as number,
 			socketStore.game?.maxRoundDurationInSeconds as number,

diff --git a/packages/unoenty/src/pages/Table/CardDeckPlaceholder/styles.tsx b/packages/unoenty/src/pages/Table/CardDeckPlaceholder/styles.tsx
@@ -92,6 +92,7 @@ const useStyles = makeStyles((theme) => ({
 		opacity: (props: UseStylesProps) => `${props.isCurrentRoundPlayer ? 1 : 0.5}`,
 	},
 	playerName: {
+		fontSize: 14,
 		fontWeight: "bold",
 		color: (props: UseStylesProps) => `${props.isCurrentRoundPlayer ? colors.palette.yellow1 : colors.grayScale[12]}`,
 		marginBottom: theme.spacing(1),