From 7263f991daf061db2cd7f4b96e921cb75520ebaa Mon Sep 17 00:00:00 2001
From: Ronny Haase <ronnyhaase@fastmail.com>
Date: Sun, 22 Oct 2023 13:41:40 +0200
Subject: [PATCH] Fix hub

---
 .../common/components/tree/DynamicTree.tsx    |  18 +-
 packages/app/src/hub/HubApp.tsx               | 243 +++++++++---------
 packages/app/src/locking/LockingApp.tsx       |   2 +-
 3 files changed, 137 insertions(+), 126 deletions(-)

diff --git a/packages/app/src/common/components/tree/DynamicTree.tsx b/packages/app/src/common/components/tree/DynamicTree.tsx
index e7e07d3d..76690c37 100644
--- a/packages/app/src/common/components/tree/DynamicTree.tsx
+++ b/packages/app/src/common/components/tree/DynamicTree.tsx
@@ -71,12 +71,20 @@ const width = (index: number, total: number): string => {
 };
 
 export const DynamicTree: FC<{
+  className?: string;
   details: TreeComponent;
-  style?: CSSProperties;
+  islandHeight?: number;
   onClick?: () => void;
-  className?: string;
+  style?: CSSProperties;
   variant?: "sm" | "md";
-}> = ({ details, style = {}, onClick, className = "", variant = "md" }) => {
+}> = ({
+  className = "",
+  details,
+  islandHeight = 300,
+  onClick,
+  style = {},
+  variant = "md",
+}) => {
   const { level, species } = details.metadata.type;
 
   const treeImages = [];
@@ -119,8 +127,8 @@ export const DynamicTree: FC<{
       <Island
         className={
           variant === "sm"
-            ? "w-[300px] h-[300px] scale-50"
-            : "w-[300px] h-[300px]"
+            ? `w-[300px] h-[${islandHeight}px] scale-50`
+            : `w-[300px] h-[${islandHeight}px]`
         }
       >
         {components}
diff --git a/packages/app/src/hub/HubApp.tsx b/packages/app/src/hub/HubApp.tsx
index 8403981f..c3c8a7d0 100644
--- a/packages/app/src/hub/HubApp.tsx
+++ b/packages/app/src/hub/HubApp.tsx
@@ -128,105 +128,39 @@ const _HubApp: ForwardRefRenderFunction<
   return (
     <div
       className={clx(
-        "flex flex-col items-center justify-center pb-12 text-center text-green",
+        "flex flex-col items-center justify-center pt-2 pb-10 text-center text-green",
         className
       )}
       ref={ref}
       {...rest}
     >
       <div className="w-full max-h-full m-auto overflow-auto">
-        <Spinner
-          className={
-            (introLeft && !showHub) || totalCarbon === undefined
-              ? "block"
-              : "hidden"
-          }
-        />
-        <HubIntro
-          show={showIntro}
-          onEnter={() => {
-            updateIntroLeft(false);
-          }}
-          onLeft={() => {
-            updateIntroLeft(true);
-          }}
-        />
-        <div className={showHub ? "block" : "hidden"}>
-          <div className="flex justify-center">
-            <LinkWithQuery
-              to="/forest"
-              className={clx(
-                "hidden md:flex flex-col justify-center transition-opacity ease-in duration-500",
-                showHubNav ? "opacity-100" : "opacity-0"
-              )}
-            >
-              <div className="flex items-center nowrap text-2xl">
-                <IoChevronBackOutline
-                  className="inline"
-                  size={LINK_CHEVRON_SIZE}
-                />
-                <span>Forest</span>
-              </div>
-            </LinkWithQuery>
-            {myTree && (
-              <DynamicTree
-                details={myTree}
-                className={`FloatingTree mb-8`}
-                onClick={() => {
-                  updateShowHubNav(!showHubNav);
-                }}
-              />
-            )}
-            <LinkWithQuery
-              to="/grow"
-              className={clx(
-                "hidden md:flex flex-col justify-center transition-opacity ease-in duration-500",
-                showHubNav ? "opacity-100" : "opacity-0"
-              )}
-            >
-              <div className="flex relative items-center nowrap text-2xl">
-                <span>Grow</span>
-                <IoChevronForwardOutline
-                  className="inline"
-                  size={LINK_CHEVRON_SIZE}
-                />
-              </div>
-            </LinkWithQuery>
-          </div>
-          <div className="w-full mt-2 text-center">
-            {myTree?.metadata?.type?.level !== undefined &&
-            myTree?.metadata?.type?.level > 0 ? (
-              <div
+        <div className="flex justify-center">
+          <Spinner
+            className={
+              (introLeft && !showHub) || totalCarbon === undefined
+                ? "block"
+                : "hidden"
+            }
+          />
+          <HubIntro
+            show={showIntro}
+            onEnter={() => {
+              updateIntroLeft(false);
+            }}
+            onLeft={() => {
+              updateIntroLeft(true);
+            }}
+          />
+          <div className={showHub ? "block max-w-sm pb-5" : "hidden"}>
+            <div className="flex justify-center">
+              <LinkWithQuery
+                to="/forest"
                 className={clx(
-                  "transition-opacity ease-in duration-500",
+                  "hidden md:flex flex-col justify-center transition-opacity ease-in duration-500",
                   showHubNav ? "opacity-100" : "opacity-0"
                 )}
               >
-                <LinkWithQuery to="/stake">
-                  <Button variant="outline" size="lg">
-                    {stakeButtonMessage}
-                  </Button>
-                </LinkWithQuery>
-              </div>
-            ) : (
-              <div
-                className={clx(
-                  "transition-opacity ease-in duration-500",
-                  showHub ? "opacity-100" : "opacity-0"
-                )}
-              >
-                <LinkWithQuery to="/stake">
-                  <Button variant="outline">{stakeButtonMessage}</Button>
-                </LinkWithQuery>
-              </div>
-            )}
-            <div
-              className={clx(
-                "flex md:hidden justify-between my-4 transition-opacity ease-in duration-500",
-                showHubNav ? "opacity-100" : "opacity-0"
-              )}
-            >
-              <LinkWithQuery to="/forest" className="flex items-center">
                 <div className="flex items-center nowrap text-2xl">
                   <IoChevronBackOutline
                     className="inline"
@@ -235,8 +169,24 @@ const _HubApp: ForwardRefRenderFunction<
                   <span>Forest</span>
                 </div>
               </LinkWithQuery>
-              <LinkWithQuery to="/grow" className="flex items-center">
-                <div className="flex items-center nowrap text-2xl relative">
+              {myTree && (
+                <DynamicTree
+                  className={`FloatingTree mb-8`}
+                  details={myTree}
+                  islandHeight={400}
+                  onClick={() => {
+                    updateShowHubNav(!showHubNav);
+                  }}
+                />
+              )}
+              <LinkWithQuery
+                to="/grow"
+                className={clx(
+                  "hidden md:flex flex-col justify-center transition-opacity ease-in duration-500",
+                  showHubNav ? "opacity-100" : "opacity-0"
+                )}
+              >
+                <div className="flex relative items-center nowrap text-2xl">
                   <span>Grow</span>
                   <IoChevronForwardOutline
                     className="inline"
@@ -245,38 +195,91 @@ const _HubApp: ForwardRefRenderFunction<
                 </div>
               </LinkWithQuery>
             </div>
-            <div
-              className={clx(
-                "transition-opacity ease-in duration-500 flex flex-row",
-                showHubNav ? "opacity-100" : "opacity-0"
+            <div className="w-full mt-2 text-center">
+              {myTree?.metadata?.type?.level !== undefined &&
+              myTree?.metadata?.type?.level > 0 ? (
+                <div
+                  className={clx(
+                    "transition-opacity ease-in duration-500",
+                    showHubNav ? "opacity-100" : "opacity-0"
+                  )}
+                >
+                  <LinkWithQuery to="/stake">
+                    <Button variant="outline" size="lg">
+                      {stakeButtonMessage}
+                    </Button>
+                  </LinkWithQuery>
+                </div>
+              ) : (
+                <div
+                  className={clx(
+                    "transition-opacity ease-in duration-500",
+                    showHub ? "opacity-100" : "opacity-0"
+                  )}
+                >
+                  <LinkWithQuery to="/stake">
+                    <Button variant="outline">{stakeButtonMessage}</Button>
+                  </LinkWithQuery>
+                </div>
               )}
-            >
-              <LinkWithQuery
-                to="/lock"
-                className="block w-full mt-4 leading-none"
+              <div
+                className={clx(
+                  "flex md:hidden justify-between my-4 transition-opacity ease-in duration-500",
+                  showHubNav ? "opacity-100" : "opacity-0"
+                )}
               >
-                <div className="relative inline-block">
-                  <span className="text-2xl">Lock</span>
-                </div>
-                <br />
-                <IoChevronDownOutline
-                  className="inline-block"
-                  size={LINK_CHEVRON_SIZE}
-                />
-              </LinkWithQuery>
-              <LinkWithQuery
-                to="/referral"
-                className="block w-full mt-4 leading-none"
+                <LinkWithQuery to="/forest" className="flex items-center">
+                  <div className="flex items-center nowrap text-2xl">
+                    <IoChevronBackOutline
+                      className="inline"
+                      size={LINK_CHEVRON_SIZE}
+                    />
+                    <span>Forest</span>
+                  </div>
+                </LinkWithQuery>
+                <LinkWithQuery to="/grow" className="flex items-center">
+                  <div className="flex items-center nowrap text-2xl relative">
+                    <span>Grow</span>
+                    <IoChevronForwardOutline
+                      className="inline"
+                      size={LINK_CHEVRON_SIZE}
+                    />
+                  </div>
+                </LinkWithQuery>
+              </div>
+              <div
+                className={clx(
+                  "transition-opacity ease-in duration-500 flex flex-row",
+                  showHubNav ? "opacity-100" : "opacity-0"
+                )}
               >
-                <div className="relative inline-block">
-                  <span className="text-2xl">Referral</span>
-                </div>
-                <br />
-                <IoChevronDownOutline
-                  className="inline-block -rotate-45"
-                  size={LINK_CHEVRON_SIZE}
-                />
-              </LinkWithQuery>
+                <LinkWithQuery
+                  to="/lock"
+                  className="block w-full mt-4 leading-none"
+                >
+                  <div className="relative inline-block">
+                    <span className="text-2xl">Lock</span>
+                  </div>
+                  <br />
+                  <IoChevronDownOutline
+                    className="inline-block"
+                    size={LINK_CHEVRON_SIZE}
+                  />
+                </LinkWithQuery>
+                <LinkWithQuery
+                  to="/referral"
+                  className="block w-full mt-4 leading-none"
+                >
+                  <div className="relative inline-block">
+                    <span className="text-2xl">Referral</span>
+                  </div>
+                  <br />
+                  <IoChevronDownOutline
+                    className="inline-block -rotate-45"
+                    size={LINK_CHEVRON_SIZE}
+                  />
+                </LinkWithQuery>
+              </div>
             </div>
           </div>
         </div>
diff --git a/packages/app/src/locking/LockingApp.tsx b/packages/app/src/locking/LockingApp.tsx
index d438a2e1..1702cc61 100644
--- a/packages/app/src/locking/LockingApp.tsx
+++ b/packages/app/src/locking/LockingApp.tsx
@@ -181,7 +181,7 @@ const _LockingApp: ForwardRefRenderFunction<
         </LinkWithQuery>
       </div>
       {myTree && details?.impactNFTDetails === undefined && (
-        <DynamicTree details={myTree} variant="sm" />
+        <DynamicTree className="-mb-11" details={myTree} variant="sm" />
       )}
       {details?.lockDetails === undefined && (
         <div className="mb-3 justify-center content-center items-center">