From 9941ddda52c7fd5ea32d852a2b534d37d88ef15b Mon Sep 17 00:00:00 2001
From: Prospector <prospectordev@gmail.com>
Date: Sat, 14 Dec 2024 14:36:54 -0800
Subject: [PATCH 1/2] Add indicator for project installation

---
 .../src/components/ui/SearchCard.vue          | 15 ++++++++++-----
 packages/assets/icons/spinner.svg             | 19 +++++++++++++++++++
 packages/assets/index.ts                      |  4 +++-
 packages/assets/styles/variables.scss         |  6 ------
 4 files changed, 32 insertions(+), 12 deletions(-)
 create mode 100644 packages/assets/icons/spinner.svg

diff --git a/apps/app-frontend/src/components/ui/SearchCard.vue b/apps/app-frontend/src/components/ui/SearchCard.vue
index d291c1751b..3c8d0842bf 100644
--- a/apps/app-frontend/src/components/ui/SearchCard.vue
+++ b/apps/app-frontend/src/components/ui/SearchCard.vue
@@ -11,14 +11,18 @@
       }
     "
   >
-    <div class="icon">
-      <Avatar :src="project.icon_url" size="96px" class="search-icon" />
+    <div class="icon w-[96px] h-[96px] relative">
+      <Avatar :src="project.icon_url" size="96px" class="search-icon origin-top transition-all" :class="{ 'scale-[0.85]': installed, 'brightness-50': installing }" />
+      <div v-if="installing" class="rounded-2xl absolute inset-0 flex items-center justify-center">
+        <SpinnerIcon class="h-8 w-8 animate-spin" />
+      </div>
+      <div v-if="installed" class="absolute shadow-sm font-semibold bottom-0 w-full p-1 bg-button-bg rounded-full text-xs justify-center items-center flex gap-1 text-brand border-[1px] border-solid border-[--color-button-border]"><CheckIcon class="shrink-0  stroke-[3px]" /> Installed</div>
     </div>
     <div class="flex flex-col gap-2 overflow-hidden">
       <div class="gap-2 overflow-hidden no-wrap text-ellipsis">
-        <span class="text-lg font-extrabold text-contrast m-0 leading-none">{{
-          project.title
-        }}</span>
+        <span class="text-lg font-extrabold text-contrast m-0 leading-none">
+          {{ project.title }}
+        </span>
         <span v-if="project.author" class="text-secondary"> by {{ project.author }}</span>
       </div>
       <div class="m-0 line-clamp-2">
@@ -93,6 +97,7 @@
 
 <script setup>
 import {
+  SpinnerIcon,
   TagsIcon,
   DownloadIcon,
   HeartIcon,
diff --git a/packages/assets/icons/spinner.svg b/packages/assets/icons/spinner.svg
new file mode 100644
index 0000000000..4747fde4e7
--- /dev/null
+++ b/packages/assets/icons/spinner.svg
@@ -0,0 +1,19 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+>
+  <circle
+    class="opacity-25"
+    cx="12"
+    cy="12"
+    r="10"
+    stroke="currentColor"
+    stroke-width="4"
+  />
+  <path
+    class="opacity-75"
+    fill="currentColor"
+    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+  />
+</svg>
diff --git a/packages/assets/index.ts b/packages/assets/index.ts
index 7bd78e69b8..113fab2f1e 100644
--- a/packages/assets/index.ts
+++ b/packages/assets/index.ts
@@ -145,6 +145,7 @@ import _SlashIcon from './icons/slash.svg?component'
 import _SortAscendingIcon from './icons/sort-asc.svg?component'
 import _SortDescendingIcon from './icons/sort-desc.svg?component'
 import _SparklesIcon from './icons/sparkles.svg?component'
+import _SpinnerIcon from './icons/spinner.svg?component'
 import _StarIcon from './icons/star.svg?component'
 import _StopCircleIcon from './icons/stop-circle.svg?component'
 import _SunIcon from './icons/sun.svg?component'
@@ -333,6 +334,8 @@ export const ShieldIcon = _ShieldIcon
 export const SlashIcon = _SlashIcon
 export const SortAscendingIcon = _SortAscendingIcon
 export const SortDescendingIcon = _SortDescendingIcon
+export const SparklesIcon = _SparklesIcon
+export const SpinnerIcon = _SpinnerIcon
 export const StarIcon = _StarIcon
 export const StopCircleIcon = _StopCircleIcon
 export const SunIcon = _SunIcon
@@ -378,4 +381,3 @@ export const DBIcon = _DBIcon
 export const LoaderIcon = _LoaderIcon
 export const ImportIcon = _ImportIcon
 export const CardIcon = _CardIcon
-export const SparklesIcon = _SparklesIcon
diff --git a/packages/assets/styles/variables.scss b/packages/assets/styles/variables.scss
index aa563283d5..b7b5b52fba 100644
--- a/packages/assets/styles/variables.scss
+++ b/packages/assets/styles/variables.scss
@@ -190,12 +190,6 @@ html {
 
   --tab-underline-hovered: initial !important;
 
-  --color-button-text: initial !important;
-  --color-button-bg-hover: initial !important;
-  --color-button-text-hover: initial !important;
-  --color-button-bg-active: initial !important;
-  --color-button-text-active: initial !important;
-
   --color-grey-link: inherit !important;
   --color-grey-link-hover: inherit !important; // DEPRECATED, use filters in future
   --color-grey-link-active: inherit !important; // DEPRECATED, use filters in future

From 7aa810067e73e55b82af0e60e889e0f15a00069f Mon Sep 17 00:00:00 2001
From: Jai A <jaiagr+gpg@pm.me>
Date: Sat, 14 Dec 2024 21:35:22 -0700
Subject: [PATCH 2/2] fix lint

---
 apps/app-frontend/src/components/ui/SearchCard.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/SearchCard.vue b/apps/app-frontend/src/components/ui/SearchCard.vue
index 3c8d0842bf..0bbf4d76e6 100644
--- a/apps/app-frontend/src/components/ui/SearchCard.vue
+++ b/apps/app-frontend/src/components/ui/SearchCard.vue
@@ -12,11 +12,21 @@
     "
   >
     <div class="icon w-[96px] h-[96px] relative">
-      <Avatar :src="project.icon_url" size="96px" class="search-icon origin-top transition-all" :class="{ 'scale-[0.85]': installed, 'brightness-50': installing }" />
+      <Avatar
+        :src="project.icon_url"
+        size="96px"
+        class="search-icon origin-top transition-all"
+        :class="{ 'scale-[0.85]': installed, 'brightness-50': installing }"
+      />
       <div v-if="installing" class="rounded-2xl absolute inset-0 flex items-center justify-center">
         <SpinnerIcon class="h-8 w-8 animate-spin" />
       </div>
-      <div v-if="installed" class="absolute shadow-sm font-semibold bottom-0 w-full p-1 bg-button-bg rounded-full text-xs justify-center items-center flex gap-1 text-brand border-[1px] border-solid border-[--color-button-border]"><CheckIcon class="shrink-0  stroke-[3px]" /> Installed</div>
+      <div
+        v-if="installed"
+        class="absolute shadow-sm font-semibold bottom-0 w-full p-1 bg-button-bg rounded-full text-xs justify-center items-center flex gap-1 text-brand border-[1px] border-solid border-[--color-button-border]"
+      >
+        <CheckIcon class="shrink-0 stroke-[3px]" /> Installed
+      </div>
     </div>
     <div class="flex flex-col gap-2 overflow-hidden">
       <div class="gap-2 overflow-hidden no-wrap text-ellipsis">