From 6f4b40f2891324f708b1c655ac5dba6020df5da0 Mon Sep 17 00:00:00 2001
From: Matias <mantitaaa89@gmail.com>
Date: Tue, 12 Nov 2024 21:34:22 -0300
Subject: [PATCH] enhance manage support overview section

---
 apps/web/components/ProposalCard.tsx |  2 +-
 apps/web/components/Proposals.tsx    | 53 +++++++++++-----------------
 2 files changed, 21 insertions(+), 34 deletions(-)

diff --git a/apps/web/components/ProposalCard.tsx b/apps/web/components/ProposalCard.tsx
index 7e03dc3c6..a6b6e608e 100644
--- a/apps/web/components/ProposalCard.tsx
+++ b/apps/web/components/ProposalCard.tsx
@@ -256,7 +256,7 @@ export function ProposalCard({
                               </span>
                               /{memberPoolWeight}%{" "}
                               <span className="text-neutral-soft-content text-sm">
-                                ({inputValue}% of your total support)
+                                ({inputValue}% of your voting weight)
                               </span>
                             </p>
                             {/* <p className="text-primary-content">Support</p> */}
diff --git a/apps/web/components/Proposals.tsx b/apps/web/components/Proposals.tsx
index 393d807fe..3c9b53cdb 100644
--- a/apps/web/components/Proposals.tsx
+++ b/apps/web/components/Proposals.tsx
@@ -447,21 +447,14 @@ export function Proposals({
     },
     {
       id: 2,
-      name: "Voting weight used",
-      stat: calcPoolWeightUsed(memberSupportedProposalsPct),
-      className: poolWeightClassName,
-      info: "Indicates the portion of your pool weight currently allocated in proposals.",
-    },
-    {
-      id: 3,
-      name: "Total support",
+      name: "Your voting weight used",
       stat: memberSupportedProposalsPct,
       className: `${
         memberSupportedProposalsPct >= 100 ?
           "bg-secondary-content text-secondary-soft border-secondary-content"
         : "bg-primary-content text-primary-soft border-primary-content"
       }`,
-      info: "Reflects the percentage of your pool weight supporting proposals.",
+      info: "Is the percentage of your pool weight supporting proposals.",
     },
   ];
 
@@ -653,34 +646,28 @@ function UserAllocationStats({ stats }: { stats: Stats[] }) {
   return (
     <div className="mt-10">
       <h3>Support Overview</h3>
-      <div className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+      <div className="mt-5 grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-2">
         {stats.map((stat) => (
-          <div
-            key={`stat_${stat.id}`}
-            className="section-layout sm:px-6 sm:pt-6"
-          >
-            <div>
-              <div
-                className={`radial-progress absolute rounded-full border-4 border-neutral transition-all duration-300 ease-in-out ${stat.className}`}
-                style={{
-                  // @ts-ignore
-                  "--value": stat.stat,
-                  "--size": "4rem",
-                  "--thickness": "0.35rem",
-                }}
-                role="progressbar"
-              >
-                <span className="text-xs">{stat.stat} %</span>
-              </div>
-
+          <div key={`stat_${stat.id}`} className="section-layout flex gap-4">
+            <div
+              className={`radial-progress rounded-full border-4 border-neutral transition-all duration-300 ease-in-out ${stat.className}`}
+              style={{
+                // @ts-ignore
+                "--value": stat.stat,
+                "--size": "4.2rem",
+                "--thickness": "0.35rem",
+              }}
+              role="progressbar"
+            >
+              <span className="text-xs">{stat.stat} %</span>
+            </div>
+            <div className="flex flex-col items-start justify-center">
               <InfoWrapper tooltip={stat.info}>
-                <p className="ml-20">
+                <h5>
                   <TooltipIfOverflow>{stat.name}</TooltipIfOverflow>
-                </p>
+                </h5>
               </InfoWrapper>
-            </div>
-            <div className="ml-20">
-              <p className="text-2xl font-semibold">{stat.stat} %</p>
+              <p className="text-2xl font-semibold text-right">{stat.stat} %</p>
             </div>
           </div>
         ))}