changes

ethereumfollowprotocol · Nov 29, 2024 · ab9027b · ab9027b
1 parent dab2afd
commit ab9027b
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 13 deletions.
diff --git a/src/components/language-selector/index.tsx b/src/components/language-selector/index.tsx
@@ -64,7 +64,7 @@ const LanguageSelector = ({
         </div>
       </div>
       <div
-        className={`absolute -right-[250px] sm:right-[95%] -top-[199px] z-50 sm:-top-[6px] ${
+        className={`absolute -right-[250px] sm:right-[95%] -top-[140px] z-50 sm:-top-[6px] ${
           languageMenOpenu ? 'block' : 'hidden'
         } group-hover:block sm:pr-6`}
       >

diff --git a/src/components/navigation/components/cart-button.tsx b/src/components/navigation/components/cart-button.tsx
@@ -11,19 +11,29 @@ import { formatNumber } from '#/utils/format/format-number'
 import HalloweenCart from 'public/assets/icons/halloween-cart.png'
 
 const CartButton = () => {
+  const pathname = usePathname()
   const { totalCartItems } = useCart()
 
-  const pathname = usePathname()
   return (
     <Link href='/cart'>
-      <div className='border-[3px] bg-neutral/80 border-grey z-50 h-[54px] justify-center items-center w-[54px] transition-all backdrop-blur-xl cursor-pointer hover:scale-110 relative flex rounded-full'>
+      <div
+        className={cn(
+          'border-[3px] bg-neutral/80 group z-50 h-[54px] justify-center items-center w-[54px] transition-all backdrop-blur-xl cursor-pointer hover:scale-110 relative flex rounded-full',
+          pathname === '/cart' ? 'border-text' : 'border-grey hover:border-text'
+        )}
+      >
         <div
           className={cn(
-            'w-[42px] absolute top-[3px] h-[42px] transition-all bg-followButton rounded-full',
+            'w-[42px] absolute top-[3px] h-[42px] bg-gradient-to-b from-[#FFDE60] to-[#FFA997] rounded-full',
             pathname === '/cart' ? 'opacity-100' : 'opacity-0'
           )}
         />
-        <IoCartSharp className='transition-opacity text-[28px] -translate-x-px' />
+        <IoCartSharp
+          className={cn(
+            'text-[28px] -translate-x-px transition-all',
+            pathname === '/cart' ? 'text-text' : 'text-text-neutral group-hover:text-text'
+          )}
+        />
         <Image
           src={HalloweenCart}
           alt='cart'

diff --git a/src/components/navigation/components/integrations.tsx b/src/components/navigation/components/integrations.tsx
@@ -12,7 +12,7 @@ const Integrations: React.FC = () => {
 
   return (
     <div className='relative group cursor-help' ref={clickAwayRef}>
-      <div className='flex items-center gap-1' onClick={() => setTooltipOpen(!tooltipOpen)}>
+      <div className='flex items-center gap-1 ' onClick={() => setTooltipOpen(!tooltipOpen)}>
         <TbAppsFilled className='text-4xl font-bold' />
         <p className='text-xl font-bold'>{INTEGRATIONS.length}</p>
       </div>
@@ -25,7 +25,7 @@ const Integrations: React.FC = () => {
         <div className='w-full rounded-lg border-grey border-[3px] bg-neutral p-3'>
           <p className='text-[20px] font-bold'>{INTEGRATIONS.length} Integrations</p>
           <p className='text-sm font-medium'>
-            Connect your apps to your account to use them in your projects.
+            Browse apps that use EFP, and learn how to integrate it into your app.
           </p>
           <Link
             href='/about'

diff --git a/src/components/navigation/components/nav-items.tsx b/src/components/navigation/components/nav-items.tsx
@@ -10,6 +10,7 @@ import { useConnectModal } from '@rainbow-me/rainbowkit'
 import Menu from './menu'
 import { EXTERNAL_LINKS, NAV_ITEMS } from '#/lib/constants'
 import { useEFPProfile } from '#/contexts/efp-profile-context'
+import { cn } from '#/lib/utilities'
 
 const NavItems = () => {
   const pathname = usePathname()
@@ -35,7 +36,7 @@ const NavItems = () => {
     <div ref={clickAwayRef} className='relative'>
       <div className='flex flex-row items-center z-40 relative gap-5 px-2.5 bg-neutral/80 backdrop-blur-xl h-[54px] border-[3px] border-grey rounded-full'>
         <div
-          className='w-[42px] absolute top-[3px] h-[42px] duration-300 transition-all bg-followButton rounded-full'
+          className='w-[42px] absolute top-[3px] h-[42px] bg-gradient-to-b from-[#FFDE60] to-[#FFA997] rounded-full'
           style={{
             left:
               itemIndex === -1 ? '100%' : `${itemIndex * 48 + (4 - Math.ceil(itemIndex / 3))}px`,
@@ -61,17 +62,37 @@ const NavItems = () => {
               setMobileMenuOpen(false)
             }}
           >
-            <item.icon className='text-7 w-7 h-7 font-bold z-50 hover:scale-110 transition-transform cursor-pointer' />
+            <item.icon
+              className={cn(
+                'text-7 w-7 h-7 font-bold z-50 hover:scale-110 transition-all cursor-pointer',
+                item.href(itemUrl) === pathname ? 'text-text' : 'text-text-neutral hover:text-text'
+              )}
+            />
           </Link>
         ))}
         <div className='relative'>
           <div
             onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
             className='flex hover:scale-110 w-7 cursor-pointer group relative transition-all pr-px items-center justify-center gap-[5px] flex-col'
           >
-            <div className='w-6 h-1 rounded-full transition-all bg-text -translate-x-px'></div>
-            <div className='w-6 h-1 rounded-full transition-all bg-text -translate-x-px'></div>
-            <div className='w-6 h-1 rounded-full transition-all bg-text -translate-x-px'></div>
+            <div
+              className={cn(
+                'w-6 h-1 rounded-full transition-all bg-text -translate-x-px',
+                itemIndex === 4 ? 'bg-text' : 'bg-text-neutral group-hover:bg-text'
+              )}
+            ></div>
+            <div
+              className={cn(
+                'w-6 h-1 rounded-full transition-all bg-text -translate-x-px',
+                itemIndex === 4 ? 'bg-text' : 'bg-text-neutral group-hover:bg-text'
+              )}
+            ></div>
+            <div
+              className={cn(
+                'w-6 h-1 rounded-full transition-all bg-text -translate-x-px',
+                itemIndex === 4 ? 'bg-text' : 'bg-text-neutral group-hover:bg-text'
+              )}
+            ></div>
           </div>
         </div>
       </div>

diff --git a/src/components/navigation/mobile.tsx b/src/components/navigation/mobile.tsx
@@ -5,16 +5,18 @@ import { usePathname } from 'next/navigation'
 import NavItems from './components/nav-items'
 import CartButton from './components/cart-button'
 import { cn } from '#/lib/utilities'
+import { useCart } from '#/contexts/cart-context'
 
 const Mobile: React.FC = () => {
   const pathname = usePathname()
+  const { totalCartItems } = useCart()
   const { address: userAddress } = useAccount()
 
   return (
     <nav
       className={cn(
         'fixed mx-auto bottom-6 z-50 flex justify-center w-full lg:hidden',
-        pathname === '/cart' && 'bottom-28 sm:bottom-32'
+        pathname === '/cart' && totalCartItems > 0 && 'bottom-28 sm:bottom-32'
       )}
     >
       <div className='flex items-center gap-1.5'>