feat: update shield sync indicator layout (#1601)

Author: euharrison

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

@@ -1,8 +1,7 @@
 import { Panel } from "@namada/components";
 import { ConnectPanel } from "App/Common/ConnectPanel";
 import { PageWithSidebar } from "App/Common/PageWithSidebar";
-import { ShieldedSyncProgress } from "App/Masp/ShieldedSyncProgress";
-import { EpochInformation } from "App/Sidebars/EpochInformation";
+import { Sidebar } from "App/Layout/Sidebar";
 import MainnetRoadmap from "App/Sidebars/MainnetRoadmap";
 import { ShieldAllBanner } from "App/Sidebars/ShieldAllBanner";
 import { StakingRewardsPanel } from "App/Staking/StakingRewardsPanel";
@@ -54,12 +53,10 @@ export const AccountOverview = (): JSX.Element => {
           </Panel>
         </section>
       </div>
-      <aside className="flex flex-col gap-2">
-        <EpochInformation />
-        <ShieldedSyncProgress />
+      <Sidebar>
         <ShieldAllBanner />
         <MainnetRoadmap />
-      </aside>
+      </Sidebar>
     </PageWithSidebar>
   );
 };

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

@@ -1,7 +1,7 @@
 import { Panel, SkeletonLoading } from "@namada/components";
 import { ConnectBanner } from "App/Common/ConnectBanner";
 import { PageWithSidebar } from "App/Common/PageWithSidebar";
-import { EpochInformation } from "App/Sidebars/EpochInformation";
+import { Sidebar } from "App/Layout/Sidebar";
 import { allProposalsAtom, votedProposalsAtom } from "atoms/proposals";
 import {
   atomsAreFetching,
@@ -76,8 +76,7 @@ export const GovernanceOverview: React.FC = () => {
           />
         </ProposalListPanel>
       </div>
-      <aside className="flex flex-col gap-2 mt-1.5 lg:mt-0">
-        <EpochInformation />
+      <Sidebar>
         <Panel>
           {atomsAreFetching(allProposals) && (
             <SkeletonLoading height="150px" width="100%" />
@@ -86,7 +85,7 @@ export const GovernanceOverview: React.FC = () => {
             <ProposalsSummary allProposals={allProposals.data!} />
           )}
         </Panel>
-      </aside>
+      </Sidebar>
     </PageWithSidebar>
   );
 };

apps/namadillo/src/App/Ibc/IbcTransfersLayout.tsx

@@ -1,8 +1,8 @@
 import { Panel, TabContainer } from "@namada/components";
 import { ConnectPanel } from "App/Common/ConnectPanel";
 import { PageWithSidebar } from "App/Common/PageWithSidebar";
+import { Sidebar } from "App/Layout/Sidebar";
 import { routes } from "App/routes";
-import { EpochInformation } from "App/Sidebars/EpochInformation";
 import { ShieldAllBanner } from "App/Sidebars/ShieldAllBanner";
 import { useUserHasAccount } from "hooks/useIsAuthenticated";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
@@ -44,10 +44,9 @@ export const IbcTransfersLayout = (): JSX.Element => {
           ]}
         />
       </div>
-      <aside className="w-full mt-2 flex flex-col sm:flex-row lg:mt-0 lg:flex-col gap-2">
-        <EpochInformation />
+      <Sidebar>
         <ShieldAllBanner />
-      </aside>
+      </Sidebar>
     </PageWithSidebar>
   );
 };

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

@@ -0,0 +1,13 @@
+import { ShieldedSyncProgress } from "App/Masp/ShieldedSyncProgress";
+import { EpochInformation } from "App/Sidebars/EpochInformation";
+import { ReactNode } from "react";
+
+export const Sidebar = ({ children }: { children: ReactNode }): JSX.Element => {
+  return (
+    <aside className="flex flex-col gap-2 mt-1.5 lg:mt-0">
+      <EpochInformation />
+      <ShieldedSyncProgress />
+      {children}
+    </aside>
+  );
+};

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

@@ -1,14 +1,14 @@
 import { ConnectPanel } from "App/Common/ConnectPanel";
 import { MaspContainer } from "App/Common/MaspContainer";
 import { PageWithSidebar } from "App/Common/PageWithSidebar";
+import { Sidebar } from "App/Layout/Sidebar";
 import { routes } from "App/routes";
 import { ShieldAllBanner } from "App/Sidebars/ShieldAllBanner";
 import { shieldedBalanceAtom } from "atoms/balance";
 import { useUserHasAccount } from "hooks/useIsAuthenticated";
 import { useAtomValue } from "jotai";
 import { useEffect } from "react";
 import { Outlet, useLocation } from "react-router-dom";
-import { ShieldedSyncProgress } from "./ShieldedSyncProgress";
 
 export const MaspLayout: React.FC = () => {
   const userHasAccount = useUserHasAccount();
@@ -29,10 +29,9 @@ export const MaspLayout: React.FC = () => {
       <MaspContainer>
         <Outlet />
       </MaspContainer>
-      <aside className="w-full mt-2 flex flex-col sm:flex-row lg:mt-0 lg:flex-col gap-2">
-        <ShieldedSyncProgress />
+      <Sidebar>
         <ShieldAllBanner />
-      </aside>
+      </Sidebar>
     </PageWithSidebar>
   );
 };

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

@@ -1,5 +1,6 @@
 import { shieldedBalanceAtom, shieldedSyncProgress } from "atoms/balance/atoms";
 import { useAtomValue } from "jotai";
+import { twMerge } from "tailwind-merge";
 
 export const ShieldedSyncProgress = (): JSX.Element => {
   const syncProgress = useAtomValue(shieldedSyncProgress);
@@ -10,11 +11,18 @@ export const ShieldedSyncProgress = (): JSX.Element => {
   }
 
   return (
-    <div className={"bg-yellow rounded-sm text-xs font-medium py-2 px-3"}>
+    <div className="relative bg-black text-yellow rounded-sm overflow-hidden text-xs font-medium py-2 px-3">
       Shielded sync{" "}
       {syncProgress === 1 ?
         "converting..."
       : `progress: ${Math.min(Math.floor(syncProgress * 100), 100)}%`}
+      <div
+        className={twMerge(
+          "absolute bg-yellow top-0 left-0 w-full h-full mix-blend-difference origin-left",
+          syncProgress > 0 && "transition-all"
+        )}
+        style={{ transform: `scaleX(${syncProgress * 100}%)` }}
+      />
     </div>
   );
 };

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

@@ -1,7 +1,7 @@
 import { Panel } from "@namada/components";
 import { ConnectBanner } from "App/Common/ConnectBanner";
 import { PageWithSidebar } from "App/Common/PageWithSidebar";
-import { EpochInformation } from "App/Sidebars/EpochInformation";
+import { Sidebar } from "App/Layout/Sidebar";
 import { ValidatorDiversification } from "App/Sidebars/ValidatorDiversification";
 import { YourStakingDistribution } from "App/Sidebars/YourStakingDistribution";
 import { myValidatorsAtom } from "atoms/validators";
@@ -40,8 +40,7 @@ export const StakingOverview = (): JSX.Element => {
           <AllValidatorsTable />
         </Panel>
       </div>
-      <aside className="w-full mt-2 flex flex-col sm:flex-row lg:mt-0 lg:flex-col gap-2">
-        <EpochInformation />
+      <Sidebar>
         {hasStaking && myValidators.isSuccess && (
           <Panel className="w-full @container">
             <YourStakingDistribution myValidators={myValidators.data!} />
@@ -50,7 +49,7 @@ export const StakingOverview = (): JSX.Element => {
         <Panel>
           <ValidatorDiversification />
         </Panel>
-      </aside>
+      </Sidebar>
     </PageWithSidebar>
   );
 };

apps/namadillo/src/App/Transfer/TransferLayout.tsx

@@ -1,5 +1,6 @@
 import { ConnectPanel } from "App/Common/ConnectPanel";
 import { PageWithSidebar } from "App/Common/PageWithSidebar";
+import { Sidebar } from "App/Layout/Sidebar";
 import { ShieldAllBanner } from "App/Sidebars/ShieldAllBanner";
 import { useUserHasAccount } from "hooks/useIsAuthenticated";
 import { Outlet } from "react-router-dom";
@@ -14,9 +15,9 @@ export const TransferLayout: React.FC = () => {
   return (
     <PageWithSidebar>
       <Outlet />
-      <aside className="w-full mt-2 flex flex-col sm:flex-row lg:mt-0 lg:flex-col gap-2">
+      <Sidebar>
         <ShieldAllBanner />
-      </aside>
+      </Sidebar>
     </PageWithSidebar>
   );
 };