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

web/src/components/events/EventItem.tsx

@@ -51,32 +51,39 @@ export const EventItem = ({
           />
         )}
       </div>
-      <div className={styles.time}>
-        {mode === "list" && nextOccurrence && (
-          <div className={styles.dates}>
-            {groupedOccurrences.slice(0, DATE_PILLS_TO_SHOW).map((group) => (
-              <span key={group[0]} className={styles.datePill}>
-                {formatDateRange(group)}
-              </span>
-            ))}
-            {groupedOccurrences.length > DATE_PILLS_TO_SHOW && (
-              <span className={styles.moreDates}>{`+${groupedOccurrences
-                .slice(DATE_PILLS_TO_SHOW)
-                .reduce((sum, group) => sum + group.length, 0)}`}</span>
-            )}
-          </div>
-        )}
-        {(mode === "calendar" || mode === "singular-time-only") &&
+      <div className={styles.text}>
+        {mode === "singular-time-only" &&
           "occurrence" in event &&
           event.occurrence?.start && (
-            <p className={styles.dates}>
-              {formatDate(event.occurrence?.start, "'kl.' HH:mm")}
+            <p className={styles.day}>
+              {formatDate(event.occurrence?.start, "eeee dd.MM.")}
             </p>
           )}
-      </div>
-      <div className={styles.text}>
         <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}>
+              {groupedOccurrences.slice(0, DATE_PILLS_TO_SHOW).map((group) => (
+                <span key={group[0]} className={styles.datePill}>
+                  {formatDateRange(group)}
+                </span>
+              ))}
+              {groupedOccurrences.length > DATE_PILLS_TO_SHOW && (
+                <span className={styles.moreDates}>{`+${groupedOccurrences
+                  .slice(DATE_PILLS_TO_SHOW)
+                  .reduce((sum, group) => sum + group.length, 0)}`}</span>
+              )}
+            </div>
+          )}
+          {(mode === "calendar" || mode === "singular-time-only") &&
+            "occurrence" in event &&
+            event.occurrence?.start && (
+              <p className={styles.dates}>
+                {formatDate(event.occurrence?.start, "'kl.' HH:mm")}
+              </p>
+            )}
+        </div>
       </div>
       <Link href={`/arrangementer/${event.slug}`} className="hiddenLink">
         Mer om arrangementet {event.title}