feat: normalize styling on modals

ar-io · Feb 19, 2025 · b5b5311 · b5b5311
1 parent 856274e
commit b5b5311
Show file tree

Hide file tree

Showing 17 changed files with 52 additions and 83 deletions.
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/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/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"

diff --git a/src/components/modals/ant-management/AddControllerModal/AddControllerModal.tsx b/src/components/modals/ant-management/AddControllerModal/AddControllerModal.tsx
@@ -48,11 +48,11 @@ function AddControllerModal({
             className="flex flex-column"
             style={{ fontSize: '14px', maxWidth: '575px', minWidth: '475px' }}
           >
-            <div className="flex flex-column" style={{ gap: '10px' }}>
+            <div className="flex flex-col gap-2">
               <span className="grey">Process ID:</span>
               <span className="white">{antId.toString()}</span>
             </div>
-            <div className="flex flex-column" style={{ gap: '10px' }}>
+            <div className="flex flex-col gap-2">
               <span className="grey">Nickname:</span>
               <span className="white">{formatForMaxCharCount(name, 40)}</span>
             </div>

diff --git a/src/components/modals/ant-management/AddUndernameModal/AddUndernameModal.tsx b/src/components/modals/ant-management/AddUndernameModal/AddUndernameModal.tsx
@@ -118,7 +118,7 @@ function AddUndernameModal({
                 className="flex flex-column"
                 style={{ paddingBottom: '30px' }}
               >
-                <div className="flex flex-column" style={{ gap: '15px' }}>
+                <div className="flex flex-col gap-2">
                   <span className="grey">Undername:</span>
                   <span
                     className="flex flex-row"
@@ -225,7 +225,7 @@ function AddUndernameModal({
                   )}
                 </div>
 
-                <div className="flex flex-column" style={{ gap: '15px' }}>
+                <div className="flex flex-col gap-2">
                   <span className="grey">Target ID:</span>
                   <ValidationInput
                     key={'targetId'}
@@ -263,7 +263,7 @@ function AddUndernameModal({
                   />
                 </div>
 
-                <div className="flex flex-column" style={{ gap: '15px' }}>
+                <div className="flex flex-col gap-2">
                   <span className="grey">TTL:</span>
                   <ValidationInput
                     key={'ttlSeconds'}

diff --git a/src/components/modals/ant-management/EditUndernameModal/EditUndernameModal.tsx b/src/components/modals/ant-management/EditUndernameModal/EditUndernameModal.tsx
@@ -98,7 +98,7 @@ function EditUndernameModal({
             style={{ fontSize: '14px', maxWidth: '575px', minWidth: '475px' }}
           >
             <div className="flex flex-column" style={{ paddingBottom: '30px' }}>
-              <div className="flex flex-column" style={{ gap: '15px' }}>
+              <div className="flex flex-col gap-2">
                 <span className="grey">Target ID:</span>
                 <ValidationInput
                   key={'targetId'}
@@ -132,7 +132,7 @@ function EditUndernameModal({
                 />
               </div>
 
-              <div className="flex flex-column" style={{ gap: '15px' }}>
+              <div className="flex flex-col gap-2">
                 <span className="grey">TTL:</span>
                 <ValidationInput
                   key={'ttlSeconds'}

diff --git a/src/components/modals/ant-management/ReassignNameModal/ReassignNameModal.tsx b/src/components/modals/ant-management/ReassignNameModal/ReassignNameModal.tsx
@@ -168,18 +168,18 @@ export function ReassignNameModal({
   if (!workflow) {
     return (
       <div className="modal-container">
-        <div className="flex flex-col rounded-md border border-dark-grey bg-foreground p-6 w-[32rem] gap-8 text-white">
+        <div className="flex flex-col rounded-md border border-dark-grey bg-[#1B1B1D] p-6 w-[32rem] gap-8 text-white">
           <div className="flex flex-row justify-between items-center">
-            <h2 className="text-[24px]">Name Reassignment</h2>
+            <h2 className="text-xl">Name Reassignment</h2>
             <button onClick={() => handleClose()}>
-              <XIcon className="text-white" width={'24px'} height={'24px'} />
+              <XIcon className="text-white size-5" />
             </button>
           </div>
-          <span className="">
+          <span className="text-sm">
             You are about to reassign your name registration from one ANT
             (Arweave Name Token) to another.
           </span>
-          <div className="flex flex-row w-full items-center justify-center">
+          <div className="flex flex-row w-full items-center justify-center text-sm">
             <button
               className="bg-primary-thin p-3 rounded"
               onClick={() => setWorkflow(REASSIGN_NAME_WORKFLOWS.NEW_EXISTING)}

diff --git a/src/components/modals/ant-management/RemoveControllerModal/RemoveControllerModal.tsx b/src/components/modals/ant-management/RemoveControllerModal/RemoveControllerModal.tsx
@@ -71,31 +71,24 @@ function RemoveControllersModal({
             className="flex flex-column"
             style={{ fontSize: '14px', maxWidth: '575px', minWidth: '475px' }}
           >
-            <div className="flex flex-column" style={{ gap: '10px' }}>
+            <div className="flex flex-col gap-2">
               <span className="grey">Process ID</span>
               <span className="white">{antId.toString()}</span>
             </div>
             <div className="flex flex-row">
-              <div
-                className="flex flex-column"
-                style={{ gap: '10px', width: 'fit-content' }}
-              >
+              <div className="flex flex-col gap-2">
                 <span className="grey">Nickname</span>
                 <span className="white">{formatForMaxCharCount(name, 20)}</span>
               </div>
-              <div
-                className="flex flex-column"
-                style={{ gap: '10px', width: 'fit-content' }}
-              >
+              <div className="flex flex-col gap-2">
                 <span className="grey" style={{ whiteSpace: 'nowrap' }}>
                   Total Controllers
                 </span>
                 <span className="white">{rows.length ?? 'N/A'}</span>
               </div>
               <div
-                className="flex flex-column"
+                className="flex flex-col gap-2"
                 style={{
-                  gap: '10px',
                   height: '100%',
                   justifyContent: 'flex-start',
                   width: 'fit-content',

diff --git a/src/components/modals/ant-management/ReturnNameModal/ReturnNameModal.tsx b/src/components/modals/ant-management/ReturnNameModal/ReturnNameModal.tsx
@@ -102,9 +102,9 @@ export function ReturnNameModal({
   return (
     <div className="modal-container">
       <DialogModal
-        title={<h1 className="text-2xl text-white">Permanent Name Return</h1>}
+        title={<h1 className="text-xl text-white">Permanent Name Return</h1>}
         body={
-          <div className="flex flex-col text-white max-w-[32rem] max-h-[40rem] gap-8">
+          <div className="flex flex-col text-white max-w-[32rem] max-h-[40rem] gap-8 text-sm">
             <span>
               You are about to return your permanently registered name back to
               the protocol. Once completed:
@@ -139,7 +139,7 @@ export function ReturnNameModal({
               {' '}
               <span>Do you wish to continue with the name return?</span>
               <span
-                className="flex flex-row text-grey items-center text-base py-4"
+                className="flex flex-row text-grey items-center text-sm py-4"
                 style={{ gap: '10px' }}
               >
                 <Checkbox

diff --git a/src/components/modals/ant-management/TransferANTModal/TransferANTModal.tsx b/src/components/modals/ant-management/TransferANTModal/TransferANTModal.tsx
@@ -144,7 +144,7 @@ function TransferANTModal({
                 )}
 
                 <span
-                  className={`flex flex-row text ${
+                  className={`flex flex-row text-sm ${
                     accepted ? 'white' : 'grey'
                   }`}
                   style={{

diff --git a/src/components/modals/ant-management/UpgradeAntModal/UpgradeAntModal.tsx b/src/components/modals/ant-management/UpgradeAntModal/UpgradeAntModal.tsx
@@ -119,10 +119,10 @@ function UpgradeAntModal({
 
   return (
     <div className="modal-container items-center justify-center">
-      <div className="flex h-fit max-h-[40rem] w-[35rem]  justify-between flex-col rounded-lg bg-foreground shadow-one">
-        <div className="flex flex-row justify-between border-b-[1px] border-dark-grey p-4">
+      <div className="flex h-fit max-h-[40rem] w-[35rem]  justify-between flex-col rounded-lg bg-[#1B1B1D] shadow-one">
+        <div className="flex flex-row justify-between border-b-[1px] border-dark-grey px-8 py-4">
           <h1
-            className="flex flex-row text-2xl text-white"
+            className="flex flex-row text-xl text-white"
             style={{ gap: '10px' }}
           >
             Upgrade ANT
@@ -137,13 +137,13 @@ function UpgradeAntModal({
         </div>
         {!upgrading ? (
           <>
-            <div className="flex box-border h-full overflow-hidden w-full flex-col p-4 text-sm text-white">
+            <div className="flex box-border h-full overflow-hidden w-full flex-col px-8 py-4 text-sm text-white">
               <div className="flex scrollbar h-full min-h-[7.5rem] border-b-[1px] border-dark-grey pb-4 mb-4 overflow-y-scroll scrollbar-thumb-primary-thin scrollbar-thumb-rounded-full scrollbar-w-2">
                 <AntChangelog />
               </div>
 
               <span
-                className="flex flex-row items-center text-base py-4"
+                className="flex flex-row items-center text-sm"
                 style={{ gap: '10px' }}
               >
                 <Checkbox
@@ -198,7 +198,7 @@ function UpgradeAntModal({
                       ? 'bg-primary-thin text-primary'
                       : 'bg-link text-white hover:bg-primary hover:text-black'
                   } `
-            } w-full rounded-b-lg p-4 text-base transition-all`}
+            } w-full rounded-b-lg p-4 text-sm transition-all`}
             onClick={() => upgradeAnts()}
           >
             {!accepted

diff --git a/src/components/modals/ant-management/UpgradeAntsModal/UpgradeAntsModal.tsx b/src/components/modals/ant-management/UpgradeAntsModal/UpgradeAntsModal.tsx
@@ -142,10 +142,10 @@ function UpgradeAntsModal({
 
   return (
     <div className="modal-container items-center justify-center">
-      <div className="flex h-fit max-h-[40rem] w-[35rem] justify-between flex-col rounded-lg bg-foreground shadow-one">
-        <div className="flex flex-row justify-between border-b-[1px] border-dark-grey p-4">
+      <div className="flex h-fit max-h-[40rem] w-[35rem] justify-between flex-col rounded-lg bg-[#1B1B1D] shadow-one">
+        <div className="flex flex-row justify-between border-b-[1px] border-dark-grey px-8 py-4">
           <h1
-            className="flex flex-row text-2xl text-white"
+            className="flex flex-row text-xl text-white"
             style={{ gap: '10px' }}
           >
             {progress < 0 ? (
@@ -164,13 +164,13 @@ function UpgradeAntsModal({
         </div>
         {progress < 0 ? (
           <>
-            <div className="flex box-border h-full overflow-hidden w-full flex-col p-4 text-sm text-white">
+            <div className="flex box-border h-full overflow-hidden w-full flex-col px-8 py-4 text-sm text-white">
               <div className="flex scrollbar h-full min-h-[120px] border-b-[1px] border-dark-grey pb-4 mb-4 overflow-y-scroll scrollbar-thumb-primary-thin scrollbar-thumb-rounded-full scrollbar-w-2">
                 <AntChangelog />
               </div>
 
               <span
-                className="flex flex-row items-center text-base py-4"
+                className="flex flex-row items-center text-base py-4 text-sm"
                 style={{ gap: '10px' }}
               >
                 <Checkbox
@@ -225,7 +225,7 @@ function UpgradeAntsModal({
                       ? 'bg-primary-thin text-primary'
                       : 'bg-link text-white hover:bg-primary hover:text-black'
                   } `
-            } w-full rounded-b-lg p-4 transition-all`}
+            } w-full rounded-b-lg p-4 transition-all text-sm`}
             onClick={() => upgradeAnts()}
           >
             {!accepted && progress < 0

diff --git a/src/index.css b/src/index.css
@@ -474,8 +474,6 @@ a:active {
   display: flex;
   padding: 15px;
   font-size: 16px;
-  font-family: 'Rubik-Bold';
-  font-weight: 800;
   width: fit-content;
   height: fit-content;
   border-radius: var(--corner-radius);