From 0ba7627d0fa79fb62748a0dc0197f1c27dcdc7ae Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 18 Jan 2024 18:23:42 +0800
Subject: [PATCH 1/2] Notifications - work in progress

---
 apps/kitchensink/partials/topNav.hbs          | 22 +++++++++++++------
 packages/ui/src/6-elements/form/_index.scss   |  1 +
 .../ui/src/6-elements/form/_notification.scss |  7 ++++++
 3 files changed, 23 insertions(+), 7 deletions(-)
 create mode 100644 packages/ui/src/6-elements/form/_notification.scss

diff --git a/apps/kitchensink/partials/topNav.hbs b/apps/kitchensink/partials/topNav.hbs
index 285e846b9e..ed8539749e 100644
--- a/apps/kitchensink/partials/topNav.hbs
+++ b/apps/kitchensink/partials/topNav.hbs
@@ -1,6 +1,7 @@
 <header class="main-header u-padding-inline-end-0">
-    <button id="menuButton" class="icon-button is-not-desktop" aria-label="Open Menu">
+    <button id="menuButton" class="icon-button is-not-desktop u-position-relative u-padding-inline-8" aria-label="Open Menu">
         <span class="icon-menu" aria-hidden="true"></span>
+        <span class="notification u-position-absolute u-inset-block-start-0 u-inset-inline-end-0"></span>
     </button>
     <a class="logo">
         <img src="/images/appwrite-gray-light.svg" width="132" height="34" alt="Appwrite">
@@ -13,10 +14,13 @@
     </nav>
 
     <div class="main-header-end">
-        <nav class="u-flex u-gap-12">
+        <nav class="u-flex u-cross-center">
+            <section class="drop-wrapper">
+                <button class="button is-only-desktop"><span class="text">Upgrade</span></button>
+            </section>
             <div class="drop-wrapper">
                 <button class="button is-text is-only-desktop">
-                    <span class="pulse-notification"></span>
+                    <span class="notification u-position-absolute u-inset-block-start-8 u-inset-inline-end-8"></span>
                     <span class="text">Feedback</span>
                 </button>
                 <div class="drop is-block-end u-hide" style="--drop-width-size-desktop:20rem; --section-padding-horizontal:1.5rem; --section-padding-vertical:1.5rem;">
@@ -123,7 +127,7 @@
                 </div>
             </div>
             <div class="drop-wrapper">
-                <button class="button is-text u-margin-inline-end-16 is-only-desktop"><span class="text">Support</span></button>
+                <button class="button is-text is-only-desktop"><span class="text">Support</span></button>
                 <section id="Support" class="drop is-block-end is-full-screen-mobile u-width-280-desktop u-hide">
                     <header class="drop-header-mobile">
                         <h1 class="body-text-1 u-bold u-line-height-1">Support</h1>
@@ -185,9 +189,13 @@
                     </section>
                 </section>
             </div>
-            <section class="drop-wrapper">
-                <button class="button is-secondary is-only-desktop"><span class="text">Upgrade</span></button>
-            </section>
+            <button class="button is-text is-small" type="button" aria-label="search"> <i class="icon-search"></i></button>
+            <div class="drop-wrapper">
+                <button class="button is-text is-small u-position-relative" type="button" aria-label="notifications">
+                    <span class="notification u-position-absolute u-inset-block-start-4 u-inset-inline-end-16"></span>
+                    <i class="icon-bell"></i>
+                </button>
+            </div>
         </nav>
         <nav class="u-flex u-height-100-percent u-sep-inline-start">
             <div class="drop-wrapper">
diff --git a/packages/ui/src/6-elements/form/_index.scss b/packages/ui/src/6-elements/form/_index.scss
index a509464599..3af15f9a75 100644
--- a/packages/ui/src/6-elements/form/_index.scss
+++ b/packages/ui/src/6-elements/form/_index.scss
@@ -7,6 +7,7 @@
 @forward "password-meter";
 @forward "radio-and-checkbox";
 @forward "switch";
+@forward "notification";
 @forward "pulse-notification";
 @forward "interactive-text-output";
 
diff --git a/packages/ui/src/6-elements/form/_notification.scss b/packages/ui/src/6-elements/form/_notification.scss
new file mode 100644
index 0000000000..3ed9df7600
--- /dev/null
+++ b/packages/ui/src/6-elements/form/_notification.scss
@@ -0,0 +1,7 @@
+@use '../../abstract' as *;
+.notification {
+  inline-size:pxToRem(6); block-size:pxToRem(6); box-sizing:content-box;
+  background-color:hsl(var(--color-primary-100));
+  border:solid pxToRem(2) hsl(var(--p-body-bg-color));
+  border-radius:var(--border-radius-circular);
+}
\ No newline at end of file

From 76733216292f892d605325089428b88fb9d28828 Mon Sep 17 00:00:00 2001
From: Elad Shechter <elad2412@gmail.com>
Date: Thu, 18 Jan 2024 20:08:33 +0800
Subject: [PATCH 2/2] Notifications - work in progress

---
 apps/kitchensink/partials/topNav.hbs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/kitchensink/partials/topNav.hbs b/apps/kitchensink/partials/topNav.hbs
index ed8539749e..9c749b5eb3 100644
--- a/apps/kitchensink/partials/topNav.hbs
+++ b/apps/kitchensink/partials/topNav.hbs
@@ -1,7 +1,7 @@
 <header class="main-header u-padding-inline-end-0">
     <button id="menuButton" class="icon-button is-not-desktop u-position-relative u-padding-inline-8" aria-label="Open Menu">
         <span class="icon-menu" aria-hidden="true"></span>
-        <span class="notification u-position-absolute u-inset-block-start-0 u-inset-inline-end-0"></span>
+        <span class="notification u-position-absolute u-inset-block-start-0 u-inset-inline-end-4"></span>
     </button>
     <a class="logo">
         <img src="/images/appwrite-gray-light.svg" width="132" height="34" alt="Appwrite">