fix(SW-2029): Opening hours styling

Approved-by: Matilda Landström

apps/scandic-web/components/OpeningHours/AlternateOpeningHours/index.tsx

@@ -1,5 +1,6 @@
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
+import Divider from "@/components/TempDesignSystem/Divider"
 import { getIntl } from "@/i18n"
 
 import { getGroupedOpeningHours } from "../utils"
@@ -23,34 +24,30 @@ export default async function AlternateOpeningHours({
   // If there are alternate hours but no grouped hours with length, we return the name of the alternate hours
   if (!groupedAlternateOpeningHours?.length) {
     return (
-      <Typography
-        variant="Body/Supporting text (caption)/smRegular"
-        className={styles.caption}
-      >
-        <p>{alternateOpeningHours.name}</p>
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p className={styles.caption}>{alternateOpeningHours.name}</p>
       </Typography>
     )
   }
 
   return (
     <>
-      <Typography variant="Body/Paragraph/mdBold" className={styles.text}>
-        <h5>
+      <Divider color="Border/Divider/Default" />
+      <Typography variant="Body/Paragraph/mdBold">
+        <h5 className={styles.heading}>
           {intl.formatMessage(
             { id: "Alternate opening hours ({name})" },
             { name: alternateOpeningHours.name }
           )}
         </h5>
       </Typography>
-      {groupedAlternateOpeningHours.map((groupedOpeningHour) => (
-        <Typography
-          variant="Body/Paragraph/mdRegular"
-          className={styles.text}
-          key={groupedOpeningHour}
-        >
-          <p>{groupedOpeningHour}</p>
-        </Typography>
-      ))}
+      <Typography variant="Body/Paragraph/mdRegular">
+        <div className={styles.text}>
+          {groupedAlternateOpeningHours.map((groupedOpeningHour) => (
+            <p key={groupedOpeningHour}>{groupedOpeningHour}</p>
+          ))}
+        </div>
+      </Typography>
     </>
   )
 }