UI enhancements on buttons

daithihearn · Jul 9, 2023 · f71d5cf · f71d5cf
1 parent d993554
commit f71d5cf
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 16 deletions.
diff --git a/src/components/Game/Actions/PlayCard.tsx b/src/components/Game/Actions/PlayCard.tsx
@@ -42,7 +42,7 @@ const PlayCard = () => {
     )
 
     const AutoPlayDropdown = () => (
-        <FormControl variant="filled" sx={{ m: 1, minWidth: 120 }}>
+        <FormControl variant="filled" sx={{ minWidth: 90 }}>
             <InputLabel id="autoplay-select-label">Autoplay</InputLabel>
             <Select
                 labelId="autoplay-select-label"
@@ -68,16 +68,6 @@ const PlayCard = () => {
         </FormControl>
     )
 
-    const PlayCardButton = () => (
-        <Button
-            id="playCardButton"
-            type="button"
-            onClick={selectCardToPlay}
-            color="warning">
-            <b>Play</b>
-        </Button>
-    )
-
     const playButtonEnabled = useMemo(
         () =>
             isMyGo &&
@@ -90,6 +80,17 @@ const PlayCard = () => {
         [isMyGo, round, myCards],
     )
 
+    const PlayCardButton = () => (
+        <Button
+            id="playCardButton"
+            type="button"
+            disabled={!playButtonEnabled}
+            onClick={selectCardToPlay}
+            color="warning">
+            <b>Play Card</b>
+        </Button>
+    )
+
     const playCard = useCallback(
         (card: string) =>
             dispatch(GameService.playCard(gameId!, card)).catch(e => {
@@ -121,7 +122,7 @@ const PlayCard = () => {
 
     return (
         <ButtonGroup disableElevation variant="contained" size="large">
-            {playButtonEnabled && <PlayCardButton />}
+            <PlayCardButton />
             <AutoPlayDropdown />
         </ButtonGroup>
     )

diff --git a/src/pages/Game/_game.scss b/src/pages/Game/_game.scss
@@ -169,10 +169,6 @@
     padding-left: 5px;
 }
 
-#playCardButton:disabled {
-    display: none;
-}
-
 @media (min-width: 576px) {
 
     .modal-dialog {