From f3df5f18e41c2dd4eaa81d966e284100e4f702e6 Mon Sep 17 00:00:00 2001
From: SatapasT <satapastanachotpaisit@gmail.com>
Date: Sat, 12 Oct 2024 03:48:34 +0100
Subject: [PATCH 1/4] fix the padding and object postioning

---
 .../src/app/(client)/(pages)/(event)/components/stage.tsx   | 2 +-
 client/src/app/(client)/(pages)/(event)/page.tsx            | 2 +-
 .../(client)/(pages)/admin/components/announcement-form.tsx | 4 ++--
 .../app/(client)/(pages)/admin/components/feature-form.tsx  | 4 ++--
 .../(client)/(pages)/admin/components/lower-third-form.tsx  | 4 ++--
 .../(client)/(pages)/admin/components/milestone-form.tsx    | 4 ++--
 .../(client)/(pages)/admin/components/overlay-main-form.tsx | 4 ++--
 .../app/(client)/(pages)/admin/components/schedule-form.tsx | 6 +++---
 .../(client)/(pages)/admin/components/switch-scene-form.tsx | 4 ++--
 .../src/app/(client)/(pages)/admin/components/tips-form.tsx | 4 ++--
 .../(client)/(pages)/admin/components/upper-third-form.tsx  | 4 ++--
 .../app/(client)/(pages)/admin/components/youtube-form.tsx  | 4 ++--
 client/src/app/(client)/(pages)/admin/page.tsx              | 1 +
 client/src/components/client/section.tsx                    | 2 +-
 14 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/client/src/app/(client)/(pages)/(event)/components/stage.tsx b/client/src/app/(client)/(pages)/(event)/components/stage.tsx
index f45fd5b..39c678c 100644
--- a/client/src/app/(client)/(pages)/(event)/components/stage.tsx
+++ b/client/src/app/(client)/(pages)/(event)/components/stage.tsx
@@ -191,7 +191,7 @@ export const Stage = React.memo(() => {
   )
 
   return (
-    <Section className="flex flex-col md:flex-row" style={{ marginBottom: 0 }}>
+    <Section className="flex items-start flex-row md:flex-row" style={{ marginBottom: 0 }}>
       <Card className="p-1 md:w-[66%]">
         <div className="bg-black md:h-[447px] h-[250px]">
           <iframe
diff --git a/client/src/app/(client)/(pages)/(event)/page.tsx b/client/src/app/(client)/(pages)/(event)/page.tsx
index 7ba87f3..60b7cf8 100644
--- a/client/src/app/(client)/(pages)/(event)/page.tsx
+++ b/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>
diff --git a/client/src/app/(client)/(pages)/admin/components/announcement-form.tsx b/client/src/app/(client)/(pages)/admin/components/announcement-form.tsx
index 4d6350d..4a08bb7 100644
--- a/client/src/app/(client)/(pages)/admin/components/announcement-form.tsx
+++ b/client/src/app/(client)/(pages)/admin/components/announcement-form.tsx
@@ -9,7 +9,7 @@ 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>
@@ -50,7 +50,7 @@ export const AnnouncementContent = React.memo(() => {
       </Segment>
 
       <DefaultButtons />
-    </>
+    </div>
   )
 })
 
diff --git a/client/src/app/(client)/(pages)/admin/components/feature-form.tsx b/client/src/app/(client)/(pages)/admin/components/feature-form.tsx
index d36473d..28ccd8e 100644
--- a/client/src/app/(client)/(pages)/admin/components/feature-form.tsx
+++ b/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>
   )
 })
 
diff --git a/client/src/app/(client)/(pages)/admin/components/lower-third-form.tsx b/client/src/app/(client)/(pages)/admin/components/lower-third-form.tsx
index 5584c0c..72ce612 100644
--- a/client/src/app/(client)/(pages)/admin/components/lower-third-form.tsx
+++ b/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>
   )
 })
 
diff --git a/client/src/app/(client)/(pages)/admin/components/milestone-form.tsx b/client/src/app/(client)/(pages)/admin/components/milestone-form.tsx
index dd64f98..a90a694 100644
--- a/client/src/app/(client)/(pages)/admin/components/milestone-form.tsx
+++ b/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>
   )
 })
 
diff --git a/client/src/app/(client)/(pages)/admin/components/overlay-main-form.tsx b/client/src/app/(client)/(pages)/admin/components/overlay-main-form.tsx
index 54cd350..7cc2627 100644
--- a/client/src/app/(client)/(pages)/admin/components/overlay-main-form.tsx
+++ b/client/src/app/(client)/(pages)/admin/components/overlay-main-form.tsx
@@ -12,7 +12,7 @@ const MainContent = React.memo(() => {
   const formik = useFormikContext<IOverlayState["main"]>()
 
   return (
-    <>
+    <div className="space-y-2">
       <h3>Default screen</h3>
 
       <Segment className="row">
@@ -87,7 +87,7 @@ const MainContent = React.memo(() => {
       />
 
       <DefaultButtons />
-    </>
+    </div>
   )
 })
 
diff --git a/client/src/app/(client)/(pages)/admin/components/schedule-form.tsx b/client/src/app/(client)/(pages)/admin/components/schedule-form.tsx
index ea75782..a648cfe 100644
--- a/client/src/app/(client)/(pages)/admin/components/schedule-form.tsx
+++ b/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>
   )
 })
 
diff --git a/client/src/app/(client)/(pages)/admin/components/switch-scene-form.tsx b/client/src/app/(client)/(pages)/admin/components/switch-scene-form.tsx
index 17bd2cc..960fc9c 100644
--- a/client/src/app/(client)/(pages)/admin/components/switch-scene-form.tsx
+++ b/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>
   )
 })
 
diff --git a/client/src/app/(client)/(pages)/admin/components/tips-form.tsx b/client/src/app/(client)/(pages)/admin/components/tips-form.tsx
index 1e05442..cb46525 100644
--- a/client/src/app/(client)/(pages)/admin/components/tips-form.tsx
+++ b/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>
@@ -52,7 +52,7 @@ const TipsContent = React.memo(() => {
       />
 
       <DefaultButtons />
-    </>
+    </div>
   )
 })
 
diff --git a/client/src/app/(client)/(pages)/admin/components/upper-third-form.tsx b/client/src/app/(client)/(pages)/admin/components/upper-third-form.tsx
index c0e41f5..8faa5a5 100644
--- a/client/src/app/(client)/(pages)/admin/components/upper-third-form.tsx
+++ b/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>
   )
 })
 
diff --git a/client/src/app/(client)/(pages)/admin/components/youtube-form.tsx b/client/src/app/(client)/(pages)/admin/components/youtube-form.tsx
index 0910df1..9a6d193 100644
--- a/client/src/app/(client)/(pages)/admin/components/youtube-form.tsx
+++ b/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>
   )
 })
 
diff --git a/client/src/app/(client)/(pages)/admin/page.tsx b/client/src/app/(client)/(pages)/admin/page.tsx
index 92c5744..11744ea 100644
--- a/client/src/app/(client)/(pages)/admin/page.tsx
+++ b/client/src/app/(client)/(pages)/admin/page.tsx
@@ -67,6 +67,7 @@ export default React.memo(() => {
             </Card>
             <Card className="grow basis-0">
               <LowerThirdForm />
+              <div className="mt-4"></div>
               <UpperThirdForm />
             </Card>
           </div>
diff --git a/client/src/components/client/section.tsx b/client/src/components/client/section.tsx
index 49f4e00..0ef9cc7 100644
--- a/client/src/components/client/section.tsx
+++ b/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} />
 }

From 203fca25aee6db03aa099988170fad5ae1bec74c Mon Sep 17 00:00:00 2001
From: SatapasT <satapastanachotpaisit@gmail.com>
Date: Sat, 12 Oct 2024 03:51:18 +0100
Subject: [PATCH 2/4] fix responsiveness

---
 client/src/app/(client)/(pages)/(event)/components/stage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/app/(client)/(pages)/(event)/components/stage.tsx b/client/src/app/(client)/(pages)/(event)/components/stage.tsx
index 39c678c..f45fd5b 100644
--- a/client/src/app/(client)/(pages)/(event)/components/stage.tsx
+++ b/client/src/app/(client)/(pages)/(event)/components/stage.tsx
@@ -191,7 +191,7 @@ export const Stage = React.memo(() => {
   )
 
   return (
-    <Section className="flex items-start flex-row md:flex-row" style={{ marginBottom: 0 }}>
+    <Section className="flex flex-col md:flex-row" style={{ marginBottom: 0 }}>
       <Card className="p-1 md:w-[66%]">
         <div className="bg-black md:h-[447px] h-[250px]">
           <iframe

From 0df46857dae245b377d3670bcd9a4223b0ec8dc9 Mon Sep 17 00:00:00 2001
From: SatapasT <satapastanachotpaisit@gmail.com>
Date: Sun, 13 Oct 2024 19:53:58 +0100
Subject: [PATCH 3/4] improve responsiveness of admin and main page

---
 .../(pages)/(event)/components/socials.tsx    |  2 +-
 .../admin/components/announcement-form.tsx    | 12 +++++-----
 .../(pages)/admin/components/index.tsx        |  6 ++---
 .../admin/components/overlay-main-form.tsx    |  3 ++-
 .../(pages)/admin/components/tips-form.tsx    |  2 +-
 .../src/app/(client)/(pages)/admin/page.tsx   | 24 +++++++++----------
 6 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/client/src/app/(client)/(pages)/(event)/components/socials.tsx b/client/src/app/(client)/(pages)/(event)/components/socials.tsx
index 26eb2cd..70c13eb 100644
--- a/client/src/app/(client)/(pages)/(event)/components/socials.tsx
+++ b/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" />
diff --git a/client/src/app/(client)/(pages)/admin/components/announcement-form.tsx b/client/src/app/(client)/(pages)/admin/components/announcement-form.tsx
index 4a08bb7..6affb24 100644
--- a/client/src/app/(client)/(pages)/admin/components/announcement-form.tsx
+++ b/client/src/app/(client)/(pages)/admin/components/announcement-form.tsx
@@ -12,17 +12,17 @@ export const AnnouncementContent = React.memo(() => {
     <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,14 +36,14 @@ 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>
diff --git a/client/src/app/(client)/(pages)/admin/components/index.tsx b/client/src/app/(client)/(pages)/admin/components/index.tsx
index a0cdaae..51567e9 100644
--- a/client/src/app/(client)/(pages)/admin/components/index.tsx
+++ b/client/src/app/(client)/(pages)/admin/components/index.tsx
@@ -20,13 +20,13 @@ 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>) => {
-  return <div className={cn("buttons", className)} {...props} />
+  return <div className={cn("buttons ", className)} {...props} />
 }
 
 export const Table = ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => {
-  return <table className={cn("table", className)} {...props} />
+  return <table className={cn("table ", className)} {...props} />
 }
diff --git a/client/src/app/(client)/(pages)/admin/components/overlay-main-form.tsx b/client/src/app/(client)/(pages)/admin/components/overlay-main-form.tsx
index 7cc2627..576e97f 100644
--- a/client/src/app/(client)/(pages)/admin/components/overlay-main-form.tsx
+++ b/client/src/app/(client)/(pages)/admin/components/overlay-main-form.tsx
@@ -15,6 +15,8 @@ const MainContent = React.memo(() => {
     <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>
@@ -22,7 +24,6 @@ const MainContent = React.memo(() => {
         </div>
       </Segment>
 
-      <h4>Next up</h4>
 
       <Segment className="row">
         <Label>Enabled:</Label>
diff --git a/client/src/app/(client)/(pages)/admin/components/tips-form.tsx b/client/src/app/(client)/(pages)/admin/components/tips-form.tsx
index cb46525..a17bda1 100644
--- a/client/src/app/(client)/(pages)/admin/components/tips-form.tsx
+++ b/client/src/app/(client)/(pages)/admin/components/tips-form.tsx
@@ -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>
diff --git a/client/src/app/(client)/(pages)/admin/page.tsx b/client/src/app/(client)/(pages)/admin/page.tsx
index 11744ea..79d0f01 100644
--- a/client/src/app/(client)/(pages)/admin/page.tsx
+++ b/client/src/app/(client)/(pages)/admin/page.tsx
@@ -46,46 +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>

From 4764be4b7585135e43d455196438a79474e9d232 Mon Sep 17 00:00:00 2001
From: SatapasT <satapastanachotpaisit@gmail.com>
Date: Sun, 13 Oct 2024 19:59:28 +0100
Subject: [PATCH 4/4] made it neater

---
 client/src/app/(client)/(pages)/admin/components/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/app/(client)/(pages)/admin/components/index.tsx b/client/src/app/(client)/(pages)/admin/components/index.tsx
index 51567e9..f331f1f 100644
--- a/client/src/app/(client)/(pages)/admin/components/index.tsx
+++ b/client/src/app/(client)/(pages)/admin/components/index.tsx
@@ -24,9 +24,9 @@ export const Label = ({ className, ...props }: React.HTMLAttributes<HTMLDivEleme
 }
 
 export const Buttons = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
-  return <div className={cn("buttons ", className)} {...props} />
+  return <div className={cn("buttons", className)} {...props} />
 }
 
 export const Table = ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => {
-  return <table className={cn("table ", className)} {...props} />
+  return <table className={cn("table", className)} {...props} />
 }