Icon button instead of text (#4636)

* Icon button instead of text

* Add tooltip on hover

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"

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",

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

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"