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

packages/design-system/lib/components/Lightbox/FullView/index.tsx

@@ -87,8 +87,7 @@ export default function FullView({
   return (
     <div className={styles.fullView}>
       <IconButton
-        theme="Inverted"
-        style="Muted"
+        variant="Muted"
         className={styles.closeButton}
         onPress={onClose}
         aria-label={intl.formatMessage({
@@ -139,16 +138,16 @@ export default function FullView({
       </div>
 
       <IconButton
-        theme="Inverted"
+        variant="Muted"
         className={`${styles.navigationButton} ${styles.prev}`}
-        onClick={handlePrev}
+        onPress={handlePrev}
       >
         <MaterialIcon icon="arrow_back" color="CurrentColor" />
       </IconButton>
       <IconButton
-        theme="Inverted"
+        variant="Muted"
         className={`${styles.navigationButton} ${styles.next}`}
-        onClick={handleNext}
+        onPress={handleNext}
       >
         <MaterialIcon icon="arrow_forward" color="CurrentColor" />
       </IconButton>

packages/design-system/lib/components/Lightbox/Gallery/index.tsx

@@ -88,8 +88,8 @@ export default function Gallery({
   return (
     <div className={styles.gallery}>
       <IconButton
-        theme="Black"
-        style="Muted"
+        variant="Muted"
+        emphasis
         className={styles.closeButton}
         onPress={onClose}
         aria-label={intl.formatMessage({
@@ -149,8 +149,7 @@ export default function Gallery({
             </motion.div>
           </AnimatePresence>
           <IconButton
-            theme="Inverted"
-            style="Elevated"
+            variant="Elevated"
             className={cx(styles.navigationButton, styles.previous)}
             onPress={handlePrev}
             aria-label={intl.formatMessage({
@@ -161,8 +160,7 @@ export default function Gallery({
             <MaterialIcon icon="arrow_back" color="CurrentColor" />
           </IconButton>
           <IconButton
-            theme="Inverted"
-            style="Elevated"
+            variant="Elevated"
             className={cx(styles.navigationButton, styles.next)}
             onPress={handleNext}
             aria-label={intl.formatMessage({