feat: redesign (#377)

* feat: update colors * feat: update colors * feat: add clash grotesk font and set it as primary font * feat: update font weights * feat: update font weights ui package * feat: animated bg * feat: animated bg in ui package * feat: mobile and light mode improvements * feat: mobile and light mode improvements ui package * fix: video bg on mobile * fix: chain selector position on mobile * fix: remove unused page and use tabs in deployments table * fix: tabs position to match other pages * fix: get deployments query * fix: show theme selector in sidebar * fix: text colors token page --------- Co-authored-by: Santiago Giaccobasso <[email protected]> Co-authored-by: Santiago Giaccobasso <[email protected]> Co-authored-by: Santiago Giaccobasso <[email protected]>
axelarnetwork · Jun 25, 2024 · d901dbd · d901dbd
1 parent 9112594
commit d901dbd
Show file tree

Hide file tree

Showing 44 changed files with 325 additions and 342 deletions.
diff --git a/apps/maestro/public/bg-animation.mp4 b/apps/maestro/public/bg-animation.mp4
diff --git a/apps/maestro/public/fonts/ClashGrotesk-Bold.woff b/apps/maestro/public/fonts/ClashGrotesk-Bold.woff
diff --git a/apps/maestro/public/fonts/ClashGrotesk-Extralight.woff b/apps/maestro/public/fonts/ClashGrotesk-Extralight.woff
diff --git a/apps/maestro/public/fonts/ClashGrotesk-Light.woff b/apps/maestro/public/fonts/ClashGrotesk-Light.woff
diff --git a/apps/maestro/public/fonts/ClashGrotesk-Medium.woff b/apps/maestro/public/fonts/ClashGrotesk-Medium.woff
diff --git a/apps/maestro/public/fonts/ClashGrotesk-Regular.woff b/apps/maestro/public/fonts/ClashGrotesk-Regular.woff
diff --git a/apps/maestro/public/fonts/ClashGrotesk-Semibold.woff b/apps/maestro/public/fonts/ClashGrotesk-Semibold.woff
diff --git a/apps/maestro/public/fonts/ClashGrotesk-Variable.woff b/apps/maestro/public/fonts/ClashGrotesk-Variable.woff
diff --git a/apps/maestro/public/gridbg.png b/apps/maestro/public/gridbg.png
diff --git a/...tro/src/features/CanonicalTokenDeployment/steps/deploy-and-register/DeployAndRegister.tsx b/...tro/src/features/CanonicalTokenDeployment/steps/deploy-and-register/DeployAndRegister.tsx
@@ -261,7 +261,7 @@ export const Step3: FC = () => {
             }
             onClick={() => formSubmitRef.current?.click()}
           >
-            <span>{buttonChildren}</span>
+            <p className="text-indigo-600">{buttonChildren}</p>
           </NextButton>
         )}
       </Dialog.Actions>

diff --git a/apps/maestro/src/features/CanonicalTokenDeployment/steps/token-details/TokenDetails.tsx b/apps/maestro/src/features/CanonicalTokenDeployment/steps/token-details/TokenDetails.tsx
@@ -47,7 +47,9 @@ const TokenDetails: FC = () => {
         <Dialog.CloseAction onClick={actions.reset}>
           Cancel & exit
         </Dialog.CloseAction>
-        <NextButton onClick={actions.nextStep}>Deploy & Register</NextButton>
+        <NextButton onClick={actions.nextStep}>
+          <p className="text-indigo-600">Deploy & Register</p>
+        </NextButton>
       </Dialog.Actions>
     </>
   );

diff --git a/...ro/src/features/InterchainTokenDeployment/steps/deploy-and-register/DeployAndRegister.tsx b/...ro/src/features/InterchainTokenDeployment/steps/deploy-and-register/DeployAndRegister.tsx
@@ -263,7 +263,7 @@ export const Step2: FC = () => {
               formSubmitRef.current?.click();
             }}
           >
-            {buttonChildren}
+            <p className="text-indigo-600">{buttonChildren}</p>
           </NextButton>
         )}
       </Dialog.Actions>

diff --git a/apps/maestro/src/features/InterchainTokenDeployment/steps/token-details/TokenDetails.tsx b/apps/maestro/src/features/InterchainTokenDeployment/steps/token-details/TokenDetails.tsx
@@ -243,7 +243,7 @@ const TokenDetails: FC = () => {
           disabled={!isFormValid}
           onClick={() => formSubmitRef.current?.click()}
         >
-          Register & Deploy
+          <p className="text-indigo-600">Register & Deploy</p>
         </NextButton>
       </Dialog.Actions>
     </>

diff --git a/apps/maestro/src/features/InterchainTokenList/InterchainTokenList.tsx b/apps/maestro/src/features/InterchainTokenList/InterchainTokenList.tsx
@@ -67,7 +67,7 @@ export const InterchainTokenList: FC<InterchainTokenListProps> = ({
     <section className="grid gap-4">
       <header className="flex items-center justify-between gap-2 text-2xl">
         <div className="flex items-center gap-2">
-          <span className="font-bold">{props.title}</span>
+          <span className="font-semibold">{props.title}</span>
           <span className="font-mono text-xl opacity-50">
             ({tokens.length})
           </span>

diff --git a/apps/maestro/src/features/RecentTransactions/RecentTransactions.tsx b/apps/maestro/src/features/RecentTransactions/RecentTransactions.tsx
@@ -33,7 +33,7 @@ const RecentTransactionsTabs: FC<Props> = ({ maxTransactions = 10 }) => {
   const { address } = useAccount();
 
   return (
-    <Card className="bg-base-200 w-full rounded-3xl" $compact>
+    <Card className="bg-base-100 w-full rounded-3xl" $compact>
       <Card.Body>
         <Card.Title className="grid place-items-center space-y-2 text-center md:hidden">
           <Tabs $boxed className="md:hidden">

diff --git a/apps/maestro/src/features/RecentTransactions/RecentTransactionsList.tsx b/apps/maestro/src/features/RecentTransactions/RecentTransactionsList.tsx
@@ -65,8 +65,8 @@ export const RecentTransactionsList: FC<Props> = ({
   });
 
   return (
-    <Card className="bg-base-100 overflow-hidden rounded-xl">
-      <Card.Body className="to-base-200/90 dark:to-base-300/90 bg-base-100 bg-gradient-to-b from-transparent">
+    <Card className="bg-base-300 overflow-hidden rounded-xl">
+      <Card.Body>
         {title && (
           <Card.Title className="grid place-items-center">
             <Link
@@ -109,7 +109,7 @@ export const RecentTransactionsList: FC<Props> = ({
                 />
               ))
             )}
-            <li className="to-base-200/90 dark:to-base-300/90 sticky bottom-0 h-16 w-full bg-gradient-to-b from-transparent md:h-20" />
+            <li className="sticky bottom-0 h-16 w-full md:h-20" />
           </ul>
         </div>
       </Card.Body>
@@ -124,29 +124,29 @@ const TransactionItem: FC<{
   const humanizedElapsedTime = useHumanizedElapsedTime(tx.timestamp);
 
   return (
-    <li className="flex items-center gap-2 pl-2">
+    <li className="flex items-center gap-2 pl-2 font-mono text-gray-500">
       {(tx.event?.event === "InterchainTransfer" ||
         tx.event?.event === "InterchainTokenDeploymentStarted") && (
         <TokenIcon tokenId={tx.event.tokenId} />
       )}
-      <div>
+      <div className="pl-2">
         <div>
           <Tooltip tip="View on AxelarScan" $position="bottom">
             <Link
-              className="group inline-flex items-center text-sm font-semibold hover:underline"
+              className="group inline-flex items-center text-sm hover:underline"
               href={`${NEXT_PUBLIC_EXPLORER_URL}/gmp/${tx.hash}`}
               target="_blank"
               rel="noopener noreferrer"
             >
               {maskAddress(tx.hash, {
-                segmentA: 12,
+                segmentA: 8,
                 segmentB: 52,
               })}{" "}
               <ExternalLinkIcon className="text-accent h-3 opacity-0 transition-opacity group-hover:opacity-100" />
             </Link>
           </Tooltip>
         </div>
-        <div className="p-1 pb-2 text-sm">
+        <div className="text-sm">
           {tx.event && (
             <Link
               className="hover:text-primary hover:cursor-pointer"
@@ -155,7 +155,7 @@ const TransactionItem: FC<{
               {tx.event.event === "InterchainTransfer"
                 ? tx.event.name
                 : tx.event.tokenName}{" "}
-              <span className="text-neutral opacity-50 dark:text-white">
+              <span>
                 (
                 {tx.event.event === "InterchainTransfer"
                   ? tx.event.symbol
@@ -165,7 +165,7 @@ const TransactionItem: FC<{
             </Link>
           )}
         </div>
-        <div className="font-mono text-xs">{humanizedElapsedTime}</div>
+        <div className="text-xs">{humanizedElapsedTime}</div>
       </div>
     </li>
   );

diff --git a/apps/maestro/src/features/RecentTransactions/RecentTransactionsTable.tsx b/apps/maestro/src/features/RecentTransactions/RecentTransactionsTable.tsx
@@ -1,10 +1,4 @@
-import {
-  Card,
-  DropdownMenu,
-  ExternalLinkIcon,
-  Table,
-  Tooltip,
-} from "@axelarjs/ui";
+import { Card, ExternalLinkIcon, Table, Tabs, Tooltip } from "@axelarjs/ui";
 import { maskAddress } from "@axelarjs/utils";
 import { capitalize } from "@axelarjs/utils/string";
 import { useEffect, useMemo, useState, type FC } from "react";
@@ -34,8 +28,7 @@ export const RecentTransactionsTable: FC<Props> = ({
   isTokensTable = false,
 }) => {
   const [page, setPage] = useState(0);
-  const [selectedTokenType, setSelectedTokenType] =
-    useState<TokenKinds>("interchain");
+  const [selectedTokenType, setSelectedTokenType] = useState<TokenKinds>("all");
   const { address: senderAddress } = useAccount();
 
   // reset page when contract method changes
@@ -133,92 +126,88 @@ export const RecentTransactionsTable: FC<Props> = ({
   );
 
   return (
-    <Card className="bg-base-200/50 no-scrollbar max-w-[95vw] overflow-scroll rounded-lg">
-      <Card.Body>
-        <Table className="relative space-y-4" $zebra>
-          <Table.Head>
-            <Table.Row>
-              <Table.Column
-                colSpan={columns.length}
-                className="text-center text-base"
-              >
-                {isTokensTable ? (
-                  <span>
-                    Recently Deployed{" "}
-                    <span className="text-accent">Interchain Tokens</span>
-                  </span>
-                ) : (
-                  <>
-                    Recent{" "}
-                    <span className="text-accent">
-                      {CONTRACT_METHODS_LABELS[contractMethod]}
-                    </span>{" "}
-                    Transactions
-                  </>
-                )}
-              </Table.Column>
-            </Table.Row>
-            {isTokensTable && (
-              <div className="py-2 pl-4">
-                <DropdownMenu>
-                  <DropdownMenu.Trigger $size="sm" $variant="neutral">
-                    {capitalize(selectedTokenType)}
-                  </DropdownMenu.Trigger>
-                  <DropdownMenu.Content className="bg-base-300 rounded-xl">
-                    {["all", "canonical", "interchain"].map((kind) => (
-                      <DropdownMenu.Item key={kind}>
-                        <a
-                          onClick={setSelectedTokenType.bind(
-                            null,
-                            kind as TokenKinds
-                          )}
-                        >
-                          {capitalize(kind)}
-                        </a>
-                      </DropdownMenu.Item>
-                    ))}
-                  </DropdownMenu.Content>
-                </DropdownMenu>
-              </div>
-            )}
-            <Table.Row>
-              {columns
-                .filter((column) => column.label)
-                .map((column) => (
-                  <Table.Column key={column.label} className={column.className}>
-                    {column.label}
-                  </Table.Column>
-                ))}
-            </Table.Row>
-          </Table.Head>
-          <Table.Body>
-            {(isTokensTable ? isLoadingTokens : isLoading) ? (
-              <Table.Row className="grid min-h-[38px] place-items-center  text-center">
-                <Table.Cell colSpan={3}>
-                  {isLoading
-                    ? "Loading transactions..."
-                    : "No transactions found"}
-                </Table.Cell>
+    <>
+      {isTokensTable && (
+        <Tabs $boxed>
+          {["all", "canonical", "interchain"].map((kind) => (
+            <Tabs.Tab
+              key={kind}
+              onClick={setSelectedTokenType.bind(null, kind as TokenKinds)}
+              active={selectedTokenType === kind}
+            >
+              {capitalize(kind)}
+            </Tabs.Tab>
+          ))}
+        </Tabs>
+      )}
+      <Card className="bg-base-300 no-scrollbar max-w-[95vw] overflow-scroll rounded-lg">
+        <Card.Body>
+          <Table className="relative space-y-4" $zebra>
+            <Table.Head>
+              <Table.Row>
+                <Table.Column
+                  colSpan={columns.length}
+                  className="text-center text-base"
+                >
+                  {isTokensTable ? (
+                    <span>
+                      Recently Deployed{" "}
+                      <span className="text-accent">Interchain Tokens</span>
+                    </span>
+                  ) : (
+                    <>
+                      Recent{" "}
+                      <span className="text-accent">
+                        {CONTRACT_METHODS_LABELS[contractMethod]}
+                      </span>{" "}
+                      Transactions
+                    </>
+                  )}
+                </Table.Column>
               </Table.Row>
-            ) : isTokensTable ? (
-              interchainDeployments?.items.map((token) => (
-                <InterchainTokenRow key={token.tokenId} token={token} />
-              ))
-            ) : (
-              txns?.length &&
-              txns.map((tx, i) => (
-                <TransactionRow
-                  key={`${tx?.hash}-${i}`}
-                  tx={tx}
-                  contractMethod={contractMethod}
-                />
-              ))
-            )}
-            {paginationBlock}
-          </Table.Body>
-        </Table>
-      </Card.Body>
-    </Card>
+
+              <Table.Row>
+                {columns
+                  .filter((column) => column.label)
+                  .map((column) => (
+                    <Table.Column
+                      key={column.label}
+                      className={column.className}
+                    >
+                      {column.label}
+                    </Table.Column>
+                  ))}
+              </Table.Row>
+            </Table.Head>
+            <Table.Body>
+              {(isTokensTable ? isLoadingTokens : isLoading) ? (
+                <Table.Row className="grid min-h-[38px] place-items-center  text-center">
+                  <Table.Cell colSpan={3}>
+                    {isLoading
+                      ? "Loading transactions..."
+                      : "No transactions found"}
+                  </Table.Cell>
+                </Table.Row>
+              ) : isTokensTable ? (
+                interchainDeployments?.items.map((token) => (
+                  <InterchainTokenRow key={token.tokenId} token={token} />
+                ))
+              ) : (
+                txns?.length &&
+                txns.map((tx, i) => (
+                  <TransactionRow
+                    key={`${tx?.hash}-${i}`}
+                    tx={tx}
+                    contractMethod={contractMethod}
+                  />
+                ))
+              )}
+              {paginationBlock}
+            </Table.Body>
+          </Table>
+        </Card.Body>
+      </Card>
+    </>
   );
 };
 

diff --git a/apps/maestro/src/features/SearchInterchainToken/SearchInterchainToken.tsx b/apps/maestro/src/features/SearchInterchainToken/SearchInterchainToken.tsx
@@ -102,8 +102,10 @@ const SearchInterchainToken: FC<SearchInterchainTokenProps> = (props) => {
     (!isValidAddress && search.length >= 10);
 
   return (
-    <FormControl className="relative w-full max-w-xs md:max-w-md">
-      <div className="pb-2 text-center">Take your token interchain</div>
+    <FormControl className="relative z-10 w-full max-w-xs md:max-w-md">
+      <div className="pb-2 text-center font-semibold">
+        TAKE YOUR TOKEN INTERCHAIN
+      </div>
       <div
         className={cn("join rounded-md transition-transform", {
           "ring-error ring-offset-base-200 ring-1 ring-offset-2":
@@ -144,7 +146,7 @@ const SearchInterchainToken: FC<SearchInterchainTokenProps> = (props) => {
                   tabIndex={-1}
                 >
                   <div className="flex items-center gap-2">
-                    <span className="text-gray-700 dark:text-white">
+                    <span className="hidden text-gray-700 md:block dark:text-white">
                       Selected Chain
                     </span>
                     <Tooltip
@@ -155,7 +157,11 @@ const SearchInterchainToken: FC<SearchInterchainTokenProps> = (props) => {
                         operate in controlled mode
                     */}
                       <div className="flex items-center">
-                        <EVMChainIcon hideLabel selectedChain={defaultChain} />
+                        <EVMChainIcon
+                          size="md"
+                          hideLabel
+                          selectedChain={defaultChain}
+                        />
                       </div>
                     </Tooltip>
                   </div>