Merge pull request #693 from ar-io/PE-7708-quick-wins-2

PE-7708: Quick wins 2
ar-io · Feb 19, 2025 · dc57adf · dc57adf
2 parents 725f608 + ce490ac
commit dc57adf
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 95 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,13 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- Landing page header and sub-title text updated
+- Header navigation links now icons
+- Footer links re-styled
+- Other minor visual improvements (icon sizing/coloring)
+
+### Fixed
+
+- Removed duplicate menu options in Profile menu on mobile
+
 ## [1.0.2] - 2025-02-14
 
-## Added
+### Added
 
 - Added Start Date column in Return Name Table
 
-## Changed
+### Changed
 
 - Updated Return Name Table to use left-hand arrow button for expand/collapse of chart
 
@@ -25,7 +36,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [1.0.1] - 2025-02-13
 
-## Changed
+### Changed
 
 - Changed ArConnect branding to Wander branding.
 - Added support for account switching with Metamask.

diff --git a/src/components/cards/NavMenuCard/NavMenuCard.tsx b/src/components/cards/NavMenuCard/NavMenuCard.tsx
@@ -260,23 +260,27 @@ function NavMenuCard() {
                 >
                   {isMobile ? (
                     <>
-                      <NavBarLink
-                        path={'https://ar.io/test-io'}
-                        linkText={'What are test tokens?'}
-                        target={'_blank'}
-                      />
                       {Object.entries(ROUTES).map(([key, route]) => {
                         if (!route.index && (!route.protected || walletAddress))
                           return (
                             <NavBarLink
                               path={route.path}
-                              linkText={route.text}
+                              linkText=""
                               target={route.external ? '_blank' : '_self'}
                               key={key}
                               onClick={() => {
                                 setShowMenu(false);
                               }}
-                            />
+                            >
+                              <>
+                                {route.icon && (
+                                  <route.icon className="grey size-3" />
+                                )}
+                                <span className="text-sm pl-[.125rem]">
+                                  {route.text}
+                                </span>
+                              </>
+                            </NavBarLink>
                           );
                       })}
                     </>
@@ -314,7 +318,7 @@ function NavMenuCard() {
                       height={'16px'}
                     />{' '}
                     <Link
-                      to={'https://ar.io/test-io'}
+                      to={'https://ar.io/test-ario'}
                       target={'_blank'}
                       className={'flex-row navbar-link hover'}
                       style={{
@@ -324,7 +328,7 @@ function NavMenuCard() {
                         fontSize: '14px',
                       }}
                     >
-                      What are test tokens?
+                      What are ARIO tokens?
                     </Link>
                   </span>{' '}
                   <span className="flex flex-row" style={{ gap: '10px' }}>

diff --git a/src/components/data-display/tables/DomainsTable.tsx b/src/components/data-display/tables/DomainsTable.tsx
@@ -306,18 +306,14 @@ const DomainsTable = ({
                 }
                 icon={
                   <Link
-                    className="link gap-2 w-fit whitespace-nowrap"
+                    className="link gap-2 w-fit whitespace-nowrap items-center"
                     to={`https://${encodeDomainToASCII(row.getValue('name'))}.${
                       NETWORK_DEFAULTS.ARNS.HOST
                     }`}
                     target="_blank"
                   >
                     {formatForMaxCharCount(decodeDomainToASCII(rowValue), 20)}{' '}
-                    <ExternalLinkIcon
-                      width={'12px'}
-                      height={'12px'}
-                      fill={'var(--text-white)'}
-                    />
+                    <ExternalLinkIcon className="size-3 fill-grey" />
                   </Link>
                 }
               />

diff --git a/src/components/data-display/tables/ReturnedNamesTable.tsx b/src/components/data-display/tables/ReturnedNamesTable.tsx
@@ -277,18 +277,14 @@ const ReturnedNamesTable = ({
                 }
                 icon={
                   <Link
-                    className="link gap-2 w-fit"
+                    className="link gap-2 w-fit items-center"
                     to={`https://${encodeDomainToASCII(row.getValue('name'))}.${
                       NETWORK_DEFAULTS.ARNS.HOST
                     }`}
                     target="_blank"
                   >
                     {formatForMaxCharCount(decodeDomainToASCII(rowValue), 20)}{' '}
-                    <ExternalLinkIcon
-                      width={'12px'}
-                      height={'12px'}
-                      fill={'var(--text-white)'}
-                    />
+                    <ExternalLinkIcon className="size-3 fill-grey" />
                   </Link>
                 }
               />

diff --git a/src/components/layout/Footer/Footer.tsx b/src/components/layout/Footer/Footer.tsx
@@ -30,7 +30,7 @@ function Footer() {
       <div className={'flex-row flex-left'} style={{ width: 'fit-content' }}>
         <BrandLogo width={'30px'} height={'30px'} fill={'var(--text-grey)'} />
         <Link
-          className="grey text hover:text-primary"
+          className="grey text hover:text-white"
           to={'https://ar.io/legal/terms-of-service-and-privacy-policy'}
           rel="noreferrer"
           target={'_blank'}
@@ -47,8 +47,8 @@ function Footer() {
       ></div>
 
       <div
-        className="flex-row flex-right"
-        style={{ width: 'fit-content', gap: '15px' }}
+        className="flex-row flex-right w-fit"
+        style={{ width: 'fit-content' }}
       >
         <Tooltip
           title="Show Changelog"
@@ -57,7 +57,7 @@ function Footer() {
           color="var(--text-faded)"
         >
           <button
-            className="flex flex-row flex-right text grey center"
+            className="flex flex-row flex-right text grey center hover:text-white"
             style={{ whiteSpace: 'nowrap' }}
             onClick={() => setShowChangeLogModal(true)}
           >
@@ -75,7 +75,7 @@ function Footer() {
             className="button grey text center hover pointer"
             onClick={() => window.open('https://github.com/ar-io/', '_blank')}
           >
-            <FaGithub style={{ fontSize: 20 }} />
+            <FaGithub className="size-4 stroke-grey fill-grey hover:stroke-white hover:fill-white" />
           </button>
         </Tooltip>
         <Tooltip
@@ -88,7 +88,7 @@ function Footer() {
             className="button grey text center hover pointer"
             onClick={() => window.open(ARIO_DISCORD_LINK, '_blank')}
           >
-            <FaDiscord style={{ fontSize: 20 }} />
+            <FaDiscord className="size-4 stroke-grey fill-grey hover:stroke-white hover:fill-white" />
           </button>
         </Tooltip>
         <Tooltip
@@ -98,10 +98,10 @@ function Footer() {
           color="var(--text-faded)"
         >
           <button
-            className="button grey text center hover pointer"
+            className="button grey text center hover pointer hover:text-white"
             onClick={() => window.open('https://docs.ar.io/arns', '_blank')}
           >
-            <QuestionCircleOutlined style={{ fontSize: 20 }} />
+            <QuestionCircleOutlined className="text-base" />
           </button>
         </Tooltip>
       </div>

diff --git a/src/components/layout/Navbar/NavGroup/NavGroup.tsx b/src/components/layout/Navbar/NavGroup/NavGroup.tsx
@@ -1,13 +1,13 @@
 import { useArNSState } from '@src/state';
+import { Tooltip } from 'antd';
 import { ReactNode, useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 
 import { useIsMobile } from '../../../../hooks';
 import { useWalletState } from '../../../../state/contexts/WalletState';
 import { ROUTES } from '../../../../utils/routes';
 import NavMenuCard from '../../../cards/NavMenuCard/NavMenuCard';
 import ConnectButton from '../../../inputs/buttons/ConnectButton/ConnectButton';
-import NavBarLink from '../NavBarLink/NavBarLink';
 import NotificationMenu from '../NotificationMenu/NotificationMenu';
 import './styles.css';
 
@@ -19,36 +19,39 @@ function NavGroup() {
   const location = useLocation();
 
   useEffect(() => {
-    function getActivityDot(routeName: string): boolean | undefined {
-      switch (routeName) {
-        // return true to display activity dot on a link
-        //example:
-        // case 'manage': return true;
-        default:
-          return undefined;
-      }
-    }
+    // function getActivityDot(routeName: string): boolean | undefined {
+    //   switch (routeName) {
+    //     // return true to display activity dot on a link
+    //     //example:
+    //     // case 'manage': return true;
+    //     default:
+    //       return undefined;
+    //   }
+    // }
 
     const newLinks = Object.entries(ROUTES).map(([key, value]) => {
       if (!value.index && !value.protected && key !== 'settings')
         return (
-          <NavBarLink
+          <Tooltip
             key={key}
-            path={value.path}
-            linkText={value.text}
-            activityDot={getActivityDot(key)}
-            target={value.external ? '_blank' : '_self'}
-          />
+            title={value.text}
+            placement={'bottom'}
+            autoAdjustOverflow={true}
+            color="var(--text-faded)"
+            className="grey p-2"
+            openClassName="white rounded bg-white/20"
+          >
+            <Link to={value.path} target={value.external ? '_blank' : '_self'}>
+              {value.icon && <value.icon className="size-4 " />}
+            </Link>
+          </Tooltip>
         );
     });
     setLinks(newLinks);
   }, [ants, location.pathname]);
 
   return (
-    <div
-      className="flex-right flex-padding flex-row"
-      style={{ width: 'fit-content' }}
-    >
+    <div className="flex-right flex size-fit gap-4 items-center">
       {!isMobile ? (
         <>
           {' '}

diff --git a/src/components/layout/Navbar/NotificationMenu/NotificationMenu.tsx b/src/components/layout/Navbar/NotificationMenu/NotificationMenu.tsx
@@ -77,7 +77,7 @@ export function createUpdateAntsNotification({
     ),
     link:
       '/manage/names?' +
-      new URLSearchParams({ sortBy: 'sourceCode' }).toString(),
+      new URLSearchParams({ sortBy: 'ioCompatible' }).toString(),
   };
 }
 
@@ -156,11 +156,7 @@ function NotificationMenu() {
         <div className="flex flex-col w-full gap-3 text-white items-center justify-center">
           {notifications.length ? (
             notifications.map((notification, index) => (
-              <div
-                className="flex flex-row"
-                style={{ gap: '20px' }}
-                key={index}
-              >
+              <div className="flex flex-row size-4" key={index}>
                 <span
                   className="flex flex-row justify-center items-start"
                   style={{ gap: '20px' }}
@@ -192,7 +188,7 @@ function NotificationMenu() {
                   to={notification.link}
                   className="p-2 rounded bg-dark-grey text-bg-dark-grey"
                 >
-                  <Settings width={'18px'} height={'18px'} />
+                  <Settings className="size-4" />
                 </Link>
               </div>
             ))
@@ -203,12 +199,10 @@ function NotificationMenu() {
       }
       icon={
         <BellIcon
-          width={'20px'}
-          height={'20px'}
           className={
             notifications.length
-              ? `text-primary fill-primary animate-pulse`
-              : `text-white fill-white`
+              ? `text-primary fill-primary animate-pulse size-4 m-2`
+              : `text-white fill-white size-4 m-2`
           }
         />
       }

diff --git a/src/components/pages/Home/Home.tsx b/src/components/pages/Home/Home.tsx
@@ -20,11 +20,11 @@ function Home() {
           whiteSpace: isMobile ? undefined : 'nowrap',
         }}
       >
-        Arweave Name System
+        Get your own smart domain
       </div>
       <span className="flex flex-col items-center pb-2 justify-center align-center text-center gap-[5px] text-md min-h-[45px] text-grey max-w-[500px]">
-        ArNS names are censorship-resistant domain names for permaweb dApps, web
-        pages, data, and identities.
+        The Arweave Name System (ArNS) connects friendly names to permanent
+        applications, pages, data, or identities.
       </span>
       <div
         className="flex flex-column flex-center"

diff --git a/src/components/pages/RNPPage/RNPPage.tsx b/src/components/pages/RNPPage/RNPPage.tsx
@@ -14,10 +14,10 @@ function RNPPage() {
       <div className="flex justify-between text-white w-full">
         <h2 className="text-[2rem]">Recently Returned</h2>
         <button
-          className="flex gap-2 items-center justify-center p-1"
+          className="flex gap-2 items-center justify-center p-1 text-sm"
           onClick={() => refetch()}
         >
-          <RefreshCwIcon /> Refresh
+          <RefreshCwIcon className="size-4 " /> Refresh
         </button>
       </div>
       <ReturnedNamesTable