Merge branch 'preview'

Author: pdelfan

src/app/dashboard/feeds/loading.tsx

@@ -8,15 +8,15 @@ 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>
       <section>
         <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" />

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" />

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":