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
@@ -1,4 +1,4 @@
-import { ChevronRightIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"

 import styles from "./pagination.module.css"

@@ -41,10 +41,10 @@ export default function Pagination({
          handlePageChange(currentPage - 1)
        }}
      >
-        <ChevronRightIcon
+        <MaterialIcon
+          icon="chevron_left"
+          size={20}
          className={styles.chevronLeft}
-          height={20}
-          width={20}
        />
      </PaginationButton>
      {[...Array(pageCount)].map((_, idx) => (
@@ -65,7 +65,7 @@ export default function Pagination({
          handlePageChange(currentPage + 1)
        }}
      >
-        <ChevronRightIcon height={20} width={20} />
+        <MaterialIcon icon="chevron_right" size={20} />
      </PaginationButton>
    </div>
  )
@@ -29,7 +29,6 @@
  cursor: not-allowed;
 }
 .chevronLeft {
-  transform: rotate(180deg);
  height: 100%;
 }

@@ -1,4 +1,4 @@
-import { CloseLargeIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"

 import styles from "./surprises.module.css"

@@ -9,7 +9,7 @@ export default function Header({ onClose, children }: HeaderProps) {
    <div className={styles.top}>
      {children}
      <button onClick={onClose} type="button" className={styles.close}>
-        <CloseLargeIcon />
+        <MaterialIcon icon="close" />
      </button>
    </div>
  )
@@ -1,6 +1,7 @@
 import { useIntl } from "react-intl"

-import { ChevronRightSmallIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"

 import styles from "./surprises.module.css"
@@ -23,10 +24,11 @@ export default function Navigation({
        onPress={() => showSurprise(-1)}
        size="small"
      >
-        <ChevronRightSmallIcon
+        <MaterialIcon
+          icon="chevron_right"
+          color="CurrentColor"
+          size={20}
          className={styles.chevron}
-          width={20}
-          height={20}
        />
        {intl.formatMessage({ id: "Previous" })}
      </Button>
@@ -38,7 +40,7 @@ export default function Navigation({
        size="small"
      >
        {intl.formatMessage({ id: "Next" })}
-        <ChevronRightSmallIcon width={20} height={20} />
+        <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
      </Button>
    </nav>
  )
@@ -1,6 +1,7 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { getMembershipCards } from "@/lib/trpc/memoizedRequests"

-import { PlusCircleIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -64,7 +65,7 @@ export default async function MembershipCardSlot() {
          </div>
        ))}
      <Link href="#" variant="icon">
-        <PlusCircleIcon color="burgundy" />
+        <MaterialIcon icon="add_circle" color="CurrentColor" />
        <Body color="burgundy" textTransform="underlined">
          {intl.formatMessage({ id: "Add new card" })}
        </Body>
@@ -1,16 +1,10 @@
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { countriesMap } from "@/constants/countries"
 import { Lang, languages } from "@/constants/languages"
 import { profileEdit } from "@/constants/routes/myPages"
 import { getProfile } from "@/lib/trpc/memoizedRequests"

-import {
-  CalendarIcon,
-  EmailIcon,
-  GlobeIcon,
-  LocationIcon,
-  LockIcon,
-  PhoneIcon,
-} from "@/components/Icons"
 import CommunicationSlot from "@/components/MyPages/myprofile/communication/communication"
 import CreditCardSlot from "@/components/MyPages/myprofile/creditCards/creditCards"
 import Header from "@/components/Profile/Header"
@@ -96,42 +90,48 @@ export default async function Profile() {
        <div className={styles.profile}>
          <div className={styles.info}>
            <div className={styles.item}>
-              <CalendarIcon color="burgundy" />
+              <MaterialIcon
+                icon="calendar_month"
+                color="Icon/Interactive/Default"
+              />
              <Body color="burgundy" textTransform="bold">
                {intl.formatMessage({ id: "Date of Birth" })}
              </Body>
              <Body color="burgundy">{user.dateOfBirth}</Body>
            </div>
            <div className={styles.item}>
-              <PhoneIcon color="burgundy" />
+              <MaterialIcon icon="phone" color="Icon/Interactive/Default" />
              <Body color="burgundy" textTransform="bold">
                {intl.formatMessage({ id: "Phone number" })}
              </Body>
              <Body color="burgundy">{user.phoneNumber}</Body>
            </div>
            <div className={styles.item}>
-              <GlobeIcon color="burgundy" />
+              <MaterialIcon icon="globe" color="Icon/Interactive/Default" />
              <Body color="burgundy" textTransform="bold">
                {intl.formatMessage({ id: "Language" })}
              </Body>
              <Body color="burgundy">{normalizedLanguage}</Body>
            </div>
            <div className={styles.item}>
-              <EmailIcon color="burgundy" />
+              <MaterialIcon icon="mail" color="Icon/Interactive/Default" />
              <Body color="burgundy" textTransform="bold">
                {intl.formatMessage({ id: "Email" })}
              </Body>
              <Body color="burgundy">{user.email}</Body>
            </div>
            <div className={styles.item}>
-              <LocationIcon color="burgundy" />
+              <MaterialIcon
+                icon="location_on"
+                color="Icon/Interactive/Default"
+              />
              <Body color="burgundy" textTransform="bold">
                {intl.formatMessage({ id: "Address" })}
              </Body>
              <Body color="burgundy">{addressOutput}</Body>
            </div>
            <div className={styles.item}>
-              <LockIcon color="burgundy" />
+              <MaterialIcon icon="lock" color="Icon/Interactive/Default" />
              <Body color="burgundy" textTransform="bold">
                {intl.formatMessage({ id: "Password" })}
              </Body>