From 55a6c65db65fde37eccf59ebda389bc3f4eeda77 Mon Sep 17 00:00:00 2001
From: Luis Cadillo <luiscaf3r@gmail.com>
Date: Sat, 21 Jan 2023 11:07:30 -0500
Subject: [PATCH] fix: remove annoying outline when <Button /> clicked (#6537)

* fix: remove annoying outline when <Button /> clicked

* Delete yarn.lock
---
 .../app-store/templates/basic/config.json     |   6 +-
 .../app-store/templates/basic/package.json    |   2 +-
 .../templates/booking-pages-tag/config.json   |   2 +-
 .../templates/event-type-app-card/config.json |   2 +-
 .../config.json                               |   2 +-
 .../general-app-settings/config.json          |   2 +-
 .../templates/link-as-an-app/config.json      |   2 +-
 packages/prisma/seed-app-store.config.json    | 130 +++++-------------
 packages/ui/components/button/Button.tsx      |   8 +-
 9 files changed, 45 insertions(+), 111 deletions(-)

diff --git a/packages/app-store/templates/basic/config.json b/packages/app-store/templates/basic/config.json
index 145dbda64b..e06dae2b5f 100644
--- a/packages/app-store/templates/basic/config.json
+++ b/packages/app-store/templates/basic/config.json
@@ -7,13 +7,11 @@
   "logo": "icon.svg",
   "url": "https://example.com/link",
   "variant": "other",
-  "categories": [
-    "other"
-  ],
+  "categories": ["other"],
   "publisher": "Cal.com, Inc.",
   "email": "support@cal.com",
   "description": "It is a template for an app that can be installed and provides no other feature.",
   "isTemplate": true,
   "__createdUsingCli": true,
   "__template": "link-as-an-app"
-}
\ No newline at end of file
+}
diff --git a/packages/app-store/templates/basic/package.json b/packages/app-store/templates/basic/package.json
index ec2364b805..5f4640dab0 100644
--- a/packages/app-store/templates/basic/package.json
+++ b/packages/app-store/templates/basic/package.json
@@ -11,4 +11,4 @@
     "@calcom/types": "*"
   },
   "description": "It is a template for an app that can be installed and provides no other feature."
-}
\ No newline at end of file
+}
diff --git a/packages/app-store/templates/booking-pages-tag/config.json b/packages/app-store/templates/booking-pages-tag/config.json
index a518f33b64..9f80aaf414 100644
--- a/packages/app-store/templates/booking-pages-tag/config.json
+++ b/packages/app-store/templates/booking-pages-tag/config.json
@@ -23,6 +23,6 @@
       ]
     }
   },
-  "isTemplate":true,
+  "isTemplate": true,
   "__createdUsingCli": true
 }
diff --git a/packages/app-store/templates/event-type-app-card/config.json b/packages/app-store/templates/event-type-app-card/config.json
index 73fb7cc7b3..af1fd9917b 100644
--- a/packages/app-store/templates/event-type-app-card/config.json
+++ b/packages/app-store/templates/event-type-app-card/config.json
@@ -11,6 +11,6 @@
   "email": "support@cal.com",
   "description": "A template showcasing how an app with EventType AppCard can be built e.g. Giphy, QR Code",
   "extendsFeature": "EventType",
-  "isTemplate":true,
+  "isTemplate": true,
   "__createdUsingCli": true
 }
diff --git a/packages/app-store/templates/event-type-location-video-static/config.json b/packages/app-store/templates/event-type-location-video-static/config.json
index 751de618ca..eb2afc9501 100644
--- a/packages/app-store/templates/event-type-location-video-static/config.json
+++ b/packages/app-store/templates/event-type-location-video-static/config.json
@@ -20,6 +20,6 @@
     }
   },
   "description": "It is a template showing how to add a static URL EventType location e.g. Around, Whereby",
-  "isTemplate":true,
+  "isTemplate": true,
   "__createdUsingCli": true
 }
diff --git a/packages/app-store/templates/general-app-settings/config.json b/packages/app-store/templates/general-app-settings/config.json
index f7f33c89bb..8cf6d0f3f1 100644
--- a/packages/app-store/templates/general-app-settings/config.json
+++ b/packages/app-store/templates/general-app-settings/config.json
@@ -10,6 +10,6 @@
   "publisher": "Cal.com Inc",
   "email": "support@cal.com",
   "description": "It is a template showing how an App can have settings in installed section that configures the app globally e.g. Weather in your Calendar",
-  "isTemplate":true,
+  "isTemplate": true,
   "__createdUsingCli": true
 }
diff --git a/packages/app-store/templates/link-as-an-app/config.json b/packages/app-store/templates/link-as-an-app/config.json
index 24f8fe95d8..bd695dbf55 100644
--- a/packages/app-store/templates/link-as-an-app/config.json
+++ b/packages/app-store/templates/link-as-an-app/config.json
@@ -11,6 +11,6 @@
   "publisher": "Cal.com, Inc.",
   "email": "support@cal.com",
   "description": "It's a template showing how an app, that is just a link to some webpage, can be made e.g. Pipedream, Amie, Vimcal.",
-  "isTemplate":true,
+  "isTemplate": true,
   "__createdUsingCli": true
 }
diff --git a/packages/prisma/seed-app-store.config.json b/packages/prisma/seed-app-store.config.json
index 1ee0c8efbe..e0c669cb61 100644
--- a/packages/prisma/seed-app-store.config.json
+++ b/packages/prisma/seed-app-store.config.json
@@ -2,264 +2,200 @@
   {
     "/*": "This file is auto-generated and updated by `yarn app-store create/edit`. Don't edit it manually",
     "dirName": "routing-forms",
-    "categories": [
-      "other"
-    ],
+    "categories": ["other"],
     "slug": "routing-forms",
     "type": "routing-forms_other"
   },
   {
     "dirName": "whereby",
-    "categories": [
-      "video"
-    ],
+    "categories": ["video"],
     "slug": "whereby",
     "type": "whereby_video"
   },
   {
     "dirName": "around",
-    "categories": [
-      "video"
-    ],
+    "categories": ["video"],
     "slug": "around",
     "type": "around_video"
   },
   {
     "dirName": "riverside",
-    "categories": [
-      "video"
-    ],
+    "categories": ["video"],
     "slug": "riverside",
     "type": "riverside_video"
   },
   {
     "dirName": "typeform",
-    "categories": [
-      "other"
-    ],
+    "categories": ["other"],
     "slug": "typeform",
     "type": "typeform_other"
   },
   {
     "dirName": "ping",
-    "categories": [
-      "video"
-    ],
+    "categories": ["video"],
     "slug": "ping",
     "type": "ping_video"
   },
   {
     "dirName": "campfire",
-    "categories": [
-      "video"
-    ],
+    "categories": ["video"],
     "slug": "campfire",
     "type": "campfire_video"
   },
   {
     "dirName": "rainbow",
-    "categories": [
-      "web3"
-    ],
+    "categories": ["web3"],
     "slug": "rainbow",
     "type": "rainbow_web3"
   },
   {
     "dirName": "raycast",
-    "categories": [
-      "other"
-    ],
+    "categories": ["other"],
     "slug": "raycast",
     "type": "raycast_other"
   },
   {
     "dirName": "n8n",
-    "categories": [
-      "automation"
-    ],
+    "categories": ["automation"],
     "slug": "n8n",
     "type": "n8n_automation"
   },
   {
     "dirName": "exchangecalendar",
-    "categories": [
-      "calendar"
-    ],
+    "categories": ["calendar"],
     "slug": "exchange",
     "type": "exchange_calendar"
   },
   {
     "dirName": "qr_code",
-    "categories": [
-      "other"
-    ],
+    "categories": ["other"],
     "slug": "qr_code",
     "type": "qr_code_other"
   },
   {
     "dirName": "weather_in_your_calendar",
-    "categories": [
-      "other"
-    ],
+    "categories": ["other"],
     "slug": "weather_in_your_calendar",
     "type": "weather_in_your_calendar_other"
   },
   {
     "dirName": "fathom",
-    "categories": [
-      "analytics"
-    ],
+    "categories": ["analytics"],
     "slug": "fathom",
     "type": "fathom_analytics"
   },
   {
     "dirName": "plausible",
-    "categories": [
-      "analytics"
-    ],
+    "categories": ["analytics"],
     "slug": "plausible",
     "type": "plausible_analytics"
   },
   {
     "dirName": "wordpress",
-    "categories": [
-      "other"
-    ],
+    "categories": ["other"],
     "slug": "wordpress",
     "type": "wordpress_other"
   },
   {
     "dirName": "ga4",
-    "categories": [
-      "analytics"
-    ],
+    "categories": ["analytics"],
     "slug": "ga4",
     "type": "ga4_analytics"
   },
   {
     "dirName": "pipedream",
-    "categories": [
-      "automation"
-    ],
+    "categories": ["automation"],
     "slug": "pipedream",
     "type": "pipedream_automation"
   },
   {
     "dirName": "sirius_video",
-    "categories": [
-      "video"
-    ],
+    "categories": ["video"],
     "slug": "sirius_video",
     "type": "sirius_video_video"
   },
   {
     "dirName": "sendgrid",
-    "categories": [
-      "other"
-    ],
+    "categories": ["other"],
     "slug": "sendgrid",
     "type": "sendgrid_other_calendar"
   },
   {
     "dirName": "closecom",
-    "categories": [
-      "other"
-    ],
+    "categories": ["other"],
     "slug": "closecom",
     "type": "closecom_other_calendar"
   },
   {
     "dirName": "whatsapp",
-    "categories": [
-      "video"
-    ],
+    "categories": ["video"],
     "slug": "whatsapp",
     "type": "whatsapp_video"
   },
   {
     "dirName": "telegram",
-    "categories": [
-      "video"
-    ],
+    "categories": ["video"],
     "slug": "telegram",
     "type": "telegram_video"
   },
   {
     "dirName": "signal",
-    "categories": [
-      "video"
-    ],
+    "categories": ["video"],
     "slug": "signal",
     "type": "signal_video"
   },
   {
     "dirName": "vimcal",
-    "categories": [
-      "calendar"
-    ],
+    "categories": ["calendar"],
     "slug": "vimcal",
     "type": "vimcal_other"
   },
   {
     "dirName": "amie",
-    "categories": [
-      "calendar"
-    ],
+    "categories": ["calendar"],
     "slug": "amie",
     "type": "amie_other"
   },
   {
     "dirName": "booking-pages-tag",
-    "categories": [
-      "analytics"
-    ],
+    "categories": ["analytics"],
     "slug": "booking-pages-tag",
     "type": "booking-pages-tag_other",
     "isTemplate": true
   },
   {
     "dirName": "event-type-app-card",
-    "categories": [
-      "other"
-    ],
+    "categories": ["other"],
     "slug": "event-type-app-card",
     "type": "event-type-app-card_other",
     "isTemplate": true
   },
   {
     "dirName": "event-type-location-video-static",
-    "categories": [
-      "video"
-    ],
+    "categories": ["video"],
     "slug": "event-type-location-video-static",
     "type": "event-type-location-video-static_other",
     "isTemplate": true
   },
   {
     "dirName": "general-app-settings",
-    "categories": [
-      "other"
-    ],
+    "categories": ["other"],
     "slug": "general-app-settings",
     "type": "general-app-settings_other",
     "isTemplate": true
   },
   {
     "dirName": "link-as-an-app",
-    "categories": [
-      "other"
-    ],
+    "categories": ["other"],
     "slug": "link-as-an-app",
     "type": "link-as-an-app_other",
     "isTemplate": true
   },
   {
     "dirName": "basic",
-    "categories": [
-      "other"
-    ],
+    "categories": ["other"],
     "slug": "basic",
     "type": "basic_other",
     "isTemplate": true
   }
-]
\ No newline at end of file
+]
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 50494d1ee0..bb7d5a48dd 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -75,7 +75,7 @@ const buttonClasses = cva(
         disabled: [undefined, false],
         color: "primary",
         className:
-          "bg-brand-500 hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-offset focus:ring-brand-500 dark:hover:bg-darkgray-600 dark:bg-darkgray-900",
+          "bg-brand-500 hover:bg-brand-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-brand-500 dark:hover:bg-darkgray-600 dark:bg-darkgray-900",
       }),
       // Secondary variants
       {
@@ -94,7 +94,7 @@ const buttonClasses = cva(
         disabled: [undefined, false],
         color: "secondary",
         className:
-          "border border-gray-300 dark:border-darkgray-300 bg-white dark:bg-darkgray-100 hover:bg-gray-50 hover:border-gray-400 focus:bg-gray-100 dark:hover:bg-darkgray-200 dark:focus:bg-darkgray-200 focus:outline-none focus:ring-2 focus:ring-offset focus:ring-gray-900 dark:focus:ring-white",
+          "border border-gray-300 dark:border-darkgray-300 bg-white dark:bg-darkgray-100 hover:bg-gray-50 hover:border-gray-400 focus-visible:bg-gray-100 dark:hover:bg-darkgray-200 dark:focus-visible:bg-darkgray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-gray-900 dark:focus-visible:ring-white",
       }),
       // Minimal variants
       {
@@ -113,7 +113,7 @@ const buttonClasses = cva(
         disabled: [undefined, false],
         color: "minimal",
         className:
-          "hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-darkgray-200 dark:focus:bg-darkgray-200 focus:outline-none focus:ring-2 focus:ring-offset focus:ring-gray-900 dark:focus:ring-white",
+          "hover:bg-gray-100 focus-visible:bg-gray-100 dark:hover:bg-darkgray-200 dark:focus-visible:bg-darkgray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-gray-900 dark:focus-visible:ring-white",
       }),
       // Destructive variants
       {
@@ -132,7 +132,7 @@ const buttonClasses = cva(
         disabled: [false, undefined],
         color: "destructive",
         className:
-          "border dark:text-white text-gray-900 hover:text-red-700 focus:text-red-700 dark:hover:text-red-700 dark:focus:text-red-700 hover:border-red-100 focus:border-red-100 hover:bg-red-100  focus:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset focus:ring-red-700",
+          "border dark:text-white text-gray-900 hover:text-red-700 focus-visible:text-red-700 dark:hover:text-red-700 dark:focus-visible:text-red-700 hover:border-red-100 focus-visible:border-red-100 hover:bg-red-100  focus-visible:bg-red-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset focus-visible:ring-red-700",
       }),
       // https://github.com/joe-bell/cva/issues/95 created an issue about using !p-2 on the icon variants as i would expect this to take priority
       {