Kun/stream overlay - improve responsiveness and layout

client/src/app/(client)/(pages)/(event)/components/socials.tsx

@@ -30,7 +30,7 @@ export const Socials = React.memo(() => (
   <Section>
     <div>
       <Card
-        className="flex flex-col md:flex-row gap-4 !p-0 !pl-6 !py-4 md:!py-6 md:!px-4"
+        className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 md:flex-row !p-0 !pl-6 !py-4 md:!py-6 md:!px-4"
         style={{ justifyContent: "space-evenly" }}
       >
         <SocialOption href="/api/auth/discord" icon={DiscordIcon} pretext="Chat to others on" text="Discord" />

client/src/app/(client)/(pages)/(event)/page.tsx

@@ -10,9 +10,9 @@ import { Stage } from "./components/stage"
 
 export default React.memo(() => (
   <main>
+    <Announcement />
     <Stage />
     <Socials />
-    <Announcement />
     <HackerPack />
     <MainWebsiteLink />
   </main>

client/src/app/(client)/(pages)/admin/components/announcement-form.tsx

@@ -9,20 +9,20 @@ import { DefaultButtons, Label, OverlayForm, Segment } from "./"
 
 export const AnnouncementContent = React.memo(() => {
   return (
-    <>
+    <div className="space-y-2">
       <h3>Announcement</h3>
 
-      <p>This message shows just below socials on the website.</p>
+      <p>This message shows just below socials on the website. Button text and button link is optional.</p>
 
       <Segment className="row">
-        <Label>Enabled:</Label>
+        <Label className="center">Enabled:</Label>
         <div>
           <Field type="checkbox" className="dh-check" name="enabled" />
         </div>
       </Segment>
 
-      <Segment className="row">
-        <Label>Title:</Label>
+      <Segment className="row ">
+        <Label className="flex items-center">Title:</Label>
         <div>
           <Field type="text" className="dh-input" name="title" />
         </div>
@@ -36,21 +36,21 @@ export const AnnouncementContent = React.memo(() => {
       </Segment>
 
       <Segment className="row">
-        <Label>Button text (optional):</Label>
+        <Label>Button text:</Label>
         <div>
           <Field type="text" className="dh-input" name="buttonText" />
         </div>
       </Segment>
 
       <Segment className="row">
-        <Label>Button link (optional):</Label>
+        <Label>Button link:</Label>
         <div>
           <Field type="text" className="dh-input" name="buttonLink" />
         </div>
       </Segment>
 
       <DefaultButtons />
-    </>
+    </div>
   )
 })
 

client/src/app/(client)/(pages)/admin/components/feature-form.tsx

@@ -10,7 +10,7 @@ import { DefaultButtons, Label, OverlayForm, Segment } from "./"
 
 const FeatureContent = React.memo(() => {
   return (
-    <>
+    <div className="space-y-2">
       <h3>Feature</h3>
 
       <p>This is a special, persistent announcement that shows over the top of the Default scene.</p>
@@ -46,7 +46,7 @@ const FeatureContent = React.memo(() => {
       </Segment>
 
       <DefaultButtons />
-    </>
+    </div>
   )
 })
 

client/src/app/(client)/(pages)/admin/components/index.tsx

@@ -20,7 +20,7 @@ export const Segment = ({ className, ...props }: React.HTMLAttributes<HTMLDivEle
 }
 
 export const Label = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
-  return <div className={cn("label", className)} {...props} />
+  return <div className={cn("label flex items-center pr-2", className)} {...props} />
 }
 
 export const Buttons = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {

client/src/app/(client)/(pages)/admin/components/lower-third-form.tsx

@@ -17,7 +17,7 @@ const LowerThirdContent = React.memo(() => {
   const disableSubmit = hackathon.overlay.lowerThird.managedBy === "admin" && !formik.dirty
 
   return (
-    <>
+    <div className="space-y-2">
       <h3>Lower Third</h3>
 
       <p>
@@ -68,7 +68,7 @@ const LowerThirdContent = React.memo(() => {
           Submit
         </button>
       </Buttons>
-    </>
+    </div>
   )
 })
 

client/src/app/(client)/(pages)/admin/components/milestone-form.tsx

@@ -11,7 +11,7 @@ import { DefaultButtons, Label, OverlayForm, Segment } from "./"
 
 const MilestoneContent = React.memo(() => {
   return (
-    <>
+    <div className="space-y-2">
       <h3>Milestone</h3>
 
       <p>This is the countdown that shows in the bottom right of the Default scene.</p>
@@ -44,7 +44,7 @@ const MilestoneContent = React.memo(() => {
       </Segment>
 
       <DefaultButtons />
-    </>
+    </div>
   )
 })
 

client/src/app/(client)/(pages)/admin/components/overlay-main-form.tsx

@@ -12,17 +12,18 @@ const MainContent = React.memo(() => {
   const formik = useFormikContext<IOverlayState["main"]>()
 
   return (
-    <>
+    <div className="space-y-2">
       <h3>Default screen</h3>
 
+      <p>This is the up-next announcement that shows in the top left corner of the Default scene.</p>
+
       <Segment className="row">
         <Label>Dark Mode:</Label>
         <div>
           <Field type="checkbox" className="dh-check" name="darkMode" />
         </div>
       </Segment>
 
-      <h4>Next up</h4>
 
       <Segment className="row">
         <Label>Enabled:</Label>
@@ -87,7 +88,7 @@ const MainContent = React.memo(() => {
       />
 
       <DefaultButtons />
-    </>
+    </div>
   )
 })
 

client/src/app/(client)/(pages)/admin/components/schedule-form.tsx

@@ -28,7 +28,7 @@ const ScheduleContent = React.memo(() => {
   }
 
   return (
-    <>
+    <div>
       <h3>Schedule</h3>
 
       <p>This schedule solely affects what is shown on this website. It does not affect the livestream.</p>
@@ -140,7 +140,7 @@ const ScheduleContent = React.memo(() => {
                   <td>
                     <button
                       type="button"
-                      className="plain-btn mb-2"
+                      className="plain-btn mb-2 mt-2"
                       onClick={() =>
                         arrayHelpers.insert(formik.values.schedule.length, {
                           ...newItem,
@@ -158,7 +158,7 @@ const ScheduleContent = React.memo(() => {
       </Table>
 
       <DefaultButtons />
-    </>
+    </div>
   )
 })
 

client/src/app/(client)/(pages)/admin/components/switch-scene-form.tsx

@@ -12,7 +12,7 @@ const scenes = ["Default", "Feed A", "Feed B", "Feed C", "Recording A", "Recordi
 
 const SwitchSceneContent = React.memo(() => {
   return (
-    <>
+    <div className="space-y-2">
       <h3>Switch Scene</h3>
 
       <p>
@@ -48,7 +48,7 @@ const SwitchSceneContent = React.memo(() => {
       </Segment>
 
       <DefaultButtons />
-    </>
+    </div>
   )
 })
 

client/src/app/(client)/(pages)/admin/components/tips-form.tsx

@@ -13,7 +13,7 @@ const TipsContent = React.memo(() => {
   const formik = useFormikContext<Pick<IHackathonState, "tips">>()
 
   return (
-    <>
+    <div className="space-y-1">
       <h3>Top Tips</h3>
 
       <p>
@@ -30,7 +30,7 @@ const TipsContent = React.memo(() => {
                 <div className="grow basis-0">
                   <Field as="textarea" className="dh-input" name={`tips.${index}`} rows="5" />
                 </div>
-                <div>
+                <div className="items-start">
                   <button type="button" className="plain-btn mx-1" onClick={() => arrayHelpers.remove(index)}>
                     -
                   </button>
@@ -52,7 +52,7 @@ const TipsContent = React.memo(() => {
       />
 
       <DefaultButtons />
-    </>
+    </div>
   )
 })
 

client/src/app/(client)/(pages)/admin/components/upper-third-form.tsx

@@ -10,7 +10,7 @@ import { DefaultButtons, Label, OverlayForm, Segment } from "./"
 
 const UpperThirdContent = React.memo(() => {
   return (
-    <>
+    <div className="space-y-2">
       <h3>Upper Third</h3>
 
       <p>Behaves similarly, except this shows in the top left.</p>
@@ -30,7 +30,7 @@ const UpperThirdContent = React.memo(() => {
       </Segment>
 
       <DefaultButtons />
-    </>
+    </div>
   )
 })
 

client/src/app/(client)/(pages)/admin/components/youtube-form.tsx

@@ -12,7 +12,7 @@ const YoutubeContent = React.memo(() => {
   const formik = useFormikContext<IOverlayState["youtube"]>()
 
   return (
-    <>
+    <div className="space-y-2">
       <h3>YouTube</h3>
 
       <p>DANGER ZONE: these controls are not intuitive at all; please don&apos;t touch without asking first.</p>
@@ -79,7 +79,7 @@ const YoutubeContent = React.memo(() => {
       />
 
       <DefaultButtons />
-    </>
+    </div>
   )
 })
 

client/src/app/(client)/(pages)/admin/page.tsx

@@ -46,45 +46,46 @@ export default React.memo(() => {
             </Card>
           </div>
 
-          <div className="row">
-            <Card className="grow basis-0">
+          <div className="grid grid-cols-1 lg:grid-cols-2">
+            <Card className="grow">
               <AnnouncementForm />
             </Card>
-            <Card className="grow basis-0">
+            <Card className="grow">
               <TipsForm />
             </Card>
           </div>
 
-          <div>
+          <div className="hidden xl:block">
             <Card>
               <ScheduleForm />
             </Card>
           </div>
 
-          <div className="row">
-            <Card className="grow basis-0">
+          <div className="grid grid-cols-1 lg:grid-cols-2">
+            <Card className="grow">
               <MainForm />
             </Card>
-            <Card className="grow basis-0">
+            <Card className="grow">
               <LowerThirdForm />
+              <div className="mt-4"></div>
               <UpperThirdForm />
             </Card>
           </div>
 
-          <div className="row">
-            <Card className="grow basis-0">
+          <div className="grid grid-cols-1 lg:grid-cols-3">
+            <Card className="grow">
               <SwitchSceneForm />
             </Card>
-            <Card className="grow basis-0">
+            <Card className="grow">
               <MilestoneForm />
             </Card>
-            <Card className="grow basis-0">
+            <Card className="grow">
               <FeatureForm />
             </Card>
           </div>
 
           <div>
-            <Card className="grow basis-0">
+            <Card className="grow">
               <YoutubeForm />
             </Card>
           </div>

client/src/components/client/section.tsx

@@ -5,5 +5,5 @@ import type * as React from "react"
 import { cn } from "@/lib/utils"
 
 export const Section = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
-  return <div className={cn("p-0 mt-0 mr-[-9px] mb-[18px] ml-[-9px]")} {...props} />
+  return <div className={cn("p-0 mt-0 mb-[18px]", className)} {...props} />
 }