From 8b5c528c3497a5c315dc0261ae322dfe3592e8ca Mon Sep 17 00:00:00 2001
From: Dmitriy <sheleg.dmitriy@gmail.com>
Date: Wed, 13 Sep 2023 17:54:19 +0300
Subject: [PATCH] Change notification button

---
 .../navigation/NotificationButton.tsx         | 57 +++++++++----------
 .../navigation/desktop/DesktopNavigation.tsx  |  2 +-
 2 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/src/components/navigation/NotificationButton.tsx b/src/components/navigation/NotificationButton.tsx
index 4f6ac735fc..bc03727a30 100644
--- a/src/components/navigation/NotificationButton.tsx
+++ b/src/components/navigation/NotificationButton.tsx
@@ -6,44 +6,43 @@ import { useBosComponents } from '@/hooks/useBosComponents';
 
 const StyledNotificationButton = styled.div`
   margin: 0 15px;
-  border: 0.5px solid #e3e3e0;
-  background-color: #f3f3f2;
   height: 46px;
   width: 46px;
   border-radius: 50%;
-
-  > div,
-  a {
-    width: 100%;
-    height: 100%;
-  }
-
-  a {
-    color: #1b1b18 !important;
-    background-color: #f3f3f2 !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    i {
-      font-size: 18px !important;
-    }
-  }
-
-  :hover {
-    a,
-    i {
-      color: white;
-    }
-  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;
 
-export function NotificationButton() {
+// just for preview
+const PreviewItems = () => (
+  <div className='mx-2'>
+    <p>Some really important notification with long content</p>
+    <p>Some really important notification with long content</p>
+    <p>Some really important notification with long content</p>
+    <p>Some really important notification with long content</p>
+    <p>Some really important notification with long content</p>
+    <p>Some really important notification with long content</p>
+    <p>Some really important notification with long content</p>
+    <p>Some really important notification with long content</p>
+    <p>Some really important notification with long content</p>
+    <p>Some really important notification with long content</p>
+  </div>
+);
+
+export function NotificationButton({ preview = false }) {
   const components = useBosComponents();
 
   return (
     <StyledNotificationButton className="nav-notification-button">
-      <VmComponent src={components.notificationButton} />
+      <VmComponent
+        src="sheleg3.testnet/widget/NearOrg.Notifications.NotificationButton"
+        props={{
+          preview,
+          previewItems: <PreviewItems />
+        }}
+      />
+      {/* <VmComponent src={components.notificationButton} /> */}
     </StyledNotificationButton>
   );
 }
diff --git a/src/components/navigation/desktop/DesktopNavigation.tsx b/src/components/navigation/desktop/DesktopNavigation.tsx
index 10521a2fb5..464aa2a1ea 100644
--- a/src/components/navigation/desktop/DesktopNavigation.tsx
+++ b/src/components/navigation/desktop/DesktopNavigation.tsx
@@ -210,7 +210,7 @@ export const DesktopNavigation = () => {
           )}
           {signedIn && (
             <>
-              <NotificationButton />
+              <NotificationButton preview={true} />
               <UserDropdownMenu />
             </>
           )}