misc happy styling, event header tables, etc

web/src/components/events/EventHeader.tsx

@@ -26,9 +26,9 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
           <Link href="/arrangementer">Arrangement</Link>
         </span>
         <h1 className={styles.title}>{event.title}</h1>
-        <div className={styles.details}>
+        <div className={styles.eventDetails}>
           <div className={styles.prices}>
-            {/*<h2>Pris</h2>*/}
+            <span className={styles.label}>Pris:</span>
             <ul className={styles.priceList}>
               {event.free && (
                 <li className={styles.priceItem}>
@@ -55,24 +55,31 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
               )}
             </ul>
           </div>
-          {event.ticketUrl && (
-            <a href={event.ticketUrl} className="button cta">
-              <span>Kjøp billetter</span>
-              <Icon />
-            </a>
-          )}
-          {event.facebookUrl && (
-            <a href={event.facebookUrl} className="textLink">
-              Gå til Facebook-event
-            </a>
-          )}
           {event.categories.length > 0 && (
             <div>
-              Kategorier: {event.categories.map((x) => x.name).join(", ")}
+              <span className={styles.label}>Kategorier:</span>{" "}
+              {event.categories.map((x) => x.name).join(", ")}
+            </div>
+          )}
+          {event.organizers && (
+            <div>
+              <span className={styles.label}>Arrangeres av:</span>{" "}
+              <OrganizerList event={event} />
             </div>
           )}
-          {event.organizers && <OrganizerList event={event} />}
         </div>
+        {event.ticketUrl && (
+          <a href={event.ticketUrl} className="button cta">
+            <span>Kjøp billetter</span>
+            <Icon />
+          </a>
+        )}
+        {event.facebookUrl && (
+          <a href={event.facebookUrl} className="button tertiary">
+            <span>Gå til Facebook-event</span>
+            <Icon type="externalLink" />
+          </a>
+        )}
       </div>
       <div className={styles.image}>
         {featuredImage && (

web/src/components/events/OrganizerList.tsx

@@ -8,22 +8,18 @@ import Link from "next/link";
 
 export const OrganizerList = ({ event }: { event: EventFragment }) => {
   return (
-    <div className={styles.organizerList}>
-      <h2>Arrangeres av</h2>
-      <ul>
-        {event.organizers.map((organizer) => {
-          const url =
-            organizer.association?.url ?? organizer.externalUrl ?? null;
-          if (typeof url === "string" && url.startsWith("http")) {
-            return (
-              <li key={organizer.name}>
-                <Link href={url}>{organizer.name}</Link>
-              </li>
-            );
-          }
-          return <li key={organizer.name}>{organizer.name}</li>;
-        })}
-      </ul>
-    </div>
+    <ul className={styles.organizerList}>
+      {event.organizers.map((organizer) => {
+        const url = organizer.association?.url ?? organizer.externalUrl ?? null;
+        if (typeof url === "string" && url.startsWith("http")) {
+          return (
+            <li key={organizer.name}>
+              <Link href={url}>{organizer.name}</Link>
+            </li>
+          );
+        }
+        return <li key={organizer.name}>{organizer.name}</li>;
+      })}
+    </ul>
   );
 };

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

@@ -1,7 +1,11 @@
+.dateWrapper {
+  background: var(--color-background-secondary);
+  margin: 0 calc(var(--spacing-sitepadding-inline)*-1) var(--spacing-sitepadding-block);
+  padding: var(--spacing-s) var(--spacing-sitepadding-inline) var(--spacing-m);
+}
+
 .dateList {
   list-style: none;
-  margin: 0 calc(var(--spacing-sitepadding-inline)*-1) calc(var(--spacing-sitepadding-block)*2);
-  padding: 0 var(--spacing-sitepadding-inline);
   display: flex;
   gap: var(--spacing-s);
 }

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

@@ -4,7 +4,7 @@
   grid-template-columns: repeat(3, 1fr);
   column-gap: var(--spacing-gap-column);
   align-items: flex-end;
-  padding: 0 0 var(--spacing-sitepadding-inline) 0;
+  padding: 0;
 }
 
 .title {
@@ -18,29 +18,62 @@
   img {
     max-width: 100%;
     height: auto;
+    display: block;
   }
 }
 
-.details {}
+.text {
+  padding-bottom: var(--spacing-m);
+}
+
+.eventDetails {
+  font-size: var(--font-size-caption);
+  margin: var(--spacing-m) 0;
+
+  >div {
+    padding: var(--spacing-xs) 0;
+    border-bottom: var(--border);
+    display: flex;
+  }
+}
 
 .prices {
-  margin: 2rem 0 var(--spacing-s);
-
-  h2 {
-    font-size: var(--spacing-s);
-    font-family: var(--font-main);
-  }
+  padding: var(--spacing-xs) 0 0;
+  border-top: var(--border);
+  display: flex;
 }
 
 .priceList {
   list-style: none;
+  //flex-grow: 1;
 }
 
 .priceItem {
-  font-size: var(--font-size-caption);
   position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  /*padding: var(--spacing-xs) 0;
+  border-bottom: var(--border);
+
+  &:first-child {
+    padding-top: 0;
+  }
+
+  &:last-child {
+    border-bottom: 0;
+    padding-bottom: 0;
+  }*/
 }
 
 .priceLabel {
+  display: block;
+}
+
+.label {
   font-weight: 600;
+}
+
+.label {
+  width: 7rem;
 }

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

@@ -121,4 +121,10 @@
   padding: 0 .4rem;
   font-size: var(--font-size-xs);
   font-family: var(--font-main);
+  font-weight: 500;
+}
+
+.moreDates {
+  color: var(--color-goldenBeige);
+  background: var(--color-deepBrick);
 }

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

@@ -1,10 +1,9 @@
 .organizerList {
-  h2 {
-    font-size: inherit;
-    font-weight: inherit;
-  }
+  list-style: none;
+  display: inline;
 
-  ul {
-    list-style: none;
+  li {
+    display: inline;
+    font-size: var(--font-size-caption);
   }
 }