From 7f2b8cf3f71395a0fc04eb27c336e891fda9886c Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <en3m@ya.ru>
Date: Tue, 24 May 2022 16:51:56 +0200
Subject: [PATCH] fix copy to clipboard and tabs styles in Safari (#69)

---
 packages/web/app/pages/_document.tsx          |  4 ++--
 packages/web/app/src/components/v2/tabs.tsx   |  1 +
 .../web/app/src/lib/hooks/use-clipboard.ts    | 24 ++++---------------
 3 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/packages/web/app/pages/_document.tsx b/packages/web/app/pages/_document.tsx
index 481ca33fa..4e4346295 100644
--- a/packages/web/app/pages/_document.tsx
+++ b/packages/web/app/pages/_document.tsx
@@ -36,8 +36,8 @@ export default class MyDocument extends Document {
             id="force-dark-mode"
             dangerouslySetInnerHTML={{
               __html: `
-              localStorage['chakra-ui-color-mode'] = 'dark';
-              document.documentElement.classList.add('dark');
+                localStorage['chakra-ui-color-mode'] = 'dark';
+                document.documentElement.classList.add('dark');
               `,
             }}
           />
diff --git a/packages/web/app/src/components/v2/tabs.tsx b/packages/web/app/src/components/v2/tabs.tsx
index 99d631275..3ff4558b1 100644
--- a/packages/web/app/src/components/v2/tabs.tsx
+++ b/packages/web/app/src/components/v2/tabs.tsx
@@ -41,6 +41,7 @@ Tabs.Trigger = forwardRef(
     <Trigger
       ref={forwardedRef as any}
       className={clsx(
+        '!appearance-none', // unset button styles in Safari
         `
   radix-state-active:text-white
   font-bold
diff --git a/packages/web/app/src/lib/hooks/use-clipboard.ts b/packages/web/app/src/lib/hooks/use-clipboard.ts
index 5782e66cd..0f54eaaf2 100644
--- a/packages/web/app/src/lib/hooks/use-clipboard.ts
+++ b/packages/web/app/src/lib/hooks/use-clipboard.ts
@@ -6,33 +6,17 @@ export function useClipboard() {
 
   return useCallback(
     async (text: string): Promise<void> => {
-      const result = await navigator.permissions.query({
-        name: 'clipboard-write' as any,
-      });
-
-      if (result.state === 'denied') {
+      if (!navigator?.clipboard) {
         notify('Access to clipboard rejected!', 'error');
         return;
       }
-      // TODO: toast throws when used in Modal and modal's Portal is document.body
-      const isV2 = window.location.pathname.startsWith('/v2');
       try {
         await navigator.clipboard.writeText(text);
-        if (!isV2) {
-          notify('Copied to clipboard!', 'info');
-        }
-      } catch (e) {
-        if (!isV2) {
-          notify('Failed to copy!', 'error');
-        }
+        notify('Copied to clipboard!', 'info');
+      } catch {
+        notify('Failed to copy!', 'error');
       }
     },
     [notify]
   );
 }
-
-// navigator.permissions.query({name: "clipboard-write"}).then(result => {
-//   if (result.state == "granted" || result.state == "prompt") {
-//     /* write to the clipboard now */
-//   }
-// });