Skip to content

Commit 69eb35f

Browse files
dankelleherdankelleher
committed
Merge referral page UI changes from #286 
1 parent 5366083 commit 69eb35f

9 files changed

Lines changed: 81 additions & 145 deletions

File tree

‎packages/app/public/wood-transparent-light.png‎

-1.17 MB
Binary file not shown.

‎packages/app/public/wood-transparent-thin.png‎

-1.1 MB
Binary file not shown.

‎packages/app/public/wood-transparent-v-thin.png‎

-783 KB
Binary file not shown.

‎packages/app/public/wood-transparent.png‎

-1.39 MB
Binary file not shown.

‎packages/app/src/common/container/Card.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@ import { type FC, type PropsWithChildren, type ReactNode } from "react";
22
import clx from "classnames";
33

44
interface CardProps {
5-
title?: string;
5+
className?: string;
6+
title?: string | ReactNode;
67
image?: ReactNode;
78
orientation?: "horizontal" | "vertical";
89
size?: "small" | "medium" | "large";
910
}
1011

1112
export const Card: FC<PropsWithChildren & CardProps> = ({
1213
children,
14+
className,
1315
image,
1416
title,
1517
orientation = "vertical",
@@ -19,25 +21,26 @@ export const Card: FC<PropsWithChildren & CardProps> = ({
1921
className={clx(
2022
orientation === "horizontal" && "card-side",
2123
size === "small"
22-
? "w-32 h-32 p-2"
24+
? "w-32 sm:h-32 p-2"
2325
: size === "medium"
24-
? "w-48 h-48 p-4"
26+
? "w-40 sm:w-48 h-40 sm:h-48 p-4"
2527
: "w-128 h-128 p-4",
26-
"card glass"
28+
"card glass",
29+
className
2730
)}
2831
>
2932
{image !== undefined && <figure className="min-h-2/3">{image}</figure>}
3033
<div
3134
className={clx(
3235
"card-body items-center content-center",
33-
size === "small" ? "p-1" : size === "medium" ? "p-1" : "p-3"
36+
size === "small" ? "p-1" : size === "medium" ? "p-1" : "p-0 sm:p-3"
3437
)}
3538
>
3639
{title !== undefined && (
3740
<h2
3841
className={clx(
3942
"card-title text-center",
40-
size === "small" && "text-s"
43+
size === "small" ? "!text-sm" : "!text-sm sm:!text-xl"
4144
)}
4245
>
4346
{title}

‎packages/app/src/common/container/TopicContainer.tsx‎

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎packages/app/src/referral/ReferralApp.tsx‎

Lines changed: 16 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import React, {
1+
import clx from "classnames";
2+
import {
23
type FC,
34
forwardRef,
45
type ForwardRefRenderFunction,
5-
type PropsWithChildren,
66
useEffect,
7-
useMemo,
87
} from "react";
98
import { useNavigate } from "react-router-dom";
109

@@ -14,12 +13,8 @@ import { AppRoute } from "../Routes";
1413
import { useHelp } from "../common/context/HelpContext";
1514
import { useWallet } from "@solana/wallet-adapter-react";
1615
import { LinkWithQuery } from "../common/components/LinkWithQuery";
17-
import { TopicContainer } from "../common/container/TopicContainer";
1816
import { Card } from "../common/container/Card";
1917
import { ReferralOptions } from "./ReferralOptions";
20-
import { isMobilePortrait } from "../common/utils";
21-
import { useWindowSize } from "usehooks-ts";
22-
import { useScreenOrientation } from "../hub/hooks/useScreenOrientation";
2318

2419
const Title: FC = () => (
2520
<div className="topic-title w-full mt-8">
@@ -31,35 +26,18 @@ const Title: FC = () => (
3126
<IoChevronUpOutline className="inline" size={48} />
3227
</div>
3328
</LinkWithQuery>
34-
<h1 className="font-bold text-green-light text-4xl text-center mb-4">
29+
<h1 className="font-bold text-green-light text-3xl text-center mb-4">
3530
Share Your Referral Link
3631
</h1>
3732
</div>
3833
);
3934

40-
const Wrapper: FC<PropsWithChildren> = ({ children }) => {
41-
const windowSize = useWindowSize();
42-
const isPortrait = useMemo(
43-
() => isMobilePortrait(window.innerWidth),
44-
[windowSize]
45-
);
46-
47-
return isPortrait ? (
48-
<div>{children}</div>
49-
) : (
50-
<Card size="large" orientation="horizontal">
51-
{children}
52-
</Card>
53-
);
54-
};
55-
5635
const _ReferralApp: ForwardRefRenderFunction<
5736
HTMLDivElement,
5837
{ className?: string; active?: boolean } & React.HTMLAttributes<HTMLElement>
5938
> = ({ className, active = false, ...rest }, ref) => {
6039
const { currentHelpRoute } = useHelp();
6140
const [, updateZenMode] = useZenMode();
62-
const { screenType } = useScreenOrientation();
6341

6442
const navigate = useNavigate();
6543
const wallet = useWallet();
@@ -79,17 +57,18 @@ const _ReferralApp: ForwardRefRenderFunction<
7957
showBGImage: false,
8058
showHelpButton: true,
8159
showWallet: active,
82-
showExternalLinks: screenType !== "mobilePortrait",
60+
showExternalLinks: true,
8361
}));
8462
}, [active, currentHelpRoute]);
8563

8664
return (
87-
<TopicContainer
88-
className={className}
65+
<div
66+
className={clx("relative flex flex-col items-center pt-8", className)}
8967
ref={ref}
9068
{...rest}
91-
titleContents={<Title />}
9269
>
70+
<Title />
71+
<div className="relative flex flex-col items-center pt-8"></div>
9372
{link === null && (
9473
<div className="flex flex-col items-center m-4">
9574
<h1 className="text-3xl text-center">Loading...</h1>
@@ -100,13 +79,17 @@ const _ReferralApp: ForwardRefRenderFunction<
10079
</div>
10180
)}
10281
{link !== null && (
103-
<div className="mx-4 mb-3 flex flex-col items-center">
104-
<Wrapper>
82+
<div className="mb-20 flex flex-col items-center">
83+
<Card
84+
className="bg-green-light"
85+
size="large"
86+
orientation="horizontal"
87+
>
10588
<ReferralOptions link={link} />
106-
</Wrapper>
89+
</Card>
10790
</div>
10891
)}
109-
</TopicContainer>
92+
</div>
11093
);
11194
};
11295

‎packages/app/src/referral/ReferralOptions.tsx‎

Lines changed: 55 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,64 @@
1-
import React, { type FC } from "react";
2-
import { ShareButton } from "./ShareButton";
3-
import { FaShareSquare } from "react-icons/fa";
4-
import { Tweet } from "../common/components/Tweet";
5-
import { CopyButton } from "./CopyButton";
1+
import { useState, type FC } from "react";
2+
import { useCopyToClipboard } from "usehooks-ts";
3+
64
import { Card } from "../common/container/Card";
7-
import { ReferTweetButton } from "./ReferTweetButton";
85
import { QRCodeCard } from "./QRCodeCard";
9-
import { useScreenOrientation } from "../hub/hooks/useScreenOrientation";
6+
import { FaTwitter } from "react-icons/fa";
107

118
export const ReferralOptions: FC<{ link: string }> = ({ link }) => {
12-
const { screenType } = useScreenOrientation();
13-
const isPortrait = screenType === "mobilePortrait";
14-
const shareSupported = window.navigator?.canShare?.();
9+
const [, copy] = useCopyToClipboard();
10+
const [copied, setCopied] = useState(false);
11+
12+
const copyLink = (): void => {
13+
if (link === null) return;
14+
copy(link)
15+
.then(() => {
16+
setCopied(true);
17+
setTimeout(() => {
18+
setCopied(false);
19+
}, 5000);
20+
})
21+
.catch(console.error);
22+
};
1523

1624
return (
17-
<div className="w-full h-full md:space-x-8 space-y-4 md:space-y-0 justify-around items-center flex flex-col-reverse md:flex-row">
18-
{isPortrait && (
19-
<div className="flex flex-row justify-around w-full mt-5 items-center">
20-
{shareSupported && (
21-
<ShareButton link={link}>
22-
<FaShareSquare className="text-white w-8 h-8" />
23-
</ShareButton>
24-
)}
25-
<Tweet
26-
url={link}
27-
tweet="Join my forest on Sunrise Stake! Join me and the Solana community in making a collective positive environmental impact."
28-
/>
29-
</div>
30-
)}
31-
{!isPortrait && (
32-
<>
33-
<CopyButton link={link}>
34-
<Card
35-
title={"Copy to Clipboard"}
36-
size="medium"
37-
image={
38-
<img
39-
src="/clip.png"
40-
className="w-full h-full object-contain"
41-
alt="Copy"
42-
/>
43-
}
44-
></Card>
45-
</CopyButton>
46-
<Card
47-
size="medium"
48-
title={"Share"}
49-
image={
50-
<ReferTweetButton link={link}>
51-
<img src="/sowing.png" alt="Share link" />
52-
</ReferTweetButton>
53-
}
54-
></Card>
55-
</>
56-
)}
25+
<div className="grid grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-4">
26+
<button onClick={copyLink}>
27+
<Card
28+
title={copied ? "✓ Copied" : "Copy to Clipboard"}
29+
size="medium"
30+
image={
31+
<img
32+
src="/clip.png"
33+
className="w-full h-full object-contain"
34+
alt="Copy"
35+
/>
36+
}
37+
></Card>
38+
</button>
39+
<a
40+
href={`https://twitter.com/share?text=Join my forest on @SunriseStake!%0A%0AJoin me and the Solana community in making a collective positive environmental impact:%0A${link}`}
41+
target="_blank"
42+
rel="noreferrer"
43+
referrerPolicy="origin"
44+
>
45+
<Card
46+
size="medium"
47+
title={
48+
<>
49+
<FaTwitter size={20} title="Twitter" />
50+
Share
51+
</>
52+
}
53+
image={
54+
<img
55+
src="/sowing.png"
56+
className="w-full h-full object-contain"
57+
alt="Copy"
58+
/>
59+
}
60+
/>
61+
</a>
5762
<QRCodeCard link={link} type="sunrise" />
5863
<QRCodeCard link={link} type="solanapay" />
5964
</div>

‎packages/app/tailwind.config.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,7 @@ module.exports = {
4343
},
4444
animation: {
4545
"fade-in": "fade-in 150ms ease-out",
46-
},
47-
backgroundImage: theme => ({
48-
'wood-sm': "url('/public/wood-vert.png')",
49-
'wood-md': "url('/public/wood-transparent-thin.png')",
50-
'wood-lg': "url('/public/wood-transparent-thin.png')"
51-
})
46+
}
5247
},
5348
},
5449
plugins: [

0 commit comments

Comments
 (0)