Change notification button

near · Sep 13, 2023 · 8b5c528 · 8b5c528
1 parent 14053c6
commit 8b5c528
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 30 deletions.
diff --git 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
@@ -210,7 +210,7 @@ export const DesktopNavigation = () => {
           )}
           {signedIn && (
             <>
-              <NotificationButton />
+              <NotificationButton preview={true} />
               <UserDropdownMenu />
             </>
           )}