Fix project card badge colors and size

public/colors.css

@@ -13,7 +13,7 @@
   --color-foreground-primary-hover: #ff80ff;
   --color-foreground-success: #4fa877;
   --color-foreground-red: #aa5078;
-  --color-foreground-yellow: #e5c001;
+  --color-foreground-yellow: #b29401;
   --color-foreground-disabled: #9b9bb1;
   --color-border-hint: #dbdbff;
   --color-border-default: #dbdbff;
@@ -50,6 +50,8 @@
   --color-fill-warning: #ffffe5;
   --color-fill-counter: #dbdbff;
   --color-fill-counter-emphasized: #dbdbff;
+  --color-fill-delegate: #ffe5ff;
+  --color-fill-private: #fff5d6;
 }
 
 :root[data-theme="dark"] {
@@ -104,4 +106,6 @@
   --color-fill-warning: #191500;
   --color-fill-counter: #393a46;
   --color-fill-counter-emphasized: #232563;
+  --color-fill-delegate: #3d003d;
+  --color-fill-private: #4c4000;
 }

src/components/ProjectCard.svelte

@@ -114,21 +114,10 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 1.5rem;
-    height: 1.5rem;
     border-radius: 50%;
     overflow: hidden;
     position: relative;
-  }
-
-  .badge-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    opacity: 0.25;
+    padding: 0.25rem;
   }
 
   h4,
@@ -166,26 +155,26 @@
         <h4 use:twemoji>{name}</h4>
         <div class="badges">
           {#if isPrivate}
-            <div title="Private" class="badge">
-              <div
-                class="badge-background"
-                style:background-color="var(--color-fill-yellow)" />
+            <div
+              title="Private"
+              class="badge"
+              style="background-color: var(--color-fill-private); color: var(--color-foreground-yellow)">
               <IconSmall name="lock" />
             </div>
           {/if}
           {#if isDelegate}
-            <div title="Delegate" class="badge">
-              <div
-                class="badge-background"
-                style:background-color="var(--color-foreground-primary)" />
+            <div
+              title="Delegate"
+              class="badge"
+              style="background-color: var(--color-fill-delegate); color: var(--color-foreground-primary)">
               <IconSmall name="badge" />
             </div>
           {/if}
           {#if isSeeding}
-            <div title="Seeding" class="badge">
-              <div
-                class="badge-background"
-                style:background-color="var(--color-fill-secondary)" />
+            <div
+              title="Seeding"
+              class="badge"
+              style="background-color: var(--color-fill-counter-emphasized); color: var(--color-foreground-emphasized)">
               <IconSmall name="network" />
             </div>
           {/if}