feat: visual tweaks

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

@@ -33,7 +33,7 @@ export const MaspBanner = (): JSX.Element => {
       </div>
       <ActionButton
         size="md"
-        href={routes.ibcShieldAll}
+        href={routes.masp}
         className="self-end justify-end"
       >
         Manage your shielded assets

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

@@ -137,8 +137,8 @@ const PanelContent = ({ data }: { data: TokenBalance[] }): JSX.Element => {
             title: "Total Transparent Asset Balance",
             amount: getTotalDollar(data),
             button: (
-              <ActionButton size="xs" href={routes.ibcShieldAll}>
-                Shield All
+              <ActionButton size="xs" href={routes.maspShield}>
+                Shield
               </ActionButton>
             ),
           },

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

@@ -291,7 +291,7 @@ const TableSelect = <T extends string>(
 type CellProps = { proposal: Proposal };
 
 const Title: React.FC<CellProps> = ({ proposal }) => (
-  <div className="w-full overflow-x-hidden whitespace-nowrap text-ellipsis">
+  <div className="w-full overflow-x-hidden whitespace-nowrap text-ellipsis text-sm">
     {proposal.content.title}
   </div>
 );

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

@@ -41,7 +41,7 @@ const ProposalListItem: React.FC<{
         )
       }
       className={clsx(
-        "group/proposal cursor-pointer text-sm",
+        "group/proposal cursor-pointer",
         "rounded-md bg-[#191919] p-4"
       )}
     >
@@ -52,8 +52,8 @@ const ProposalListItem: React.FC<{
         </div>
       </div>
       <div className="flex items-center justify-between gap-4">
-        <div className="min-w-[6ch]">#{proposal.id.toString()}</div>
-        <div className="flex-1">{proposal.content.title}</div>
+        <div className="min-w-[6ch] text-sm">#{proposal.id.toString()}</div>
+        <div className="flex-1 leading-tight">{proposal.content.title}</div>
         <TypeLabel proposalType={proposal.proposalType} color="dark" />
         <div className="min-w-20">
           {typeof vote !== "undefined" && (

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

@@ -41,7 +41,7 @@ export const ProposalHeader: React.FC<{
         <div className="w-full">
           <Breadcrumbs proposalId={proposalId} />
           <BackButton />
-          <Stack gap={2.5}>
+          <Stack gap={2.5} className="mt-4">
             <TypeLabel proposal={proposal} />
             <Title proposal={proposal} proposalId={proposalId} />
           </Stack>
@@ -77,7 +77,7 @@ const Title: React.FC<{
 );
 
 const Breadcrumbs: React.FC<{ proposalId: bigint }> = ({ proposalId }) => (
-  <div className="text-xxs text-neutral-500">
+  <div className="text-sm text-neutral-500">
     <Link className="transition-colors hover:text-white" to={routes.governance}>
       Governance
     </Link>{" "}
@@ -97,7 +97,7 @@ const BackButton: React.FC = () => (
   <Link
     to={routes.governance}
     className={clsx(
-      "inline-flex items-center text-xxs gap-1",
+      "inline-flex items-center text-xs gap-1",
       "text-neutral-200 bg-neutral-900 my-2 px-2 py-0.5 rounded-sm",
       "hover:text-yellow"
     )}

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

@@ -158,7 +158,7 @@ const Loaded: React.FC<{
 
   const highestVoteType: VoteType | undefined =
     zeroVotes ? undefined : (
-      voteTypes.reduce((a, b) => (props[a] > props[b] ? a : b))
+      voteTypes.reduce((a, b) => (props[a].gt(props[b]) ? a : b))
     );
 
   const [hoveredVoteType, setHoveredVoteType] = useState<VoteType | undefined>(

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

@@ -30,7 +30,7 @@ const ProposalListItem: React.FC<{
         )
       }
       className={clsx(
-        "group/proposal cursor-pointer text-sm",
+        "group/proposal cursor-pointer",
         "rounded-md bg-[#191919] p-4"
       )}
     >
@@ -41,8 +41,8 @@ const ProposalListItem: React.FC<{
         />
       </div>
       <div className="flex items-center justify-between gap-4">
-        <div className="min-w-[6ch]">#{proposal.id.toString()}</div>
-        <div className="flex-1">{proposal.content.title}</div>
+        <div className="min-w-[6ch] text-sm">#{proposal.id.toString()}</div>
+        <div className="flex-1 leading-tight">{proposal.content.title}</div>
         <TypeLabel proposalType={proposal.proposalType} color="dark" />
       </div>
 

apps/namadillo/src/App/Layout/ActiveAccount.tsx

@@ -6,6 +6,7 @@ import { useAtomValue } from "jotai";
 import { useLocation, useNavigate } from "react-router-dom";
 import { DisconnectAccountIcon } from "./DisconnectAccountIcon";
 import { SwitchAccountIcon } from "./SwitchAccountIcon";
+import NamadaWalletIcon from "./assets/namada-wallet-icon.svg";
 
 export const ActiveAccount = (): JSX.Element => {
   const { data: account, isFetching } = useAtomValue(defaultAccountAtom);
@@ -17,22 +18,24 @@ export const ActiveAccount = (): JSX.Element => {
     return <></>;
   }
 
-  const buttonClassName = "p-1 opacity-80 transition-opacity hover:opacity-100";
+  const buttonClassName =
+    "p-1 px-2 opacity-80 transition-opacity hover:opacity-100";
 
   return (
     <div>
       <span
         className={clsx(
-          "px-4 py-2.5 flex items-center text-xs rounded-sm",
-          "text-white bg-black rounded-xs"
+          "p-2.5 flex items-center text-sm rounded-sm",
+          "text-white bg-rblack rounded-xs"
         )}
       >
         <span className="flex items-center gap-2 relative group/tooltip">
           <CopyToClipboardControl
             className={buttonClassName}
             value={account.address || ""}
           >
-            {account.alias}
+            <img src={NamadaWalletIcon} alt="Namada Wallet" />
+            <span className="mr-2">{account.alias}</span>
           </CopyToClipboardControl>
           <Tooltip position="left">{account.address}</Tooltip>
         </span>

apps/namadillo/src/App/Layout/DisconnectAccountIcon.tsx

@@ -1,8 +1,8 @@
 export const DisconnectAccountIcon = (): JSX.Element => {
   return (
     <svg
-      width="12"
-      height="12"
+      width="18"
+      height="18"
       viewBox="0 0 12 12"
       fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"

apps/namadillo/src/App/Layout/SwitchAccountIcon.tsx

@@ -1,8 +1,8 @@
 export const SwitchAccountIcon = (): JSX.Element => {
   return (
     <svg
-      width="13"
-      height="12"
+      width="18"
+      height="18"
       viewBox="0 0 13 12"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

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

@@ -93,7 +93,7 @@ export const ShieldedFungibleTable = ({
 
   return (
     <>
-      <div className="text-sm font-medium mt-6">
+      <div className="text-sm font-medium">
         <span className="text-yellow">{data.length} </span>
         Tokens
       </div>

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

@@ -1,6 +1,6 @@
 export const ShieldedNFTTable = (): JSX.Element => {
   return (
-    <div className="text-yellow p-10">
+    <div className="text-yellow">
       <div>NFT Table (WIP)</div>
     </div>
   );

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

@@ -13,7 +13,7 @@ const tabs = ["Fungible", "NFT"];
 const ShieldAssetCta = (): JSX.Element => {
   return (
     <div className="flex-1 flex items-center justify-center">
-      <ActionButton href={routes.ibc} className="w-fit uppercase">
+      <ActionButton href={routes.maspShield} className="w-fit uppercase">
         Shield your first assets
       </ActionButton>
     </div>
@@ -39,29 +39,34 @@ const AssetTable = (): JSX.Element => {
     );
   }
 
+  // TODO implement NFT balances
+  const isNftEnabled = false;
+
   return (
     <AtomErrorBoundary
       result={shieldedTokensQuery}
       niceError="Unable to load your shielded balance"
       containerProps={{ className: "pb-16" }}
     >
-      <div className="flex">
-        {tabs.map((name) => {
-          const selected = name == tab;
-          return (
-            <ActionButton
-              key={name}
-              backgroundColor={selected ? "black" : "gray"}
-              outlineColor={selected ? "yellow" : undefined}
-              textColor={selected ? "yellow" : "white"}
-              backgroundHoverColor="yellow"
-              onClick={() => setTab(name)}
-            >
-              {name}
-            </ActionButton>
-          );
-        })}
-      </div>
+      {isNftEnabled && (
+        <div className="flex mb-6">
+          {tabs.map((name) => {
+            const selected = name == tab;
+            return (
+              <ActionButton
+                key={name}
+                backgroundColor={selected ? "black" : "gray"}
+                outlineColor={selected ? "yellow" : undefined}
+                textColor={selected ? "yellow" : "white"}
+                backgroundHoverColor="yellow"
+                onClick={() => setTab(name)}
+              >
+                {name}
+              </ActionButton>
+            );
+          })}
+        </div>
+      )}
       {tab === "Fungible" && (
         <ShieldedFungibleTable data={shieldedTokensQuery.data} />
       )}

apps/namadillo/src/App/Sidebars/ShieldAllBanner.tsx

@@ -31,7 +31,7 @@ export const ShieldAllBanner = (): JSX.Element => {
         src={`${svgImg}${isAnimating ? "#hover " : ""}`}
       />
       <Link
-        to={routes.ibcShieldAll}
+        to={routes.maspShield}
         onMouseEnter={() => setIsAnimating(true)}
         onMouseLeave={() => setIsAnimating(false)}
       >
@@ -43,7 +43,7 @@ export const ShieldAllBanner = (): JSX.Element => {
           textColor="yellow"
           backgroundHoverColor="yellow"
         >
-          Shield All Assets
+          Shield Assets
         </ActionButton>
       </Link>
     </div>

packages/components/src/CopyToClipboardControl.tsx

@@ -49,9 +49,9 @@ export const CopyToClipboardControl = ({
           animate={{ opacity: 1, scale: 1 }}
           exit={{ opacity: 0 }}
         >
-          <GoCheckCircle />
+          <GoCheckCircle className="w-[18px] h-[18px]" />
         </motion.div>
-      : <GoCopy />}
+      : <GoCopy className="w-[18px] h-[18px]" />}
     </div>
   );
 };

packages/components/src/Panel.tsx

@@ -20,7 +20,7 @@ export const Panel = <T extends keyof JSX.IntrinsicElements = "div">({
     as || "div",
     {
       className: twMerge(
-        "rounded-sm bg-black px-4 py-5 text-white font-medium",
+        "rounded-sm bg-rblack px-4 py-5 text-white font-medium",
         className
       ),
       ...props,