Merge pull request #287 from sunrise-stake/feature/merged-referral-ui

Merge referral page UI changes from #286

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

@@ -2,14 +2,16 @@ import { type FC, type PropsWithChildren, type ReactNode } from "react";
 import clx from "classnames";
 
 interface CardProps {
-  title?: string;
+  className?: string;
+  title?: string | ReactNode;
   image?: ReactNode;
   orientation?: "horizontal" | "vertical";
   size?: "small" | "medium" | "large";
 }
 
 export const Card: FC<PropsWithChildren & CardProps> = ({
   children,
+  className,
   image,
   title,
   orientation = "vertical",
@@ -19,25 +21,26 @@ export const Card: FC<PropsWithChildren & CardProps> = ({
     className={clx(
       orientation === "horizontal" && "card-side",
       size === "small"
-        ? "w-32 h-32 p-2"
+        ? "w-32 sm:h-32 p-2"
         : size === "medium"
-        ? "w-48 h-48 p-4"
+        ? "w-40 sm:w-48 h-40 sm:h-48 p-4"
         : "w-128 h-128 p-4",
-      "card glass"
+      "card glass",
+      className
     )}
   >
     {image !== undefined && <figure className="min-h-2/3">{image}</figure>}
     <div
       className={clx(
         "card-body items-center content-center",
-        size === "small" ? "p-1" : size === "medium" ? "p-1" : "p-3"
+        size === "small" ? "p-1" : size === "medium" ? "p-1" : "p-0 sm:p-3"
       )}
     >
       {title !== undefined && (
         <h2
           className={clx(
             "card-title text-center",
-            size === "small" && "text-s"
+            size === "small" ? "!text-sm" : "!text-sm sm:!text-xl"
           )}
         >
           {title}

packages/app/src/referral/ReferralApp.tsx

@@ -1,10 +1,9 @@
-import React, {
+import clx from "classnames";
+import {
   type FC,
   forwardRef,
   type ForwardRefRenderFunction,
-  type PropsWithChildren,
   useEffect,
-  useMemo,
 } from "react";
 import { useNavigate } from "react-router-dom";
 
@@ -14,12 +13,8 @@ import { AppRoute } from "../Routes";
 import { useHelp } from "../common/context/HelpContext";
 import { useWallet } from "@solana/wallet-adapter-react";
 import { LinkWithQuery } from "../common/components/LinkWithQuery";
-import { TopicContainer } from "../common/container/TopicContainer";
 import { Card } from "../common/container/Card";
 import { ReferralOptions } from "./ReferralOptions";
-import { isMobilePortrait } from "../common/utils";
-import { useWindowSize } from "usehooks-ts";
-import { useScreenOrientation } from "../hub/hooks/useScreenOrientation";
 
 const Title: FC = () => (
   <div className="topic-title w-full mt-8">
@@ -31,35 +26,18 @@ const Title: FC = () => (
         <IoChevronUpOutline className="inline" size={48} />
       </div>
     </LinkWithQuery>
-    <h1 className="font-bold text-green-light text-4xl text-center mb-4">
+    <h1 className="font-bold text-green-light text-3xl text-center mb-4">
       Share Your Referral Link
     </h1>
   </div>
 );
 
-const Wrapper: FC<PropsWithChildren> = ({ children }) => {
-  const windowSize = useWindowSize();
-  const isPortrait = useMemo(
-    () => isMobilePortrait(window.innerWidth),
-    [windowSize]
-  );
-
-  return isPortrait ? (
-    <div>{children}</div>
-  ) : (
-    <Card size="large" orientation="horizontal">
-      {children}
-    </Card>
-  );
-};
-
 const _ReferralApp: ForwardRefRenderFunction<
   HTMLDivElement,
   { className?: string; active?: boolean } & React.HTMLAttributes<HTMLElement>
 > = ({ className, active = false, ...rest }, ref) => {
   const { currentHelpRoute } = useHelp();
   const [, updateZenMode] = useZenMode();
-  const { screenType } = useScreenOrientation();
 
   const navigate = useNavigate();
   const wallet = useWallet();
@@ -79,17 +57,18 @@ const _ReferralApp: ForwardRefRenderFunction<
       showBGImage: false,
       showHelpButton: true,
       showWallet: active,
-      showExternalLinks: screenType !== "mobilePortrait",
+      showExternalLinks: true,
     }));
   }, [active, currentHelpRoute]);
 
   return (
-    <TopicContainer
-      className={className}
+    <div
+      className={clx("relative flex flex-col items-center pt-8", className)}
       ref={ref}
       {...rest}
-      titleContents={<Title />}
     >
+      <Title />
+      <div className="relative flex flex-col items-center pt-8"></div>
       {link === null && (
         <div className="flex flex-col items-center m-4">
           <h1 className="text-3xl text-center">Loading...</h1>
@@ -100,13 +79,17 @@ const _ReferralApp: ForwardRefRenderFunction<
         </div>
       )}
       {link !== null && (
-        <div className="mx-4 mb-3 flex flex-col items-center">
-          <Wrapper>
+        <div className="mb-20 flex flex-col items-center">
+          <Card
+            className="bg-green-light"
+            size="large"
+            orientation="horizontal"
+          >
             <ReferralOptions link={link} />
-          </Wrapper>
+          </Card>
         </div>
       )}
-    </TopicContainer>
+    </div>
   );
 };
 

packages/app/src/referral/ReferralOptions.tsx

@@ -1,59 +1,64 @@
-import React, { type FC } from "react";
-import { ShareButton } from "./ShareButton";
-import { FaShareSquare } from "react-icons/fa";
-import { Tweet } from "../common/components/Tweet";
-import { CopyButton } from "./CopyButton";
+import { useState, type FC } from "react";
+import { useCopyToClipboard } from "usehooks-ts";
+
 import { Card } from "../common/container/Card";
-import { ReferTweetButton } from "./ReferTweetButton";
 import { QRCodeCard } from "./QRCodeCard";
-import { useScreenOrientation } from "../hub/hooks/useScreenOrientation";
+import { FaTwitter } from "react-icons/fa";
 
 export const ReferralOptions: FC<{ link: string }> = ({ link }) => {
-  const { screenType } = useScreenOrientation();
-  const isPortrait = screenType === "mobilePortrait";
-  const shareSupported = window.navigator?.canShare?.();
+  const [, copy] = useCopyToClipboard();
+  const [copied, setCopied] = useState(false);
+
+  const copyLink = (): void => {
+    if (link === null) return;
+    copy(link)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => {
+          setCopied(false);
+        }, 5000);
+      })
+      .catch(console.error);
+  };
 
   return (
-    <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">
-      {isPortrait && (
-        <div className="flex flex-row justify-around w-full mt-5 items-center">
-          {shareSupported && (
-            <ShareButton link={link}>
-              <FaShareSquare className="text-white w-8 h-8" />
-            </ShareButton>
-          )}
-          <Tweet
-            url={link}
-            tweet="Join my forest on Sunrise Stake! Join me and the Solana community in making a collective positive environmental impact."
-          />
-        </div>
-      )}
-      {!isPortrait && (
-        <>
-          <CopyButton link={link}>
-            <Card
-              title={"Copy to Clipboard"}
-              size="medium"
-              image={
-                <img
-                  src="/clip.png"
-                  className="w-full h-full object-contain"
-                  alt="Copy"
-                />
-              }
-            ></Card>
-          </CopyButton>
-          <Card
-            size="medium"
-            title={"Share"}
-            image={
-              <ReferTweetButton link={link}>
-                <img src="/sowing.png" alt="Share link" />
-              </ReferTweetButton>
-            }
-          ></Card>
-        </>
-      )}
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-4">
+      <button onClick={copyLink}>
+        <Card
+          title={copied ? "✓ Copied" : "Copy to Clipboard"}
+          size="medium"
+          image={
+            <img
+              src="/clip.png"
+              className="w-full h-full object-contain"
+              alt="Copy"
+            />
+          }
+        ></Card>
+      </button>
+      <a
+        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}`}
+        target="_blank"
+        rel="noreferrer"
+        referrerPolicy="origin"
+      >
+        <Card
+          size="medium"
+          title={
+            <>
+              <FaTwitter size={20} title="Twitter" />
+              Share
+            </>
+          }
+          image={
+            <img
+              src="/sowing.png"
+              className="w-full h-full object-contain"
+              alt="Copy"
+            />
+          }
+        />
+      </a>
       <QRCodeCard link={link} type="sunrise" />
       <QRCodeCard link={link} type="solanapay" />
     </div>

packages/app/tailwind.config.js

@@ -43,12 +43,7 @@ module.exports = {
             },
             animation: {
                 "fade-in": "fade-in 150ms ease-out",
-            },
-            backgroundImage: theme => ({
-                'wood-sm': "url('/public/wood-vert.png')",
-                'wood-md': "url('/public/wood-transparent-thin.png')",
-                'wood-lg': "url('/public/wood-transparent-thin.png')"
-            })
+            }
         },
     },
     plugins: [