Team feedback round 4

base-org · Oct 9, 2024 · a52f802 · a52f802
1 parent 24cdd37
commit a52f802
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 66 deletions.
diff --git a/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx b/apps/web/src/components/ConnectWalletButton/ConnectWalletButton.tsx
@@ -134,12 +134,12 @@ export function ConnectWalletButton({
     <Wallet>
       <ConnectWallet
         withWalletAggregator
-        className="rounded-none bg-transparent p-2 hover:bg-gray-40/20"
+        className="rounded-xl bg-transparent p-2 hover:bg-gray-40/20"
       >
         <UserAvatar />
         <Name chain={basenameChain} className={userAddressClasses} />
       </ConnectWallet>
-      <WalletDropdown className="rounded bg-white font-sans shadow-md">
+      <WalletDropdown className="rounded-xl bg-white font-sans shadow-md">
         <Identity className={classNames('px-4 pb-2 pt-3 font-display')}>
           <UserAvatar />
           <Name

diff --git a/apps/web/src/components/ThreeHero/index.tsx b/apps/web/src/components/ThreeHero/index.tsx
@@ -2,7 +2,7 @@
 'use client';
 
 import * as THREE from 'three';
-import { useRef, useMemo, Suspense, useCallback } from 'react';
+import { useRef, useMemo, Suspense, useCallback, useState, useEffect } from 'react';
 import { Canvas, Euler, useFrame, useThree, Vector3 } from '@react-three/fiber';
 import { Lightformer, Environment, Html, Center } from '@react-three/drei';
 import {
@@ -59,10 +59,57 @@ const sceneSphereArguments: [radius: number, widthSegments: number, heightSegmen
   7, 64, 64,
 ];
 export default function Scene(): JSX.Element {
-  const isActive = true;
+  const [isActive, setIsActive] = useState(true);
+  const [isIntoView, setIsIntoView] = useState(true);
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      updateIsActive();
+    };
+
+    const handleFocus = () => {
+      updateIsActive();
+    };
+
+    const handleBlur = () => {
+      updateIsActive();
+    };
+
+    const handleScroll = () => {
+      updateIsActive();
+    };
+
+    const updateIsActive = () => {
+      const isFocused = !document.hidden && document.hasFocus();
+      const isScrolledInView = window.pageYOffset < window.innerHeight;
+      setIsActive(isFocused);
+      setIsIntoView(isScrolledInView);
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    window.addEventListener('focus', handleFocus);
+    window.addEventListener('blur', handleBlur);
+    window.addEventListener('scroll', handleScroll);
+
+    // Initial check
+    updateIsActive();
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      window.removeEventListener('focus', handleFocus);
+      window.removeEventListener('blur', handleBlur);
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
 
   return (
-    <Canvas shadows frameloop={isActive ? 'always' : 'never'} camera={sceneCamera}>
+    <Canvas
+      shadows
+      frameloop={isActive && isIntoView ? 'always' : 'never'}
+      camera={sceneCamera}
+      className={isIntoView ? 'opacity-100' : 'opacity-0'}
+      style={{ background: 'transparent' }}
+    >
       <fog attach="fog" args={sceneFogArguments} />
 
       <mesh>

diff --git a/apps/web/src/components/base-org/root/BuildAndRewardSection/index.tsx b/apps/web/src/components/base-org/root/BuildAndRewardSection/index.tsx
@@ -47,11 +47,7 @@ export default function BuildAndRewardSection() {
 
           <div>
             <Link href="https://retrofunding.optimism.io/" target="_blank">
-              <Button
-                variant={ButtonVariants.Primary}
-                iconName="baseOrgDiagonalUpArrow"
-                className="md:ml-auto"
-              >
+              <Button variant={ButtonVariants.Primary} iconName="baseOrgDiagonalUpArrow">
                 Get rewarded
               </Button>
             </Link>

diff --git a/apps/web/src/components/base-org/root/BuildExploreSection/index.tsx b/apps/web/src/components/base-org/root/BuildExploreSection/index.tsx
@@ -23,6 +23,7 @@ export default async function BuildExploreSection() {
                 src={docsIllustration as StaticImageData}
                 alt="Base docs"
                 title="Base docs illustration"
+                className="max-h-[4rem]"
               />
               <div>
                 <Text className="mr-2 inline-block">Docs</Text>{' '}
@@ -38,6 +39,7 @@ export default async function BuildExploreSection() {
                 src={resourcesIllustration as StaticImageData}
                 alt="Resources"
                 title="Resources illustration"
+                className="max-h-[4rem]"
               />
               <div>
                 <Text className="mr-2 inline-block">Resources</Text>{' '}
@@ -58,6 +60,7 @@ export default async function BuildExploreSection() {
                 src={appsIllustration as StaticImageData}
                 alt="Resources"
                 title="Resources illustration"
+                className="max-h-[4rem]"
               />
               <div>
                 <Text className="mr-2 inline-block">Apps</Text>{' '}
@@ -73,6 +76,7 @@ export default async function BuildExploreSection() {
                 src={bridgeIllustration as StaticImageData}
                 alt="Bridge"
                 title="Bridge illustration"
+                className="max-h-[4rem]"
               />
               <div>
                 <Text className="mr-2 inline-block">Bridge</Text>{' '}

diff --git a/apps/web/src/components/base-org/shared/TopNavigation/AnimatedIcon.tsx b/apps/web/src/components/base-org/shared/TopNavigation/AnimatedIcon.tsx
@@ -15,22 +15,36 @@ const AnimatedIcon = ({
       scale: 1,
       opacity: 1,
       transition: {
-        duration: duration / 1000,
-        delay: delay / 1000,
-        ease: scaleEasing,
+        scale: {
+          duration: duration / 1000,
+          delay: delay / 1000,
+          ease: scaleEasing,
+        },
+        opacity: {
+          duration: duration / 2 / 1000, // Faster opacity animation
+          delay: delay / 1000,
+          ease: 'easeOut',
+        },
       },
     },
   };
 
   const pathVariants = {
-    hidden: { pathLength: 0, opacity: 0 },
+    hidden: { pathLength: 0.1, opacity: 0 },
     visible: (custom: number) => ({
       pathLength: 1,
       opacity: 1,
       transition: {
-        duration: (duration + custom) / 1000,
-        delay: delay / 1000,
-        ease: easing,
+        pathLength: {
+          duration: (duration + custom) / 1000,
+          delay: 0,
+          ease: easing,
+        },
+        opacity: {
+          duration: (duration + custom) / 3 / 1000, // Faster opacity animation
+          delay: 0,
+          ease: 'easeOut',
+        },
       },
     }),
   };
@@ -271,52 +285,6 @@ const AnimatedIcon = ({
             />
           </motion.svg>
         );
-      case 'about':
-        return (
-          <motion.svg
-            variants={svgVariants}
-            initial="hidden"
-            animate="visible"
-            width="87"
-            height="87"
-            viewBox="0 0 87 87"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <motion.path
-              variants={pathVariants}
-              custom={0}
-              d="M43.1858 0V32.5663"
-              stroke={color}
-              strokeWidth="2.47787"
-              strokeMiterlimit="10"
-            />
-            <motion.path
-              variants={pathVariants}
-              custom={0}
-              d="M0 43.1855H32.5663"
-              stroke={color}
-              strokeWidth="2.47787"
-              strokeMiterlimit="10"
-            />
-            <motion.path
-              variants={pathVariants}
-              custom={0}
-              d="M43.1858 86.3709V53.8047"
-              stroke={color}
-              strokeWidth="2.47787"
-              strokeMiterlimit="10"
-            />
-            <motion.path
-              variants={pathVariants}
-              custom={0}
-              d="M86.3714 43.1855H53.8052"
-              stroke={color}
-              strokeWidth="2.47787"
-              strokeMiterlimit="10"
-            />
-          </motion.svg>
-        );
       case 'socials':
         return (
           <motion.svg
@@ -395,7 +363,7 @@ const AnimatedIcon = ({
             />
           </motion.svg>
         );
-      case 'about2':
+      case 'about':
         return (
           <motion.svg
             variants={svgVariants}

diff --git a/apps/web/src/components/base-org/shared/TopNavigation/MenuDesktop.tsx b/apps/web/src/components/base-org/shared/TopNavigation/MenuDesktop.tsx
@@ -103,7 +103,7 @@ export default function MenuDesktop({ links }: MenuDesktopProps) {
         }}
       >
         <Card radius={8} innerClassName="bg-[#191919]">
-          <div className="flex w-full items-stretch gap-1 p-1">
+          <div className="flex w-full items-stretch gap-2 rounded-lg bg-[#191919] p-2">
             {links[hoverIndex]?.subItems && (
               <AnalyticsProvider context={links[hoverIndex].analyticContext}>
                 <div className="flex flex-1 flex-col">
@@ -124,7 +124,7 @@ export default function MenuDesktop({ links }: MenuDesktopProps) {
               </AnalyticsProvider>
             )}
             {links[hoverIndex]?.subItems && (
-              <div className="min-h-[200px] flex-1 basis-0 overflow-hidden p-2">
+              <div className="min-h-[200px] flex-1 basis-0 overflow-hidden ">
                 {links[hoverIndex]?.name && (
                   <div className="flex h-full w-full flex-col items-center justify-center gap-2 rounded-lg bg-black">
                     {subActive && (