fix: align text fields with buttons

bmsuseluda · Mar 22, 2024 · 660760e · 660760e
1 parent f60026c
commit 660760e
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 31 deletions.
diff --git a/app/components/CheckboxRow/index.stories.tsx → ...omponents/CheckboxLabel/index.stories.tsx b/app/components/CheckboxRow/index.stories.tsx → ...omponents/CheckboxLabel/index.stories.tsx
@@ -1,41 +1,41 @@
-import { CheckboxRow } from ".";
-import { Checkbox } from "~/components/Checkbox";
-import { Label } from "~/components/Label";
+import { CheckboxLabel } from ".";
+
 import type { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from "~/components/Checkbox";
 
 const meta = {
-  component: CheckboxRow,
-} satisfies Meta<typeof CheckboxRow>;
+  component: CheckboxLabel,
+} satisfies Meta<typeof CheckboxLabel>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Checked: Story = {
   render: (args) => (
     <form>
-      <CheckboxRow {...args}>
+      <CheckboxLabel {...args}>
         <Checkbox
           id="alwaysGameNames"
           name="alwaysGameNames"
           defaultChecked={true}
         />
-        <Label htmlFor="alwaysGameNames">Always show game names</Label>
-      </CheckboxRow>
+        Always show game names
+      </CheckboxLabel>
     </form>
   ),
 };
 
 export const Unchecked: Story = {
   render: (args) => (
     <form>
-      <CheckboxRow {...args}>
+      <CheckboxLabel {...args}>
         <Checkbox
           id="alwaysGameNames"
           name="alwaysGameNames"
           defaultChecked={false}
         />
-        <Label htmlFor="alwaysGameNames">Always show game names</Label>
-      </CheckboxRow>
+        Always show game names
+      </CheckboxLabel>
     </form>
   ),
 };
diff --git a/app/components/CheckboxRow/index.tsx → app/components/CheckboxLabel/index.tsx b/app/components/CheckboxRow/index.tsx → app/components/CheckboxLabel/index.tsx
@@ -1,16 +1,22 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
 import { styled } from "../../../styled-system/jsx";
 
-// TODO: Check if this could be replaced with formrow
-export const CheckboxRow = styled("fieldset", {
+export const CheckboxLabel = styled(LabelPrimitive.Root, {
   base: {
-    display: "flex",
+    display: "inline-flex",
+    flexDirection: "row",
     alignItems: "center",
     gap: "1",
-    padding: "1",
+    padding: 1,
     margin: 0,
     borderRounded: true,
     borderWidth: "1px",
     borderColor: "transparent",
+    color: "color",
+
+    "&:hover": {
+      cursor: "pointer",
+    },
 
     "&:focus-within": {
       borderColor: "accent",

diff --git a/app/components/Dialog/index.tsx b/app/components/Dialog/index.tsx
@@ -29,6 +29,7 @@ const DialogContent = styled("div", {
     height: "60vh",
     maxHeight: "90vh",
     animation: "scaleUp 150ms",
+    overflow: "clip",
     "&:focus": { outline: "none" },
   },
 

diff --git a/app/components/FormRow/index.tsx b/app/components/FormRow/index.tsx
@@ -5,7 +5,10 @@ export const FormRow = styled("fieldset", {
     display: "flex",
     flexDirection: "column",
     gap: "1",
-    padding: "1",
+    paddingTop: "1",
+    paddingRight: "1",
+    paddingBottom: "1",
+    paddingLeft: "0",
     margin: 0,
     borderRounded: true,
     borderWidth: "1px",

diff --git a/app/components/GameGrid/components/Game/index.tsx b/app/components/GameGrid/components/Game/index.tsx
@@ -18,6 +18,7 @@ const Wrapper = styled("li", {
     position: "relative",
     minWidth: "200px",
     maxWidth: "300px",
+    transition: "width 0.1s ease-in-out",
   },
 });
 

diff --git a/app/customRoutes/categories.$category.settings.appearance.tsx b/app/customRoutes/categories.$category.settings.appearance.tsx
@@ -4,15 +4,14 @@ import { IoMdSave } from "react-icons/io";
 import { Form, useLoaderData } from "@remix-run/react";
 import { Button } from "~/components/Button";
 import { FormBox } from "~/components/FormBox";
-import { Label } from "~/components/Label";
 import { ListActionBarLayout } from "~/components/layouts/ListActionBarLayout";
 import { readAppearance, writeAppearance } from "~/server/settings.server";
 import { Checkbox } from "~/components/Checkbox";
 import type { Appearance } from "~/types/jsonFiles/settings/appearance";
 import { IconChildrenWrapper } from "~/components/IconChildrenWrapper";
 import { SettingsIcon } from "~/components/SettingsIcon";
 import { useFullscreen } from "~/hooks/useFullscreen";
-import { CheckboxRow } from "~/components/CheckboxRow";
+import { CheckboxLabel } from "~/components/CheckboxLabel";
 import type { ElementRef } from "react";
 import { useCallback, useRef } from "react";
 import type { Result } from "~/hooks/useGamepadsOnGrid";
@@ -138,10 +137,11 @@ export default function Index() {
     >
       <Form method="POST">
         <ListActionBarLayout.ListActionBarContainer
+          scrollSmooth
           list={
             <FormBox ref={entryListRef}>
               <li>
-                <CheckboxRow>
+                <CheckboxLabel>
                   <Checkbox
                     id="fullscreen"
                     name="fullscreen"
@@ -152,32 +152,30 @@ export default function Index() {
                     }
                     ref={entriesRefCallback(0)}
                   />
-                  <Label htmlFor="fullscreen">Fullscreen</Label>
-                </CheckboxRow>
+                  Fullscreen
+                </CheckboxLabel>
               </li>
               <li>
-                <CheckboxRow>
+                <CheckboxLabel>
                   <Checkbox
                     id="alwaysGameNames"
                     name="alwaysGameNames"
                     defaultChecked={alwaysGameNames}
                     ref={entriesRefCallback(1)}
                   />
-                  <Label htmlFor="alwaysGameNames">
-                    Always show game names
-                  </Label>
-                </CheckboxRow>
+                  Always show game names
+                </CheckboxLabel>
               </li>
               <li>
-                <CheckboxRow>
+                <CheckboxLabel>
                   <Checkbox
                     id="collapseSidebar"
                     name="collapseSidebar"
                     defaultChecked={collapseSidebar}
                     ref={entriesRefCallback(2)}
                   />
-                  <Label htmlFor="collapseSidebar">Collapse sidebar</Label>
-                </CheckboxRow>
+                  Collapse sidebar
+                </CheckboxLabel>
               </li>
             </FormBox>
           }

diff --git a/app/customRoutes/categories.$category.settings.general.tsx b/app/customRoutes/categories.$category.settings.general.tsx
@@ -166,7 +166,7 @@ export const action = async ({ request }: ActionFunctionArgs) => {
       const categories = readCategories();
 
       if (categories?.length > 0) {
-        throw redirect(`/categories/${categories[0].id}/settings/general`);
+        return redirect(`/categories/${categories[0].id}/settings/general`);
       }
     }
 

diff --git a/panda.config.ts b/panda.config.ts
@@ -21,7 +21,6 @@ const borderRounded = defineUtility({
       return {
         borderRadius: token("radii.1"),
         position: "relative",
-        overflow: "clip",
       };
     }
     return {};