feat: re-add outline to add room button

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

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;
   }