Switch Seed and Clone buttons

src/components/Button.svelte

@@ -153,7 +153,7 @@
 
   .outline {
     background-color: transparent;
-    color: var(--color-foreground-dim);
+    color: var(--color-foreground-contrast);
     border: 1px solid var(--color-border-hint);
   }
   .outline[disabled] {
@@ -196,27 +196,25 @@
   }
 
   .secondary-toggle-off {
-    background-color: transparent;
-    color: var(--color-foreground-contrast);
-    border: 1px solid var(--color-border-hint);
+    background-color: var(--color-fill-secondary);
+    color: var(--color-foreground-match-background);
   }
   .secondary-toggle-off[disabled] {
-    background-color: transparent;
-    color: var(--color-fill-gray);
+    background-color: var(--color-fill-ghost);
+    color: var(--color-foreground-disabled);
   }
   .secondary-toggle-off:not([disabled]):hover {
-    background-color: transparent;
-    border: 1px solid var(--color-fill-secondary);
+    background-color: var(--color-fill-secondary-hover);
   }
-
   .secondary-toggle-on {
     background-color: var(--color-fill-selected);
     color: var(--color-foreground-emphasized);
     border: 1px solid var(--color-border-selected);
   }
   .secondary-toggle-on[disabled] {
-    background-color: var(--color-fill-selected);
+    background-color: var(--color-fill-ghost);
     color: var(--color-fill-gray);
+    border: none;
   }
   .secondary-toggle-on:not([disabled]):hover {
     background-color: var(--color-fill-selected);

src/views/projects/Header/CloneButton.svelte

@@ -35,7 +35,7 @@
 </style>
 
 <Popover popoverPositionTop="2.5rem" popoverPositionRight="0">
-  <Button slot="toggle" let:toggle on:click={toggle} variant="secondary">
+  <Button slot="toggle" let:toggle on:click={toggle} variant="outline">
     Clone
     <Icon name="download" />
   </Button>

src/views/projects/Header/SeedButton.svelte

@@ -33,14 +33,19 @@
   .counter {
     font-weight: var(--font-weight-regular);
     border-radius: var(--border-radius-tiny);
-    background-color: var(--color-fill-ghost);
-    color: var(--color-foreground-dim);
+    background-color: var(--color-fill-secondary-counter);
+    border: 1px solid var(--color-border-secondary-counter);
+    color: var(--color-foreground-match-background);
     padding: 0 0.25rem;
   }
   .seeding {
     background-color: var(--color-fill-counter-emphasized);
     color: var(--color-foreground-emphasized);
   }
+  .disabled {
+    background-color: var(--color-fill-ghost-hover);
+    color: var(--color-foreground-dim);
+  }
 </style>
 
 <Popover popoverPositionTop="2.5rem" popoverPositionRight="0">
@@ -62,6 +67,7 @@
       <span
         class="counter"
         class:seeding
+        class:disabled
         style:font-weight="var(--font-weight-regular)">
         {seedCount}
       </span>

src/views/projects/Patch.svelte

@@ -65,7 +65,6 @@
   import Embeds from "@app/views/projects/Cob/Embeds.svelte";
   import ErrorModal from "@app/modals/ErrorModal.svelte";
   import ExtendedTextarea from "@app/components/ExtendedTextarea.svelte";
-  import IconButton from "@app/components/IconButton.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import InlineMarkdown from "@app/components/InlineMarkdown.svelte";
   import LabelInput from "@app/views/projects/Cob/LabelInput.svelte";

src/views/projects/Source/ProjectNameHeader.svelte

@@ -128,13 +128,13 @@
       class="global-hide-on-mobile"
       style="margin-left: auto; display: flex; gap: 0.5rem;">
       <Share {preferredSeeds} {publicExplorer} {baseUrl} />
+      <CloneButton {baseUrl} id={project.id} name={project.name} />
       <SeedButton
         {seeding}
         disabled={editSeedingInProgress}
         editSeeding={canEditSeeding ? editSeeding : undefined}
         seedCount={project.seeding}
         projectId={project.id} />
-      <CloneButton {baseUrl} id={project.id} name={project.name} />
     </div>
   </div>
   <div class="id">