fix: namadillo v2 fixes (#1994)

Author: neocybereth

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

@@ -9,7 +9,7 @@ export const EstimateShieldingRewardsCard = (): JSX.Element => {
   return (
     <div
       className={clsx(
-        "flex items-center gap-12 text-sm text-yellow bg-neutral-900 rounded-sm px-6",
+        "flex items-center gap-12 text-sm text-yellow bg-neutral-900 rounded-sm px-6 mr-3",
         "py-4"
       )}
     >

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

@@ -15,7 +15,7 @@ export const ShieldedAssetsOverview = (): JSX.Element => {
 
   return (
     <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">
+      <div className="flex justify-between gap-16 mt-4">
         <TotalBalanceCard
           balanceInFiat={shieldedAmountInFiat}
           isShielded={true}

apps/namadillo/src/App/Governance/GovernanceOverview.tsx

@@ -67,6 +67,7 @@ export const GovernanceOverview: React.FC = () => {
           <UpcomingProposals proposals={upcomingProposals} />
         </ProposalListPanel>
         <ProposalListPanel
+          className="flex-1"
           title="All Proposals"
           errorText="Unable to load the list of proposals"
           atoms={activeAtoms}
@@ -77,7 +78,7 @@ export const GovernanceOverview: React.FC = () => {
             )}
           />
         </ProposalListPanel>
-        <NavigationFooter />
+        <NavigationFooter className="flex-none h-16" />
       </div>
       <Sidebar>
         <Panel>

apps/namadillo/src/App/Governance/ProposalListPanel.tsx

@@ -11,6 +11,7 @@ type ProposalListPanelProps = {
   errorText: string;
   emptyText?: string;
   isEmpty?: boolean;
+  className?: string;
 };
 
 export const ProposalListPanel = ({
@@ -20,10 +21,11 @@ export const ProposalListPanel = ({
   errorText,
   emptyText,
   isEmpty,
+  className,
 }: ProposalListPanelProps): JSX.Element => {
   const loaded = atomsAreLoaded(...atoms);
   return (
-    <Panel title={title}>
+    <Panel title={title} className={className}>
       <AtomErrorBoundary
         result={atoms}
         niceError={errorText}

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

@@ -132,7 +132,7 @@ export const MaspShield: React.FC = () => {
   return (
     <Panel className="rounded-sm flex flex-col flex-1">
       <header className="flex flex-col items-center text-center mb-3 gap-6">
-        <h1 className="mt-20 text-lg text-yellow">Shielding Transfer</h1>
+        <h1 className="mt-6 text-lg text-yellow">Shielding Transfer</h1>
         <NamadaTransferTopHeader
           isSourceShielded={false}
           isDestinationShielded={true}

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

@@ -129,7 +129,7 @@ export const MaspUnshield: React.FC = () => {
   setLedgerStatusStop(isPerformingTransfer);
 
   return (
-    <Panel className="relative rounded-sm flex flex-col flex-1 pt-30">
+    <Panel className="relative rounded-sm flex flex-col flex-1 pt-14">
       <header className="flex flex-col items-center text-center mb-3 gap-6">
         <h1 className="text-lg">Unshielding Transfer</h1>
         <NamadaTransferTopHeader

apps/namadillo/src/App/NamadaTransfer/NamadaTransfer.tsx

@@ -161,7 +161,7 @@ export const NamadaTransfer: React.FC = () => {
   setLedgerStatusStop(isPerformingTransfer);
 
   return (
-    <Panel className="min-h-[600px] rounded-sm flex flex-col flex-1 py-20">
+    <Panel className="min-h-[600px] rounded-sm flex flex-col flex-1 pt-5 pb-20">
       <header className="flex flex-col items-center text-center mb-3 gap-6">
         <h1
           className={twMerge("mt-6 text-xl", isSourceShielded && "text-yellow")}

apps/namadillo/src/App/Staking/MyValidatorsTable.tsx

@@ -107,7 +107,7 @@ export const MyValidatorsTable = (): JSX.Element => {
 
   return (
     <>
-      <nav className="flex justify-end -mt-15 gap-2">
+      <nav className="flex justify-end -mt-15 gap-2 pb-3">
         <ActionButton
           className="basis-[content] py-1"
           backgroundColor="cyan"

apps/namadillo/src/App/Staking/StakingOverview.tsx

@@ -26,7 +26,7 @@ export const StakingOverview = (): JSX.Element => {
 
   return (
     <PageWithSidebar>
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col flex-1 gap-2">
         {!userHasAccount && <ConnectBanner actionText="To stake" />}
         {userHasAccount && <StakingSummary />}
         {hasStaking && (
@@ -47,10 +47,13 @@ export const StakingOverview = (): JSX.Element => {
             <UnbondingAmountsTable />
           </Panel>
         )}
-        <Panel className="relative pb-6 overflow-hidden" title="All Validators">
+        <Panel
+          className="relative pb-6 overflow-hidden flex-1"
+          title="All Validators"
+        >
           <AllValidatorsTable />
         </Panel>
-        <NavigationFooter />
+        <NavigationFooter className="flex-none h-16" />
       </div>
       <Sidebar>
         {hasStaking && myValidators.isSuccess && (

packages/components/src/TabContainer.tsx

@@ -52,7 +52,7 @@ export const TabContainer = ({
                 "--hover":
                   activeTabIndex !== index ? colors.neutral[900] : colors.black,
                 "--text-color": colors.white,
-                "--text-hover-color": colors.white,
+                "--text-hover-color": colors.yellow[400],
               } as React.CSSProperties
             }
             {...buttonProps}