chore: update info and ballot overview display

packages/interface/src/components/BallotOverview.tsx

@@ -1,5 +1,4 @@
 import Link from "next/link";
-import { useRouter } from "next/router";
 
 import { Heading } from "~/components/ui/Heading";
 import { useBallot } from "~/contexts/Ballot";
@@ -9,29 +8,34 @@ import { EAppState } from "~/utils/types";
 import { AddedProjects } from "./AddedProjects";
 import { VotingUsage } from "./VotingUsage";
 
-export const BallotOverview = (): JSX.Element => {
+interface IBallotOverviewProps {
+  title?: string;
+}
+
+export const BallotOverview = ({ title = undefined }: IBallotOverviewProps): JSX.Element => {
   const { ballot } = useBallot();
-  const { asPath } = useRouter();
 
   const appState = useAppState();
 
   return (
-    <Link
-      href={
-        ballot.published && (appState === EAppState.TALLYING || appState === EAppState.RESULTS)
-          ? "/ballot/confirmation"
-          : "/ballot"
-      }
-    >
-      <div className="dark:bg-lightBlack my-8 flex-col items-center gap-2 rounded-lg bg-white p-5 uppercase shadow-lg dark:text-white">
-        <Heading as="h3" size="3xl">
-          {asPath.includes("ballot") ? "Summary" : "My Ballot"}
-        </Heading>
+    <div className="w-full">
+      <Link
+        href={
+          ballot.published && (appState === EAppState.TALLYING || appState === EAppState.RESULTS)
+            ? "/ballot/confirmation"
+            : "/ballot"
+        }
+      >
+        {title && (
+          <Heading as="h3" size="3xl">
+            {title}
+          </Heading>
+        )}
 
         <AddedProjects />
 
         <VotingUsage />
-      </div>
-    </Link>
+      </Link>
+    </div>
   );
 };

packages/interface/src/components/Info.tsx

@@ -1,3 +1,4 @@
+import { useRouter } from "next/router";
 import { tv } from "tailwind-variants";
 
 import { createComponent } from "~/components/ui";
@@ -6,6 +7,7 @@ import { useMaci } from "~/contexts/Maci";
 import { useAppState } from "~/utils/state";
 import { EInfoCardState, EAppState } from "~/utils/types";
 
+import { BallotOverview } from "./BallotOverview";
 import { InfoCard } from "./InfoCard";
 import { RoundInfo } from "./RoundInfo";
 import { VotingInfo } from "./VotingInfo";
@@ -25,12 +27,20 @@ const InfoContainer = createComponent(
 
 interface InfoProps {
   size: string;
-  showVotingInfo?: boolean;
+  showRoundInfo?: boolean;
+  showAppState?: boolean;
+  showBallot?: boolean;
 }
 
-export const Info = ({ size, showVotingInfo = false }: InfoProps): JSX.Element => {
+export const Info = ({
+  size,
+  showRoundInfo = false,
+  showAppState = false,
+  showBallot = false,
+}: InfoProps): JSX.Element => {
   const { votingEndsAt } = useMaci();
   const appState = useAppState();
+  const { asPath } = useRouter();
 
   const steps = [
     {
@@ -62,27 +72,26 @@ export const Info = ({ size, showVotingInfo = false }: InfoProps): JSX.Element =
   return (
     <div className="w-full">
       <InfoContainer size={size}>
-        {showVotingInfo && (
-          <div className="w-full">
-            <RoundInfo />
+        {showRoundInfo && <RoundInfo />}
 
-            {appState === EAppState.VOTING && <VotingInfo />}
-          </div>
-        )}
+        {showBallot && <BallotOverview title={asPath.includes("ballot") ? "Summary" : undefined} />}
 
-        {steps.map(
-          (step) =>
-            step.start &&
-            step.end && (
-              <InfoCard
-                key={step.label}
-                end={step.end}
-                start={step.start}
-                state={defineState({ state: step.state, appState })}
-                title={step.label}
-              />
-            ),
-        )}
+        {showRoundInfo && appState === EAppState.VOTING && <VotingInfo />}
+
+        {showAppState &&
+          steps.map(
+            (step) =>
+              step.start &&
+              step.end && (
+                <InfoCard
+                  key={step.label}
+                  end={step.end}
+                  start={step.start}
+                  state={defineState({ state: step.state, appState })}
+                  title={step.label}
+                />
+              ),
+          )}
       </InfoContainer>
     </div>
   );

packages/interface/src/components/VotingInfo.tsx

@@ -15,7 +15,7 @@ export const VotingInfo = (): JSX.Element => {
   }, 1000);
 
   return (
-    <div className="py-4">
+    <div className="w-full py-4">
       <h4 className="mb-2">Voting Ends In</h4>
 
       {isLoading && <p>Loading...</p>}

packages/interface/src/layouts/DefaultLayout.tsx

@@ -2,7 +2,6 @@ import { GatekeeperTrait } from "maci-cli/sdk";
 import { type ReactNode, type PropsWithChildren, useMemo } from "react";
 import { useAccount } from "wagmi";
 
-import { BallotOverview } from "~/components/BallotOverview";
 import Header from "~/components/Header";
 import { Info } from "~/components/Info";
 import { Notice } from "~/components/ui/Notice";
@@ -102,9 +101,12 @@ export const LayoutWithSidebar = ({ ...props }: ILayoutProps): JSX.Element => {
       sidebar="left"
       sidebarComponent={
         <div>
-          {showInfo && <Info showVotingInfo size="sm" />}
-
-          {appState !== EAppState.APPLICATION && showBallot && address && isRegistered && <BallotOverview />}
+          <Info
+            showAppState={showInfo}
+            showBallot={appState !== EAppState.APPLICATION && !!(showBallot && address && isRegistered)}
+            showRoundInfo={showInfo}
+            size="sm"
+          />
 
           {showSubmitButton && ballot.votes.length > 0 && (
             <div className="flex flex-col gap-4">

packages/interface/src/pages/signup/index.tsx

@@ -58,7 +58,7 @@ const SignupPage = (): JSX.Element => {
         {isConnected && !isRegistered && <JoinButton />}
 
         <div className="my-8">
-          <Info size="default" />
+          <Info showAppState size="default" />
         </div>
       </div>