add days back to upcoming events, tidy up design a little

web/src/components/events/EventItem.tsx

@@ -51,6 +51,16 @@ export const EventItem = ({
           />
         )}
       </div>
+      <div className={styles.text}>
+        {mode === "singular-time-only" &&
+          "occurrence" in event &&
+          event.occurrence?.start && (
+            <p className={styles.day}>
+              {formatDate(event.occurrence?.start, "eeee dd.MM.")}
+            </p>
+          )}
+        <h1 className={styles.title}>{event.title}</h1>
+        <p className={styles.details}>Evt. andre detaljer</p>
         <div className={styles.time}>
           {mode === "list" && nextOccurrence && (
             <div className={styles.dates}>
@@ -74,9 +84,6 @@ export const EventItem = ({
               </p>
             )}
         </div>
-      <div className={styles.text}>
-        <h1 className={styles.title}>{event.title}</h1>
-        <p className={styles.details}>Evt. andre detaljer</p>
       </div>
       <Link href={`/arrangementer/${event.slug}`} className="hiddenLink">
         Mer om arrangementet {event.title}

web/src/components/events/UpcomingEvents.tsx

@@ -28,12 +28,12 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
           const eventsThisDay = eventsByDate[day];
           return (
             <div key={day}>
-              <h3>
+              {/*<h3>
                 {formatDate(
                   parse(day, "yyyy-MM-dd", new Date()),
                   "eeee dd.MM."
                 )}
-              </h3>
+              </h3>*/}
               <ul>
                 {eventsThisDay.map((event) => (
                   <EventItem

web/src/components/events/eventItem.module.scss

@@ -20,7 +20,6 @@
 
   &.medium {
     --size-image-width: 8rem;
-    grid-template-rows: 1fr 2fr;
     grid-template-columns: var(--size-image-width) auto;
     column-gap: .6rem;
     align-items: center;
@@ -28,7 +27,6 @@
 
     .image {
       width: var(--size-image-width);
-      grid-row: span 2;
     }
 
     .dates,
@@ -37,6 +35,18 @@
       font-size: var(--font-size-body);
     }
 
+    .day {
+      &:first-letter {
+        text-transform: uppercase;
+      }
+      font-family: var(--font-serif);
+      font-size: var(--font-size-caption);
+    }
+
+    .title {
+      margin: .2em 0;
+    }
+
     .dates {
       font-size: var(--font-size-caption);
     }

web/src/components/events/upcomingEvents.module.scss

@@ -31,12 +31,16 @@
 
 .eventList {
   --size-item-width: 20rem;
-  padding: var(--spacing-s) 0;
+  margin-bottom: var(--spacing-xs);
   list-style: none;
   display: flex;
   width: calc(var(--size-item-width) * 10);
   position: relative;
 
+  ul {
+    display: flex;
+  }
+
   li {
     padding-right: var(--spacing-s);
   }