make opening hours a nice box too

web/src/components/blocks/OpeningHoursSectionBlock.tsx

@@ -46,23 +46,25 @@ export async function OpeningHoursSectionBlock() {
   return (
     <section className={styles.openingHoursSection}>
       {announcement && <p>{announcement}</p>}
-      {subsections.map((subsection) => {
+      <div className={styles.openingHoursList}>
-        const [slug, title] = subsection;
+        {subsections.map((subsection) => {
-        const prettyHours = getPrettyOpeningHoursForFunction(
+          const [slug, title] = subsection;
-          allOpeningHours,
+          const prettyHours = getPrettyOpeningHoursForFunction(
-          slug
+            allOpeningHours,
-        );
+            slug
-        if (!prettyHours || prettyHours?.length === 0) {
+          );
-          return <></>;
+          if (!prettyHours || prettyHours?.length === 0) {
-        }
+            return <></>;
-        return (
+          }
-          <OpeningHoursSubsection
+          return (
-            key={slug}
+            <OpeningHoursSubsection
-            title={title}
+              key={slug}
-            prettyHours={prettyHours}
+              title={title}
-          />
+              prettyHours={prettyHours}
-        );
+            />
-      })}
+          );
+        })}
+      </div>
     </section>
   );
 }

web/src/components/blocks/openingHoursSectionBlock.module.scss

@@ -1,24 +1,24 @@
 .openingHoursSection {
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  column-gap: var(--spacing-gap-column);
-  row-gap: var(--spacing-gap-row);
-
   p {
-      grid-column: 2 / span 10;
+    margin: 0 auto;
   }
 }
 
-.openingHoursSubsection {
+.openingHoursList {
-  grid-column: span 5;
+  margin: var(--spacing-section-bottom) 0;
-  margin: 1rem 0 0;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  background: var(--color-background-secondary);
+}
 
-  &:nth-of-type(odd) {
+.openingHoursSubsection {
-    grid-column: 2 / span 5;
+  grid-column: span 4;
-  }
+  padding: calc(var(--spacing-gap-column)/1.5) var(--spacing-gap-column) var(--spacing-gap-column);
+  font-size: var(--font-size-caption);
 
   h3 {
-    margin-bottom: .5rem;
+    font-size: var(--font-size-lead);
+    margin: 0 0 1rem;
   }
 }
 
@@ -28,14 +28,15 @@
   }
 }
 
-@media (max-width: 1000px) {
+@media (max-width: 1200px) {
-  .openingHoursSection {
+  .openingHoursList {
-    p {
+    grid-template-columns: repeat(4, 1fr);
-      grid-column: 1 / -1;
+  }
+
+  .openingHoursSubsection {
+    padding: var(--spacing-gap-column);
+    h3 {
+      margin-bottom: 0;
     }
   }
-  .openingHoursSubsection,
-  .openingHoursSubsection:nth-of-type(odd) {
-    grid-column: 1 / -1;
-  }
 }

web/src/lib/openinghours.ts

@@ -141,13 +141,13 @@ function formatGroupedHours(
     const endDayName =
       group.days.length > 1 ? WEEKDAYS_NORWEGIAN[endDayIndex] : "";
 
-    const rangeName = startDayName + (endDayName ? " - " + endDayName : "");
+    const rangeName = startDayName + (endDayName ? "—" + endDayName : "");
 
     const formattedRange = {
       range: rangeName,
       ...(group.timeFrom && group.timeTo
         ? {
-            time: `${group.timeFrom.slice(0, 5)} - ${group.timeTo.slice(0, 5)}`,
+            time: `${group.timeFrom.slice(0, 5)}—${group.timeTo.slice(0, 5)}`,
           }
         : {}),
       ...(group.custom ? { custom: group.custom } : {}),