fix: update all css for v2 transfer flow (#1981)

Author: neocybereth

apps/namadillo/src/App/AccountOverview/AccountOverview.tsx

@@ -20,11 +20,9 @@ export const AccountOverview = (): JSX.Element => {
 
   return (
     <PageWithSidebar>
-      <div className="relative">
-        <section className="w-full">
-          <TotalBalanceBanner />
-          <AssetsOverviewPanel />
-        </section>
+      <div className="flex flex-col">
+        <TotalBalanceBanner />
+        <AssetsOverviewPanel />
       </div>
       <Sidebar>
         <StakeSidebar />

apps/namadillo/src/App/AccountOverview/AssetsOverviewPanel.tsx

@@ -18,6 +18,7 @@ export const AssetsOverviewPanel = (): JSX.Element => {
       title="IBC Transfer"
       activeTabIndex={currentTab}
       onChangeActiveTab={setCurrentTab}
+      containerClassname="flex-1"
       className={clsx(
         "mt-2 transition-colors border-solid border border-transparent",
         "duration-0",

apps/namadillo/src/App/AccountOverview/ShieldedAssetsOverview.tsx

@@ -14,7 +14,7 @@ export const ShieldedAssetsOverview = (): JSX.Element => {
   const requiresNewShieldedSync = useRequiresNewShieldedSync();
 
   return (
-    <Panel className="relative z-10 px-6 border border-yellow rounded-t-none -mt-px">
+    <Panel className="relative z-10 px-6 border border-yellow rounded-t-none -mt-px h-full">
       <div className="flex items-center gap-16 mt-4">
         <TotalBalanceCard
           balanceInFiat={shieldedAmountInFiat}

apps/namadillo/src/App/AccountOverview/TotalBalanceBanner.tsx

@@ -68,9 +68,7 @@ export const TotalBalanceBanner = (): JSX.Element => {
         {/* <aside className="hidden lg:flex gap-4 items-center flex-wrap">
           <ActionButton
             onClick={() =>
-              navigate(routes.shieldAssets, {
-                state: { backgroundLocation: "" },
-              })
+              navigate(routes.shieldAssets)
             }
             size="sm"
             className="w-auto px-3 py-1.5"

apps/namadillo/src/App/AccountOverview/UnshieldedAssetTable.tsx

@@ -144,7 +144,6 @@ const TransparentTokensTable = ({
         Tokens
       </div>
       <TableWithPaginator
-        containerClassName="h-screen"
         id="transparent-tokens"
         headers={headers.concat("")}
         renderRow={renderRow}
@@ -175,22 +174,22 @@ export const UnshieldedAssetTable = (): JSX.Element => {
   }, [transparentTokensQuery.data]);
 
   return (
-    <>
+    <div className="flex flex-col flex-1">
       {transparentTokensQuery.isPending ?
         <SkeletonLoading height="100%" width="100%" />
       : <AtomErrorBoundary
           result={transparentTokensQuery}
           niceError="Unable to load your transparent balance"
-          containerProps={{ className: "pb-16" }}
+          containerProps={{ className: "pb-16 flex-1 flex flex-col" }}
         >
           {nonZeroTransparentTokens.length ?
             <TransparentTokensTable data={nonZeroTransparentTokens} />
-          : <div className="bg-neutral-900 p-6 rounded-sm text-center font-medium mt-8">
+          : <div className="bg-neutral-900 p-6 rounded-sm text-center font-medium mt-8 flex-1 flex items-center justify-center">
               You currently hold no assets in your unshielded account
             </div>
           }
         </AtomErrorBoundary>
       }
-    </>
+    </div>
   );
 };

apps/namadillo/src/App/AccountOverview/UnshieldedAssetsOverview.tsx

@@ -3,14 +3,13 @@ import { routes } from "App/routes";
 import { transparentTokensAtom } from "atoms/balance";
 import { useAmountsInFiat } from "hooks/useAmountsInFiat";
 import { useAtomValue } from "jotai";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { StakeYourNamCard } from "./StakeYourNamCard";
 import { TotalBalanceCard } from "./TotalBalanceCard";
 import { UnshieldedAssetTable } from "./UnshieldedAssetTable";
 
 export const UnshieldedAssetsOverview = (): JSX.Element => {
   const { unshieldedAmountInFiat } = useAmountsInFiat();
-  const location = useLocation();
   const navigate = useNavigate();
   const transparentTokensQuery = useAtomValue(transparentTokensAtom);
 
@@ -20,18 +19,14 @@ export const UnshieldedAssetsOverview = (): JSX.Element => {
       !transparentTokensQuery.isFetched);
 
   return (
-    <Panel className="relative z-10 px-6 rounded-t-none -mt-px">
+    <Panel className="relative z-10 px-6 rounded-t-none -mt-px h-full">
       <div className="flex justify-between items-center gap-16 mt-4">
         <TotalBalanceCard
           balanceInFiat={unshieldedAmountInFiat}
           footerButtons={
             <>
               <ActionButton
-                onClick={() =>
-                  navigate(routes.shieldAssets, {
-                    state: { backgroundLocation: location },
-                  })
-                }
+                onClick={() => navigate(routes.maspShield)}
                 size="xs"
                 className="w-auto px-4"
               >

apps/namadillo/src/App/Common/TableWithPaginator.tsx

@@ -12,7 +12,6 @@ type TableWithPaginatorProps<T> = {
   pageCount?: number;
   onPageChange?: (page: number) => void;
   children?: React.ReactNode;
-  containerClassName?: string;
 } & Pick<React.ComponentProps<typeof StyledTable>, "tableProps" | "headProps">;
 
 export const TableWithPaginator = <T,>({
@@ -26,7 +25,6 @@ export const TableWithPaginator = <T,>({
   children,
   tableProps,
   headProps,
-  containerClassName,
 }: TableWithPaginatorProps<T>): JSX.Element => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [rows, setRows] = useState<TableRow[]>([]);
@@ -82,7 +80,6 @@ export const TableWithPaginator = <T,>({
     <div
       ref={containerRef}
       className={clsx(
-        containerClassName,
         "grid grid-rows-[1fr_auto] flex-1 overflow-hidden w-full gap-2"
       )}
     >

apps/namadillo/src/App/Masp/ShieldedAssetTable.tsx

@@ -63,7 +63,7 @@ export const ShieldedAssetTable = (): JSX.Element => {
     <AtomErrorBoundary
       result={shieldedTokensQuery}
       niceError="Unable to load your shielded balance"
-      containerProps={{ className: "pb-16" }}
+      containerProps={{ className: "pb-16 flex-1 flex flex-col" }}
     >
       {isNftEnabled && (
         <div className="flex mb-6">

apps/namadillo/src/App/Masp/ShieldedFungibleTable.tsx

@@ -143,7 +143,6 @@ export const ShieldedFungibleTable = ({
         Tokens
       </div>
       <TableWithPaginator
-        containerClassName="h-screen"
         id="shielded-tokens"
         headers={headers.concat("")}
         renderRow={renderRow}

apps/namadillo/src/App/Transactions/TransactionHistory.tsx

@@ -17,34 +17,39 @@ export const TransactionHistory = (): JSX.Element => {
   const { clearMyCompleteTransactions } = useTransactionActions();
 
   return (
-    <>
-      <Panel className="flex flex-col gap-6 flex-1">
-        <h2 className="mb-7">Transfers made by this device</h2>
-        {pending.length > 0 && (
-          <section>
-            <h2 className="text-sm mb-3">In Progress</h2>
-            <TransactionList transactions={pending.toReversed()} />
-          </section>
-        )}
-        {complete.length > 0 && (
-          <section>
-            <header className="flex justify-between text-sm">
-              <h2 className="mb-3">History</h2>
-              <button
-                className="text-white"
-                onClick={clearMyCompleteTransactions}
-              >
-                Clear all
-              </button>
-            </header>
-            <TransactionList transactions={complete.toReversed()} />
-          </section>
-        )}
-        {hasNoTransactions && (
-          <p className="font-light">No transactions saved on this device</p>
-        )}
+    <div
+      className="flex flex-col min-h-full"
+      style={{ height: "calc(100vh - 180px)" }}
+    >
+      <Panel className="flex-auto flex flex-col overflow-auto">
+        <div className="rounded-sm bg-black px-4 py-5 text-white font-medium flex flex-col gap-6 flex-1">
+          <h2 className="mb-7">Transfers made by this device</h2>
+          {pending.length > 0 && (
+            <section>
+              <h2 className="text-sm mb-3">In Progress</h2>
+              <TransactionList transactions={pending.toReversed()} />
+            </section>
+          )}
+          {complete.length > 0 && (
+            <section>
+              <header className="flex justify-between text-sm">
+                <h2 className="mb-3">History</h2>
+                <button
+                  className="text-white"
+                  onClick={clearMyCompleteTransactions}
+                >
+                  Clear all
+                </button>
+              </header>
+              <TransactionList transactions={complete.toReversed()} />
+            </section>
+          )}
+          {hasNoTransactions && (
+            <p className="font-light">No transactions saved on this device</p>
+          )}
+        </div>
       </Panel>
-      <NavigationFooter className="mt-2" />
-    </>
+      <NavigationFooter className="mt-2 flex-none h-16" />
+    </div>
   );
 };