Development

src/app/governance/GovernancePage.tsx

@@ -108,8 +108,10 @@ export function GovernancePage() {
     <section className="grow max-w-[44rem] lg:max-w-[67rem] w-full m-auto pb-16">
       <div className="max-w-96 m-auto sm:max-w-none grid w-full grid-cols-12 governance-rows p-4 md:p-8 gap-y-8 sm:gap-8 lg:gap-y-0 ">
         <div className="col-span-12 lg:col-span-8 row-start-1 row-span-1">
-          <h3 className="text-2xl font-bold">Bread Governance</h3>
-          <p className="pt-4 text-lg max-w-xl">
+          <h3 className="text-2xl font-bold dark:text-breadgray-ultra-white">
+            Bread Governance
+          </h3>
+          <p className="pt-4 text-lg max-w-xl dark:text-breadgray-light-grey">
             Distribute your voting power across the various projects in the
             Breadchain Network to influence how much yield is given to each. The
             actual distribution will be made at the end of the month based on

src/app/governance/components/CastVote.tsx

@@ -55,7 +55,7 @@ export function CastVotePanel({
     );
 
   return (
-    <div>
+    <div className="pt-2">
       {user.status === "CONNECTED" && (
         <CastVote
           vote={userVote}

src/app/governance/components/InfoCallout.tsx

@@ -2,7 +2,12 @@ import Image from "next/image";
 
 export function InfoCallout() {
   return (
-    <div className="grow relative rounded-lg overflow-clip dark:border dark:border-breadgray-toast">
+    <a
+      className="grow relative rounded-lg overflow-clip dark:border dark:border-breadgray-toast dark:hover:border-breadgray-light-grey transform transition-all"
+      href="https://www.notion.so/breadchain/Understanding-BREAD-Voting-Power-0f2d350320b94e4ba9aeec2ef6fdcb84"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       <div className="absolute top-0 left-0 w-full h-full ">
         <Image
           className="h-full object-cover"
@@ -13,13 +18,9 @@ export function InfoCallout() {
         />
       </div>
       <div className="h-full flex flex-col justify-center backdrop-blur-sm bg-white dark:bg-black bg-opacity-60 dark:bg-opacity-80 p-4 py-16 lg:py-0 text-center">
-        <a
-          href="https://www.notion.so/breadchain/Understanding-BREAD-Voting-Power-0f2d350320b94e4ba9aeec2ef6fdcb84"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="absolute top-4 right-4 w-6 h-6"
-        >
+        <div>
           <svg
+            className="absolute top-4 right-4 w-6 h-6"
             viewBox="0 0 24 25"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
@@ -29,14 +30,14 @@ export function InfoCallout() {
               fill="#E873D3"
             />
           </svg>
-        </a>
+        </div>
         <div className="flex flex-col gap-2">
           <h3 className="font-semibold text-2xl">What the BREAD is this?</h3>
           <p>
             Discover more about voting power, governance & BREAD distribution.
           </p>
         </div>
       </div>
-    </div>
+    </a>
   );
 }

src/app/governance/components/ProjectRow.tsx

@@ -50,10 +50,10 @@ export function ProjectRow({
             />
           </div>
           <div>
-            <div className="col-start-2 col-span-11 row-start-1 row-span-1 flex items-center font-bold sm:text-xl sm:font-normal">
+            <div className="col-start-2 col-span-11 row-start-1 row-span-1 flex items-center font-bold sm:text-xl sm:font-normal dark:text-breadgray-ultra-white">
               {name}
             </div>
-            <div className="col-start-1 sm:col-start-2 sm:col-span-11 col-span-12 max-w-xs">
+            <div className="col-start-1 sm:col-start-2 sm:col-span-11 col-span-12 max-w-xs dark:text-breadgray-grey">
               {description}
             </div>
           </div>

src/app/governance/components/VotingPower.tsx

@@ -31,20 +31,84 @@ export function VotingPower({
     <section className="sm:pt-8 sm:pb-4 flex flex-col sm:flex-row">
       <div className="grow">
         <div className="flex gap-2 items-center">
-          <span className="size-5">
-            <PowerIcon />
+          <span className="size-6 flex">
+            <svg
+              className="w-full h-full"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                cx="12"
+                cy="12"
+                r="12"
+                className="fill-white dark:fill-breadgray-charcoal"
+              />
+              <g filter="url(#filter0_d_5871_31200)">
+                <path
+                  fillRule="evenodd"
+                  clipRule="evenodd"
+                  d="M9.99902 5.00012H8.99805V7.00012V9.00012V11.0001H9.99902V11.0001H11.999V9.00014H10.998V9.00012V9.00009H11.999V7.00012V7.00009V5.00012H10.998H9.99902ZM4.99902 7.00009H5.99756H6.99902H7.99756V9.00009H6.99902H5.99756H4.99902V7.00009ZM7.99756 9.00014H6.99902H5.99805V9.00012H3.99805V11.0001H4.99902V11.0001H5.99756H6.99902H7.99756V9.00014ZM6.99854 12.0001H4.99902V14.0001H6.99854V14.0001H5.99756V16.0001H7.99707V17.0001V17.0001V18.0001V18.0002V19.0001V20.0002H9.99707V19.0001V18.0002V18.0001V17.0001V17.0001V16.0001H9.99902V17.0001V18.0001V18.0002V19.0001V20.0002H11.9985H11.999H12.9971H13.9985H14.9971V19.0001V18.0002V17.0001H15.998V16.0001H16.999V15.0002H17.9976V13.0002H15.998V13.0001H16.9985H16.999H18.9985V11.0001V11.0001V9.00014H16.999H16.9985H14.999V11.0001V11.0001V12.0001H13.998V13.0002H12.9971V14.0001H11.9985V16.0001H10.998V14.0001V14.0001H11.999V12.0001H9.99902V12.0001H8.99854V12.0001H6.99902H6.99854ZM3.99805 12.0001H4.99805V13.0001H3.99805V12.0001ZM14.9971 14.0001V15.0001H14.999V14.0001H15.9976V14.0001H14.9971ZM12.9971 9.00014H14.9971V11.0001H12.9971V9.00014ZM12.9971 5.00012H13.998H14.9971H15.998V6.00012V7.00012V8.00012H13.998V8.00011H12.9971V7.00012V6.00011V5.00012Z"
+                  fill="url(#paint0_linear_5871_31200)"
+                />
+              </g>
+              <defs>
+                <filter
+                  id="filter0_d_5871_31200"
+                  x="1.99805"
+                  y="4.00012"
+                  width="19"
+                  height="19"
+                  filterUnits="userSpaceOnUse"
+                  color-interpolation-filters="sRGB"
+                >
+                  <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                  <feColorMatrix
+                    in="SourceAlpha"
+                    type="matrix"
+                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                    result="hardAlpha"
+                  />
+                  <feOffset dy="1" />
+                  <feGaussianBlur stdDeviation="1" />
+                  <feComposite in2="hardAlpha" operator="out" />
+                  <feColorMatrix
+                    type="matrix"
+                    values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"
+                  />
+                  <feBlend
+                    mode="normal"
+                    in2="BackgroundImageFix"
+                    result="effect1_dropShadow_5871_31200"
+                  />
+                  <feBlend
+                    mode="normal"
+                    in="SourceGraphic"
+                    in2="effect1_dropShadow_5871_31200"
+                    result="shape"
+                  />
+                </filter>
+                <linearGradient
+                  id="paint0_linear_5871_31200"
+                  x1="6.06061"
+                  y1="16.8126"
+                  x2="16.7482"
+                  y2="7.81231"
+                  gradientUnits="userSpaceOnUse"
+                >
+                  <stop stop-color="#D04EC5" />
+                  <stop offset="1" stop-color="#ED7BC7" />
+                </linearGradient>
+              </defs>
+            </svg>
           </span>
           <span className="font-bold text-2xl leading-none">
             Voting power:{" "}
           </span>
           <span className="font-medium text-xl">
-            {user.status === "NOT_CONNECTED"
-              ? null
-              : // <span className="text-base text-breadgray-grey">
-                //   connect wallet
-                // </span>
-                userVotingPower &&
-                formatBalance(userVotingPower / cycleLength.data, 2)}
+            {user.status === "CONNECTED" &&
+              userVotingPower &&
+              formatBalance(userVotingPower / cycleLength.data, 2)}
           </span>
         </div>
         <p className="max-w-96 dark:text-breadgray-light-grey pt-2">
@@ -61,9 +125,9 @@ export function VotingPower({
           userVotingPower !== null &&
           userVotingPower < minRequiredVotingPower ? (
           <NotEnoughPower />
-        ) : (
+        ) : user.status === "CONNECTED" ? (
           <DistributeEqually distributeEqually={distributeEqually} />
-        )}
+        ) : null}
       </div>
     </section>
   );
@@ -125,10 +189,10 @@ function DistributeEqually({
 }) {
   return (
     <button
-      className="dis-equally-button-bg text-white dark:text-breadgray-grey100 rounded-xl p-2.5 flex items-center gap-4"
+      className="dis-equally-button-bg text-white dark:text-breadgray-grey100 rounded-xl p-2.5 flex items-center gap-3 border-2 border-breadgray-light-grey hover:border-breadgray-grey dark:border-breadgray-grey100 dark:hover:border-breadgray-ultra-white transform transition-all"
       onClick={distributeEqually}
     >
-      <div className="w-6 h-6 flex items-center text-white">
+      <div className="w-5 h-5 flex items-center text-white">
         <svg
           className="fill-current"
           viewBox="0 0 22 20"
@@ -142,7 +206,7 @@ function DistributeEqually({
         </svg>
       </div>
 
-      <span className="text-xl font-bold">Distribute Equally</span>
+      <span className="text-lg font-bold">Distribute Equally</span>
     </button>
   );
 }

src/app/governance/useCurrentVotes.ts

@@ -33,7 +33,7 @@ export function useCurrentVotes(lastClaimedBlockNumber: bigint | null) {
         fromBlock: lastClaimedBlockNumber || BigInt(0),
         toBlock: "latest",
       });
-
+      console.log(logs[0]);
       const parsed = (logs as unknown as Array<VoteLogData>).map(parseVoteLog);
       return parsed;
     },