From 8039a2b3d5d50f143f4533a88b747031ede6f43d Mon Sep 17 00:00:00 2001
From: nick-bolas <bn322@ic.ac.uk>
Date: Tue, 20 Aug 2024 15:41:18 +0100
Subject: [PATCH 01/12] style: make form modal responsive

Co-authored-by: IlliaDerevianko <IlliaDerevianko@users.noreply.github.com>
---
 app/companies/AddCompany.tsx | 2 +-
 components/EditCompany.tsx   | 2 +-
 components/MdEditor.tsx      | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/companies/AddCompany.tsx b/app/companies/AddCompany.tsx
index 2b72dc02..732b3b14 100644
--- a/app/companies/AddCompany.tsx
+++ b/app/companies/AddCompany.tsx
@@ -43,7 +43,7 @@ const AddCompanyForm = ({ close }: { close: () => void }) => {
             <InfoCircledIcon style={{ marginBottom: "3px" }} />
           </Tooltip>
         </Flex>
-        <Flex direction="row" gap="1" align="center">
+        <Flex direction="row" gap="1" align="center" wrap="wrap">
           <Text>{SLUG_START}</Text>
           <TextField.Root name="slug" required value={slug} onChange={e => setSlug(e.target.value)} />
         </Flex>
diff --git a/components/EditCompany.tsx b/components/EditCompany.tsx
index 4ecc2d4f..4237f90d 100644
--- a/components/EditCompany.tsx
+++ b/components/EditCompany.tsx
@@ -55,7 +55,7 @@ const EditCompanyForm = ({ close, prevCompanyProfile }: { close: () => void; pre
             <InfoCircledIcon style={{ marginBottom: "3px" }} />
           </Tooltip>
         </Flex>
-        <Flex direction="row" gap="1" align="center">
+        <Flex direction="row" gap="1" align="center" wrap="wrap">
           <Text>{SLUG_START}</Text>
           <TextField.Root name="slug" required value={slug} onChange={e => setSlug(e.target.value)} />
         </Flex>
diff --git a/components/MdEditor.tsx b/components/MdEditor.tsx
index 9d9d8951..9c3d93bc 100644
--- a/components/MdEditor.tsx
+++ b/components/MdEditor.tsx
@@ -36,18 +36,18 @@ const MdEditor: FC<EditorProps> = ({ markdown, editorRef, onChange }) => {
       plugins={[
         toolbarPlugin({
           toolbarContents: () => (
-            <>
+            <div style={{ display: "flex", flexWrap: "wrap" }}>
               {/* HACK: avoid unintented focus on the first button on hover*/}
               <button disabled style={{ display: "none" }}></button>
               <UndoRedo />
+              <Separator />
               <BoldItalicUnderlineToggles />
-              <BlockTypeSelect />
-              <CodeToggle />
               <InsertTable />
               <InsertThematicBreak />
               <Separator />
               <ListsToggle />
-            </>
+              <BlockTypeSelect />
+            </div>
           ),
         }),
         tablePlugin(),

From 528d02e5a1c821ff85cbe7ca0833412324cb15eb Mon Sep 17 00:00:00 2001
From: nick-bolas <bn322@ic.ac.uk>
Date: Tue, 20 Aug 2024 16:07:05 +0100
Subject: [PATCH 02/12] style: add responsiveness to datetime pickers and
 company management panels

Co-authored-by: IlliaDerevianko <IlliaDerevianko@users.noreply.github.com>
---
 app/companies/AddCompany.tsx               | 2 +-
 app/companies/CompanyAdminActions.tsx      | 4 ++--
 app/companies/[slug]/CompanyManagement.tsx | 2 +-
 components/UpsertEvent.tsx                 | 5 ++++-
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/companies/AddCompany.tsx b/app/companies/AddCompany.tsx
index 732b3b14..83995914 100644
--- a/app/companies/AddCompany.tsx
+++ b/app/companies/AddCompany.tsx
@@ -68,7 +68,7 @@ export const AddCompany = () => {
   return (
     <GenericFormModal title="Add new company" description="Add a new company profile" form={AddCompanyForm}>
       <PlusButton>
-        <Text>Add Company</Text>
+        <Text>Company</Text>
       </PlusButton>
     </GenericFormModal>
   )
diff --git a/app/companies/CompanyAdminActions.tsx b/app/companies/CompanyAdminActions.tsx
index ddab873f..a8b730d3 100644
--- a/app/companies/CompanyAdminActions.tsx
+++ b/app/companies/CompanyAdminActions.tsx
@@ -9,9 +9,9 @@ export const CompanyAdminActions = () => {
   return (
     <RestrictedArea showMessage={false}>
       <Card variant="surface">
-        <Flex gap="3" direction="row" align="center" justify="between" p="2">
+        <Flex direction="row" align="center" justify="between" p="2">
           <Heading size="6">Admin Actions</Heading>
-          <Flex gap="3" direction="row" align="center">
+          <Flex direction="row" align="center">
             <AddCompany />
           </Flex>
         </Flex>
diff --git a/app/companies/[slug]/CompanyManagement.tsx b/app/companies/[slug]/CompanyManagement.tsx
index 9ea759f0..87190f1e 100644
--- a/app/companies/[slug]/CompanyManagement.tsx
+++ b/app/companies/[slug]/CompanyManagement.tsx
@@ -16,7 +16,7 @@ export const CompanyManagement = ({ company }: { company: CompanyProfile & { com
         <Flex direction="column" gap="3" p="4">
           <Flex gap="3" direction="row" align="center" justify="between" wrap={"wrap"}>
             <Heading size="6">Company Management</Heading>
-            <Flex gap="2">
+            <Flex gap="2" wrap="wrap">
               <AddUser key={company.id} company={company} />
               <DeleteCompany name={company.name} id={company.id} />
             </Flex>
diff --git a/components/UpsertEvent.tsx b/components/UpsertEvent.tsx
index 74f0c2b7..3cf7f82a 100644
--- a/components/UpsertEvent.tsx
+++ b/components/UpsertEvent.tsx
@@ -15,6 +15,7 @@ import { Pencil1Icon } from "@radix-ui/react-icons"
 import { Card, Grid, IconButton, Text, TextField } from "@radix-ui/themes"
 import dynamic from "next/dynamic"
 import { useState } from "react"
+import { useMediaQuery } from "react-responsive"
 
 const MdEditor = dynamic(() => import("@/components/MdEditor"), { ssr: false })
 
@@ -28,6 +29,8 @@ const UpsertEventForm = ({
   companyID?: number
 }) => {
   const [summary, setSummary] = useState(prevEvent?.richSummary ?? "")
+  const SMALL_SCREEN_PIXELS = 560
+  const isSmallScreen = useMediaQuery({ query: `(max-width: ${SMALL_SCREEN_PIXELS}px)` })
 
   const createEventWithArgs = async (prevState: FormPassBackState, formData: FormData) =>
     createEvent(prevState, formData, companyID ?? -1)
@@ -84,7 +87,7 @@ const UpsertEventForm = ({
         <TextField.Root name="spaces" placeholder="E.g., 100" required type="number" defaultValue={prevEvent?.spaces} />
       </label>
       <InfoCallout message={`The times correspond to the ${TIMEZONE} timezone.`} />
-      <Grid columns="2" rows="1">
+      <Grid columns={isSmallScreen ? "1" : "2"} rows={isSmallScreen ? "2" : "1"}>
         <label>
           <Text as="div" size="2" mb="1" weight="bold">
             Start date*

From 67203452506c81d4010655ad596f3a49b2b35a16 Mon Sep 17 00:00:00 2001
From: nick-bolas <bn322@ic.ac.uk>
Date: Wed, 21 Aug 2024 11:45:37 +0100
Subject: [PATCH 03/12] style: add a gap between datetime pickers for mobile
 version

---
 components/UpsertEvent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/UpsertEvent.tsx b/components/UpsertEvent.tsx
index 3cf7f82a..b4a17eb5 100644
--- a/components/UpsertEvent.tsx
+++ b/components/UpsertEvent.tsx
@@ -87,7 +87,7 @@ const UpsertEventForm = ({
         <TextField.Root name="spaces" placeholder="E.g., 100" required type="number" defaultValue={prevEvent?.spaces} />
       </label>
       <InfoCallout message={`The times correspond to the ${TIMEZONE} timezone.`} />
-      <Grid columns={isSmallScreen ? "1" : "2"} rows={isSmallScreen ? "2" : "1"}>
+      <Grid columns={isSmallScreen ? "1" : "2"} rows={isSmallScreen ? "2" : "1"} gapY="3">
         <label>
           <Text as="div" size="2" mb="1" weight="bold">
             Start date*

From a54c8d515d528357de4c28e6380b8ea4d229d5c6 Mon Sep 17 00:00:00 2001
From: nick-bolas <bn322@ic.ac.uk>
Date: Wed, 21 Aug 2024 11:59:15 +0100
Subject: [PATCH 04/12] style: make add buttons consistent

---
 app/companies/[slug]/page.tsx    | 2 +-
 components/UpsertEvent.tsx       | 2 +-
 components/UpsertOpportunity.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/companies/[slug]/page.tsx b/app/companies/[slug]/page.tsx
index 1a56e20c..20db415d 100644
--- a/app/companies/[slug]/page.tsx
+++ b/app/companies/[slug]/page.tsx
@@ -185,7 +185,7 @@ const CompanyPage = async ({ params }: { params: { slug: string } }) => {
           <Tabs.Content value="opportunities">
             <RestrictedAreaCompany companyId={companyProfile.id} showMessage={false}>
               <Card variant="surface" className={styles.opportunityPanel}>
-                <Flex gap="3" direction="row" align="center" justify="between" p="2">
+                <Flex gap="3" direction="row" align="center" justify="between" p="2" wrap="wrap">
                   <Heading size="6">Opportunities panel</Heading>
                   <Flex gap="3" direction="row" align="center">
                     <AddOpportunity companyID={companyProfile.id} />
diff --git a/components/UpsertEvent.tsx b/components/UpsertEvent.tsx
index b4a17eb5..affcd650 100644
--- a/components/UpsertEvent.tsx
+++ b/components/UpsertEvent.tsx
@@ -147,7 +147,7 @@ export const AddEvent = ({ companyID }: { companyID: number }) => {
   return (
     <UpsertEvent companyID={companyID}>
       <PlusButton>
-        <Text>Add Event</Text>
+        <Text>Event</Text>
       </PlusButton>
     </UpsertEvent>
   )
diff --git a/components/UpsertOpportunity.tsx b/components/UpsertOpportunity.tsx
index 8e819f65..e73de37a 100644
--- a/components/UpsertOpportunity.tsx
+++ b/components/UpsertOpportunity.tsx
@@ -122,7 +122,7 @@ export const AddOpportunity = ({ companyID }: { companyID: number }) => {
   return (
     <UpsertOpportunity companyID={companyID}>
       <PlusButton>
-        <Text>Add Opportunity</Text>
+        <Text>Opportunity</Text>
       </PlusButton>
     </UpsertOpportunity>
   )

From 25e472231d9b1cd0c133d827c1bf24d0c62e72de Mon Sep 17 00:00:00 2001
From: nick-bolas <bn322@ic.ac.uk>
Date: Wed, 21 Aug 2024 12:01:28 +0100
Subject: [PATCH 05/12] chore: typo in comment

---
 components/MdEditor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/MdEditor.tsx b/components/MdEditor.tsx
index 9c3d93bc..0af5c47a 100644
--- a/components/MdEditor.tsx
+++ b/components/MdEditor.tsx
@@ -37,7 +37,7 @@ const MdEditor: FC<EditorProps> = ({ markdown, editorRef, onChange }) => {
         toolbarPlugin({
           toolbarContents: () => (
             <div style={{ display: "flex", flexWrap: "wrap" }}>
-              {/* HACK: avoid unintented focus on the first button on hover*/}
+              {/* HACK: avoid unintended focus on the first button on hover*/}
               <button disabled style={{ display: "none" }}></button>
               <UndoRedo />
               <Separator />

From e8fe66c04bf0cf0d4ab09cbaa55cdb23d410eace Mon Sep 17 00:00:00 2001
From: nick-bolas <bn322@ic.ac.uk>
Date: Wed, 21 Aug 2024 12:03:07 +0100
Subject: [PATCH 06/12] chore: remove unused imports

---
 components/MdEditor.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/components/MdEditor.tsx b/components/MdEditor.tsx
index 0af5c47a..42fe69f2 100644
--- a/components/MdEditor.tsx
+++ b/components/MdEditor.tsx
@@ -3,7 +3,6 @@
 import {
   BlockTypeSelect,
   BoldItalicUnderlineToggles,
-  CodeToggle,
   InsertTable,
   InsertThematicBreak,
   ListsToggle,
@@ -13,7 +12,6 @@ import {
   UndoRedo,
   headingsPlugin,
   listsPlugin,
-  quotePlugin,
   tablePlugin,
   thematicBreakPlugin,
   toolbarPlugin,
@@ -54,7 +52,6 @@ const MdEditor: FC<EditorProps> = ({ markdown, editorRef, onChange }) => {
         thematicBreakPlugin(),
         listsPlugin(),
         headingsPlugin(),
-        quotePlugin(),
       ]}
       markdown={markdown}
       ref={editorRef}

From 60a48401e0b581d0efdf621f582cfe008bf1bd8e Mon Sep 17 00:00:00 2001
From: nick-bolas <bn322@ic.ac.uk>
Date: Wed, 21 Aug 2024 12:05:31 +0100
Subject: [PATCH 07/12] chore: add react imports

---
 components/UpsertEvent.tsx       | 2 +-
 components/UpsertOpportunity.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/UpsertEvent.tsx b/components/UpsertEvent.tsx
index affcd650..9f8544aa 100644
--- a/components/UpsertEvent.tsx
+++ b/components/UpsertEvent.tsx
@@ -14,7 +14,7 @@ import { Event } from "@prisma/client"
 import { Pencil1Icon } from "@radix-ui/react-icons"
 import { Card, Grid, IconButton, Text, TextField } from "@radix-ui/themes"
 import dynamic from "next/dynamic"
-import { useState } from "react"
+import React, { useState } from "react"
 import { useMediaQuery } from "react-responsive"
 
 const MdEditor = dynamic(() => import("@/components/MdEditor"), { ssr: false })
diff --git a/components/UpsertOpportunity.tsx b/components/UpsertOpportunity.tsx
index e73de37a..f37d0f12 100644
--- a/components/UpsertOpportunity.tsx
+++ b/components/UpsertOpportunity.tsx
@@ -11,7 +11,7 @@ import { Opportunity, OpportunityType } from "@prisma/client"
 import { Pencil1Icon } from "@radix-ui/react-icons"
 import { Card, IconButton, Text, TextField } from "@radix-ui/themes"
 import dynamic from "next/dynamic"
-import { useState } from "react"
+import React, { useState } from "react"
 
 const defaultOpportunityType = OpportunityType.Internship
 

From 89c4c14b011f783f485fa1b86483fc65c7c7a216 Mon Sep 17 00:00:00 2001
From: nick-bolas <bn322@ic.ac.uk>
Date: Wed, 21 Aug 2024 12:16:36 +0100
Subject: [PATCH 08/12] refactor: remove unnecessary media query

---
 components/UpsertEvent.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/UpsertEvent.tsx b/components/UpsertEvent.tsx
index 9f8544aa..3f13f96e 100644
--- a/components/UpsertEvent.tsx
+++ b/components/UpsertEvent.tsx
@@ -12,7 +12,7 @@ import { InfoCallout } from "./Callouts"
 
 import { Event } from "@prisma/client"
 import { Pencil1Icon } from "@radix-ui/react-icons"
-import { Card, Grid, IconButton, Text, TextField } from "@radix-ui/themes"
+import { Card, Flex, IconButton, Text, TextField } from "@radix-ui/themes"
 import dynamic from "next/dynamic"
 import React, { useState } from "react"
 import { useMediaQuery } from "react-responsive"
@@ -87,8 +87,8 @@ const UpsertEventForm = ({
         <TextField.Root name="spaces" placeholder="E.g., 100" required type="number" defaultValue={prevEvent?.spaces} />
       </label>
       <InfoCallout message={`The times correspond to the ${TIMEZONE} timezone.`} />
-      <Grid columns={isSmallScreen ? "1" : "2"} rows={isSmallScreen ? "2" : "1"} gapY="3">
-        <label>
+      <Flex justify="left" wrap="wrap" gapY="3">
+        <label style={{ flexGrow: 1 }}>
           <Text as="div" size="2" mb="1" weight="bold">
             Start date*
           </Text>
@@ -99,13 +99,13 @@ const UpsertEventForm = ({
             required
           />
         </label>
-        <label>
+        <label style={{ flexGrow: 1 }}>
           <Text as="div" size="2" mb="1" weight="bold">
             End date
           </Text>
           <DateTimePicker name="dateEnd" placeholder="Enter end date here" defaultDate={prevEvent?.dateEnd} />
         </label>
-      </Grid>
+      </Flex>
       <label>
         <Text as="div" size="2" mb="1" weight="bold">
           Summary*

From dbef4f4149d558c901c8316810186e22516f0725 Mon Sep 17 00:00:00 2001
From: nick-bolas <bn322@ic.ac.uk>
Date: Wed, 21 Aug 2024 14:00:08 +0100
Subject: [PATCH 09/12] style: centered datetime input field text on firefox

Co-authored-by: IlliaDerevianko <IlliaDerevianko@users.noreply.github.com>
Co-authored-by: Alexander Biraben-Renard <ab1223@ic.ac.uk>
---
 components/datetime-picker.module.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/components/datetime-picker.module.scss b/components/datetime-picker.module.scss
index 9330bf32..54cc8b54 100644
--- a/components/datetime-picker.module.scss
+++ b/components/datetime-picker.module.scss
@@ -1,7 +1,5 @@
 .inputBox {
   color-scheme: light;
-  display: inline-block;
-  input {
-    height: 100%;
-  }
+  display: inline-flex;
+  align-items: center;
 }

From 1e2b58261c0c76dcf4815c1045485869da480ef5 Mon Sep 17 00:00:00 2001
From: nick-bolas <bn322@ic.ac.uk>
Date: Wed, 21 Aug 2024 14:44:15 +0100
Subject: [PATCH 10/12] feat: display time relative to client time zone on
 events page

Co-authored-by: IlliaDerevianko <IlliaDerevianko@users.noreply.github.com>
---
 app/events/[id]/FormattedClientDateTime.tsx | 58 +++++++++++++++++++++
 app/events/[id]/page.tsx                    | 20 +++++--
 2 files changed, 73 insertions(+), 5 deletions(-)
 create mode 100644 app/events/[id]/FormattedClientDateTime.tsx

diff --git a/app/events/[id]/FormattedClientDateTime.tsx b/app/events/[id]/FormattedClientDateTime.tsx
new file mode 100644
index 00000000..3764d08e
--- /dev/null
+++ b/app/events/[id]/FormattedClientDateTime.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import { Flex, Spinner, Text } from "@radix-ui/themes"
+import { format, formatDistanceStrict, isSameDay } from "date-fns"
+import React, { useEffect, useState } from "react"
+import { BsCalendar } from "react-icons/bs"
+
+const formatEventDateTime = (dateStart: Date, dateEnd: Date | null) => {
+  const formattedStart = <b>{format(dateStart, "E, dd MMM kk:mm")}</b>
+  const formattedEnd = dateEnd ? (
+    isSameDay(dateStart, dateEnd) ? (
+      <>
+        -<b>{format(dateEnd, "kk:mm")}</b>
+      </>
+    ) : (
+      <>
+        {" "}
+        to <b>{format(dateEnd, "E, dd MMM kk:mm")}</b>
+      </>
+    )
+  ) : (
+    ""
+  )
+  const timezone = format(dateStart, "O")
+  const formattedDuration = dateEnd ? <>{formatDistanceStrict(dateStart, dateEnd)}</> : ""
+
+  return (
+    <>
+      {formattedStart}
+      {formattedEnd} {timezone} ({formattedDuration})
+    </>
+  )
+}
+
+const FormattedClientDateTime = ({ dateStart, dateEnd }: { dateStart: Date; dateEnd: Date | null }) => {
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  if (!isClient) {
+    return (
+      <Flex direction="row" gap="3">
+        <Spinner />
+        Loading
+      </Flex>
+    )
+  }
+  return (
+    <Flex align="center" gap="2">
+      <BsCalendar />
+      <Text>{formatEventDateTime(dateStart, dateEnd)}</Text>
+    </Flex>
+  )
+}
+
+export default FormattedClientDateTime
diff --git a/app/events/[id]/page.tsx b/app/events/[id]/page.tsx
index b9173e4d..5b1e2a41 100644
--- a/app/events/[id]/page.tsx
+++ b/app/events/[id]/page.tsx
@@ -8,6 +8,7 @@ import RestrictedAreaCompany from "@/components/rbac/RestrictedAreaCompany"
 import RestrictedAreaStudent from "@/components/rbac/RestrictedAreaStudent"
 import prisma from "@/lib/db"
 
+import FormattedClientDateTime from "./FormattedClientDateTime"
 import styles from "./page.module.scss"
 
 import { Role } from "@prisma/client"
@@ -40,16 +41,26 @@ import { BsBoxArrowUpRight, BsCalendar, BsPinMap } from "react-icons/bs"
  *   </>
  */
 const formatEventDateTime = (dateStart: Date, dateEnd: Date | null) => {
-  const formattedStart = <b>{format(dateStart, "E, dd MMM kk:mm")}</b>
+  const formattedStart = (
+    <b>
+      <time>{format(dateStart, "E, dd MMM kk:mm")}</time>
+    </b>
+  )
   const formattedEnd = dateEnd ? (
     isSameDay(dateStart, dateEnd) ? (
       <>
-        -<b>{format(dateEnd, "kk:mm")}</b>
+        -
+        <b>
+          <time>{format(dateEnd, "kk:mm")}</time>
+        </b>
       </>
     ) : (
       <>
         {" "}
-        to <b>{format(dateEnd, "E, dd MMM kk:mm")}</b>
+        to{" "}
+        <b>
+          <time>{format(dateEnd, "E, dd MMM kk:mm")}</time>
+        </b>
       </>
     )
   ) : (
@@ -141,8 +152,7 @@ const EventPage = async ({ params }: { params: { id: string } }) => {
           <Heading>Date & Time</Heading>
 
           <Flex align="center" gap="2">
-            <BsCalendar />
-            <Text>{formatEventDateTime(event.dateStart, event.dateEnd)}</Text>
+            <FormattedClientDateTime dateStart={event.dateStart} dateEnd={event.dateEnd} />
           </Flex>
         </Flex>
 

From 705511708a68dcd73058f8382cb80a043ca325ea Mon Sep 17 00:00:00 2001
From: nick-bolas <bn322@ic.ac.uk>
Date: Wed, 21 Aug 2024 15:45:16 +0100
Subject: [PATCH 11/12] feat: use time element on events page

Co-authored-by: IlliaDerevianko <IlliaDerevianko@users.noreply.github.com>
---
 app/events/[id]/FormattedClientDateTime.tsx | 37 +++++++++++-
 app/events/[id]/page.tsx                    | 63 +--------------------
 2 files changed, 36 insertions(+), 64 deletions(-)

diff --git a/app/events/[id]/FormattedClientDateTime.tsx b/app/events/[id]/FormattedClientDateTime.tsx
index 3764d08e..625b8cb8 100644
--- a/app/events/[id]/FormattedClientDateTime.tsx
+++ b/app/events/[id]/FormattedClientDateTime.tsx
@@ -5,17 +5,48 @@ import { format, formatDistanceStrict, isSameDay } from "date-fns"
 import React, { useEffect, useState } from "react"
 import { BsCalendar } from "react-icons/bs"
 
+/**
+ * Format an event's date to JSX
+ * @param dateStart The start date time
+ * @param dateEnd The end date time
+ * @example
+ *   formatEventDateTime(
+ *     new Date("2022-01-01T12:00:00Z"),
+ *     new Date("2022-01-01T14:00:00Z")
+ *   ) =>
+ *     <>
+ *       <b><time>Sat, 01 Jan 12:00</time></b>-<b><time>14:00</time></b> GMT+0 (2 hours)
+ *     </>
+ * @example
+ *   formatEventDateTime(
+ *     new Date("2022-01-01T12:00:00Z"),
+ *     new Date("2022-01-02T14:00:00Z")
+ *   ) =>
+ *   <>
+ *     <b><time>Sat, 01 Jan 12:00</time></b> to <b><time>Sun, 02 Jan 14:00</time></b> GMT+0 (1 day)
+ *   </>
+ */
 const formatEventDateTime = (dateStart: Date, dateEnd: Date | null) => {
-  const formattedStart = <b>{format(dateStart, "E, dd MMM kk:mm")}</b>
+  const formattedStart = (
+    <b>
+      <time>{format(dateStart, "E, dd MMM kk:mm")}</time>
+    </b>
+  )
   const formattedEnd = dateEnd ? (
     isSameDay(dateStart, dateEnd) ? (
       <>
-        -<b>{format(dateEnd, "kk:mm")}</b>
+        -
+        <b>
+          <time>{format(dateEnd, "kk:mm")}</time>
+        </b>
       </>
     ) : (
       <>
         {" "}
-        to <b>{format(dateEnd, "E, dd MMM kk:mm")}</b>
+        to{" "}
+        <b>
+          <time>{format(dateEnd, "E, dd MMM kk:mm")}</time>
+        </b>
       </>
     )
   ) : (
diff --git a/app/events/[id]/page.tsx b/app/events/[id]/page.tsx
index 5b1e2a41..af8bb1ec 100644
--- a/app/events/[id]/page.tsx
+++ b/app/events/[id]/page.tsx
@@ -5,7 +5,6 @@ import Link from "@/components/Link"
 import MdViewer from "@/components/MdViewer"
 import { EditEvent } from "@/components/UpsertEvent"
 import RestrictedAreaCompany from "@/components/rbac/RestrictedAreaCompany"
-import RestrictedAreaStudent from "@/components/rbac/RestrictedAreaStudent"
 import prisma from "@/lib/db"
 
 import FormattedClientDateTime from "./FormattedClientDateTime"
@@ -13,69 +12,11 @@ import styles from "./page.module.scss"
 
 import { Role } from "@prisma/client"
 import { Box, Button, Card, Flex, Heading, Inset, Separator, Text } from "@radix-ui/themes"
-import { format, formatDistanceStrict, isSameDay } from "date-fns"
+import { format } from "date-fns"
 import Image from "next/image"
 import { notFound } from "next/navigation"
 import React from "react"
-import { BsBoxArrowUpRight, BsCalendar, BsPinMap } from "react-icons/bs"
-
-/**
- * Format an event's date to JSX
- * @param dateStart The start date time
- * @param dateEnd The end date time
- * @example
- *   formatEventDateTime(
- *     new Date("2022-01-01T12:00:00Z"),
- *     new Date("2022-01-01T14:00:00Z")
- *   ) =>
- *     <>
- *       <b>Sat, 01 Jan 12:00</b>-<b>14:00</b> GMT+0 (2 hours)
- *     </>
- * @example
- *   formatEventDateTime(
- *     new Date("2022-01-01T12:00:00Z"),
- *     new Date("2022-01-02T14:00:00Z")
- *   ) =>
- *   <>
- *     <b>Sat, 01 Jan 12:00</b> to <b>Sun, 02 Jan 14:00</b> GMT+0 (1 day)
- *   </>
- */
-const formatEventDateTime = (dateStart: Date, dateEnd: Date | null) => {
-  const formattedStart = (
-    <b>
-      <time>{format(dateStart, "E, dd MMM kk:mm")}</time>
-    </b>
-  )
-  const formattedEnd = dateEnd ? (
-    isSameDay(dateStart, dateEnd) ? (
-      <>
-        -
-        <b>
-          <time>{format(dateEnd, "kk:mm")}</time>
-        </b>
-      </>
-    ) : (
-      <>
-        {" "}
-        to{" "}
-        <b>
-          <time>{format(dateEnd, "E, dd MMM kk:mm")}</time>
-        </b>
-      </>
-    )
-  ) : (
-    ""
-  )
-  const timezone = format(dateStart, "O")
-  const formattedDuration = dateEnd ? <>{formatDistanceStrict(dateStart, dateEnd)}</> : ""
-
-  return (
-    <>
-      {formattedStart}
-      {formattedEnd} {timezone} ({formattedDuration})
-    </>
-  )
-}
+import { BsBoxArrowUpRight, BsPinMap } from "react-icons/bs"
 
 const EventPage = async ({ params }: { params: { id: string } }) => {
   const session = await auth()

From 4d31ef70aed394633ab6a36d772685aa43acc141 Mon Sep 17 00:00:00 2001
From: nick-bolas <bn322@ic.ac.uk>
Date: Wed, 21 Aug 2024 15:51:29 +0100
Subject: [PATCH 12/12] fix: unnecessary media query and incorrect justify
 value in event modal

Co-authored-by: IlliaDerevianko <IlliaDerevianko@users.noreply.github.com>
---
 components/UpsertEvent.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/components/UpsertEvent.tsx b/components/UpsertEvent.tsx
index 3f13f96e..31615f16 100644
--- a/components/UpsertEvent.tsx
+++ b/components/UpsertEvent.tsx
@@ -15,7 +15,6 @@ import { Pencil1Icon } from "@radix-ui/react-icons"
 import { Card, Flex, IconButton, Text, TextField } from "@radix-ui/themes"
 import dynamic from "next/dynamic"
 import React, { useState } from "react"
-import { useMediaQuery } from "react-responsive"
 
 const MdEditor = dynamic(() => import("@/components/MdEditor"), { ssr: false })
 
@@ -29,8 +28,6 @@ const UpsertEventForm = ({
   companyID?: number
 }) => {
   const [summary, setSummary] = useState(prevEvent?.richSummary ?? "")
-  const SMALL_SCREEN_PIXELS = 560
-  const isSmallScreen = useMediaQuery({ query: `(max-width: ${SMALL_SCREEN_PIXELS}px)` })
 
   const createEventWithArgs = async (prevState: FormPassBackState, formData: FormData) =>
     createEvent(prevState, formData, companyID ?? -1)
@@ -87,7 +84,7 @@ const UpsertEventForm = ({
         <TextField.Root name="spaces" placeholder="E.g., 100" required type="number" defaultValue={prevEvent?.spaces} />
       </label>
       <InfoCallout message={`The times correspond to the ${TIMEZONE} timezone.`} />
-      <Flex justify="left" wrap="wrap" gapY="3">
+      <Flex justify="start" wrap="wrap" gapY="3">
         <label style={{ flexGrow: 1 }}>
           <Text as="div" size="2" mb="1" weight="bold">
             Start date*