UI improvements & fully test new tooltips

grantmakers · Nov 22, 2024 · 944ed41 · 944ed41
1 parent 6069a02
commit 944ed41
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 23 deletions.
diff --git a/apps/web/.vscode/settings.json b/apps/web/.vscode/settings.json
@@ -4,5 +4,5 @@
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
-  "cSpell.words": ["pcss"]
+  "cSpell.words": ["heros", "mongoexport", "pcss", "topnav"]
 }
diff --git a/apps/web/src/lib/components/profiles/guidelines/ApplicationGuidelines.svelte b/apps/web/src/lib/components/profiles/guidelines/ApplicationGuidelines.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import Tip from '../alerts/Tip.svelte';
+  import { tooltip } from '$utils/tooltip';
   import placeholderImage from '$lib/assets/images/placeholder-application-guidelines.webp';
   import type { GrantmakersExtractedDataObj } from '@repo/shared/typings/grantmakers/all';
   interface Props {
@@ -44,8 +45,10 @@
     <div class="mb-4">
       <div class="flex items-start gap-4">
         <div
-          class="tooltip-trigger rounded-full bg-yellow-500 p-2 text-white"
-          data-tooltip="The form in which applications should be submitted and information and materials they should include Line 2b"
+          class="rounded-full bg-yellow-500 p-2 text-white"
+          use:tooltip={{
+            content: 'The form in which applications should be submitted and information and materials they should include Line 2b',
+          }}
         >
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4">
             <path
@@ -73,8 +76,10 @@
     <div class="mt-4 space-y-4">
       <div class="flex items-start gap-4">
         <div
-          class="tooltip-trigger rounded-full bg-slate-500 p-2 text-white"
-          data-tooltip="The form in which applications should be submitted and information and materials they should include Line 2b"
+          class="rounded-full bg-slate-500 p-2 text-white"
+          use:tooltip={{
+            content: 'The form in which applications should be submitted and information and materials they should include Line 2b',
+          }}
         >
           <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path
@@ -92,7 +97,7 @@
       </div>
 
       <div class="flex items-start gap-4">
-        <div class="tooltip-trigger rounded-full bg-slate-500 p-2 text-white" data-tooltip="Any submission deadlines Line 2c">
+        <div class="rounded-full bg-slate-500 p-2 text-white" use:tooltip={{ content: 'Any submission deadlines Line 2c' }}>
           <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
           </svg>
@@ -105,8 +110,11 @@
 
       <div class="flex items-start gap-4">
         <div
-          class="tooltip-trigger rounded-full bg-slate-500 p-2 text-white"
-          data-tooltip="Any restrictions or limitations on awards, such as by geographical areas, charitable fields, kinds of institutions, or other factors Line 2d"
+          class="rounded-full bg-slate-500 p-2 text-white"
+          use:tooltip={{
+            content:
+              'Any restrictions or limitations on awards, such as by geographical areas, charitable fields, kinds of institutions, or other factors Line 2d',
+          }}
         >
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4">
             <path
@@ -127,8 +135,11 @@
 
         <div class="flex items-start gap-4">
           <div
-            class="tooltip-trigger rounded-full bg-slate-500 p-2 text-white"
-            data-tooltip="The name, address, and telephone number or e-mail address of the person to whom applications should be addressed Line 2a"
+            class="rounded-full bg-slate-500 p-2 text-white"
+            use:tooltip={{
+              content:
+                'The name, address, and telephone number or e-mail address of the person to whom applications should be addressed Line 2a',
+            }}
           >
             <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path

diff --git a/apps/web/src/lib/components/profiles/header/Approachability.svelte b/apps/web/src/lib/components/profiles/header/Approachability.svelte
@@ -12,14 +12,6 @@
 </script>
 
 <dl class="grid grid-cols-1 overflow-hidden rounded-lg bg-white p-2">
-  <!-- Assets section -->
-  <!-- <dt class="text-center text-sm leading-normal text-inherit">Assets</dt>
-  <dd class="mb-4 text-center text-2xl font-bold text-slate-700">
-    {humanizeCurrency(assets)}
-  </dd> -->
-
-  <!-- Approachability section -->
-
   <dd class="flex flex-row items-center justify-center text-2xl font-bold text-slate-700">
     <!-- Solicitation Status -->
     <div class="m-1 inline rounded p-2 {!noUnsolicited ? 'bg-green-500' : 'bg-yellow-500'}">

diff --git a/apps/web/src/lib/components/profiles/overview/PercentileBar.svelte b/apps/web/src/lib/components/profiles/overview/PercentileBar.svelte
@@ -18,11 +18,12 @@
   };
 
   let getBarColor = (pct: number | 'N/A') => {
-    if (pct === 'N/A') return 'bg-slate-200';
-    if (pct >= 90) return 'bg-grantmakers-blue';
-    if (pct >= 75) return 'bg-grantmakers-blue opacity-80';
-    if (pct >= 50) return 'bg-grantmakers-blue opacity-50';
-    return 'bg-grantmakers-green';
+    if (pct === 'N/A') return 'bg-yellow-500';
+    if (pct >= 90) return 'bg-grantmakers-green';
+    if (pct >= 75) return 'bg-grantmakers-blue';
+    if (pct >= 50) return 'bg-grantmakers-blue opacity-80';
+    if (pct >= 30) return 'bg-grantmakers-blue opacity-50';
+    return 'bg-yellow-500';
   };
 </script>