Feat/BOOK-293 button adjustments

* feat(BOOK-293): Adjusted padding of the buttons to match Figma design * feat(BOOK-293): Updated variants for IconButton * feat(BOOK-113): Updated focus indicators on buttons and added default focus ring color * feat(BOOK-293): Replaced buttons inside booking widget Approved-by: Christel Westerberg
2025-12-15 07:05:31 +00:00
parent c153e0db50
commit 4ec1e85d84
59 changed files with 741 additions and 504 deletions
--- a/apps/scandic-web/components/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css
+++ b/apps/scandic-web/components/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css
@@ -22,6 +22,6 @@
 }

 .link:focus-visible {
-  outline: 2px auto -webkit-focus-ring-color;
+  outline: 2px auto var(--Border-Interactive-Focus);
  outline-offset: -4px;
 }
--- a/apps/scandic-web/components/CampaignBanner/campaignBanner.module.css
+++ b/apps/scandic-web/components/CampaignBanner/campaignBanner.module.css
@@ -53,7 +53,6 @@
 }

 .closeButton {
-  flex-shrink: 0;
  z-index: 1;
 }

--- a/apps/scandic-web/components/CampaignBanner/index.tsx
+++ b/apps/scandic-web/components/CampaignBanner/index.tsx
@@ -119,8 +119,7 @@ export default function CampaignBanner() {
        </InnerContent>
        <IconButton
          className={styles.closeButton}
-          theme="Inverted"
-          style="Muted"
+          variant="Muted"
          onPress={handleClose}
          aria-label={intl.formatMessage({
            id: "campaignBanner.dismissBanner",
--- a/apps/scandic-web/components/Carousel/CarouselNavigation.tsx
+++ b/apps/scandic-web/components/Carousel/CarouselNavigation.tsx
@@ -22,8 +22,7 @@ export function CarouselPrevious({ className }: CarouselButtonProps) {
  return (
    <span className={cx(styles.buttonWrapper, styles.previous, className)}>
      <IconButton
-        theme="Inverted"
-        style="Elevated"
+        variant="Elevated"
        onPress={scrollPrev}
        aria-label={intl.formatMessage({
          id: "carousel.previousSlide",
@@ -46,8 +45,7 @@ export function CarouselNext({ className }: CarouselButtonProps) {
  return (
    <span className={cx(styles.buttonWrapper, styles.next, className)}>
      <IconButton
-        theme="Inverted"
-        style="Elevated"
+        variant="Elevated"
        onPress={scrollNext}
        aria-label={intl.formatMessage({
          id: "carousel.nextSlide",
--- a/apps/scandic-web/components/Carousel/carousel.module.css
+++ b/apps/scandic-web/components/Carousel/carousel.module.css
@@ -18,7 +18,7 @@
 }

 .item:focus-visible {
-  outline: 2px auto -webkit-focus-ring-color;
+  outline: 2px auto var(--Border-Interactive-Focus);
  outline-offset: 1px;
 }
 .buttonWrapper {
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CityMapCard/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CityMapCard/index.tsx
@@ -46,8 +46,8 @@ export default function CityMapCard({
  return (
    <article className={cx(styles.cityMapCard, className)}>
      <IconButton
-        theme="Black"
-        style="Muted"
+        variant="Muted"
+        emphasis
        className={styles.closeButton}
        onPress={handleClose}
        aria-label={intl.formatMessage({
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/DestinationSearch/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/DestinationSearch/index.tsx
@@ -54,8 +54,8 @@ export function DestinationSearch() {
                  <>
                    <IconButton
                      onPress={close}
-                      theme="Black"
-                      style="Muted"
+                      variant="Muted"
+                      emphasis
                      className={styles.close}
                    >
                      <MaterialIcon
--- a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx
@@ -49,8 +49,8 @@ export default function HotelMapCard({
    <article className={className}>
      <div className={styles.wrapper}>
        <IconButton
-          theme="Black"
-          style="Muted"
+          variant="Muted"
+          emphasis
          className={styles.closeButton}
          onPress={handleClose}
          aria-label={intl.formatMessage({
--- a/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/dynamicMap.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/dynamicMap.module.css
@@ -63,7 +63,6 @@
  .seeAsListButton {
    display: flex !important;
    pointer-events: initial;
-    box-shadow: var(--button-box-shadow);
  }

  /* Overriding Google maps infoWindow styles */
--- a/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx
@@ -146,10 +146,9 @@ export default function DynamicMap({
        )}
        <div className={styles.zoomButtons}>
          <IconButton
-            theme="Inverted"
-            style="Elevated"
+            variant="Elevated"
            className={styles.zoomButton}
-            onClick={zoomIn}
+            onPress={zoomIn}
            aria-label={intl.formatMessage({
              id: "map.zoomIn",
              defaultMessage: "Zoom in",
@@ -159,10 +158,9 @@ export default function DynamicMap({
            <MaterialIcon icon="add" color="CurrentColor" size={24} />
          </IconButton>
          <IconButton
-            theme="Inverted"
-            style="Elevated"
+            variant="Elevated"
            className={styles.zoomButton}
-            onClick={zoomOut}
+            onPress={zoomOut}
            aria-label={intl.formatMessage({
              id: "map.zoomOut",
              defaultMessage: "Zoom out",
--- a/apps/scandic-web/components/ContentType/HotelMapPage/hotelMapPage.module.css
+++ b/apps/scandic-web/components/ContentType/HotelMapPage/hotelMapPage.module.css
@@ -10,6 +10,5 @@
 }

 .closeButton {
-  box-shadow: var(--button-box-shadow);
  pointer-events: initial;
 }
--- a/apps/scandic-web/components/Header/MainMenu/MainMenuButton/menuButton.module.css
+++ b/apps/scandic-web/components/Header/MainMenu/MainMenuButton/menuButton.module.css
@@ -11,7 +11,7 @@
  padding: var(--Space-x05) 0;

  &:focus-visible {
-    outline: 2px auto -webkit-focus-ring-color;
+    outline: 2px auto var(--Border-Interactive-Focus);
    outline-offset: 1px;
  }

--- a/apps/scandic-web/components/Header/MainMenu/MenuLink/menuLink.module.css
+++ b/apps/scandic-web/components/Header/MainMenu/MenuLink/menuLink.module.css
@@ -13,7 +13,7 @@
  }

  &:focus-visible {
-    outline: 2px auto -webkit-focus-ring-color;
+    outline: 2px auto var(--Border-Interactive-Focus);
    outline-offset: 1px;
  }

--- a/apps/scandic-web/components/HotelFilterAndSort/index.tsx
+++ b/apps/scandic-web/components/HotelFilterAndSort/index.tsx
@@ -129,7 +129,7 @@ export default function HotelFilterAndSort() {
                      })}
                    </h3>
                  </Typography>
-                  <IconButton onPress={close} theme="Black">
+                  <IconButton onPress={close} variant="Muted" emphasis>
                    <MaterialIcon icon="close" color="CurrentColor" />
                  </IconButton>
                </header>
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ViewAndPrintReceipt/view.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/Upcoming/ManageStay/Actions/ViewAndPrintReceipt/view.module.css
@@ -7,5 +7,5 @@
 }

 .download:focus-visible {
-  outline: 2px solid -webkit-focus-ring-color;
+  outline: 2px solid var(--Border-Interactive-Focus);
 }
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx
@@ -265,8 +265,8 @@ export default function Room({ booking, roomNr, user }: RoomProps) {
                  subtitle={rateTerm.paymentTerm}
                  trigger={
                    <IconButton
-                      theme="Black"
-                      style="Muted"
+                      variant="Muted"
+                      emphasis
                      className={styles.termsInfoIcon}
                    >
                      <MaterialIcon
--- a/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/Terms.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/Details/Terms/Terms.tsx
@@ -50,7 +50,12 @@ export default function Terms() {
          title={rateTerm.title}
          subtitle={rateTerm.paymentTerm}
          trigger={
-            <IconButton theme="Black" style="Muted" className={styles.button}>
+            <IconButton
+              variant="Muted"
+              emphasis
+              size="sm"
+              className={styles.button}
+            >
              <MaterialIcon icon="info" color="Icon/Default" size={20} />
            </IconButton>
          }
--- a/apps/scandic-web/components/MeetingPackageWidget/index.tsx
+++ b/apps/scandic-web/components/MeetingPackageWidget/index.tsx
@@ -89,8 +89,8 @@ export default function MeetingPackageWidget(props: MeetingPackageWidgetProps) {
                <>
                  <div className={styles.closeButtonWrapper}>
                    <IconButton
-                      theme="Black"
-                      style="Muted"
+                      variant="Muted"
+                      emphasis
                      onPress={close}
                      className={styles.closeButton}
                      aria-label={intl.formatMessage({
--- a/apps/scandic-web/components/MyPages/LevelProgressCard/LevelProgressModal/index.tsx
+++ b/apps/scandic-web/components/MyPages/LevelProgressCard/LevelProgressModal/index.tsx
@@ -41,7 +41,7 @@ export default function LevelProgressModal({
    <Modal
      className={styles.dialog}
      trigger={
-        <IconButton theme="Black">
+        <IconButton variant="Muted" emphasis>
          <MaterialIcon
            className={styles.infoButton}
            icon="info"
--- a/apps/scandic-web/components/Profile/DeleteCreditCardConfirmation.tsx
+++ b/apps/scandic-web/components/Profile/DeleteCreditCardConfirmation.tsx
@@ -71,7 +71,8 @@ export default function DeleteCreditCardConfirmation({
      })}
      trigger={
        <IconButton
-          theme="Black"
+          variant="Muted"
+          emphasis
          aria-label={intl.formatMessage({
            id: "profile.creditCard.deleteCard",
            defaultMessage: "Delete card",
--- a/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx
+++ b/apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx
@@ -98,8 +98,9 @@ export default function PasswordInput({
              />
              {visibilityToggleable ? (
                <IconButton
-                  theme="Black"
-                  onClick={() => setIsPasswordVisible((value) => !value)}
+                  variant="Muted"
+                  emphasis
+                  onPress={() => setIsPasswordVisible((value) => !value)}
                  aria-label={
                    isPasswordVisible
                      ? intl.formatMessage({