Remove margin on Scoreboard, move correction checkbox to within Playe…

…r component
Digital-Defiance · Oct 17, 2024 · 19d7f04 · 19d7f04
1 parent ed1de1c
commit 19d7f04
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/src/components/Player.tsx b/src/components/Player.tsx
@@ -17,8 +17,9 @@ import { FailedAddLogEntryError } from '@/game/errors/failed-add-log';
 import theme from '@/components/theme';
 
 const StyledPaper = styled(Paper)(({ theme }) => ({
-  padding: 5,
+  padding: theme.spacing(2),
   margin: theme.spacing(2),
+  position: 'relative',
 }));
 
 const ColumnBox = styled(Box)({
@@ -35,6 +36,14 @@ const CenteredTitle = styled(Box)({
   marginBottom: 2,
 });
 
+const CorrectionCheckbox = styled(Box)({
+  position: 'absolute',
+  top: 8,
+  right: 8,
+  display: 'flex',
+  alignItems: 'center',
+});
+
 interface PlayerProps {
   addLogEntry: (
     playerIndex: number,
@@ -177,6 +186,14 @@ const Player: React.FC<PlayerProps> = ({ addLogEntry }) => {
           <SettingsIcon />
         </IconButton>
       </Box>
+      <Box position="absolute" bottom={10} left={30} display="flex" alignItems="center">
+        <Checkbox
+          checked={isCorrection}
+          onChange={handleCorrectionChange}
+          inputProps={{ 'aria-label': 'Correction Checkbox' }}
+        />
+        <Typography variant="body2">Correction</Typography>
+      </Box>
       {player && (
         <Box display="flex" flexWrap="wrap">
           <ColumnBox>
@@ -375,14 +392,6 @@ const Player: React.FC<PlayerProps> = ({ addLogEntry }) => {
           />
         </Box>
       </Popover>
-      <Box position="absolute" bottom={10} left={30} display="flex" alignItems="center">
-        <Checkbox
-          checked={isCorrection}
-          onChange={handleCorrectionChange}
-          inputProps={{ 'aria-label': 'Correction Checkbox' }}
-        />
-        <Typography variant="body2">Correction</Typography>
-      </Box>
     </StyledPaper>
   );
 };

diff --git a/src/components/Scoreboard.tsx b/src/components/Scoreboard.tsx
@@ -50,7 +50,7 @@ const Scoreboard: React.FC = () => {
   };
 
   return (
-    <Paper elevation={3} sx={{ padding: 0, maxWidth: 600, margin: 'auto' }}>
+    <Paper elevation={3} sx={{ padding: 0, maxWidth: 600 }}>
       <TableContainer>
         <Table>
           <TableHead>