Merged in feat/SW-1711-switch-icons (pull request #1558)

Switches out all the old icons to new ones, and moves them to the design system. The new icons are of three different types: Materialise Symbol, Nucleo, and Customized. Also adds further mapping between facilities/amenities and icons. Approved-by: Michael Zetterberg Approved-by: Erik Tiekstra
2025-03-27 09:42:52 +00:00
parent 93c7fe64bf
commit 5de2a993a7
524 changed files with 4442 additions and 6802 deletions
@@ -4,9 +4,10 @@ import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useRef } from "react"
 import { useIntl } from "react-intl"

+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { trpc } from "@/lib/trpc/client"

-import { PlusCircleIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
@@ -98,7 +99,7 @@ export default function AddCreditCardButton() {
      }
      wrapping
    >
-      <PlusCircleIcon color="burgundy" />
+      <MaterialIcon icon="add_circle" color="CurrentColor" />
      {intl.formatMessage({ id: "Add new card" })}
    </Button>
  )
@@ -1,4 +1,5 @@
-import { CreditCard } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"

@@ -13,7 +14,7 @@ export default function CreditCardRow({ card }: CreditCardRowProps) {

  return (
    <div className={styles.card}>
-      <CreditCard color="black" />
+      <MaterialIcon icon="credit_card" color="Icon/Intense" />
      <Body textTransform="bold">{card.type}</Body>
      <Caption color="textMediumContrast">{maskedCardNumber}</Caption>
      <DeleteCreditCardConfirmation card={card} />
@@ -1,9 +1,10 @@
 "use client"
 import { useIntl } from "react-intl"

+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { trpc } from "@/lib/trpc/client"

-import { DeleteIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import { toast } from "@/components/TempDesignSystem/Toasts"

@@ -35,7 +36,7 @@ export default function DeleteCreditCardButton({
  }
  return (
    <Button variant="icon" theme="base" intent="text" onClick={handleDelete}>
-      <DeleteIcon color="burgundy" />
+      <MaterialIcon icon="remove" color="CurrentColor" />
    </Button>
  )
 }
@@ -1,10 +1,11 @@
 "use client"
 import { useIntl } from "react-intl"

+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { trpc } from "@/lib/trpc/client"

 import Dialog from "@/components/Dialog"
-import { DeleteIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import { toast } from "@/components/TempDesignSystem/Toasts"

@@ -55,7 +56,7 @@ export default function DeleteCreditCardConfirmation({
      titleText={intl.formatMessage({ id: "Remove card from member profile" })}
      trigger={
        <Button intent="secondary" size="small" theme="base">
-          <DeleteIcon color="burgundy" />
+          <MaterialIcon icon="delete" color="Icon/Interactive/Default" />
        </Button>
      }
    />
@@ -2,9 +2,10 @@

 import { useIntl } from "react-intl"

+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { trpc } from "@/lib/trpc/client"

-import ArrowRight from "@/components/Icons/ArrowRight"
 import Button from "@/components/TempDesignSystem/Button"
 import { toast } from "@/components/TempDesignSystem/Toasts"

@@ -44,7 +45,7 @@ export default function ManagePreferencesButton() {
      onClick={() => generatePreferencesLink.mutate()}
      wrapping
    >
-      <ArrowRight color="burgundy" />
+      <MaterialIcon icon="arrow_forward" color="CurrentColor" />
      {intl.formatMessage({ id: "Manage preferences" })}
    </Button>
  )