From 27a69819f9b925119cac61518a0c5bb761593512 Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Wed, 13 Mar 2024 09:49:31 +0530
Subject: [PATCH 1/9] feat: added custom styling for swagger ui

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>
---
 packages/api/v1/api-documentation.css | 101 ++++++++++++++++++++++++++
 packages/api/v1/api-documentation.tsx |   4 +
 2 files changed, 105 insertions(+)
 create mode 100644 packages/api/v1/api-documentation.css

diff --git a/packages/api/v1/api-documentation.css b/packages/api/v1/api-documentation.css
new file mode 100644
index 000000000..6e2884cbb
--- /dev/null
+++ b/packages/api/v1/api-documentation.css
@@ -0,0 +1,101 @@
+#swagger-ui.api-platform .wrapper {
+    padding: 0 60px;
+}
+
+#swagger-ui.api-platform .information-container.wrapper {
+    margin: 0 0 30px;
+    padding: 10px 0 0;
+    width: 100%;
+    max-width: 100%;
+    background-color: white;
+    border-bottom: 1px solid #ccc;
+}
+
+#swagger-ui.api-platform .info, #formats {
+    width: 100%;
+    max-width: 1460px;
+    padding: 0 50px;
+    margin: 0 auto;
+}
+
+#swagger-ui.api-platform .opblock .opblock-summary-method,
+#swagger-ui.api-platform .btn.execute {
+    transition: all ease 0.3s;
+    background-color: #3CAAB5;
+    border-color: #3CAAB5;
+}
+
+#swagger-ui.api-platform .opblock .opblock-summary-method:hover,
+#swagger-ui.api-platform .btn.execute:hover {
+    background-color: #288690;
+    border-color: #288690;
+}
+
+#swagger-ui.api-platform .opblock-summary {
+    padding: 0;
+}
+
+#swagger-ui.api-platform .opblock-tag:hover {
+    background-color: rgba(0, 0, 0, .1);
+    transform: scale(1.01);
+}
+
+#swagger-ui.api-platform .opblock.opblock-get,
+#swagger-ui.api-platform .opblock-section-header,
+#swagger-ui.api-platform .opblock-summary {
+    background-color: rgba(60, 170, 181, 0.1);
+    border-color: #3CAAB5;
+}
+
+#swagger-ui.api-platform .opblock-summary-method {
+    border-radius: 0;
+    padding: 10px;
+}
+
+#swagger-ui.api-platform .opblock-tag, .swagger-ui .table-container tr th,
+.swagger-ui .table-container tr td {
+    padding: 5px 0;
+    margin: 0 0 10px;
+}
+
+#swagger-ui.api-platform .btn-group .btn, #swagger-ui.api-platform .execute-wrapper .btn {
+    padding: 10px 40px;
+}
+
+#swagger-ui.api-platform .btn {
+    transition: all ease 0.2s;
+    box-shadow: none;
+    background-color: #f7f7f7;
+}
+
+#swagger-ui.api-platform .btn:hover, #swagger-ui.api-platform .btn.cancel:hover, 
+#swagger-ui.api-platform .btn.authorize:hover {
+    background-color: rgba(65, 68, 78, 0.1);
+    border-color: transparent;
+}
+
+#swagger-ui.api-platform select, #swagger-ui.api-platform input:focus,
+#swagger-ui.api-platform select:focus, #swagger-ui.api-platform textarea:focus,
+#swagger-ui.api-platform button:focus {
+    box-shadow: none;
+    cursor: pointer;
+    outline: none;
+}
+
+.swagger-ui .markdown p, .swagger-ui .markdown pre,
+.swagger-ui .renderedMarkdown p, .swagger-ui .renderedMarkdown pre {
+    margin: 0;
+}
+
+::placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
+    color: #fff;
+}
+
+:disabled::placeholder, :disabled:-moz-placeholder,
+:disabled::-moz-placeholder, :disabled:-ms-input-placeholder {
+    color: #fafafa;
+}
+
+#swagger-ui .topbar {
+    display: none;
+}
diff --git a/packages/api/v1/api-documentation.tsx b/packages/api/v1/api-documentation.tsx
index fe394e603..0ecdc4b39 100644
--- a/packages/api/v1/api-documentation.tsx
+++ b/packages/api/v1/api-documentation.tsx
@@ -5,6 +5,10 @@ import 'swagger-ui-react/swagger-ui.css';
 
 import { OpenAPIV1 } from '@documenso/api/v1/openapi';
 
+// Custom CSS for the Swagger UI
+// eslint-disable-next-line prettier/prettier
+import './api-documentation.css';
+
 export const OpenApiDocsPage = () => {
   return <SwaggerUI spec={OpenAPIV1} displayOperationId={true} />;
 };

From e5497efe7c9f74f93e10557fda22aa3cd67c611f Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Wed, 13 Mar 2024 12:38:56 +0530
Subject: [PATCH 2/9] chore: updated dark mode styling

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>
---
 packages/api/v1/api-documentation.css | 110 +++-----------------------
 packages/api/v1/api-documentation.tsx |   2 +-
 2 files changed, 10 insertions(+), 102 deletions(-)

diff --git a/packages/api/v1/api-documentation.css b/packages/api/v1/api-documentation.css
index 6e2884cbb..9edb85748 100644
--- a/packages/api/v1/api-documentation.css
+++ b/packages/api/v1/api-documentation.css
@@ -1,101 +1,9 @@
-#swagger-ui.api-platform .wrapper {
-    padding: 0 60px;
-}
-
-#swagger-ui.api-platform .information-container.wrapper {
-    margin: 0 0 30px;
-    padding: 10px 0 0;
-    width: 100%;
-    max-width: 100%;
-    background-color: white;
-    border-bottom: 1px solid #ccc;
-}
-
-#swagger-ui.api-platform .info, #formats {
-    width: 100%;
-    max-width: 1460px;
-    padding: 0 50px;
-    margin: 0 auto;
-}
-
-#swagger-ui.api-platform .opblock .opblock-summary-method,
-#swagger-ui.api-platform .btn.execute {
-    transition: all ease 0.3s;
-    background-color: #3CAAB5;
-    border-color: #3CAAB5;
-}
-
-#swagger-ui.api-platform .opblock .opblock-summary-method:hover,
-#swagger-ui.api-platform .btn.execute:hover {
-    background-color: #288690;
-    border-color: #288690;
-}
-
-#swagger-ui.api-platform .opblock-summary {
-    padding: 0;
-}
-
-#swagger-ui.api-platform .opblock-tag:hover {
-    background-color: rgba(0, 0, 0, .1);
-    transform: scale(1.01);
-}
-
-#swagger-ui.api-platform .opblock.opblock-get,
-#swagger-ui.api-platform .opblock-section-header,
-#swagger-ui.api-platform .opblock-summary {
-    background-color: rgba(60, 170, 181, 0.1);
-    border-color: #3CAAB5;
-}
-
-#swagger-ui.api-platform .opblock-summary-method {
-    border-radius: 0;
-    padding: 10px;
-}
-
-#swagger-ui.api-platform .opblock-tag, .swagger-ui .table-container tr th,
-.swagger-ui .table-container tr td {
-    padding: 5px 0;
-    margin: 0 0 10px;
-}
-
-#swagger-ui.api-platform .btn-group .btn, #swagger-ui.api-platform .execute-wrapper .btn {
-    padding: 10px 40px;
-}
-
-#swagger-ui.api-platform .btn {
-    transition: all ease 0.2s;
-    box-shadow: none;
-    background-color: #f7f7f7;
-}
-
-#swagger-ui.api-platform .btn:hover, #swagger-ui.api-platform .btn.cancel:hover, 
-#swagger-ui.api-platform .btn.authorize:hover {
-    background-color: rgba(65, 68, 78, 0.1);
-    border-color: transparent;
-}
-
-#swagger-ui.api-platform select, #swagger-ui.api-platform input:focus,
-#swagger-ui.api-platform select:focus, #swagger-ui.api-platform textarea:focus,
-#swagger-ui.api-platform button:focus {
-    box-shadow: none;
-    cursor: pointer;
-    outline: none;
-}
-
-.swagger-ui .markdown p, .swagger-ui .markdown pre,
-.swagger-ui .renderedMarkdown p, .swagger-ui .renderedMarkdown pre {
-    margin: 0;
-}
-
-::placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
-    color: #fff;
-}
-
-:disabled::placeholder, :disabled:-moz-placeholder,
-:disabled::-moz-placeholder, :disabled:-ms-input-placeholder {
-    color: #fafafa;
-}
-
-#swagger-ui .topbar {
-    display: none;
-}
+/* Custom CSS for dark mode */
+@media (prefers-color-scheme: dark) {
+  .swagger-ui {
+      filter: invert(85%) hue-rotate(180deg);
+  }
+  .swagger-ui .microlight {
+      filter: invert(100%) hue-rotate(180deg);
+  }
+}
\ No newline at end of file
diff --git a/packages/api/v1/api-documentation.tsx b/packages/api/v1/api-documentation.tsx
index 0ecdc4b39..b7c36fa8b 100644
--- a/packages/api/v1/api-documentation.tsx
+++ b/packages/api/v1/api-documentation.tsx
@@ -5,7 +5,7 @@ import 'swagger-ui-react/swagger-ui.css';
 
 import { OpenAPIV1 } from '@documenso/api/v1/openapi';
 
-// Custom CSS for the Swagger UI
+// Custom Dark Mode CSS for the Swagger UI
 // eslint-disable-next-line prettier/prettier
 import './api-documentation.css';
 

From 025af6e9f46f5e1683f607928fa73c341b68ba43 Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Wed, 13 Mar 2024 12:41:08 +0530
Subject: [PATCH 3/9] chore: added eol

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>
---
 packages/api/v1/api-documentation.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/api/v1/api-documentation.css b/packages/api/v1/api-documentation.css
index 9edb85748..9deba27ea 100644
--- a/packages/api/v1/api-documentation.css
+++ b/packages/api/v1/api-documentation.css
@@ -6,4 +6,4 @@
   .swagger-ui .microlight {
       filter: invert(100%) hue-rotate(180deg);
   }
-}
\ No newline at end of file
+}

From cc483016d8d6732b8a47365181dc31cee4323888 Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Wed, 13 Mar 2024 13:24:09 +0530
Subject: [PATCH 4/9] chore: updated styling

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>
---
 packages/api/v1/api-documentation.css |  9 ---------
 packages/api/v1/api-documentation.tsx | 23 +++++++++++++++++++----
 packages/ui/styles/theme.css          |  9 +++++++++
 3 files changed, 28 insertions(+), 13 deletions(-)
 delete mode 100644 packages/api/v1/api-documentation.css

diff --git a/packages/api/v1/api-documentation.css b/packages/api/v1/api-documentation.css
deleted file mode 100644
index 9deba27ea..000000000
--- a/packages/api/v1/api-documentation.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/* Custom CSS for dark mode */
-@media (prefers-color-scheme: dark) {
-  .swagger-ui {
-      filter: invert(85%) hue-rotate(180deg);
-  }
-  .swagger-ui .microlight {
-      filter: invert(100%) hue-rotate(180deg);
-  }
-}
diff --git a/packages/api/v1/api-documentation.tsx b/packages/api/v1/api-documentation.tsx
index b7c36fa8b..98bdd7095 100644
--- a/packages/api/v1/api-documentation.tsx
+++ b/packages/api/v1/api-documentation.tsx
@@ -1,15 +1,30 @@
 'use client';
 
+import { useEffect } from 'react';
+
+import { useTheme } from 'next-themes';
 import SwaggerUI from 'swagger-ui-react';
 import 'swagger-ui-react/swagger-ui.css';
 
 import { OpenAPIV1 } from '@documenso/api/v1/openapi';
 
-// Custom Dark Mode CSS for the Swagger UI
-// eslint-disable-next-line prettier/prettier
-import './api-documentation.css';
-
 export const OpenApiDocsPage = () => {
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    const body = document.body;
+
+    if (theme === 'dark') {
+      body.classList.add('swagger-dark-theme');
+    } else {
+      body.classList.remove('swagger-dark-theme');
+    }
+
+    return () => {
+      body.classList.remove('swagger-dark-theme');
+    };
+  }, [theme]);
+
   return <SwaggerUI spec={OpenAPIV1} displayOperationId={true} />;
 };
 
diff --git a/packages/ui/styles/theme.css b/packages/ui/styles/theme.css
index 70a06ad15..de1927f73 100644
--- a/packages/ui/styles/theme.css
+++ b/packages/ui/styles/theme.css
@@ -129,3 +129,12 @@
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
   background: rgb(100 116 139 / 0.5);
 }
+
+ /* Custom Swagger Dark Theme */
+.swagger-dark-theme .swagger-ui {
+  filter: invert(88%) hue-rotate(180deg);
+}
+
+.swagger-dark-theme .swagger-ui .microlight {
+  filter: invert(100%) hue-rotate(180deg);
+}
\ No newline at end of file

From df8d394c2853bdb9c2e68bd09f9d7534f4ae8ca3 Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Thu, 14 Mar 2024 00:47:54 +0530
Subject: [PATCH 5/9] chore: updated to resolvedTheme

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>
---
 packages/api/v1/api-documentation.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/api/v1/api-documentation.tsx b/packages/api/v1/api-documentation.tsx
index 98bdd7095..7ce8709bf 100644
--- a/packages/api/v1/api-documentation.tsx
+++ b/packages/api/v1/api-documentation.tsx
@@ -9,12 +9,12 @@ import 'swagger-ui-react/swagger-ui.css';
 import { OpenAPIV1 } from '@documenso/api/v1/openapi';
 
 export const OpenApiDocsPage = () => {
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
 
   useEffect(() => {
     const body = document.body;
 
-    if (theme === 'dark') {
+    if (resolvedTheme === 'dark') {
       body.classList.add('swagger-dark-theme');
     } else {
       body.classList.remove('swagger-dark-theme');
@@ -23,7 +23,7 @@ export const OpenApiDocsPage = () => {
     return () => {
       body.classList.remove('swagger-dark-theme');
     };
-  }, [theme]);
+  }, [resolvedTheme]);
 
   return <SwaggerUI spec={OpenAPIV1} displayOperationId={true} />;
 };

From 00c71fd66cf9f4612ff538891cf9c2fec523cc42 Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Thu, 14 Mar 2024 01:02:48 +0530
Subject: [PATCH 6/9] chore: fixed focus ring

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>
---
 apps/web/src/components/(dashboard)/layout/menu-switcher.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx b/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
index 765343d27..6e3a4c015 100644
--- a/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
+++ b/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
@@ -93,7 +93,7 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
         <Button
           data-testid="menu-switcher"
           variant="none"
-          className="relative flex h-12 flex-row items-center px-2 py-2 ring-0 focus-visible:border-0 focus-visible:ring-0"
+          className="focus-visible:ring-ring relative flex h-12 flex-row items-center px-2 py-2 ring-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 "
         >
           <AvatarWithText
             avatarFallback={formatAvatarFallback(selectedTeam?.name)}

From 17c6a4bd55e16f6f7544f85f7166ccc46b7ba1ff Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Fri, 15 Mar 2024 09:18:51 +0530
Subject: [PATCH 7/9] chore: updated focus state of menu switcher

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>
---
 .../(dashboard)/layout/menu-switcher.tsx           |  2 +-
 packages/ui/styles/theme.css                       | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx b/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
index 6e3a4c015..e7959322a 100644
--- a/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
+++ b/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
@@ -93,7 +93,7 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
         <Button
           data-testid="menu-switcher"
           variant="none"
-          className="focus-visible:ring-ring relative flex h-12 flex-row items-center px-2 py-2 ring-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 "
+          className="no-hover-focus relative flex h-12 flex-row items-center px-2 py-2 ring-0 hover:bg-transparent focus:outline-none focus-visible:ring-0"
         >
           <AvatarWithText
             avatarFallback={formatAvatarFallback(selectedTeam?.name)}
diff --git a/packages/ui/styles/theme.css b/packages/ui/styles/theme.css
index de1927f73..cba2bf56b 100644
--- a/packages/ui/styles/theme.css
+++ b/packages/ui/styles/theme.css
@@ -137,4 +137,18 @@
 
 .swagger-dark-theme .swagger-ui .microlight {
   filter: invert(100%) hue-rotate(180deg);
+}
+
+// Custom class to over
+.no-hover-focus {
+  outline: none !important;
+  box-shadow: none !important;
+  background-color: inherit;
+  color: inherit;
+  border-color: inherit;
+}
+
+.no-hover-focus:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
 }
\ No newline at end of file

From e29bfbf5e08c6afe181d32a9fa558fe94fe53d13 Mon Sep 17 00:00:00 2001
From: Adithya Krishna <aadithya794@gmail.com>
Date: Fri, 15 Mar 2024 09:19:47 +0530
Subject: [PATCH 8/9] chore: updated focus custom css

Signed-off-by: Adithya Krishna <aadithya794@gmail.com>
---
 packages/ui/styles/theme.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/styles/theme.css b/packages/ui/styles/theme.css
index cba2bf56b..f93e84220 100644
--- a/packages/ui/styles/theme.css
+++ b/packages/ui/styles/theme.css
@@ -139,7 +139,7 @@
   filter: invert(100%) hue-rotate(180deg);
 }
 
-// Custom class to over
+/* Custom class to override the corner focus ring */
 .no-hover-focus {
   outline: none !important;
   box-shadow: none !important;

From 3598bd0139eca5574815fda1ddee1fe4eeebeb5e Mon Sep 17 00:00:00 2001
From: Lucas Smith <me@lucasjamessmith.me>
Date: Sat, 16 Mar 2024 12:18:12 +0000
Subject: [PATCH 9/9] fix: use tailwind for menu switcher ring

---
 .../(dashboard)/layout/menu-switcher.tsx           |  2 +-
 packages/ui/styles/theme.css                       | 14 --------------
 2 files changed, 1 insertion(+), 15 deletions(-)

diff --git a/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx b/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
index e7959322a..95f959ab2 100644
--- a/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
+++ b/apps/web/src/components/(dashboard)/layout/menu-switcher.tsx
@@ -93,7 +93,7 @@ export const MenuSwitcher = ({ user, teams: initialTeamsData }: MenuSwitcherProp
         <Button
           data-testid="menu-switcher"
           variant="none"
-          className="no-hover-focus relative flex h-12 flex-row items-center px-2 py-2 ring-0 hover:bg-transparent focus:outline-none focus-visible:ring-0"
+          className="relative flex h-12 flex-row items-center px-2 py-2 ring-0 focus:outline-none focus-visible:border-0 focus-visible:ring-0 focus-visible:ring-transparent"
         >
           <AvatarWithText
             avatarFallback={formatAvatarFallback(selectedTeam?.name)}
diff --git a/packages/ui/styles/theme.css b/packages/ui/styles/theme.css
index f93e84220..de1927f73 100644
--- a/packages/ui/styles/theme.css
+++ b/packages/ui/styles/theme.css
@@ -137,18 +137,4 @@
 
 .swagger-dark-theme .swagger-ui .microlight {
   filter: invert(100%) hue-rotate(180deg);
-}
-
-/* Custom class to override the corner focus ring */
-.no-hover-focus {
-  outline: none !important;
-  box-shadow: none !important;
-  background-color: inherit;
-  color: inherit;
-  border-color: inherit;
-}
-
-.no-hover-focus:focus-visible {
-  outline: none !important;
-  box-shadow: none !important;
 }
\ No newline at end of file