From 3aab36cb3d1bcbfdf3a4cce2cc08f0b59b1c63ee Mon Sep 17 00:00:00 2001
From: Sara <sara@Saras-MacBook-Pro.local>
Date: Sun, 19 Jan 2025 12:26:32 +0000
Subject: [PATCH] VotingPowerPanel layout fixes

[#181]
---
 .../lp-vaults/LPVotingPowerPage.tsx           |  30 +-
 .../lp-vaults/components/VotingPowerPanel.tsx | 272 +++++++++---------
 2 files changed, 153 insertions(+), 149 deletions(-)

diff --git a/src/app/governance/lp-vaults/LPVotingPowerPage.tsx b/src/app/governance/lp-vaults/LPVotingPowerPage.tsx
index 6cb88f3..fa6c311 100644
--- a/src/app/governance/lp-vaults/LPVotingPowerPage.tsx
+++ b/src/app/governance/lp-vaults/LPVotingPowerPage.tsx
@@ -6,6 +6,7 @@ import { VotingPowerPanel } from "./components/VotingPowerPanel";
 import { Accordion } from "@radix-ui/react-accordion";
 import { getConfig } from "@/chainConfig";
 import useLocalStorage from "@/app/core/hooks/useLocalStorage";
+import { PageGrid } from "@/app/governance/components/PageGrid";
 
 export function LPVotingPowerPage() {
   const { user } = useConnectedUser();
@@ -24,16 +25,15 @@ export function LPVotingPowerPage() {
   }, [accordionState]);
 
   return (
-    <div className="w-full lg:max-w-[67rem] m-auto px-4 md:px-8 grid gap-4">
-      <div className="flex flex-wrap gap-6">
-        <div className="grow">
+    <section className="grow w-full max-w-[44rem] lg:max-w-[67rem] m-auto pb-16 px-4 lg:px-8">
+      <PageGrid>
+        <div className="col-span-12 lg:col-span-8 row-start-1 row-span-1">
           <TitleSection />
         </div>
-        <div className="grow">
-          <VotingPowerPanel />
-        </div>
-      </div>
-      <div className="w-full md:pt-0 pt-3">
+
+        <VotingPowerPanel />
+      </PageGrid>
+      <div className="w-full pt-6">
         <h2 className="font-bold text-xl">Manage your BREAD LP vaults</h2>
         <p className="text-breadgray-rye dark:text-breadgray-grey mt-2 mb-4">
           Lock LP tokens for voting power within the Breadchain cooperative
@@ -48,25 +48,27 @@ export function LPVotingPowerPage() {
           <VaultPanel tokenAddress={config.BUTTER.address} />
         </Accordion>
       </div>
-    </div>
+    </section>
   );
 }
 
 function TitleSection() {
   return (
     <div className="flex flex-col gap-4">
-      <h1 className="font-bold text-2xl text-breadgray-grey100 dark:text-breadgray-ultra-white">
+      <h1 className="font-bold text-3xl text-breadgray-grey100 dark:text-breadgray-ultra-white">
         Voting Power LP Vaults
       </h1>
-      <div className="max-w-xl text-breadgray-rye dark:text-breadgray-grey">
-        <p className=" ">
+      <div className="max-w-xl text-lg text-breadgray-rye dark:text-breadgray-light-grey">
+        <p>
           This page lets you provide liquidity for BREAD while maintaining your
           voting power for governing the monthly BREAD crowdstaking yield
           distribution. By staking your LP tokens into a vault, you still get
           your voting power as if you are holding BREAD normally.
         </p>
-        <h4 className="mt-4 mb-2 font-bold">Get Started:</h4>
-        <ol className="list-decimal ml-4">
+        <h4 className="mt-5 mb-2 font-bold text-2xl leading-none text-breadgray-grey100 dark:text-breadgray-ultra-white">
+          Get Started:
+        </h4>
+        <ol className="list-decimal px-5">
           <li>
             <b>Provide Liquidity:</b> Add liquidity for BREAD on the listed
             liquidity pool of the vault to receive LP tokens.
diff --git a/src/app/governance/lp-vaults/components/VotingPowerPanel.tsx b/src/app/governance/lp-vaults/components/VotingPowerPanel.tsx
index 4a98f5d..6883c0f 100644
--- a/src/app/governance/lp-vaults/components/VotingPowerPanel.tsx
+++ b/src/app/governance/lp-vaults/components/VotingPowerPanel.tsx
@@ -46,147 +46,149 @@ export function VotingPowerPanel() {
   };
 
   return (
-    <div className="w-full md:w-[380px] m-auto">
-      <CardBox>
-        <div className="p-4 flex flex-col items-center gap-4">
-          <h2 className="font-medium text-xl leading-none dark:text-breadgray-light-grey">
-            MY VOTING POWER
-          </h2>
-          <div className="flex flex-col gap-2">
-            <div className="flex gap-2 items-center">
-              <div className="font-bold text-3xl w-full leading-none text-breadgray-grey100 dark:text-breadgray-ultra-white">
-                {votingPower &&
-                votingPower.bread.status === "success" &&
-                votingPower.butteredBread.status === "success" ? (
-                  renderFormattedDecimalNumber(
-                    formatBalance(
-                      Number(
-                        votingPower.bread.value +
-                          votingPower.butteredBread.value
-                      ) /
-                        10 ** 18,
-                      1
-                    ),
-                    <FistIcon bg="burnt" />
-                  )
-                ) : (
-                  <div className="flex justify-center items-center">
-                    <FistIcon bg="burnt" />
-                    <span className="ms-2">-</span>
-                  </div>
-                )}
+    <div className="col-span-12 lg:col-span-4 row-start-2 lg:row-start-1 lg:row-span-2">
+      <div className="justify-center lg:block lg:w-full">
+        <CardBox>
+          <div className="p-4 flex flex-col items-center gap-4">
+            <h2 className="font-medium text-xl leading-none dark:text-breadgray-light-grey">
+              MY VOTING POWER
+            </h2>
+            <div className="flex flex-col gap-2">
+              <div className="flex gap-2 items-center">
+                <div className="font-bold text-3xl w-full leading-none text-breadgray-grey100 dark:text-breadgray-ultra-white">
+                  {votingPower &&
+                  votingPower.bread.status === "success" &&
+                  votingPower.butteredBread.status === "success" ? (
+                    renderFormattedDecimalNumber(
+                      formatBalance(
+                        Number(
+                          votingPower.bread.value +
+                            votingPower.butteredBread.value
+                        ) /
+                          10 ** 18,
+                        1
+                      ),
+                      <FistIcon bg="burnt" />
+                    )
+                  ) : (
+                    <div className="flex justify-center items-center">
+                      <FistIcon bg="burnt" />
+                      <span className="ms-2">-</span>
+                    </div>
+                  )}
+                </div>
               </div>
-            </div>
 
-            <div className="flex items-center gap-2 font-medium text-xs text-breadgray-rye dark:text-breadgray-grey">
-              <span className="pb-1">Accessible voting power</span>
-              <Tooltip>
-                Your total available voting power for the current voting cycle #
-                {distributions ? distributions.length + 1 + "." : "-"}
-              </Tooltip>
+              <div className="flex items-center gap-2 font-medium text-xs text-breadgray-rye dark:text-breadgray-grey">
+                <span className="pb-1">Accessible voting power</span>
+                <Tooltip>
+                  Your total available voting power for the current voting cycle
+                  #{distributions ? distributions.length + 1 + "." : "-"}
+                </Tooltip>
+              </div>
             </div>
-          </div>
 
-          {/* voting power grid */}
-          <div className="w-full grid grid-cols-[repeat(2, max-content)] gap-3">
-            <DividerWithText text="Breakdown" />
-
-            <p className="text-breadgray-rye dark:text-breadgray-grey">
-              Voting power from locked LP
-            </p>
-
-            <span className="font-bold text-breadgray-grey100 dark:text-breadgray-white text-right">
-              {votingPower && votingPower.butteredBread.status === "success"
-                ? formatBalance(
-                    Number(votingPower.butteredBread.value) / 10 ** 18,
-                    1
-                  )
-                : "-"}
-            </span>
-
-            <p className="text-breadgray-rye dark:text-breadgray-grey">
-              Voting power from $BREAD
-            </p>
-            <span className="text-right font-bold text-breadgray-grey100 dark:text-breadgray-white">
-              {votingPower && votingPower.bread.status === "success"
-                ? formatBalance(Number(votingPower.bread.value) / 10 ** 18, 1)
-                : "-"}
-            </span>
-            <DividerWithText text="Source(s)" />
-
-            <p className="text-breadgray-rye dark:text-breadgray-grey">
-              Total locked LP tokens
-            </p>
-
-            <span className="text-right font-bold text-breadpink-100">
-              {vaultTokenBalance &&
-              vaultTokenBalance.butter.status === "success"
-                ? formatBalance(
-                    Number(vaultTokenBalance.butter.value) / 10 ** 18,
-                    0
-                  )
-                : "-"}
-            </span>
-
-            {user.status === "CONNECTED" && (
-              <>
-                <p className="text-breadgray-rye dark:text-breadgray-grey">
-                  Total $BREAD baked
-                </p>
-
-                <span className="font-bold text-breadgray-grey100 dark:text-breadgray-white text-right">
-                  {BREAD && BREAD.status === "SUCCESS"
-                    ? formatBalance(parseFloat(BREAD.value), 2)
-                    : "-"}
-                </span>
-              </>
-            )}
-
-            {user.status === "CONNECTED" ? (
-              <>
-                <DividerWithText text="Future voting power" />
-
-                <p className="text-breadgray-rye dark:text-breadgray-grey">
-                  <div className="flex items-center gap-2">
-                    <span className="pb-1">Pending voting power</span>
-                    <Tooltip>
-                      The voting power you will receive in the next voting
-                      cycle.
-                    </Tooltip>
-                  </div>
-                </p>
-
-                <span className="text-right w-32 font-bold text-breadgray-rye dark:text-breadgray-grey">
-                  <PendingVotingPowerDisplay user={user} />
-                </span>
-              </>
-            ) : (
-              <></>
-            )}
-
-            {user.status === "CONNECTED" ? (
-              <></>
-            ) : (
-              <div className="col-span-2 pt-3">
-                <AccountMenu size="large" fullWidth>
-                  Connect
-                </AccountMenu>
+            {/* voting power grid */}
+            <div className="w-full grid grid-cols-[repeat(2, max-content)] gap-3">
+              <DividerWithText text="Breakdown" />
+
+              <p className="text-breadgray-rye dark:text-breadgray-grey">
+                Voting power from locked LP
+              </p>
+
+              <span className="font-bold text-breadgray-grey100 dark:text-breadgray-white text-right">
+                {votingPower && votingPower.butteredBread.status === "success"
+                  ? formatBalance(
+                      Number(votingPower.butteredBread.value) / 10 ** 18,
+                      1
+                    )
+                  : "-"}
+              </span>
+
+              <p className="text-breadgray-rye dark:text-breadgray-grey">
+                Voting power from $BREAD
+              </p>
+              <span className="text-right font-bold text-breadgray-grey100 dark:text-breadgray-white">
+                {votingPower && votingPower.bread.status === "success"
+                  ? formatBalance(Number(votingPower.bread.value) / 10 ** 18, 1)
+                  : "-"}
+              </span>
+              <DividerWithText text="Source(s)" />
+
+              <p className="text-breadgray-rye dark:text-breadgray-grey">
+                Total locked LP tokens
+              </p>
+
+              <span className="text-right font-bold text-breadpink-100">
+                {vaultTokenBalance &&
+                vaultTokenBalance.butter.status === "success"
+                  ? formatBalance(
+                      Number(vaultTokenBalance.butter.value) / 10 ** 18,
+                      0
+                    )
+                  : "-"}
+              </span>
+
+              {user.status === "CONNECTED" && (
+                <>
+                  <p className="text-breadgray-rye dark:text-breadgray-grey">
+                    Total $BREAD baked
+                  </p>
+
+                  <span className="font-bold text-breadgray-grey100 dark:text-breadgray-white text-right">
+                    {BREAD && BREAD.status === "SUCCESS"
+                      ? formatBalance(parseFloat(BREAD.value), 2)
+                      : "-"}
+                  </span>
+                </>
+              )}
+
+              {user.status === "CONNECTED" ? (
+                <>
+                  <DividerWithText text="Future voting power" />
+
+                  <p className="text-breadgray-rye dark:text-breadgray-grey">
+                    <div className="flex items-center gap-2">
+                      <span className="pb-1">Pending voting power</span>
+                      <Tooltip>
+                        The voting power you will receive in the next voting
+                        cycle.
+                      </Tooltip>
+                    </div>
+                  </p>
+
+                  <span className="text-right w-27 font-bold text-breadgray-rye dark:text-breadgray-grey">
+                    <PendingVotingPowerDisplay user={user} />
+                  </span>
+                </>
+              ) : (
+                <></>
+              )}
+
+              {user.status === "CONNECTED" ? (
+                <></>
+              ) : (
+                <div className="col-span-2 pt-3">
+                  <AccountMenu size="large" fullWidth>
+                    Connect
+                  </AccountMenu>
+                </div>
+              )}
+            </div>
+            <a
+              className="flex items-center gap-2 text-sm font-medium pt-4 text-breadgray-grey100 hover:text-breadpink-shaded dark:text-breadgray-ultra-white"
+              href="https://breadchain.notion.site/BREAD-Voting-Power-UI-0f2d350320b94e4ba9aeec2ef6fdcb84"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              How does this work?
+              <div className="text-breadpink-shaded">
+                <LinkIcon />
               </div>
-            )}
+            </a>
           </div>
-          <a
-            className="flex items-center gap-2 text-sm font-medium pt-4 text-breadgray-grey100 hover:text-breadpink-shaded dark:text-breadgray-ultra-white"
-            href="https://breadchain.notion.site/BREAD-Voting-Power-UI-0f2d350320b94e4ba9aeec2ef6fdcb84"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            How does this work?
-            <div className="text-breadpink-shaded">
-              <LinkIcon />
-            </div>
-          </a>
-        </div>
-      </CardBox>
+        </CardBox>
+      </div>
     </div>
   );
 }