From 73c2af276610fbfa80db44682a3610c9affe0def Mon Sep 17 00:00:00 2001
From: Simon Emanuelsson <simon.emanuelsson@scandichotels.com>
Date: Tue, 6 May 2025 10:47:58 +0200
Subject: [PATCH] feat: re-add outline to add room button

---
 .../components/GuestsRoomsPicker/Form.tsx       |  2 ++
 .../guests-rooms-picker.module.css              | 17 +++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/apps/scandic-web/components/GuestsRoomsPicker/Form.tsx b/apps/scandic-web/components/GuestsRoomsPicker/Form.tsx
index 3c91477ac..23d1fd26d 100644
--- a/apps/scandic-web/components/GuestsRoomsPicker/Form.tsx
+++ b/apps/scandic-web/components/GuestsRoomsPicker/Form.tsx
@@ -129,6 +129,7 @@ export default function GuestsRoomsPickerDialog({
             canAddRooms && (
               <div className={styles.addRoomMobileContainer}>
                 <Button
+                  className={styles.addRoomBtn}
                   intent="text"
                   variant="icon"
                   wrapping
@@ -169,6 +170,7 @@ export default function GuestsRoomsPickerDialog({
           canAddRooms && (
             <div className={styles.hideOnMobile}>
               <Button
+                className={styles.addRoomBtn}
                 intent="text"
                 variant="icon"
                 wrapping
diff --git a/apps/scandic-web/components/GuestsRoomsPicker/guests-rooms-picker.module.css b/apps/scandic-web/components/GuestsRoomsPicker/guests-rooms-picker.module.css
index 95b253eea..322b41e77 100644
--- a/apps/scandic-web/components/GuestsRoomsPicker/guests-rooms-picker.module.css
+++ b/apps/scandic-web/components/GuestsRoomsPicker/guests-rooms-picker.module.css
@@ -15,6 +15,7 @@
   transition: top 300ms ease;
   z-index: 100;
 }
+
 .contentWrapper {
   display: grid;
   grid-template-areas:
@@ -31,14 +32,17 @@
   display: grid;
   gap: var(--Spacing-x2);
 }
+
 .roomDetailsContainer {
   display: grid;
   gap: var(--Spacing-x2);
   padding-bottom: var(--Spacing-x1);
 }
+
 .roomHeading {
   margin-bottom: var(--Spacing-x1);
 }
+
 .btn {
   background: none;
   border: none;
@@ -64,6 +68,7 @@
 .roomContainer {
   padding: var(--Spacing-x2);
 }
+
 .roomContainer:last-of-type {
   padding-bottom: calc(var(--sticky-button-height) + 20px);
 }
@@ -77,6 +82,15 @@
   width: 100%;
 }
 
+.contentWrapper
+  .addRoomMobileContainer
+  .addRoomBtn:is(:focus, :focus-visible, :focus-within),
+.footer .hideOnMobile .addRoomBtn:is(:focus, :focus-visible, :focus-within),
+.roomActionsButton:is(:focus, :focus-visible, :focus-within) {
+  outline: -webkit-focus-ring-color auto 1px;
+  text-decoration: none;
+}
+
 @media screen and (max-width: 1366px) {
   .contentContainer {
     grid-area: content;
@@ -140,9 +154,11 @@
   .container {
     height: 24px;
   }
+
   .pickerContainerMobile {
     display: none;
   }
+
   .contentWrapper {
     grid-template-rows: auto;
   }
@@ -150,6 +166,7 @@
   .roomContainer {
     padding: var(--Spacing-x2) 0 0 0;
   }
+
   .roomContainer:first-of-type {
     padding-top: 0;
   }