Merge pull request #695 from ar-io/PE-7710-normalize-modal-styles

PE-7710: normalize modal styles
ar-io · Feb 19, 2025 · 25cde06 · 25cde06
2 parents dc57adf + ecc22c3
commit 25cde06
Show file tree

Hide file tree

Showing 38 changed files with 153 additions and 133 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,9 +9,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Featured Domains
+  - Updated for metalinks and arlink
+  - Replaced ar-io.dev with ar.io gateway
 - Landing page header and sub-title text updated
 - Header navigation links now icons
 - Footer links re-styled
+- Modal dialog styling normalized
 - Other minor visual improvements (icon sizing/coloring)
 
 ### Fixed

diff --git a/assets/images/featured-domains/alex.png b/assets/images/featured-domains/alex.png
diff --git a/assets/images/featured-domains/arlink.png b/assets/images/featured-domains/arlink.png
diff --git a/assets/images/featured-domains/cookbook.png b/assets/images/featured-domains/cookbook.png
diff --git a/assets/images/featured-domains/metalinks.png b/assets/images/featured-domains/metalinks.png
diff --git a/src/components/cards/AntChangelog.tsx b/src/components/cards/AntChangelog.tsx
@@ -89,6 +89,7 @@ function AntChangelog({ className }: { className?: string }) {
                     shouldLink={true}
                     wrapperStyle={{
                       width: 'fit-content',
+                      fontSize: '14px',
                     }}
                   />
                 </h2>
@@ -107,15 +108,15 @@ function AntChangelog({ className }: { className?: string }) {
               const id = match[2];
               const date = match[3];
               return (
-                <li className="ml-8 py-2 list-disc text-base text-grey">
+                <li className="ml-8 py-2 list-disc text-sm text-grey">
                   <div>Version: {version}</div>
                   <div>ID: {id}</div>
                   <div>Date: {date}</div>
                 </li>
               );
             }
             return (
-              <li className="ml-8 py-2 list-disc text-base text-grey">
+              <li className="ml-8 py-2 list-disc text-sm text-grey">
                 {children}
               </li>
             );

diff --git a/src/components/cards/NavMenuCard/NavMenuCard.tsx b/src/components/cards/NavMenuCard/NavMenuCard.tsx
@@ -318,7 +318,7 @@ function NavMenuCard() {
                       height={'16px'}
                     />{' '}
                     <Link
-                      to={'https://ar.io/test-ario'}
+                      to={'https://ar.io/token'}
                       target={'_blank'}
                       className={'flex-row navbar-link hover'}
                       style={{

diff --git a/src/components/data-display/tables/DomainsTable.tsx b/src/components/data-display/tables/DomainsTable.tsx
@@ -628,7 +628,7 @@ const DomainsTable = ({
                 <div className="flex flex-row center" style={{ gap: '16px' }}>
                   <Link
                     to="/"
-                    className="bg-primary rounded-md text-black center hover px-4 py-3"
+                    className="bg-primary rounded-md text-black center hover px-4 py-3 text-sm"
                   >
                     Search for a Name
                   </Link>

diff --git a/src/components/data-display/tables/ReturnedNamesTable.tsx b/src/components/data-display/tables/ReturnedNamesTable.tsx
@@ -430,7 +430,7 @@ const ReturnedNamesTable = ({
                 <div className="flex flex-row center" style={{ gap: '16px' }}>
                   <Link
                     to="/"
-                    className="bg-primary rounded-md text-black center hover px-4 py-3"
+                    className="bg-primary rounded-md text-black center hover px-4 py-3 text-sm"
                   >
                     Search for a Name
                   </Link>

diff --git a/src/components/data-display/tables/UndernamesTable.tsx b/src/components/data-display/tables/UndernamesTable.tsx
@@ -435,17 +435,13 @@ const UndernamesTable = ({
           ownershipStatus === undefined ? (
             <></>
           ) : (
-            <div className="w-full flex flex-row text-primary font-semibold rounded-b-md border-b-[1px] border-x-[1px] border-dark-grey">
+            <div className="w-full flex flex-row text-primary font-semibold rounded-b-md border-b-[1px] border-x-[1px] border-dark-grey text-sm">
               <button
                 className="flex flex-row w-full justify-start items-center p-3 rounded-b-md bg-background hover:bg-primary-gradient text-primary hover:text-primary fill-primary hover:fill-black transition-all"
                 style={{ gap: '10px' }}
                 onClick={() => setAction(UNDERNAME_TABLE_ACTIONS.CREATE)}
               >
-                <Plus
-                  width={'20px'}
-                  height={'20px'}
-                  className="text-primary fill-black"
-                />
+                <Plus className="size-4 text-primary fill-black" />
                 Add Undername
               </button>
             </div>

diff --git a/src/components/forms/DomainSettings/ControllersRow.tsx b/src/components/forms/DomainSettings/ControllersRow.tsx
@@ -46,6 +46,7 @@ export default function ControllersRow({
   const [showAddModal, setShowAddModal] = useState<boolean>(false);
   const [showRemoveModal, setShowRemoveModal] = useState<boolean>(false);
   const [showConfirmModal, setShowConfirmModal] = useState<boolean>(false);
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
 
   async function handleControllerInteraction({
     payload,
@@ -98,7 +99,8 @@ export default function ControllersRow({
         action={[
           <Tooltip
             key={1}
-            open={undefined}
+            open={showTooltip}
+            onOpenChange={setShowTooltip}
             placement="bottomRight"
             color="var(--card-bg)"
             autoAdjustOverflow
@@ -114,13 +116,19 @@ export default function ControllersRow({
               <div className="flex-column flex" style={{ gap: '10px' }}>
                 <button
                   className="flex flex-right white pointer button"
-                  onClick={() => setShowAddModal(true)}
+                  onClick={() => {
+                    setShowAddModal(true);
+                    setShowTooltip(false);
+                  }}
                 >
                   Add Controller
                 </button>
                 <button
                   className="flex flex-right white pointer button"
-                  onClick={() => setShowRemoveModal(true)}
+                  onClick={() => {
+                    setShowRemoveModal(true);
+                    setShowTooltip(false);
+                  }}
                 >
                   Remove Controller
                 </button>

diff --git a/src/components/forms/DomainSettings/DomainSettings.tsx b/src/components/forms/DomainSettings/DomainSettings.tsx
@@ -167,7 +167,10 @@ function DomainSettings({
               key={DomainSettingsRowTypes.LEASE_DURATION}
               editable={true}
               action={
-                <div className="flex flex-row gap-1" style={{ gap: '10px' }}>
+                <div
+                  className="flex flex-row flex-right gap-1"
+                  style={{ gap: '10px' }}
+                >
                   {data?.arnsRecord?.type == 'permabuy' && isOwner ? (
                     <Tooltip
                       message={
@@ -187,9 +190,9 @@ function DomainSettings({
                                 lowerCaseDomain(domain ?? ''))
                           }
                           onClick={() => setShowReturnNameModal(true)}
-                          className={`flex flex-row text-[12px] rounded-[4px] p-[6px] px-[10px] border border-error bg-error-thin text-error whitespace-nowrap`}
+                          className={`text-xs rounded-[4px] py-[.375rem] px-[.625rem]  border border-error bg-error-thin text-error whitespace-nowrap`}
                         >
-                          Return Name
+                          Return
                         </button>
                       }
                     />
@@ -330,7 +333,7 @@ function DomainSettings({
                       onClick={() => setShowReassignNameModal(true)}
                       className={`flex flex-row text-[12px] rounded-[4px] p-[6px] px-[10px] border border-error bg-error-thin text-error whitespace-nowrap`}
                     >
-                      Reassign Name
+                      Reassign
                     </button>
                   }
                 />

diff --git a/src/components/inputs/FundingSourceSelector/FundingSourceSelector.tsx b/src/components/inputs/FundingSourceSelector/FundingSourceSelector.tsx
@@ -135,11 +135,11 @@ export function FundingSourceSelector({
       position="item-aligned"
       className={{
         trigger:
-          'bg-foreground text-white flex gap-2 items-center p-3 rounded-lg border border-[#A7A7A759] outline-none justify-between h-fit w-[23rem] ',
+          'bg-foreground text-white flex gap-2 items-center p-3 rounded-lg border border-[#A7A7A759] outline-none justify-between h-fit w-fit text-sm',
         item: 'w-[24rem] flex items-center gap-3 cursor-pointer bg-foreground hover:bg-dark-grey px-3 py-3 text-grey fill-grey hover:fill-white  hover:text-white outline-none  transition-all',
         content:
           'flex bg-foreground z-[100] rounded overflow-hidden border py-2 w-[24rem] border-[#A7A7A759] absolute left-[-2.5rem]',
-        group: 'flex flex-col  bg-foreground',
+        group: 'flex flex-col  bg-foreground text-sm',
         viewport: 'flex pr-1 justify-start',
       }}
       options={[
@@ -164,7 +164,7 @@ export function FundingSourceSelector({
             'Loading...'
           ) : (
             <span>
-              Staked Balance (
+              Withdrawing/Staked Balance (
               {formatARIO(
                 new mARIOToken(getStakeUsed(stakeCostDetails))
                   .toARIO()
@@ -180,7 +180,9 @@ export function FundingSourceSelector({
             'Loading...'
           ) : (
             <div className="flex flex-wrap gap-2">
-              <span className="flex w-fit">Liquid + Staked Balances</span>
+              <span className="flex w-fit">
+                Liquid + Withdrawing/Staked Balances
+              </span>
               <span className="flex w-fit">
                 (
                 {formatARIO(

diff --git a/src/components/layout/FeaturedDomains/FeaturedDomains.tsx b/src/components/layout/FeaturedDomains/FeaturedDomains.tsx
@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { ARNSCard } from '../../cards';
 import './styles.css';
 
-const featuredGateways = ['permagate.io', 'g8way.io', 'ar-io.dev'];
+const featuredGateways = ['permagate.io', 'g8way.io', 'ar.io'];
 const defaultGateways = [
   ...featuredGateways,
   ...featuredGateways,

diff --git a/src/components/layout/Navbar/Navbar.tsx b/src/components/layout/Navbar/Navbar.tsx
@@ -1,3 +1,9 @@
+import {
+  ARIO_DEVNET_PROCESS_ID,
+  ARIO_TESTNET_PROCESS_ID,
+} from '@ar.io/sdk/web';
+import { useGlobalState } from '@src/state';
+import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
 import { useRegistrationState } from '../../../state/contexts/RegistrationState';
@@ -8,8 +14,18 @@ import NetworkStatusBanner from './NetworkStatusBanner/NetworkStatusBanner';
 import './styles.css';
 
 function NavBar() {
+  const [{ arioProcessId }] = useGlobalState();
   const [, dispatchRegisterState] = useRegistrationState();
 
+  const bannerText = useMemo(() => {
+    if (arioProcessId == ARIO_DEVNET_PROCESS_ID) {
+      return `Devnet`;
+    } else if (arioProcessId == ARIO_TESTNET_PROCESS_ID) {
+      return `Testnet`;
+    }
+    return undefined;
+  }, [arioProcessId]);
+
   return (
     <div
       className="flex flex-column"
@@ -28,17 +44,19 @@ function NavBar() {
             <div style={{ position: 'relative' }}>
               <BrandLogo width={'36px'} height={'36px'} fill={'white'} />
 
-              {/* TODO: Conditionally show testnet depending on environment when mainnet becomes available */}
-              <div
-                className="testnet"
-                style={{
-                  position: 'absolute',
-                  top: '-6px',
-                  left: '24px',
-                }}
-              >
-                Testnet
-              </div>
+              {/* TODO: Conditionally show tesnet/devnet depending on process id */}
+              {bannerText && (
+                <div
+                  className="testnet"
+                  style={{
+                    position: 'absolute',
+                    top: '-6px',
+                    left: '24px',
+                  }}
+                >
+                  {bannerText}
+                </div>
+              )}
             </div>
           </Link>
         </div>

diff --git a/src/components/layout/Navbar/NotificationMenu/NotificationMenu.tsx b/src/components/layout/Navbar/NotificationMenu/NotificationMenu.tsx
@@ -156,7 +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 size-4" key={index}>
+              <div className="flex flex-row size-fit" key={index}>
                 <span
                   className="flex flex-row justify-center items-start"
                   style={{ gap: '20px' }}
@@ -193,17 +193,17 @@ function NotificationMenu() {
               </div>
             ))
           ) : (
-            <span className="text-lg text-grey p-2">No Notifications</span>
+            <span className="text-sm text-grey p-2">No Notifications</span>
           )}
         </div>
       }
       icon={
         <BellIcon
-          className={
+          className={`${
             notifications.length
-              ? `text-primary fill-primary animate-pulse size-4 m-2`
-              : `text-white fill-white size-4 m-2`
-          }
+              ? 'text-primary fill-primary animate-pulse'
+              : 'text-white fill-white'
+          } size-4 m-2 cursor-pointer`}
         />
       }
     />

diff --git a/src/components/modals/ConfirmTransactionModal/ConfirmTransactionModal.tsx b/src/components/modals/ConfirmTransactionModal/ConfirmTransactionModal.tsx
@@ -25,14 +25,11 @@ function ConfirmTransactionModal({
         title={<h2 className="white text-xl">{interactionType}</h2>}
         body={
           <div
-            className="flex flex-column white"
+            className="flex flex-column white text-sm"
             style={{
               gap: '20px',
-              fontSize: '13px',
               padding: '15px 0px',
               paddingTop: '0px',
-              lineHeight: '1.5',
-              fontWeight: 160,
             }}
           >
             {content}

diff --git a/src/components/modals/ConnectWalletModal/ConnectWalletModal.tsx b/src/components/modals/ConnectWalletModal/ConnectWalletModal.tsx
@@ -132,21 +132,19 @@ function ConnectWalletModal(): JSX.Element {
       onClick={handleClickOutside}
     >
       <div className="connect-wallet-modal">
-        <p
-          className="section-header"
-          style={{ marginBottom: '1em', fontFamily: 'Rubik-Bold' }}
-        >
+        <p className="section-header mb-4 font-bold">
           Connect with an Arweave wallet
         </p>
         <button
-          className="modal-close-button"
+          // className="modal-close-button"
+          className="absolute top-5 right-[1.875rem]"
           onClick={() => closeModal({ next: false })}
         >
-          <CloseIcon width="30px" height={'30px'} fill="var(--text-white)" />
+          <CloseIcon className="fill-white size-6" />
         </button>
         <button
           disabled={connecting}
-          className="wallet-connect-button h2"
+          className="wallet-connect-button text-base"
           onClick={() => {
             connect(new WanderWalletConnector());
           }}
@@ -156,7 +154,7 @@ function ConnectWalletModal(): JSX.Element {
         </button>
 
         <button
-          className="wallet-connect-button h2"
+          className="wallet-connect-button text-base"
           onClick={() => {
             connect(new ArweaveAppWalletConnector());
           }}
@@ -169,15 +167,10 @@ function ConnectWalletModal(): JSX.Element {
           Arweave.app
         </button>
 
-        <p
-          className="section-header"
-          style={{ marginBottom: '1em', fontFamily: 'Rubik-Bold' }}
-        >
-          Connect with an Ethereum wallet
-        </p>
+        <p className="section-header mb-4">Connect with an Ethereum wallet</p>
         <button
           type="button"
-          className="wallet-connect-button h2"
+          className="wallet-connect-button text-base"
           onClick={async () => {
             if (!config) {
               throw new Error(
@@ -198,7 +191,7 @@ function ConnectWalletModal(): JSX.Element {
         </button>
 
         <span
-          className="flex flex-row white flex-center"
+          className="flex flex-row white flex-center text-sm"
           style={{ whiteSpace: 'nowrap', gap: '5px', paddingTop: '16px' }}
         >
           Don&apos;t have a wallet?&nbsp;
@@ -210,7 +203,6 @@ function ConnectWalletModal(): JSX.Element {
               textDecoration: 'underline',
             }}
             rel="noreferrer"
-            className="bold"
           >
             Get one here.
           </a>

diff --git a/src/components/modals/ConnectWalletModal/styles.css b/src/components/modals/ConnectWalletModal/styles.css
@@ -49,7 +49,7 @@
   color: var(--text-white);
   font-family: 'Rubik';
   font-weight: 500;
-  font-size: 18px;
+  font-size: 1rem;
   justify-content: flex-start;
   align-items: center;
   padding: 0em 1em;

diff --git a/src/components/modals/MarkdownModal.tsx b/src/components/modals/MarkdownModal.tsx
@@ -19,7 +19,7 @@ function MarkdownModal({ title, markdownText, onClose }: MarkdownModalProps) {
     >
       {/**modal header */}
       <DialogModal
-        title={<h2 className="white text-xl">{title}</h2>}
+        title={<div className="white text-xl">{title}</div>}
         body={
           <div
             className="flex flex-col scrollbar h-full min-h-[7.5rem] max-h-96 overflow-y-scroll overflow-x-hidden scrollbar-thumb-primary-thin scrollbar-thumb-rounded-full scrollbar-w-2"