Skip to content

Commit 7e58678

Browse files
travistravis
authored
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">
1 parent 2812b27 commit 7e58678

9 files changed

+315
-87
lines changed

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
"react-dom": "latest",
4343
"react-hook-form": "^7.51.3",
4444
"react-hot-toast": "^2.4.1",
45+
"react-tooltip": "^5.28.0",
4546
"swr": "^2.2.4",
4647
"web3.storage": "^4.5.5"
4748
},

‎pnpm-lock.yaml

+268-57
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/globals.css

+3
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@
22
@tailwind components;
33
@tailwind utilities;
44

5+
@import 'react-tooltip/dist/react-tooltip.css';
6+
57
:root {
68
--hot-red: #E91315;
79
--hot-red-light: #EFE3F3;
810
--hot-yellow: #FFC83F;
911
--hot-yellow-light: #FFE4AE;
1012
--hot-blue: #0176CE;
1113
--hot-blue-light: #BDE0FF;
14+
--rt-opacity: 0.97;
1215
}
1316

1417
.font-epilogue {

‎src/app/referrals/page.tsx

+10-6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
import CopyButton from '@/components/CopyButton'
44
import DefaultLoader from '@/components/Loader'
5-
import { H1, H3 } from '@/components/Text'
5+
import { H1, H2, H3 } from '@/components/Text'
6+
import Tooltip from '@/components/Tooltip'
67
import { RefcodeResult, useReferrals } from '@/lib/referrals/hooks'
78
import { useEffect } from 'react'
89
import { KeyedMutator } from 'swr'
@@ -90,7 +91,7 @@ export function ReferralsList () {
9091
return (
9192
(referrals && referrals.length > 0) ? (
9293
<>
93-
<H3>Referrals</H3>
94+
<H2>Referrals</H2>
9495
<div className="divide-solid divide-hot-red py-4">
9596
{
9697
/**
@@ -101,17 +102,20 @@ export function ReferralsList () {
101102
referrals.map((referral, i) =>
102103
<div key={i} className="flex flex-row justify-between items-center py-4">
103104
<div>Referred Racha</div>
104-
<div className="rounded-full bg-hot-red-light text-hot-red px-4 py-2 font-mono text-sm">In Progress</div>
105+
<div className={`referral-${i} rounded-full bg-hot-red-light text-hot-red px-4 py-2 font-mono text-sm`}>In Progress</div>
106+
<Tooltip anchorSelect={`.referral-${i}`} place="bottom-start">
107+
<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>
108+
</Tooltip>
105109
</div>
106110
)
107111
}
108112
</div>
109113
</>
110114
) : (
111115
<>
112-
<H3>Earn Free Storage and Racha Points!</H3>
116+
<H2>Earn Free Storage and Racha Points!</H2>
113117
<p className='text-hot-red mb-4 max-w-lg'>
114-
Turn your friends into Lite or Business Rachas and receive up to 16 months of Lite or
118+
Turn your friends into Lite or Business Rachas and receive up to 16 months of Lite and
115119
3 months of Business for free! You can also earn Racha Points.
116120
</p>
117121
</>
@@ -124,7 +128,7 @@ export default function ReferralsPage () {
124128
return (
125129
<div className='p-10 bg-racha-fire/50 w-full h-screen'>
126130
<H1>Generate a Referral Code</H1>
127-
<div className='border border-hot-red rounded-2xl bg-white p-5'>
131+
<div className='border border-hot-red rounded-2xl bg-white p-5 max-w-2xl'>
128132
{refcodeIsLoading ? (
129133
<DefaultLoader className="text-hot-red h-6 w-6" />
130134
) : (

‎src/components/PlanGate.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,14 @@ export function PlanGate ({ children }: { children: ReactNode }): ReactNode {
2727
<h1 className="my-4 font-bold">Welcome, {email}!</h1>
2828
<p className='my-4'>
2929
Congratulations! You are eligible for a free trial of our Lite or Business subscriptions. That means
30-
we won&apos;t charge you anything today. We do need you to provide a valid credit card before we can start your
30+
we won&apos;t charge you anything today.
31+
If you choose a Lite plan, you will get two months for free! If you choose Business, you will get one month for free!
32+
We do need you to provide a valid credit card before we can start your
3133
trial - pick a plan below and complete the checkout flow to get started!
3234
</p>
35+
<p className='my-4'>
36+
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.
37+
</p>
3338
</div>
3439
<StripeTrialPricingTable />
3540
</>

‎src/components/SpaceCreator.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { DidIcon } from './DidIcon'
88
import Link from 'next/link'
99
import { FolderPlusIcon, InformationCircleIcon } from '@heroicons/react/24/outline'
1010
import Tooltip from './Tooltip'
11+
import { H3 } from './Text'
1112

1213
export function SpaceCreatorCreating(): JSX.Element {
1314
return (
@@ -167,8 +168,12 @@ export function SpacePreview({ did, name, capabilities }: SpacePreviewProps) {
167168
<Link href={`/space/${did}`} className='block'>
168169
<span className='font-epilogue text-lg text-hot-red font-semibold leading-5 m-0 flex items-center'>
169170
{name ?? 'Untitled'}
170-
<Tooltip title="Capabilities" text={capabilities}>
171-
<InformationCircleIcon className='h-5 w-5 ml-2' />
171+
<InformationCircleIcon className={`h-5 w-5 ml-2 space-preview-capability-icon`} />
172+
<Tooltip anchorSelect={`.space-preview-capability-icon`}>
173+
<H3>Capabilities</H3>
174+
{capabilities.map((c, i) => (
175+
<p key={i}>{c}</p>
176+
))}
172177
</Tooltip>
173178
</span>
174179
<span className='block font-mono text-xs truncate'>

‎src/components/Tooltip.tsx

+8-16
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,14 @@
11
import { useState } from "react";
2+
import { ITooltip, Tooltip as ReactTooltip } from 'react-tooltip'
23

3-
function Tooltip({ text, title, children }: { text: string[], title?: string, children: React.ReactNode }) {
4-
const [visible, setVisible] = useState(false);
5-
4+
function Tooltip (options: ITooltip) {
65
return (
7-
<span
8-
onMouseEnter={() => setVisible(true)}
9-
onMouseLeave={() => setVisible(false)}
10-
className="relative cursor-pointer flex items-center"
11-
>
12-
{children}
13-
{visible && (
14-
<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">
15-
{title && <><strong>{title}</strong><br /></>}
16-
{text.join('\n')}
17-
</div>
18-
)}
19-
</span>
6+
<ReactTooltip
7+
noArrow={true}
8+
className="p-8 rounded-2xl bg-white/80 backdrop-blur-tooltip border border-hot-red"
9+
variant="light"
10+
disableStyleInjection={'core'}
11+
{...options} />
2012
);
2113
}
2214

‎src/share.tsx

+8-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { extract } from '@ucanto/core/delegation'
44
import type { PropsWithChildren } from 'react'
55
import type { Delegation } from '@ucanto/interface'
66
import { SpacePreview } from './components/SpaceCreator'
7-
import { H2 } from '@/components/Text'
7+
import { H2, H3 } from '@/components/Text'
88
import CopyButton from './components/CopyButton'
99
import Tooltip from './components/Tooltip'
1010
import { ArrowDownOnSquareStackIcon, CloudArrowDownIcon, PaperAirplaneIcon, InformationCircleIcon } from '@heroicons/react/24/outline'
@@ -235,12 +235,16 @@ export function ShareSpace({ spaceDID }: { spaceDID: SpaceDID }): JSX.Element {
235235
Shared With:
236236
</p>
237237
<ul>
238-
{sharedEmails.map(({ email, capabilities }) => (
238+
{sharedEmails.map(({ email, capabilities }, i) => (
239239
<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">
240240
<span className="flex items-center w-full">
241241
<span className="truncate mt-1">{email}</span>
242-
<Tooltip title="Capabilities" text={capabilities}>
243-
<InformationCircleIcon className='h-5 w-5 ml-1' />
242+
<InformationCircleIcon className={`h-5 w-5 ml-1 share-capabilities-${i}`} />
243+
<Tooltip anchorSelect={`.share-capabilities-${i}`}>
244+
<H3>Capabilities</H3>
245+
{capabilities.map((c, j) => (
246+
<p key={j}>{c}</p>
247+
))}
244248
</Tooltip>
245249
</span>
246250
</li>

‎tailwind.config.ts

+4-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ const config: Config = {
1717
'hot-yellow-light': '#FFE4AE',
1818
'hot-blue': '#0176CE',
1919
'hot-blue-light': '#BDE0FF'
20-
}
20+
},
21+
backdropBlur: {
22+
tooltip: '60px',
23+
}
2124
}
2225
},
2326
plugins: [],

0 commit comments

Comments
 (0)