feat: referrals tweaks (#155)

- a number of copy updates
- a number of small styling changes
- introduce `react-tooltip` to give us more capable tooltips that match
the referrals spec

<img width="1191" alt="Screenshot 2024-12-09 at 2 02 29 PM"
src="https://github.com/user-attachments/assets/253d880d-c879-42b9-8cac-2ce85903cbfb">

Author: travis

packages/console/package.json

@@ -42,6 +42,7 @@
     "react-dom": "latest",
     "react-hook-form": "^7.51.3",
     "react-hot-toast": "^2.4.1",
+    "react-tooltip": "^5.28.0",
     "swr": "^2.2.4",
     "web3.storage": "^4.5.5"
   },

packages/console/pnpm-lock.yaml

@@ -2,13 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
+@import 'react-tooltip/dist/react-tooltip.css';
+
 :root {
   --hot-red: #E91315;
   --hot-red-light: #EFE3F3;
   --hot-yellow: #FFC83F;
   --hot-yellow-light: #FFE4AE;
   --hot-blue: #0176CE;
   --hot-blue-light: #BDE0FF;
+  --rt-opacity: 0.97;
 }
 
 .font-epilogue {

packages/console/src/app/globals.css

@@ -2,7 +2,8 @@
 
 import CopyButton from '@/components/CopyButton'
 import DefaultLoader from '@/components/Loader'
-import { H1, H3 } from '@/components/Text'
+import { H1, H2, H3 } from '@/components/Text'
+import Tooltip from '@/components/Tooltip'
 import { RefcodeResult, useReferrals } from '@/lib/referrals/hooks'
 import { useEffect } from 'react'
 import { KeyedMutator } from 'swr'
@@ -90,7 +91,7 @@ export function ReferralsList () {
   return (
     (referrals && referrals.length > 0) ? (
       <>
-        <H3>Referrals</H3>
+        <H2>Referrals</H2>
         <div className="divide-solid divide-hot-red py-4">
           {
             /**
@@ -101,17 +102,20 @@ export function ReferralsList () {
             referrals.map((referral, i) =>
               <div key={i} className="flex flex-row justify-between items-center py-4">
                 <div>Referred Racha</div>
-                <div className="rounded-full bg-hot-red-light text-hot-red px-4 py-2 font-mono text-sm">In Progress</div>
+                <div className={`referral-${i} rounded-full bg-hot-red-light text-hot-red px-4 py-2 font-mono text-sm`}>In Progress</div>
+                <Tooltip anchorSelect={`.referral-${i}`} place="bottom-start">
+                  <p className="max-w-sm">Your referral was successful! You will receive your reward once the referred user has paid for the requisite period of time.</p>
+                </Tooltip>
               </div>
             )
           }
         </div>
       </>
     ) : (
       <>
-        <H3>Earn Free Storage and Racha Points!</H3>
+        <H2>Earn Free Storage and Racha Points!</H2>
         <p className='text-hot-red mb-4 max-w-lg'>
-          Turn your friends into Lite or Business Rachas and receive up to 16 months of Lite or
+          Turn your friends into Lite or Business Rachas and receive up to 16 months of Lite and
           3 months of Business for free! You can also earn Racha Points.
         </p>
       </>
@@ -124,7 +128,7 @@ export default function ReferralsPage () {
   return (
     <div className='p-10 bg-racha-fire/50 w-full h-screen'>
       <H1>Generate a Referral Code</H1>
-      <div className='border border-hot-red rounded-2xl bg-white p-5'>
+      <div className='border border-hot-red rounded-2xl bg-white p-5 max-w-2xl'>
         {refcodeIsLoading ? (
           <DefaultLoader className="text-hot-red h-6 w-6" />
         ) : (

packages/console/src/app/referrals/page.tsx

@@ -27,9 +27,14 @@ export function PlanGate ({ children }: { children: ReactNode }): ReactNode {
                 <h1 className="my-4 font-bold">Welcome, {email}!</h1>
                 <p className='my-4'>
                   Congratulations! You are eligible for a free trial of our Lite or Business subscriptions. That means
-                  we won&apos;t charge you anything today. We do need you to provide a valid credit card before we can start your
+                  we won&apos;t charge you anything today.
+                  If you choose a Lite plan, you will get two months for free! If you choose Business, you will get one month for free!
+                  We do need you to provide a valid credit card before we can start your
                   trial - pick a plan below and complete the checkout flow to get started!
                 </p>
+                <p className='my-4'>
+                  Please note that after your free trial ends, you will be charged 10 USD per month for Lite or 100 USD per month for Business tier.
+                </p>
               </div>
               <StripeTrialPricingTable />
             </>

packages/console/src/components/PlanGate.tsx

@@ -8,6 +8,7 @@ import { DidIcon } from './DidIcon'
 import Link from 'next/link'
 import { FolderPlusIcon, InformationCircleIcon } from '@heroicons/react/24/outline'
 import Tooltip from './Tooltip'
+import { H3 } from './Text'
 
 export function SpaceCreatorCreating(): JSX.Element {
   return (
@@ -167,8 +168,12 @@ export function SpacePreview({ did, name, capabilities }: SpacePreviewProps) {
         <Link href={`/space/${did}`} className='block'>
           <span className='font-epilogue text-lg text-hot-red font-semibold leading-5 m-0 flex items-center'>
             {name ?? 'Untitled'}
-            <Tooltip title="Capabilities" text={capabilities}>
-              <InformationCircleIcon className='h-5 w-5 ml-2' />
+            <InformationCircleIcon className={`h-5 w-5 ml-2 space-preview-capability-icon`} />
+            <Tooltip anchorSelect={`.space-preview-capability-icon`}>
+              <H3>Capabilities</H3>
+              {capabilities.map((c, i) => (
+                <p key={i}>{c}</p>
+              ))}
             </Tooltip>
           </span>
           <span className='block font-mono text-xs truncate'>

packages/console/src/components/SpaceCreator.tsx

@@ -1,22 +1,14 @@
 import { useState } from "react";
+import { ITooltip, Tooltip as ReactTooltip } from 'react-tooltip'
 
-function Tooltip({ text, title, children }: { text: string[], title?: string, children: React.ReactNode }) {
-    const [visible, setVisible] = useState(false);
-
+function Tooltip (options: ITooltip) {
     return (
-        <span
-            onMouseEnter={() => setVisible(true)}
-            onMouseLeave={() => setVisible(false)}
-            className="relative cursor-pointer flex items-center"
-        >
-            {children}
-            {visible && (
-                <div className="absolute left-1/2 bottom-full transform -translate-x-1/2 bg-gray-800 text-white p-1.5 rounded whitespace-pre-wrap z-10">
-                    {title && <><strong>{title}</strong><br /></>}
-                    {text.join('\n')}
-                </div>
-            )}
-        </span>
+        <ReactTooltip
+            noArrow={true}
+            className="p-8 rounded-2xl bg-white/80 backdrop-blur-tooltip border border-hot-red"
+            variant="light"
+            disableStyleInjection={'core'}
+            {...options} />
     );
 }
 

packages/console/src/components/Tooltip.tsx

@@ -4,7 +4,7 @@ import { extract } from '@ucanto/core/delegation'
 import type { PropsWithChildren } from 'react'
 import type { Delegation } from '@ucanto/interface'
 import { SpacePreview } from './components/SpaceCreator'
-import { H2 } from '@/components/Text'
+import { H2, H3 } from '@/components/Text'
 import CopyButton from './components/CopyButton'
 import Tooltip from './components/Tooltip'
 import { ArrowDownOnSquareStackIcon, CloudArrowDownIcon, PaperAirplaneIcon, InformationCircleIcon } from '@heroicons/react/24/outline'
@@ -235,12 +235,16 @@ export function ShareSpace({ spaceDID }: { spaceDID: SpaceDID }): JSX.Element {
             Shared With:
           </p>
           <ul>
-            {sharedEmails.map(({ email, capabilities }) => (
+            {sharedEmails.map(({ email, capabilities }, i) => (
               <li key={email} className="flex flex-col sm:flex-row items-start sm:items-center space-y-2 sm:space-y-0 sm:space-x-2 w-full mt-1">
                 <span className="flex items-center w-full">
                   <span className="truncate mt-1">{email}</span>
-                  <Tooltip title="Capabilities" text={capabilities}>
-                    <InformationCircleIcon className='h-5 w-5 ml-1' />
+                  <InformationCircleIcon className={`h-5 w-5 ml-1 share-capabilities-${i}`} />
+                  <Tooltip anchorSelect={`.share-capabilities-${i}`}>
+                    <H3>Capabilities</H3>
+                    {capabilities.map((c, j) => (
+                      <p key={j}>{c}</p>
+                    ))}
                   </Tooltip>
                 </span>
               </li>

packages/console/src/share.tsx

@@ -17,7 +17,10 @@ const config: Config = {
         'hot-yellow-light': '#FFE4AE',
         'hot-blue': '#0176CE',
         'hot-blue-light': '#BDE0FF'
-      }
+      },
+      backdropBlur: {
+        tooltip: '60px',
+      }  
     }
   },
   plugins: [],