add support label

galacticcouncil · Dec 23, 2024 · 783e1c1 · 783e1c1
1 parent 5e2ea3a
commit 783e1c1
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 12 deletions.
diff --git a/src/components/InfoTooltip/InfoTooltip.tsx b/src/components/InfoTooltip/InfoTooltip.tsx
@@ -9,6 +9,7 @@ type InfoTooltipProps = {
   children?: ReactNode
   type?: "default" | "black"
   side?: Tooltip.TooltipContentProps["side"]
+  align?: Tooltip.TooltipContentProps["align"]
   asChild?: boolean
   preventDefault?: boolean
 }
@@ -18,6 +19,7 @@ export function InfoTooltip({
   children,
   type = "default",
   side = "bottom",
+  align = "start",
   asChild = false,
   preventDefault,
 }: InfoTooltipProps) {
@@ -49,7 +51,7 @@ export function InfoTooltip({
         <SContent
           type={type}
           side={side}
-          align="start"
+          align={align}
           sideOffset={3}
           alignOffset={-10}
           collisionPadding={12}

diff --git a/src/components/ReferendumCard/Referenda.tsx b/src/components/ReferendumCard/Referenda.tsx
@@ -25,6 +25,7 @@ import {
   useSupportThreshold,
 } from "./Referenda.utils"
 import Skeleton from "react-loading-skeleton"
+import { InfoTooltip } from "components/InfoTooltip/InfoTooltip"
 
 export const OpenGovReferenda = ({
   id,
@@ -168,17 +169,24 @@ export const OpenGovReferenda = ({
 
         <Spacer size={16} />
         <div sx={{ flex: "column", gap: 8 }}>
-          <SProgressBarContainer>
-            <div css={{ position: "relative" }}>
-              <LinearProgress
-                size="small"
-                withoutLabel
-                percent={barPercentage}
-                colorCustom="#B3D7FA"
-              />
-              <SThresholdLine percentage={markPercentage.toString()} />
-            </div>
-          </SProgressBarContainer>
+          <InfoTooltip
+            text={t("referenda.support", {
+              value: t("value.percentage", { value: barPercentage }),
+            })}
+            align="center"
+          >
+            <SProgressBarContainer>
+              <div css={{ position: "relative" }}>
+                <LinearProgress
+                  size="small"
+                  withoutLabel
+                  percent={barPercentage}
+                  colorCustom="#B3D7FA"
+                />
+                <SThresholdLine percentage={markPercentage.toString()} />
+              </div>
+            </SProgressBarContainer>
+          </InfoTooltip>
           <div sx={{ flex: "row", justify: "space-between" }}>
             <div sx={{ flex: "row", gap: 2 }}>
               <Text fs={11} css={{ color: "#DFB1F3" }}>

diff --git a/src/i18n/locales/en/translations.json b/src/i18n/locales/en/translations.json
@@ -1244,6 +1244,7 @@
   "claimingRange.modal.description1": "After joining a farm, a portion of the accumulated rewards is locked. These rewards unlock over time as you remain in the farm and follow loyalty factor curve",
   "claimingRange.modal.description2": "Claiming forfeits the locked part of the rewards. Use this setting to tweak your preference over claiming faster or losing less rewards (default). This allows you to compound your rewards with ease.",
   "referenda.ongoing": "Ongoing Referenda",
+  "referenda.support": "Support: {{value}}",
   "referenda.empty.title": "No Referenda",
   "referenda.empty.desc.first": "Nothing here.",
   "referenda.empty.desc.second": " Currently there are no ongoing referenda to vote in.",