From 7b9c44822ab2e3cc4d335b2bef2e5478e356aca3 Mon Sep 17 00:00:00 2001 From: Steven Yi Date: Mon, 17 Feb 2025 19:26:26 -0500 Subject: [PATCH 01/10] feat: make icon and text links in footer hover white --- src/components/layout/Footer/Footer.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/layout/Footer/Footer.tsx b/src/components/layout/Footer/Footer.tsx index 382a91d1..64535a48 100644 --- a/src/components/layout/Footer/Footer.tsx +++ b/src/components/layout/Footer/Footer.tsx @@ -30,7 +30,7 @@ function Footer() {
window.open(ARIO_DISCORD_LINK, '_blank')} > - +
From 2a0c4c6aedbd770198a2224a1a893ea561e5e0bb Mon Sep 17 00:00:00 2001 From: Steven Yi Date: Tue, 18 Feb 2025 13:26:04 -0500 Subject: [PATCH 02/10] feat: update site header and subtitle text --- src/components/pages/Home/Home.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/pages/Home/Home.tsx b/src/components/pages/Home/Home.tsx index 160f5d34..459044dd 100644 --- 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 - 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.
Date: Tue, 18 Feb 2025 14:30:34 -0500 Subject: [PATCH 03/10] feat: make header nav links Icon-only and fix profile panel on mobile --- .../cards/NavMenuCard/NavMenuCard.tsx | 20 +++++---- .../layout/Navbar/NavGroup/NavGroup.tsx | 45 ++++++++++--------- .../NotificationMenu/NotificationMenu.tsx | 14 ++---- src/utils/routes.tsx | 40 ++++++----------- 4 files changed, 53 insertions(+), 66 deletions(-) diff --git a/src/components/cards/NavMenuCard/NavMenuCard.tsx b/src/components/cards/NavMenuCard/NavMenuCard.tsx index e3733fcc..2464e55c 100644 --- a/src/components/cards/NavMenuCard/NavMenuCard.tsx +++ b/src/components/cards/NavMenuCard/NavMenuCard.tsx @@ -260,23 +260,25 @@ function NavMenuCard() { > {isMobile ? ( <> - {Object.entries(ROUTES).map(([key, route]) => { if (!route.index && (!route.protected || walletAddress)) return ( { setShowMenu(false); }} - /> + > + <> + {route.icon && ( + + )} + {route.text} + + ); })} @@ -314,7 +316,7 @@ function NavMenuCard() { height={'16px'} />{' '} - What are test tokens? + What are ARIO tokens? {' '} diff --git a/src/components/layout/Navbar/NavGroup/NavGroup.tsx b/src/components/layout/Navbar/NavGroup/NavGroup.tsx index 2de3d8a1..47d4ee4d 100644 --- 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 ( - + title={value.text} + placement={'bottom'} + autoAdjustOverflow={true} + color="var(--text-faded)" + className="grey p-2" + openClassName="white rounded bg-white/20" + > + + {value.icon && } + + ); }); setLinks(newLinks); }, [ants, location.pathname]); return ( -
+
{!isMobile ? ( <> {' '} diff --git a/src/components/layout/Navbar/NotificationMenu/NotificationMenu.tsx b/src/components/layout/Navbar/NotificationMenu/NotificationMenu.tsx index 7761e322..5bfb4a22 100644 --- a/src/components/layout/Navbar/NotificationMenu/NotificationMenu.tsx +++ b/src/components/layout/Navbar/NotificationMenu/NotificationMenu.tsx @@ -156,11 +156,7 @@ function NotificationMenu() {
{notifications.length ? ( notifications.map((notification, index) => ( -
+
- +
)) @@ -203,12 +199,10 @@ function NotificationMenu() { } icon={ } diff --git a/src/utils/routes.tsx b/src/utils/routes.tsx index 3b6b4027..66cace53 100644 --- a/src/utils/routes.tsx +++ b/src/utils/routes.tsx @@ -1,19 +1,15 @@ import RNPPage from '@src/components/pages/RNPPage/RNPPage'; -import Settings from '@src/components/pages/Settings/SettingsLayout'; -import { Recycle, Settings2Icon } from 'lucide-react'; +import { Bolt, Gavel } from 'lucide-react'; -import { SettingsIcon } from '../components/icons'; import { Home, Manage } from '../components/pages'; // We have to wrap the icons like this due to lucide break on mobile when stored as a const like this -const WrappedSettings2Icon: React.FC> = ( - props, -) => { - return ; +const WrappedGavelIcon: React.FC> = (props) => { + return ; }; -const WrappedRecycleIcon: React.FC> = (props) => { - return ; +const WrappedBoltIcon: React.FC> = (props) => { + return ; }; export type Route = { @@ -34,28 +30,20 @@ export const ROUTES: { [x: string]: Route } = { protected: false, index: true, }, - manage: { - text: 'Manage Assets', - icon: SettingsIcon, - path: '/manage', - component: Manage, - protected: false, - index: false, - }, - settings: { - text: 'Settings', - icon: WrappedSettings2Icon, - path: '/settings', - component: Settings, - protected: false, - index: false, - }, returnedNames: { text: 'Returned Names', - icon: WrappedRecycleIcon, + icon: WrappedGavelIcon, path: '/returned-names', component: RNPPage, protected: false, index: false, }, + manage: { + text: 'Manage Assets', + icon: WrappedBoltIcon, + path: '/manage', + component: Manage, + protected: false, + index: false, + }, }; From 174ca7e0ed1f3738c63edf93736dc6ec138aef3b Mon Sep 17 00:00:00 2001 From: Steven Yi Date: Tue, 18 Feb 2025 14:37:57 -0500 Subject: [PATCH 04/10] fix: padding between icon and text to match other menu entries --- src/components/cards/NavMenuCard/NavMenuCard.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/cards/NavMenuCard/NavMenuCard.tsx b/src/components/cards/NavMenuCard/NavMenuCard.tsx index 2464e55c..28f0375c 100644 --- a/src/components/cards/NavMenuCard/NavMenuCard.tsx +++ b/src/components/cards/NavMenuCard/NavMenuCard.tsx @@ -276,7 +276,9 @@ function NavMenuCard() { {route.icon && ( )} - {route.text} + + {route.text} + ); From a302983dd9edeed3d8a963d7eb8c2bd643c86dc2 Mon Sep 17 00:00:00 2001 From: Steven Yi Date: Tue, 18 Feb 2025 15:02:35 -0500 Subject: [PATCH 05/10] feat: adjust footer icon sizes and gap --- src/components/layout/Footer/Footer.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/layout/Footer/Footer.tsx b/src/components/layout/Footer/Footer.tsx index 64535a48..26de47a3 100644 --- a/src/components/layout/Footer/Footer.tsx +++ b/src/components/layout/Footer/Footer.tsx @@ -47,8 +47,8 @@ function Footer() { >
window.open('https://github.com/ar-io/', '_blank')} > - + window.open(ARIO_DISCORD_LINK, '_blank')} > - + window.open('https://docs.ar.io/arns', '_blank')} > - +
From 6e50f65f8d7af5e4703d0107c5c8eb5b9f05a116 Mon Sep 17 00:00:00 2001 From: Steven Yi Date: Tue, 18 Feb 2025 15:11:37 -0500 Subject: [PATCH 06/10] chore: adjust gap --- src/components/layout/Footer/Footer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/Footer/Footer.tsx b/src/components/layout/Footer/Footer.tsx index 26de47a3..46b191d0 100644 --- a/src/components/layout/Footer/Footer.tsx +++ b/src/components/layout/Footer/Footer.tsx @@ -47,7 +47,7 @@ function Footer() { >
Date: Tue, 18 Feb 2025 15:44:19 -0500 Subject: [PATCH 07/10] fix: sort by ioCompatible for link from arns upgrade notification --- .../layout/Navbar/NotificationMenu/NotificationMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/Navbar/NotificationMenu/NotificationMenu.tsx b/src/components/layout/Navbar/NotificationMenu/NotificationMenu.tsx index 5bfb4a22..a1f64afe 100644 --- 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(), }; } From d75b45f9a8a80579a03d2fbbd10c11cbbd311a89 Mon Sep 17 00:00:00 2001 From: Steven Yi Date: Tue, 18 Feb 2025 15:44:53 -0500 Subject: [PATCH 08/10] fix: icon alignment center and color --- src/components/data-display/tables/DomainsTable.tsx | 8 ++------ src/components/data-display/tables/ReturnedNamesTable.tsx | 8 ++------ 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/src/components/data-display/tables/DomainsTable.tsx b/src/components/data-display/tables/DomainsTable.tsx index 4d77a761..68a90d8f 100644 --- a/src/components/data-display/tables/DomainsTable.tsx +++ b/src/components/data-display/tables/DomainsTable.tsx @@ -306,18 +306,14 @@ const DomainsTable = ({ } icon={ {formatForMaxCharCount(decodeDomainToASCII(rowValue), 20)}{' '} - + } /> diff --git a/src/components/data-display/tables/ReturnedNamesTable.tsx b/src/components/data-display/tables/ReturnedNamesTable.tsx index 62217b0d..67fb026e 100644 --- a/src/components/data-display/tables/ReturnedNamesTable.tsx +++ b/src/components/data-display/tables/ReturnedNamesTable.tsx @@ -277,18 +277,14 @@ const ReturnedNamesTable = ({ } icon={ {formatForMaxCharCount(decodeDomainToASCII(rowValue), 20)}{' '} - + } /> From 0509d241cbbd3865e63c979fc21036a9e3bdcf7a Mon Sep 17 00:00:00 2001 From: Steven Yi Date: Tue, 18 Feb 2025 15:45:11 -0500 Subject: [PATCH 09/10] feat: adjust icon and text size for refresh --- src/components/pages/RNPPage/RNPPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/pages/RNPPage/RNPPage.tsx b/src/components/pages/RNPPage/RNPPage.tsx index 0fddc6ec..4dc941b8 100644 --- a/src/components/pages/RNPPage/RNPPage.tsx +++ b/src/components/pages/RNPPage/RNPPage.tsx @@ -14,10 +14,10 @@ function RNPPage() {

Recently Returned

Date: Tue, 18 Feb 2025 16:18:03 -0500 Subject: [PATCH 10/10] chore: update changelog --- CHANGELOG.md | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 80dbbe38..b41a2ed3 100644 --- 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.