From b3bf6d17ff332df9c0cb0a0502910c2a88a15c7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Wed, 10 Jul 2024 15:37:08 +0200
Subject: [PATCH] Show small disabled seed button on mobile

---
 src/views/projects/Header/SeedButton.svelte        | 10 ++++++++--
 src/views/projects/Source/ProjectNameHeader.svelte |  9 +++++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/views/projects/Header/SeedButton.svelte b/src/views/projects/Header/SeedButton.svelte
index ffb89293b..f117e8fd2 100644
--- a/src/views/projects/Header/SeedButton.svelte
+++ b/src/views/projects/Header/SeedButton.svelte
@@ -7,6 +7,7 @@
 
   export let projectId: string;
   export let seedCount: number;
+  export let disabled: boolean = false;
 </script>
 
 <style>
@@ -32,12 +33,16 @@
     background-color: var(--color-fill-secondary-counter);
     color: var(--color-foreground-match-background);
   }
+  .disabled {
+    background-color: var(--color-fill-float-hover);
+    color: var(--color-foreground-disabled);
+  }
 </style>
 
 <Popover popoverPositionTop="2.5rem" popoverPositionRight="0">
   <Button
     slot="toggle"
-    disabled={false}
+    {disabled}
     let:toggle
     on:click={() => {
       toggle();
@@ -45,9 +50,10 @@
     variant="secondary-toggle-off">
     <IconSmall name="seedling" />
     <span class="title-counter">
-      Seed
+      <span class="global-hide-on-mobile-down">Seed</span>
       <span
         class="counter not-seeding"
+        class:disabled
         style:font-weight="var(--font-weight-regular)">
         {seedCount}
       </span>
diff --git a/src/views/projects/Source/ProjectNameHeader.svelte b/src/views/projects/Source/ProjectNameHeader.svelte
index 48f89dc88..360fe03dc 100644
--- a/src/views/projects/Source/ProjectNameHeader.svelte
+++ b/src/views/projects/Source/ProjectNameHeader.svelte
@@ -90,6 +90,15 @@
         <CloneButton {baseUrl} id={project.id} name={project.name} />
         <SeedButton seedCount={project.seeding} projectId={project.id} />
       </div>
+      <div
+        style:display="flex"
+        style:gap="0.5rem"
+        class="global-hide-on-small-desktop-up">
+        <SeedButton
+          disabled
+          seedCount={project.seeding}
+          projectId={project.id} />
+      </div>
     </div>
   </div>
   <div class="id">