From 8ef793320f5a7ff67966c194f33f52a001083b3b Mon Sep 17 00:00:00 2001
From: Christopher Humphries <engleek@gmail.com>
Date: Sat, 14 Jan 2023 14:45:51 +0100
Subject: [PATCH 1/2] fix: move action buttons and site into game header

---
 app/routes/game.$id.jsx | 131 +++++++++++++++++++++++-----------------
 1 file changed, 76 insertions(+), 55 deletions(-)

diff --git a/app/routes/game.$id.jsx b/app/routes/game.$id.jsx
index e75dea8..ebdc61c 100644
--- a/app/routes/game.$id.jsx
+++ b/app/routes/game.$id.jsx
@@ -18,18 +18,25 @@ import {
   useDisclosure,
   IconButton,
   Tag,
-  useColorModeValue,
   Link as ChakraLink,
   List,
   ListItem,
   chakra,
   Flex,
+  Menu,
+  MenuButton,
+  MenuList,
+  MenuItem,
+  MenuDivider,
+  useColorModeValue,
 } from '@chakra-ui/react';
 import {
   AddIcon,
   DeleteIcon,
   EditIcon,
   ExternalLinkIcon,
+  HamburgerIcon,
+  TimeIcon,
 } from '@chakra-ui/icons';
 import { json } from '@remix-run/node';
 import { Form, Link, useFetcher, useLoaderData } from '@remix-run/react';
@@ -188,34 +195,54 @@ const Game = () => {
     <>
       <Box mb={5} pl={5} pr={5} mt={5}>
         <Flex direction="row" align="center">
-          <Heading as="h2" noOfLines={1} title={name} size="2xl">
+          <Heading as="h2" noOfLines={1} title={name} size="2xl" flex="auto">
             {name}
           </Heading>
+
+          {site && (
+            <IconButton
+              as={ChakraLink}
+              icon={<ExternalLinkIcon />}
+              href={site}
+              isExternal
+            />
+          )}
+
           {currentUser && (
-            <>
-              <ChakraLink to={`/game/${id}/changes`} as={Link} ml="auto">
-                Changes History
-              </ChakraLink>
-              <Button
-                as={Link}
-                to={`/game/${id}/edit`}
-                leftIcon={<EditIcon />}
-                colorScheme="teal"
-                ml={3}
-              >
-                Edit
-              </Button>
-            </>
+            <Menu>
+              <MenuButton
+                as={IconButton}
+                aria-label="Options"
+                icon={<HamburgerIcon />}
+                variant="outline"
+                ml={2}
+              />
+              <MenuList>
+                <MenuItem
+                  as={ChakraLink}
+                  icon={<EditIcon />}
+                  href={`/game/${id}/edit`}
+                >
+                  Edit
+                </MenuItem>
+                <MenuItem
+                  as={ChakraLink}
+                  icon={<TimeIcon />}
+                  href={`/game/${id}/changes`}
+                >
+                  History
+                </MenuItem>
+                <MenuDivider />
+                <MenuItem
+                  icon={<DeleteIcon />}
+                  onClick={deleteModal.onOpen}
+                >
+                  Delete
+                </MenuItem>
+              </MenuList>
+            </Menu>
           )}
         </Flex>
-        {site && (
-          <Text fontSize="lg">
-            <ChakraLink href={site} isExternal>
-              {site.replace(/https?:\/\//, '')}
-              <ExternalLinkIcon mx="2px" />
-            </ChakraLink>
-          </Text>
-        )}
 
         {about && (
           <Box mt={3}>
@@ -459,37 +486,31 @@ const Game = () => {
       )}
 
       {currentUser && (
-        <Box mb={5} pl={5} pr={5}>
-          <Button variant="link" colorScheme="red" onClick={deleteModal.onOpen}>
-            Delete game
-          </Button>
-
-          <Modal isOpen={deleteModal.isOpen} onClose={deleteModal.onClose}>
-            <ModalOverlay />
-            <ModalContent as={Form} action={`/game/${id}/delete`} method="post">
-              <ModalHeader>Delete Game</ModalHeader>
-              <ModalCloseButton />
-              <ModalBody>
-                <Text>Do you really want to delete {name}?</Text>
-              </ModalBody>
-
-              <ModalFooter>
-                <Button
-                  type="submit"
-                  isLoading={false}
-                  loadingText="Deleting"
-                  colorScheme="red"
-                  mr={3}
-                >
-                  Delete
-                </Button>
-                <Button variant="ghost" onClick={deleteModal.onClose}>
-                  Cancel
-                </Button>
-              </ModalFooter>
-            </ModalContent>
-          </Modal>
-        </Box>
+        <Modal isOpen={deleteModal.isOpen} onClose={deleteModal.onClose}>
+          <ModalOverlay />
+          <ModalContent as={Form} action={`/game/${id}/delete`} method="post">
+            <ModalHeader>Delete Game</ModalHeader>
+            <ModalCloseButton />
+            <ModalBody>
+              <Text>Do you really want to delete {name}?</Text>
+            </ModalBody>
+
+            <ModalFooter>
+              <Button
+                type="submit"
+                isLoading={false}
+                loadingText="Deleting"
+                colorScheme="red"
+                mr={3}
+              >
+                Delete
+              </Button>
+              <Button variant="ghost" onClick={deleteModal.onClose}>
+                Cancel
+              </Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
       )}
     </>
   );

From c05cdb4d9eb29af7a23abd5518b8f23b8ed0f4ca Mon Sep 17 00:00:00 2001
From: Christopher Humphries <engleek@gmail.com>
Date: Sat, 14 Jan 2023 14:56:59 +0100
Subject: [PATCH 2/2] fix: improve copy layout

---
 app/routes/game.$id.jsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/app/routes/game.$id.jsx b/app/routes/game.$id.jsx
index ebdc61c..bae69c4 100644
--- a/app/routes/game.$id.jsx
+++ b/app/routes/game.$id.jsx
@@ -193,9 +193,16 @@ const Game = () => {
 
   return (
     <>
-      <Box mb={5} pl={5} pr={5} mt={5}>
+      <Box m={5}>
         <Flex direction="row" align="center">
-          <Heading as="h2" noOfLines={1} title={name} size="2xl" flex="auto">
+          <Heading
+            as="h2"
+            size="2xl"
+            fontWeight="300"
+            noOfLines={1}
+            flex="auto"
+            title={name}
+          >
             {name}
           </Heading>
 
@@ -245,7 +252,7 @@ const Game = () => {
         </Flex>
 
         {about && (
-          <Box mt={3}>
+          <Box my={5} maxWidth="37em">
             <Markdown value={about} />
           </Box>
         )}