From 570783cd2335e46513aca45a84df6e6e6f25ff50 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Mon, 28 Oct 2024 16:48:44 -0700
Subject: [PATCH] Adjust notification badge position, add edit feed button

---
 src/app/dashboard/feeds/loading.tsx     | 4 ++--
 src/app/dashboard/feeds/page.tsx        | 9 ++++++---
 src/components/feedback/badge/Badge.tsx | 4 ++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/app/dashboard/feeds/loading.tsx b/src/app/dashboard/feeds/loading.tsx
index a28a88c2..8dfdd7e2 100644
--- a/src/app/dashboard/feeds/loading.tsx
+++ b/src/app/dashboard/feeds/loading.tsx
@@ -8,7 +8,7 @@ export default function Loading() {
       <section>
         <div className="mx-3 mb-2 flex items-center justify-between md:mx-0">
           <h2 className="text-skin-base text-2xl font-semibold">My Feeds</h2>
-          <div className="bg-skin-muted h-5 w-5 rounded-lg" />
+          <div className="bg-skin-muted h-9 w-24 rounded-xl" />
         </div>
         <SavedFeedListSkeleton />
       </section>
@@ -16,7 +16,7 @@ export default function Loading() {
         <div>
           <div className="mb-2 flex flex-wrap justify-between gap-x-12 gap-y-2">
             <h2 className="text-skin-base mx-3 mb-2 flex-auto text-2xl font-semibold md:mx-0">
-              Popular Feeds
+              Discover Feeds
             </h2>
             <div className="mx-3 md:mx-0">
               <Search placeholder="Search for feeds" />
diff --git a/src/app/dashboard/feeds/page.tsx b/src/app/dashboard/feeds/page.tsx
index c4ec8693..ed3acfdf 100644
--- a/src/app/dashboard/feeds/page.tsx
+++ b/src/app/dashboard/feeds/page.tsx
@@ -22,8 +22,11 @@ export default function Page(props: Props) {
       <section>
         <div className="mx-3 mb-2 flex items-center justify-between md:mx-0">
           <h2 className="text-skin-base text-2xl font-semibold">My Feeds</h2>
-          <Link href="/dashboard/settings/my-feeds">
-            <FaSlidersH className="text-skin-icon-muted hover:text-skin-icon-base text-xl" />
+          <Link
+            href="/dashboard/settings/my-feeds"
+            className="font-medium text-skin-base border border-skin-base bg-skin-secondary hover:brightness-95 px-3 py-1.5 rounded-xl"
+          >
+            Edit feeds
           </Link>
         </div>
         <Suspense fallback={<SavedFeedListSkeleton />}>
@@ -34,7 +37,7 @@ export default function Page(props: Props) {
         <div>
           <div className="mb-2 flex flex-wrap justify-between gap-x-12 gap-y-2">
             <h2 className="text-skin-base mx-3 mb-2 flex-auto text-2xl font-semibold md:mx-0">
-              Popular Feeds
+              Discover Feeds
             </h2>
             <div className="mx-3 md:mx-0">
               <Search placeholder="Search for feeds" />
diff --git a/src/components/feedback/badge/Badge.tsx b/src/components/feedback/badge/Badge.tsx
index 8ec87605..fe2e1bd9 100644
--- a/src/components/feedback/badge/Badge.tsx
+++ b/src/components/feedback/badge/Badge.tsx
@@ -12,7 +12,7 @@ export default function Badge(props: Props) {
       case "block":
         return "block";
       case "overlay":
-        return "absolute inline-flex items-center justify-center w-6 h-6";
+        return "absolute inline-flex items-center justify-center w-5 h-5";
       default:
         return "inline-flex items-center justify-center px-2 py-1.5";
     }
@@ -21,7 +21,7 @@ export default function Badge(props: Props) {
   const getPosition = () => {
     switch (position) {
       case "topRight":
-        return "-top-2 -end-3";
+        return "-top-2 -end-1.5";
       case "topLeft":
         return "top-0 start-0";
       case "bottomRight":