From bbe04e3cb04ebcb59967fed5e1cc679cd0d1ea61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Mon, 19 May 2025 11:22:38 +0000
Subject: [PATCH] Merged in fix/alert-icon (pull request #2139)

fix(SW-2807): alert icons

* fix(SW-2807): fix incorrect icon color on sitewide alert

* fix(SW-2807): change error icon


Approved-by: Erik Tiekstra
Approved-by: Linus Flood
---
 .../TempDesignSystem/Alert/index.tsx          |  6 ++++-
 .../TempDesignSystem/Alert/utils.tsx          | 23 ++++++++++++++++---
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/apps/scandic-web/components/TempDesignSystem/Alert/index.tsx b/apps/scandic-web/components/TempDesignSystem/Alert/index.tsx
index fc67512b3..bb09f6f07 100644
--- a/apps/scandic-web/components/TempDesignSystem/Alert/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Alert/index.tsx
@@ -41,7 +41,11 @@ export default function Alert({
     <section className={classNames} role={ariaRole} aria-live={ariaLive}>
       <div className={styles.content}>
         <span className={styles.iconWrapper}>
-          <IconByAlertType alertType={type} className={styles.icon} />
+          <IconByAlertType
+            alertType={type}
+            className={styles.icon}
+            variant={variant}
+          />
         </span>
         <div className={styles.innerContent}>
           <div className={styles.textWrapper}>
diff --git a/apps/scandic-web/components/TempDesignSystem/Alert/utils.tsx b/apps/scandic-web/components/TempDesignSystem/Alert/utils.tsx
index c58aa5f6c..bf96fb4f8 100644
--- a/apps/scandic-web/components/TempDesignSystem/Alert/utils.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Alert/utils.tsx
@@ -4,25 +4,35 @@ import {
 } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { AlertTypeEnum } from "@/types/enums/alert"
+import type { AlertProps } from "./alert"
 
 interface IconByAlertProps {
   alertType: AlertTypeEnum
+  variant?: AlertProps["variant"]
 }
 
 export function IconByAlertType({
   alertType,
+  variant = "inline",
   ...props
 }: IconByAlertProps & MaterialIconSetIconProps): JSX.Element {
   switch (alertType) {
     case AlertTypeEnum.Alarm:
       return (
-        <MaterialIcon color="Icon/Inverted" isFilled icon="cancel" {...props} />
+        <MaterialIcon
+          color={variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Error"}
+          isFilled
+          icon="error"
+          {...props}
+        />
       )
     case AlertTypeEnum.Warning:
       return (
         <MaterialIcon
           icon="warning"
-          color="Icon/Inverted"
+          color={
+            variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Warning"
+          }
           isFilled
           {...props}
         />
@@ -30,7 +40,14 @@ export function IconByAlertType({
     case AlertTypeEnum.Info:
     default:
       return (
-        <MaterialIcon color="Icon/Inverted" isFilled icon="info" {...props} />
+        <MaterialIcon
+          color={
+            variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Information"
+          }
+          isFilled
+          icon="info"
+          {...props}
+        />
       )
   }
 }