From 4dfb5feda4e4bc414d63583e868e740c5f8fda01 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Sat, 23 Mar 2024 15:51:07 +0200
Subject: [PATCH 1/2] fix: move the icon on chrome browser

---
 .../icons/BrowserPermission/chrome.svg        | 21 ++++++++++++++++++
 packages/shared/src/lib/constants.ts          |  3 +++
 .../pages/popup/notifications/enable.tsx      | 22 ++++++++++++++++---
 3 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 packages/shared/src/components/icons/BrowserPermission/chrome.svg

diff --git a/packages/shared/src/components/icons/BrowserPermission/chrome.svg b/packages/shared/src/components/icons/BrowserPermission/chrome.svg
new file mode 100644
index 0000000000..fbf29b41ea
--- /dev/null
+++ b/packages/shared/src/components/icons/BrowserPermission/chrome.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="308px" height="33px" viewBox="0 0 308 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Group 7</title>
+    <g id="Notifications" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="12.-Permission" transform="translate(-788.000000, -593.000000)">
+            <g id="Group-8" transform="translate(772.000000, 510.000000)">
+                <g id="Group-11" transform="translate(0.000000, 40.000000)">
+                    <g id="Group-7" transform="translate(16.000000, 44.551207)">
+                        <rect id="Rectangle" stroke="#979797" opacity="0.300000012" x="0.5" y="3.94879263" width="307" height="27" rx="13.5"></rect>
+                        <rect id="Rectangle" fill="#BFC0C1" opacity="0.200000003" x="1" y="4.44879263" width="40" height="26" rx="13"></rect>
+                        <path id="Path-7" d="M47.7749217,-1.67362202 C53.8560479,2.32948532 57.1682934,6.37032418 57.6609366,10.4756793 L61.1155094,11.7402594 C61.3939464,11.8421651 61.5370533,12.1504938 61.4351476,12.4289309 C61.4065023,12.5071984 61.3600277,12.5777218 61.2994043,12.6349158 L54.8535595,18.716129 C54.6378915,18.9195971 54.2981145,18.909707 54.0946464,18.6940389 C54.0149332,18.609546 53.9647747,18.501478 53.9516999,18.3860557 L52.9542362,9.58065199 C52.9208626,9.2860367 53.1326408,9.02014917 53.4272561,8.98677556 C53.5100713,8.97739437 53.5939334,8.98742355 53.6722009,9.01606885 L56.5901211,10.0841965 C55.926991,6.49336918 52.8200582,2.84473084 47.2250783,-0.83835421 C46.9944255,-0.990189253 46.9305311,-1.30025694 47.0823661,-1.53090978 C47.2342011,-1.76156262 47.5442688,-1.82545706 47.7749217,-1.67362202 Z" transform="translate(52.362658, 8.552172) rotate(-295.000000) translate(-52.362658, -8.552172) " fill="#FFFFFF" fill-rule="nonzero"></path>
+                        <rect id="Rectangle" fill="#BFC0C1" opacity="0.200000003" x="58.8547009" y="11.4487926" width="236.75641" height="12" rx="6"></rect>
+                      <g id="Icon/Filter/Outline" stroke="none"  stroke-width="1" transform="translate(8.800000, 5.448793)" fill="#A8B3CF" fill-rule="evenodd">
+                        <path d="M16.5,12 C18.1568542,12 19.5,13.3431458 19.5,15 L19.5,16.5 C19.5,18.1568542 18.1568542,19.5 16.5,19.5 L15,19.5 C13.3431458,19.5 12,18.1568542 12,16.5 L5.25,16.5 C4.83578644,16.5 4.5,16.1642136 4.5,15.75 C4.5,15.3357864 4.83578644,15 5.25,15 L12,15 C12,13.3431458 13.3431458,12 15,12 L16.5,12 Z M16.5,13.5 L15,13.5 C14.2203039,13.5 13.5795513,14.0948881 13.5068666,14.85554 L13.5,15 L13.5,16.5 C13.5,17.2796961 14.0948881,17.9204487 14.85554,17.9931334 L15,18 L16.5,18 C17.2796961,18 17.9204487,17.4051119 17.9931334,16.64446 L18,16.5 L18,15 C18,14.2203039 17.4051119,13.5795513 16.64446,13.5068666 L16.5,13.5 Z M9,4.5 C10.6568542,4.5 12,5.84314575 12,7.5 L18.75,7.5 C19.1642136,7.5 19.5,7.83578644 19.5,8.25 C19.5,8.66421356 19.1642136,9 18.75,9 L12,9 C12,10.6568542 10.6568542,12 9,12 L7.5,12 C5.84314575,12 4.5,10.6568542 4.5,9 L4.5,7.5 C4.5,5.84314575 5.84314575,4.5 7.5,4.5 L9,4.5 Z M7.5,6 C6.72030388,6 6.07955132,6.59488808 6.00686658,7.35553999 L6,7.5 L6,9 C6,9.77969612 6.59488808,10.4204487 7.35553999,10.4931334 L7.5,10.5 L9,10.5 C9.77969612,10.5 10.4204487,9.90511192 10.4931334,9.14446001 L10.5,9 L10.5,7.5 C10.5,6.72030388 9.90511192,6.07955132 9.14446001,6.00686658 L9,6 L7.5,6 Z" id="Shape"></path>
+                      </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/packages/shared/src/lib/constants.ts b/packages/shared/src/lib/constants.ts
index e95b22d31c..9b6fd1c7e3 100644
--- a/packages/shared/src/lib/constants.ts
+++ b/packages/shared/src/lib/constants.ts
@@ -51,6 +51,9 @@ export const isBrave = (): boolean => {
   }
   return typeof navigator.brave?.isBrave === 'function';
 };
+export const isChrome = (): boolean =>
+  /Chrome/.test(globalThis?.navigator?.userAgent) &&
+  /Google Inc/.test(globalThis?.navigator?.vendor);
 
 export const webappUrl = process.env.NEXT_PUBLIC_WEBAPP_URL;
 export const onboardingUrl = `${webappUrl}onboarding`;
diff --git a/packages/webapp/pages/popup/notifications/enable.tsx b/packages/webapp/pages/popup/notifications/enable.tsx
index 85723adb8b..89234a35be 100644
--- a/packages/webapp/pages/popup/notifications/enable.tsx
+++ b/packages/webapp/pages/popup/notifications/enable.tsx
@@ -1,15 +1,31 @@
+import React, { ComponentType, useEffect } from 'react';
 import classNames from 'classnames';
-import BrowserPermissionIcon from '@dailydotdev/shared/src/components/icons/BrowserPermission/primary.svg';
 import NotificationToggleIcon from '@dailydotdev/shared/src/components/icons/NotificationToggle/primary.svg';
 import classed from '@dailydotdev/shared/src/lib/classed';
 import { postWindowMessage } from '@dailydotdev/shared/src/lib/func';
-import React, { useEffect } from 'react';
 import { ENABLE_NOTIFICATION_WINDOW_KEY } from '@dailydotdev/shared/src/hooks/useNotificationPermissionPopup';
 import { useRouter } from 'next/router';
 import { NotificationPromptSource } from '@dailydotdev/shared/src/lib/analytics';
 import { useAnalyticsContext } from '@dailydotdev/shared/src/contexts/AnalyticsContext';
 import { usePushNotificationContext } from '@dailydotdev/shared/src/contexts/PushNotificationContext';
 import { usePushNotificationMutation } from '@dailydotdev/shared/src/hooks/notifications';
+import dynamic from 'next/dynamic';
+import { isChrome } from '@dailydotdev/shared/src/lib/constants';
+
+const BrowserPermissionIcon: ComponentType<{ className: string }> = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "browserPermissionIcon" */ '@dailydotdev/shared/src/components/icons/BrowserPermission/primary.svg'
+    ),
+);
+const ChromePermissionIcon: ComponentType<{ className: string }> = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "browserPermissionIcon" */ '@dailydotdev/shared/src/components/icons/BrowserPermission/chrome.svg'
+    ),
+);
+
+const BrowserIcon = isChrome() ? ChromePermissionIcon : BrowserPermissionIcon;
 
 const InstructionContainer = classed(
   'div',
@@ -82,7 +98,7 @@ function Enable(): React.ReactElement {
       <div>
         <InstructionContainer className="mb-1">
           <Description>1. Click on the lock icon in the search bar</Description>
-          <BrowserPermissionIcon
+          <BrowserIcon
             className={classNames(iconClasses, 'h-8 w-full max-w-[18.75rem]')}
           />
         </InstructionContainer>

From 82c37191b9351e96dac07b85283fcaff7d5bff70 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Sat, 23 Mar 2024 15:53:02 +0200
Subject: [PATCH 2/2] fix: change copy

---
 packages/webapp/pages/popup/notifications/enable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/webapp/pages/popup/notifications/enable.tsx b/packages/webapp/pages/popup/notifications/enable.tsx
index 89234a35be..126552af71 100644
--- a/packages/webapp/pages/popup/notifications/enable.tsx
+++ b/packages/webapp/pages/popup/notifications/enable.tsx
@@ -97,7 +97,7 @@ function Enable(): React.ReactElement {
       </Description>
       <div>
         <InstructionContainer className="mb-1">
-          <Description>1. Click on the lock icon in the search bar</Description>
+          <Description>1. Click on the icon in the search bar</Description>
           <BrowserIcon
             className={classNames(iconClasses, 'h-8 w-full max-w-[18.75rem]')}
           />