pegboard background

src/app/global.css

@@ -6,6 +6,11 @@
   :root {
     @apply bg-ui-background font-sans text-white;
   }
+  .pegboard {
+    background-image: radial-gradient(#676781 1px, transparent 0);
+    background-size: 36px 36px;
+    @apply bg-center;
+  }
   h1 {
     @apply text-3xl font-medium md:text-5xl;
   }

src/components/ui/PanelBottom.tsx

@@ -11,8 +11,16 @@ export const PanelBottom = ({
 }: HTMLAttributes<HTMLDivElement>) => {
   const [isOpen, setIsOpen] = useState(true);
 
-  const buttonClasses =
-    "w-12 h-6 bg-ui-panel border-ui-border border-l border-t border-r rounded-t-md px-4 flex items-center justify-center";
+  const gridClasses = twMerge(
+    "row-span-3 row-start-10",
+    "col-span-12 col-start-1",
+  );
+  const buttonClasses = twMerge(
+    "w-12 h-6 bg-ui-panel",
+    "border-ui-border border-l border-t border-r rounded-t-md",
+    "px-4 flex items-center justify-center",
+  );
+
   return (
     <>
       {!isOpen && (
@@ -28,8 +36,10 @@ export const PanelBottom = ({
       <Transition show={isOpen}>
         <div
           className={twMerge(
+            gridClasses,
+            //base styles
             "bg-ui-panel border-ui-border relative border p-2 transition ease-in-out",
-            "col-span-12 col-start-1 row-span-3 row-start-10",
+
             // Shared closed styles
             "data-[closed]:opacity-0",
             // Entering styles

src/components/ui/PanelRight.tsx

@@ -11,6 +11,10 @@ export const PanelRight = ({
   ...props
 }: HTMLAttributes<HTMLDivElement>) => {
   const [isOpen, setIsOpen] = useState(true);
+  const gridClasses = twMerge(
+    "col-span-3 col-start-10",
+    "row-span-12 row-start-1",
+  );
   const buttonClasses =
     "w-6 bg-ui-panel border-ui-border border-l border-t border-b rounded-l-md py-4";
   return (
@@ -28,8 +32,9 @@ export const PanelRight = ({
       <Transition show={isOpen}>
         <div
           className={twMerge(
+            gridClasses,
+            // base styles
             "bg-ui-panel border-ui-border relative border p-2 transition ease-in-out",
-            "col-span-3 col-start-10 row-span-12 row-start-1",
             // Shared closed styles
             "data-[closed]:opacity-0",
             // Entering styles

src/pages/main.tsx

@@ -4,7 +4,7 @@ import { PanelRight, PanelBottom } from "~/components/ui";
 
 export const Main = withProtectionRoute(() => {
   return (
-    <div className="fixed grid h-full w-full grid-cols-12 grid-rows-12">
+    <div className="pegboard fixed grid h-full w-full grid-cols-12 grid-rows-12">
       <PanelRight>
         <p>
           you are logged in as {authentication.userInfo.value?.display_name}