style governance delegate

components/governance/GovernanceDelegate.tsx

@@ -35,14 +35,14 @@ const GovernanceDelegate = () => {
     }
   }, [selectedDelegatePk])
 
-  return (
-    <div>
-      <p>{t('select-delegate')}</p>
+  return delegates.length ? (
+    <div className="flex items-center">
+      <p className="mr-2">{t('delegate')}</p>
       <Select
         value={
           currentDelegate
             ? abbreviateAddress(new PublicKey(currentDelegate))
-            : t('use-own-wallet')
+            : t('none')
         }
         onChange={(selected) => {
           setSelectedDelegatePk(selected)
@@ -51,7 +51,7 @@ const GovernanceDelegate = () => {
       >
         <Select.Option value={''}>
           <div className="flex w-full items-center justify-between">
-            {t('use-own-wallet')}
+            {t('none')}
           </div>
         </Select.Option>
         {delegates.map((x) => (
@@ -63,7 +63,7 @@ const GovernanceDelegate = () => {
         ))}
       </Select>
     </div>
-  )
+  ) : null
 }
 
 export default GovernanceDelegate

components/governance/Vote/ProposalCard.tsx

@@ -189,7 +189,7 @@ const ProposalCard = ({
               <ArrowTopRightOnSquareIcon className="mb-1 inline-block h-4 w-4 flex-shrink-0" />
             </a>
           </h2>
-          <p className="mb-2 md:mb-0">{description}</p>
+          <p className="mb-2 break-all md:mb-0">{description}</p>
         </div>
         <VoteCountdown
           proposal={proposal.account}

components/governance/Vote/Vote.tsx

@@ -61,9 +61,9 @@ const Vote = () => {
 
   return (
     <div>
-      <div className="mb-4 flex flex-wrap items-end justify-between">
-        <h1 className="mr-4">{t('active-proposals')}</h1>
-        <VotingPower></VotingPower>
+      <div className="mb-4 flex flex-col items-center justify-between sm:flex-row">
+        <h1 className="mb-3 sm:mr-4 sm:mb-0">{t('active-proposals')}</h1>
+        <VotingPower />
       </div>
       {loadingProposals || loadingRealm ? (
         <div className="space-y-3">

components/governance/Vote/VoteProgress.tsx

@@ -1,8 +1,5 @@
 import Tooltip from '@components/shared/Tooltip'
-import {
-  CheckCircleIcon,
-  InformationCircleIcon,
-} from '@heroicons/react/20/solid'
+import { CheckCircleIcon } from '@heroicons/react/20/solid'
 import { Governance, ProgramAccount, Proposal } from '@solana/spl-governance'
 import { RawMint } from '@solana/spl-token'
 import GovernanceStore from '@store/governanceStore'
@@ -55,9 +52,10 @@ const QuorumProgress = ({ governance, proposal, communityMint }: Props) => {
       <div className="flex items-center">
         <div className="w-full">
           <div className="flex items-center">
-            <p className="text-fgd-2 mb-0 mr-1.5">{t('approval-q')}</p>
             <Tooltip content={t('quorum-description')}>
-              <InformationCircleIcon className="text-fgd-2 h-5 w-5 cursor-help" />
+              <p className="tooltip-underline text-fgd-2 mb-0 mr-1.5">
+                {t('approval-q')}
+              </p>
             </Tooltip>
           </div>
           {typeof yesVoteProgress !== 'undefined' && yesVoteProgress < 100 ? (
@@ -70,7 +68,7 @@ const QuorumProgress = ({ governance, proposal, communityMint }: Props) => {
             } required`}</p>
           ) : (
             <div className="flex items-center">
-              <CheckCircleIcon className="text-green mr-1.5 h-5 w-5 flex-shrink-0" />
+              <CheckCircleIcon className="mr-1.5 h-4 w-4 flex-shrink-0 text-th-success" />
               <p className="text-fgd-1 mb-0 font-bold">
                 {t('required-approval-achieved')}
               </p>

components/governance/Vote/VotingPower.tsx

@@ -11,9 +11,9 @@ const VotingPower = () => {
 
   return (
     <p className="whitespace-no-wrap mb-0.5 mt-2 flex items-center">
-      <GovernanceDelegate></GovernanceDelegate>
-      <div className="ml-4 flex items-center">
-        {t('your-votes')}
+      <GovernanceDelegate />
+      <div className="ml-4 flex h-10 items-center rounded-full bg-th-bkg-2 px-4">
+        <span className="mr-1">{t('your-votes')}</span>
         <span className="font-mono text-th-fgd-2">
           {!loadingVoter
             ? fmtTokenAmount(voter.voteWeight, MANGO_MINT_DECIMALS)

public/locales/en/governance.json

@@ -2,6 +2,8 @@
     "list-token": "List Token",
     "cancel": "Cancel",
     "connect-wallet": "Connect Wallet",
+    "delegate": "Delegate",
+    "none": "None",
     "on-boarding-title": "Looks like currently connected wallet doesn't have any MNGO deposited inside realms",
     "on-boarding-description": "Before you continue. Deposit at least {{amount}} MNGO into",
     "on-boarding-deposit-info": "Your MNGO will be locked for the duration of the proposal.",

public/locales/es/governance.json

@@ -2,6 +2,8 @@
     "list-token": "List Token",
     "cancel": "Cancel",
     "connect-wallet": "Connect Wallet",
+    "delegate": "Delegate",
+    "none": "None",
     "on-boarding-title": "Looks like currently connected wallet doesn't have any MNGO deposited inside realms",
     "on-boarding-description": "Before you continue. Deposit at least {{amount}} MNGO into",
     "on-boarding-deposit-info": "Your MNGO will be locked for the duration of the proposal.",

public/locales/ru/governance.json

@@ -2,6 +2,8 @@
     "list-token": "List Token",
     "cancel": "Cancel",
     "connect-wallet": "Connect Wallet",
+    "delegate": "Delegate",
+    "none": "None",
     "on-boarding-title": "Looks like currently connected wallet doesn't have any MNGO deposited inside realms",
     "on-boarding-description": "Before you continue. Deposit at least {{amount}} MNGO into",
     "on-boarding-deposit-info": "Your MNGO will be locked for the duration of the proposal.",

public/locales/zh/governance.json

@@ -2,6 +2,8 @@
     "list-token": "List Token",
     "cancel": "Cancel",
     "connect-wallet": "Connect Wallet",
+    "delegate": "Delegate",
+    "none": "None",
     "on-boarding-title": "Looks like currently connected wallet doesn't have any MNGO deposited inside realms",
     "on-boarding-description": "Before you continue. Deposit at least {{amount}} MNGO into",
     "on-boarding-deposit-info": "Your MNGO will be locked for the duration of the proposal.",

public/locales/zh_tw/governance.json

@@ -2,6 +2,8 @@
     "list-token": "List Token",
     "cancel": "Cancel",
     "connect-wallet": "Connect Wallet",
+    "delegate": "Delegate",
+    "none": "None",
     "on-boarding-title": "Looks like currently connected wallet doesn't have any MNGO deposited inside realms",
     "on-boarding-description": "Before you continue. Deposit at least {{amount}} MNGO into",
     "on-boarding-deposit-info": "Your MNGO will be locked for the duration of the proposal.",