Event page design tweaks

apps/web/src/app/arrangementer/[slug]/[eventId]/page.tsx

@@ -187,11 +187,11 @@ const EventContent = ({ event, attendance, parentEvent, parentAttendance, punish
       </div>
 
       <div className="flex flex-1 flex-col gap-8 sm:gap-4 md:min-w-88 lg:min-w-104">
-        <div className="sm:hidden h-1 rounded-full w-full bg-gray-200 dark:bg-stone-700" />
+        <div className="sm:hidden h-0.5 rounded-full w-full bg-gray-300 dark:bg-stone-700" />
         <TimeLocationBox event={event} />
         {attendance !== null && (
           <>
-            <div className="sm:hidden h-1 rounded-full w-full bg-gray-200 dark:bg-stone-700" />
+            <div className="sm:hidden h-0.5 rounded-full w-full bg-gray-300 dark:bg-stone-700" />
 
             <AttendanceCard
               initialAttendance={attendance}

apps/web/src/app/arrangementer/components/AttendanceCard/AttendanceCard.tsx

@@ -188,7 +188,7 @@ export const AttendanceCard = ({
   }
 
   return (
-    <section className="flex flex-col gap-4 min-h-[6rem] sm:p-4 sm:rounded-xl sm:border sm:border-gray-200 sm:dark:border-stone-800 sm:dark:bg-stone-800">
+    <section className="flex flex-col gap-4 min-h-24 sm:p-4 sm:rounded-xl sm:border sm:border-gray-200 sm:dark:border-stone-800 sm:dark:bg-stone-800">
       <Title element="h2" size="lg">
         Påmelding
       </Title>
@@ -274,11 +274,11 @@ export const AttendanceCardSkeleton = () => {
   )
 
   const title = skeletonText("w-[50%] h-8")
-  const card = <div className="min-h-[12rem] rounded-lg bg-gray-300 dark:bg-stone-600 animate-pulse" />
-  const button = <div className="min-h-[4rem] rounded-lg bg-gray-300 dark:bg-stone-600 animate-pulse" />
+  const card = <div className="min-h-48 rounded-lg bg-gray-300 dark:bg-stone-600 animate-pulse" />
+  const button = <div className="min-h-16 rounded-lg bg-gray-300 dark:bg-stone-600 animate-pulse" />
 
   return (
-    <section className="flex flex-col gap-4 min-h-[6rem] rounded-lg sm:border sm:border-gray-200 sm:dark:border-stone-800 sm:dark:bg-stone-800 sm:p-4 sm:rounded-xl">
+    <section className="flex flex-col gap-4 min-h-24 rounded-lg sm:border sm:border-gray-200 sm:dark:border-stone-800 sm:dark:bg-stone-800 sm:p-4 sm:rounded-xl">
       {title}
 
       <div className="flex flex-row gap-2 items-center">

apps/web/src/app/arrangementer/components/AttendanceCard/AttendanceDateInfo.tsx

@@ -11,23 +11,22 @@ const dateComponent = (label: string, date: Date, time: string, showNotice?: boo
 
   return (
     <div className="flex flex-col gap-0">
-      <div className="flex items-center sm:items-start gap-4 sm:gap-0">
-        <div className="sm:hidden pl-2 text-gray-600 dark:text-stone-400">{icon}</div>
+      <div className="flex items-center xs:items-start gap-4 xs:gap-0">
+        <div className="xs:hidden pl-2 text-gray-600 dark:text-stone-400">{icon}</div>
 
         <div className="flex flex-col">
           <Text
             className={cn(
-              "w-fit md:text-sm lg:text-base",
+              "w-fit font-medium xs:font-thin text-sm text-gray-600 dark:text-stone-400",
               showNotice && "px-0.5 rounded-sm bg-yellow-100 dark:bg-yellow-600/25"
             )}
           >
             {label}
           </Text>
 
-          <div className="flex flex-row gap-2 text-gray-700 dark:text-stone-300 sm:flex-col sm:gap-0 sm:text-sm">
-            <Text className="hidden md:hidden lg:inline">{longDateStr}</Text>
+          <div className="flex flex-row gap-2 xs:flex-col xs:gap-0">
+            <Text className="inline md:hidden lg:inline">{longDateStr}</Text>
             <Text className="hidden md:inline lg:hidden">{shortDateStr}</Text>
-            <Text className="inline md:hidden">{longDateStr}</Text>
             <Text>kl. {time}</Text>
           </div>
         </div>
@@ -91,12 +90,15 @@ export const AttendanceDateInfo = ({ attendance, attendee, chargeScheduleDate }:
   const sortedElements = dateBlocks.toSorted((a, b) => a.date.getTime() - b.date.getTime())
 
   const element = (
-    <div className="flex flex-col justify-between space-y-4 sm:flex-row sm:space-x-4">
+    <div className="flex flex-col justify-between space-y-4 mb-4 xs:mb-2 xs:flex-row xs:space-y-0">
       {sortedElements.map(({ element, key }, index) => (
         <React.Fragment key={key}>
           {element}
           {index < sortedElements.length - 1 && (
-            <span className="self-center grow h-0.5 rounded-full bg-gray-600 dark:bg-stone-600 hidden sm:block" />
+            <>
+              <span className="self-center grow h-0.5 mx-4 rounded-full bg-gray-300 dark:bg-stone-700 hidden xs:block md:hidden" />
+              <span className="self-center h-15 w-px rounded-full bg-gray-300 dark:bg-stone-700 hidden md:block" />
+            </>
           )}
         </React.Fragment>
       ))}

apps/web/src/app/arrangementer/components/AttendanceCard/EventRules.tsx

@@ -13,7 +13,7 @@ import {
   Text,
   cn,
 } from "@dotkomonline/ui"
-import { IconBook2 } from "@tabler/icons-react"
+import { IconGavel } from "@tabler/icons-react"
 import { useState } from "react"
 
 interface EventRulesProps {
@@ -26,7 +26,7 @@ export const EventRules = ({ className }: EventRulesProps) => {
     <AlertDialog open={open} onOpenChange={setOpen}>
       <AlertDialogTrigger>
         <div className={cn("text-sm flex flex-row gap-1 items-center cursor-pointer", className)}>
-          <IconBook2 className="size-[1.25em]" />
+          <IconGavel className="size-[1.25em]" />
           <Text>Arrangementregler</Text>
         </div>
       </AlertDialogTrigger>

apps/web/src/app/arrangementer/components/AttendanceCard/MainPoolCard.tsx

@@ -130,21 +130,23 @@ export const MainPoolCard: FC<MainPoolCardProps> = ({ attendance, user, authoriz
 
   const servingPunishment = attendee?.earliestReservationAt && isFuture(attendee.earliestReservationAt)
 
+  const reserved = false
+
   return (
     <div
       className={cn(
         "flex flex-col w-full rounded-lg",
         !attendee && "bg-gray-100 dark:bg-stone-700/50",
         attendee?.reserved === true && "bg-green-100 dark:bg-green-900",
-        attendee?.reserved === false && "bg-yellow-100 dark:bg-indigo-900/75"
+        attendee?.reserved === false && "bg-yellow-100 dark:bg-yellow-900/75"
       )}
     >
       <div
         className={cn(
           "flex flex-row gap-2 px-3 py-2 rounded-t-lg justify-center text-sm font-bold",
           !attendee && "bg-gray-200 dark:bg-stone-700",
           attendee?.reserved === true && "bg-green-200 dark:bg-green-800",
-          attendee?.reserved === false && "bg-yellow-200 dark:bg-indigo-900"
+          attendee?.reserved === false && "bg-yellow-200 dark:bg-yellow-800"
         )}
       >
         <Title element="p" className="text-base">
@@ -156,16 +158,16 @@ export const MainPoolCard: FC<MainPoolCardProps> = ({ attendance, user, authoriz
             mergeDelayHours={pool.mergeDelayHours}
             className={cn(
               attendee?.reserved === true && "bg-green-300/50 dark:bg-green-700/50",
-              attendee?.reserved === false && "bg-yellow-300/50 dark:bg-indigo-700/50"
+              attendee?.reserved === false && "bg-yellow-300/50 dark:bg-yellow-600/50"
             )}
           />
         )}
       </div>
 
-      <div className="flex flex-col min-h-[10rem] gap-6 p-3 rounded-lg items-center text-center justify-center w-full">
+      <div className="flex flex-col min-h-38 gap-6 p-3 rounded-lg items-center text-center justify-center w-full">
         {!showRegisterCountdown && (
           <div className="flex grow flex-col gap-4 items-center text-center justify-center">
-            <div className="flex flex-col gap-1 items-center">
+            <div className="flex gap-1 items-center">
               <Text
                 className={cn(
                   "text-3xl px-2 py-1",
@@ -181,7 +183,7 @@ export const MainPoolCard: FC<MainPoolCardProps> = ({ attendance, user, authoriz
                 <Text
                   className={cn(
                     "text-lg px-1 py-0.5",
-                    attendee?.reserved === false && "bg-yellow-200 dark:bg-indigo-800 rounded-lg"
+                    attendee?.reserved === false && "bg-yellow-200 dark:bg-yellow-800 rounded-lg"
                   )}
                 >
                   +{unreservedAttendeeCount} i kø
@@ -212,12 +214,12 @@ export const MainPoolCard: FC<MainPoolCardProps> = ({ attendance, user, authoriz
         {showPaymentCountdown && attendee?.paymentLink && (
           <Link href={attendee.paymentLink} className="group relative cursor-pointer items-center w-full">
             <Stripes
-              colorA={cn("dark:bg-amber-600", attendee.reserved !== false ? "bg-amber-200" : "bg-indigo-200")}
-              colorB={cn("dark:bg-amber-700", attendee.reserved !== false ? "bg-amber-300" : "bg-indigo-300")}
+              colorA={cn("", reserved ? "bg-yellow-200 dark:bg-amber-600" : "bg-indigo-200 dark:bg-indigo-400")}
+              colorB={cn("", reserved ? "bg-yellow-300 dark:bg-amber-700" : "bg-indigo-300 dark:bg-indigo-500")}
               stripeWidth={24}
               speed="2.0s"
               animated
-              className="group flex items-center h-[10rem] px-5 py-4 rounded-md"
+              className="group flex items-center h-40 px-5 py-4 rounded-md"
             >
               <div className="relative flex flex-row justify-between items-center w-full">
                 <div className="flex flex-col gap-1 items-center justify-center w-full">
@@ -298,8 +300,8 @@ const AttendanceStatus = ({ attendance, attendee }: AttendanceStatusProps) => {
 
   return (
     <div className="flex flex-row items-center gap-2">
-      <IconClockHour2 className="size-[1.25em] dark:text-indigo-400" />
-      <Text>Du er {queuePosition !== null && `${queuePosition}. `}i køen</Text>
+      <IconClockHour2 className="size-[1.25em]" />
+      <Text>Du er nr. {queuePosition !== null && queuePosition} i køen</Text>
     </div>
   )
 }

apps/web/src/app/arrangementer/components/TimeLocationBox/LocationBox.tsx

@@ -17,7 +17,7 @@ export const LocationBox: FC<LocationBoxProps> = ({ event }) => {
 
   return (
     <section className="flex flex-row gap-4 items-center">
-      <IconMapPin className="size-6 text-gray-600 dark:text-stone-400" />
+      <IconMapPin className="shrink-0 size-6 text-gray-600 dark:text-stone-400" />
 
       <div className="flex flex-col grow justify-center">
         {locationTitle && <Text>{locationTitle}</Text>}

apps/web/src/app/arrangementer/components/TimeLocationBox/TimeBox.tsx

@@ -36,22 +36,22 @@ export const TimeBox: FC<TimeBoxProps> = ({ event }) => {
       {isSame ? (
         <div className="flex flex-col grow">
           <Text>{longDate(start)}</Text>
-          <Text>
+          <Text className="text-gray-600 dark:text-stone-400">
             kl. {formatDate(start, "HH:mm", { locale: nb })} - {formatDate(end, "HH:mm", { locale: nb })}
           </Text>
         </div>
       ) : (
         <div className="flex flex-row grow gap-4 items-center">
           <div className="flex flex-col">
             <Text>{shortDate(start)}</Text>
-            <Text>kl. {formatDate(start, "HH:mm", { locale: nb })}</Text>
+            <Text className="text-gray-600 dark:text-stone-400">kl. {formatDate(start, "HH:mm", { locale: nb })}</Text>
           </div>
 
           <IconArrowRight className="size-6 shrink-0 text-gray-600 dark:text-stone-400" />
 
           <div className="flex flex-col">
             <Text>{shortDate(end)}</Text>
-            <Text>kl. {formatDate(end, "HH:mm", { locale: nb })}</Text>
+            <Text className="text-gray-600 dark:text-stone-400">kl. {formatDate(end, "HH:mm", { locale: nb })}</Text>
           </div>
         </div>
       )}