From a1d4589e66e8adba10612e6dcab7edf914f1c874 Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Wed, 21 Sep 2022 06:52:14 +0100
Subject: [PATCH] Icon button instead of text (#4636)

* Icon button instead of text

* Add tooltip on hover
---
 apps/web/components/booking/pages/BookingPage.tsx | 11 ++++++-----
 apps/web/public/static/locales/en/common.json     |  2 +-
 packages/ui/v2/core/Button.tsx                    |  2 +-
 packages/ui/v2/core/Tooltip.tsx                   |  3 ++-
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index 552c549379..f3d55b78ba 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -844,12 +844,13 @@ const BookingPage = ({
                   {!eventType.disableGuests && !guestToggle && (
                     <Button
                       type="button"
-                      color="secondary"
+                      color="minimalSecondary"
+                      size="icon"
+                      tooltip={t("additional_guests")}
+                      StartIcon={Icon.FiUserPlus}
                       onClick={() => setGuestToggle(!guestToggle)}
-                      className="dark:bg-darkmodebrand dark:text-darkmodebrandcontrast dark:hover:border-darkmodebrandcontrast mr-auto dark:border-transparent">
-                      <Icon.FiUserPlus className="mr-2" />
-                      {t("additional_guests")}
-                    </Button>
+                      className="mr-auto"
+                    />
                   )}
                   <Button
                     color="minimal"
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index a0ebdb4e1a..c1a1f95f97 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -446,7 +446,7 @@
   "sunday": "Sunday",
   "all_booked_today": "All booked today.",
   "slots_load_fail": "Could not load the available time slots.",
-  "additional_guests": "Add guest",
+  "additional_guests": "Add guests",
   "your_name": "Your name",
   "email_address": "Email address",
   "enter_valid_email": "Please enter a valid email",
diff --git a/packages/ui/v2/core/Button.tsx b/packages/ui/v2/core/Button.tsx
index 03d1f867f7..fbe678f93f 100644
--- a/packages/ui/v2/core/Button.tsx
+++ b/packages/ui/v2/core/Button.tsx
@@ -45,7 +45,7 @@ const variantClassName = {
   minimal:
     "text-gray-700 bg-transparent hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-gray-100 focus:ring-brand-900 dark:text-darkgray-900 hover:dark:text-gray-50",
   minimalSecondary:
-    "text-gray-700 bg-transparent hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-gray-100 focus:ring-brand-900 dark:text-darkgray-900 hover:dark:text-gray-50 border border-transparent hover:border-gray-300",
+    "text-gray-700 bg-transparent hover:bg-gray-100 dark:hover:bg-darkgray-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-gray-100 focus:ring-brand-900 dark:text-darkgray-900 hover:dark:text-gray-50 border border-transparent hover:border-gray-300 dark:hover:border-darkgray-300",
   destructive:
     "text-gray-900 focus:text-red-700 bg-transparent hover:bg-red-100 hover:text-red-700 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-100 focus:ring-red-700",
 };
diff --git a/packages/ui/v2/core/Tooltip.tsx b/packages/ui/v2/core/Tooltip.tsx
index 4faeb351d4..9bead1ad1b 100644
--- a/packages/ui/v2/core/Tooltip.tsx
+++ b/packages/ui/v2/core/Tooltip.tsx
@@ -30,7 +30,8 @@ export function Tooltip({
         className={classNames(
           side === "top" && "-mt-7",
           side === "right" && "ml-2",
-          "relative z-40 rounded-md bg-gray-900 px-2 py-1 text-xs font-semibold text-white shadow-lg"
+
+          "relative z-40 rounded-md bg-gray-900 px-2 py-1 text-xs font-semibold text-white shadow-lg dark:bg-white dark:text-gray-600"
         )}
         side={side}
         align="center"