style: add hover states to project stats (part of #906)

drips-network · Apr 22, 2024 · a3f0f2e · a3f0f2e
1 parent e302dd9
commit a3f0f2e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/src/routes/app/(app)/projects/(forges)/components/project-profile/project-profile.svelte b/src/routes/app/(app)/projects/(forges)/components/project-profile/project-profile.svelte
@@ -380,36 +380,36 @@
         {#await earnedFunds}
           <div class="flex gap-4">
             <div
-              class="stat border rounded-drip-lg h-[6.125rem] w-[11rem] flex items-center justify-center"
+              class="stat shadow-low rounded-drip-lg h-[6.125rem] w-[11rem] flex items-center justify-center"
             >
               <Spinner />
             </div>
             <div
-              class="stat border rounded-drip-lg h-[6.125rem] w-[11rem] flex items-center justify-center"
+              class="stat shadow-low rounded-drip-lg h-[6.125rem] w-[11rem] flex items-center justify-center"
             >
               <Spinner />
             </div>
           </div>
         {:then earnedFundsResult}
           <div class="stats" in:fade|local={{ duration: 300 }}>
             {#if earnedFundsResult}
-              <div class="stat">
+              <div class="stat shadow-low rounded-drip-lg">
                 <KeyValuePair key="Donations">
                   <AggregateFiatEstimate amounts={earnedFundsResult} />
                 </KeyValuePair>
               </div>
             {/if}
             <!-- ("Supporters" stat) -->
             {#if [project.support].flat().length > 0}
-              <a class="stat" href="#support">
+              <a class="stat btn-theme-outlined" href="#support">
                 <KeyValuePair key="Supporters">
                   <Pile maxItems={4} components={getSupportersPile([project.support ?? []])} />
                 </KeyValuePair>
               </a>
             {/if}
             <!-- ("Splits with" stat) -->
             {#if [project.splits.maintainers, project.splits.dependencies].flat().length > 0}
-              <a class="stat" href="#splits">
+              <a class="stat btn-theme-outlined" href="#splits">
                 <KeyValuePair key="Splits with">
                   <Pile
                     maxItems={4}
@@ -584,17 +584,15 @@
 
   .stats {
     width: calc(100% + 32px);
-    margin-left: -16px;
-    padding: 0 16px;
+    margin: -16px 0 -16px -16px;
+    padding: 16px;
     overflow: scroll;
     white-space: nowrap;
   }
 
   .stats .stat {
     display: inline-flex;
     padding: 1rem;
-    border: 1px solid var(--color-foreground);
-    border-radius: 1rem 0 1rem 1rem;
     min-height: 6.125rem;
   }
   .stats .stat + .stat {

diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -14,3 +14,7 @@
 .btn-theme-transparent {
   @apply mouse:hover:bg-foreground-level-1 focus:bg-foreground-level-1 focus:ring-2 focus-visible:outline-none focus-visible:text-foreground focus:ring-foreground-level-4 transition duration-300;
 }
+
+.btn-theme-outlined {
+  @apply shadow-low rounded-drip-lg mouse:hover:shadow-md transform mouse:hover:-translate-y-[3px] transition duration-150 focus-visible:-translate-y-[3px] focus-visible:shadow-md focus-visible:outline-none;
+}