Improving House Rules UX

client/src/App.tsx

@@ -26,6 +26,7 @@ import { assetsPath } from "./Common";
 // history replaced by react-router's useNavigate
 import "./App.css";
 import equal from "fast-deep-equal";
+import { Box } from "@mui/material";
 
 type AudioEffect = HTMLAudioElement & { hasPlayed?: boolean };
 const audioEffects: Record<string, AudioEffect | undefined> = {};
@@ -407,7 +408,7 @@ const Table: React.FC = () => {
           )}
         </div>
         <div className="Game">
-          <div className="Dialogs">
+          <Box className="Dialogs">
             {error && (
               <div className="Dialog ErrorDialog">
                 <Paper className="Error">
@@ -454,11 +455,15 @@ const Table: React.FC = () => {
             {state === "normal" && <SelectPlayer />}
             {color && state === "game-order" && <GameOrder />}
 
-            {!winnerDismissed && <Winner {...{ winnerDismissed, setWinnerDismissed }} />}
-            {houseRulesActive && <HouseRules {...{ houseRulesActive, setHouseRulesActive }} />}
+            {!winnerDismissed && (
+              <Winner {...{ winnerDismissed, setWinnerDismissed }} />
+            )}
+            {houseRulesActive && (
+              <HouseRules {...{ houseRulesActive, setHouseRulesActive }} />
+            )}
             <ViewCard {...{ cardActive, setCardActive }} />
             <ChooseCard />
-          </div>
+          </Box>
 
           <Board animations={animations} />
           <PlayersStatus active={false} />
@@ -489,7 +494,9 @@ const Table: React.FC = () => {
                 min="0"
                 max="100"
                 onInput={(e) => {
-                  const alpha = parseFloat((e.currentTarget as HTMLInputElement).value) / 100;
+                  const alpha =
+                    parseFloat((e.currentTarget as HTMLInputElement).value) /
+                    100;
 
                   localStorage.setItem("volume", alpha.toString());
                   setVolume(alpha);
@@ -516,13 +523,25 @@ const Table: React.FC = () => {
               tradeActive: boolean;
               setTradeActive: (v: boolean) => void;
             }>;
-            return <TradeComponent tradeActive={tradeActive} setTradeActive={setTradeActive} />;
+            return (
+              <TradeComponent
+                tradeActive={tradeActive}
+                setTradeActive={setTradeActive}
+              />
+            );
           })()}
           {name !== "" && <Chat />}
           {/* name !== "" && <VideoFeeds/> */}
           {loaded && (
             <Actions
-              {...{ buildActive, setBuildActive, tradeActive, setTradeActive, houseRulesActive, setHouseRulesActive }}
+              {...{
+                buildActive,
+                setBuildActive,
+                tradeActive,
+                setTradeActive,
+                houseRulesActive,
+                setHouseRulesActive,
+              }}
             />
           )}
         </div>

client/src/HouseRules.tsx

@@ -11,6 +11,10 @@ import equal from "fast-deep-equal";
 import Paper from "@mui/material/Paper";
 import Button from "@mui/material/Button";
 import Switch from "@mui/material/Switch";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
 
 // import "./HouseRules.css";
 
@@ -396,18 +400,10 @@ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive }) => {
   }
 
   return (
-    <Paper
-      className="HouseRules"
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center",
-        alignItems: "center",
-        maxHeight: "100dvh",
-        overflow: "hidden",
-      }}
-    >
-      <Box className="Title">House Rules</Box>
+    <Paper sx={{ p: 1, maxWidth: 600, margin: "1rem auto", flexDirection: "column", display: "flex" }} className="HouseRules" elevation={3}>
+    
+      <DialogTitle>House Rules</DialogTitle>
+      <DialogContent>
         <Box sx={{ display: "flex", flexDirection: "column" }}>
           {ruleList.map((item) => {
             const defaultChecked = item.defaultChecked;
@@ -441,7 +437,10 @@ const HouseRules: React.FC<HouseRulesProps> = ({ houseRulesActive }) => {
             );
           })}
         </Box>
+      </DialogContent>
+      <DialogActions>
         <Button onClick={dismissClicked}>Close</Button>
+      </DialogActions>
     </Paper>
   );
 };