Update Referral look and mobile optimizations

- Optimize for portrait mode with pure CSS
- Remove JS based mobile optimizations
- Fix cut content on hub
- Move help button slightly right to not overlap
- Further minor optimizations

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

@@ -2,6 +2,7 @@ import { type FC, type PropsWithChildren, type ReactNode } from "react";
 import clx from "classnames";
 
 interface CardProps {
+  className?: string;
   title?: string;
   image?: ReactNode;
   orientation?: "horizontal" | "vertical";
@@ -10,6 +11,7 @@ interface CardProps {
 
 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/common/partials/Layout.tsx

@@ -42,7 +42,7 @@ const Layout: FC<{ children: ReactNode }> = ({ children }) => {
         </WalletMultiButton>
       </Transition>
       <Transition
-        className="z-10 fixed bottom-4 right-8"
+        className="z-10 fixed bottom-4 right-4"
         show={zenMode.showHelpButton}
         unmount={false}
         enterFrom="opacity-0"

packages/app/src/common/utils.ts

@@ -177,8 +177,6 @@ const replaceInArray = <T>(arr: T[], oldItem: T, newItem: T): T[] => {
   return [...arr.slice(0, index), newItem, ...arr.slice(index + 1)];
 };
 
-const isMobilePortrait = (width: number): boolean => width < 768;
-
 export {
   addUp,
   round,
@@ -200,5 +198,4 @@ export {
   memoise,
   handleError,
   noop,
-  isMobilePortrait,
 };

packages/app/src/forest/ForestApp.tsx

@@ -22,7 +22,6 @@ import { ForestLink } from "./ForestLink";
 import { useWallet } from "@solana/wallet-adapter-react";
 import { type ParentRelationship, type TreeNode } from "../api/types";
 import { LinkWithQuery } from "../common/components/LinkWithQuery";
-import { useScreenOrientation } from "../hub/hooks/useScreenOrientation";
 
 const ForestTree: FC<{ details: TreeComponent; style?: CSSProperties }> = ({
   details,
@@ -101,13 +100,12 @@ const _ForestApp: ForwardRefRenderFunction<
 > = ({ className, active = false, ...rest }, ref) => {
   const [, updateZenMode] = useZenMode();
   const { currentHelpRoute } = useHelp();
-  const { screenType } = useScreenOrientation();
   useEffect(() => {
     if (currentHelpRoute !== AppRoute.Forest) return; // we are not on the forest page, so don't update zen mode
     updateZenMode((prev) => ({
       ...prev,
       showHelpButton: true,
-      showExternalLinks: screenType !== "mobilePortrait",
+      showExternalLinks: true,
       showWallet: false,
     }));
   }, [active, currentHelpRoute]);

packages/app/src/grow/GrowApp.tsx

@@ -25,7 +25,6 @@ import { partners } from "./partners";
 import { PartnerButton } from "./components/PartnerButton";
 import { OrgButtonContent } from "./OrgButtonContent";
 import { LinkWithQuery } from "../common/components/LinkWithQuery";
-import { useScreenOrientation } from "../hub/hooks/useScreenOrientation";
 
 const Placeholder: FC<PropsWithChildren> = ({ children }) => (
   <div className="transition-all text-xl font-medium text-center text-green hover:text-green-light border border-green hover:border-green-light p-8 rounded-md w-40 h-40 hover:scale-105 hover:brightness-105">
@@ -44,7 +43,6 @@ const _GrowApp: ForwardRefRenderFunction<
 
   const navigate = useNavigate();
   const wallet = useWallet();
-  const { screenType } = useScreenOrientation();
   useEffect(() => {
     if (!wallet.connected && active) navigate("/");
   }, [active, wallet.connected]);
@@ -55,7 +53,7 @@ const _GrowApp: ForwardRefRenderFunction<
       ...prev,
       showBGImage: false,
       showHelpButton: true,
-      showExternalLinks: screenType !== "mobilePortrait",
+      showExternalLinks: true,
       showWallet: active,
     }));
   }, [active, currentHelpRoute]);
@@ -64,7 +62,10 @@ const _GrowApp: ForwardRefRenderFunction<
 
   return (
     <div
-      className={clx("relative flex flex-col items-center pt-8", className)}
+      className={clx(
+        "relative flex flex-col items-center pt-8 pb-12",
+        className
+      )}
       ref={ref}
       {...rest}
     >