Fix tooltips for Election Round and Minimal Stake (#3946)

* fix: tooltips for Election Round and Minimal Stake * fix: remove inline link and update OpeningDetails
Joystream · Dec 12, 2022 · 0ece6ce · 0ece6ce · vercel · Dec 12, 2022
1 parent 3272196
commit 0ece6ce
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpening.tsx b/packages/ui/src/app/pages/WorkingGroups/WorkingGroupsOpening.tsx
@@ -156,7 +156,9 @@ export const WorkingGroupOpening = () => {
               />
               <TokenValueStat
                 title="Minimal stake"
-                tooltipText="Minimal amount of tokens required to be staked for any applicant to such role."
+                tooltipText="Minimum tokens free of rivalrous locks required as application stake to this role."
+                tooltipLinkText="Learn more"
+                tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/working-groups#staking"
                 value={opening.stake}
               />
               <ApplicationStats applicants={opening.applicants} hiring={opening.hiring} status={opening.status} />

diff --git a/packages/ui/src/common/components/Tooltip/Tooltip.tsx b/packages/ui/src/common/components/Tooltip/Tooltip.tsx
@@ -301,13 +301,16 @@ export const TooltipLink = styled(Link)<{ to: string; target: string }>`
   }
 `
 
-export const TooltipExternalLink = styled.a<{ href: string | undefined; target: string }>`
+export const TooltipExternalLink = styled.a<{
+  href: string | undefined
+  target: string
+}>`
   display: grid;
   grid-auto-flow: column;
   grid-column-gap: 8px;
+  margin-top: 10px;
   align-items: center;
   width: fit-content;
-  margin-top: 10px;
   font-size: 12px;
   line-height: 18px;
   font-weight: 400;

diff --git a/packages/ui/src/council/components/election/pastElection/PastElectionStats.tsx b/packages/ui/src/council/components/election/pastElection/PastElectionStats.tsx
@@ -24,7 +24,12 @@ export const PastElectionStats = ({
     <StatisticItem title="Ended at">
       {finishedAtBlock ? formatDateString(finishedAtBlock.timestamp) : '-'}
     </StatisticItem>
-    <StatisticItem title="Election round" tooltipText="Lorem ipsum...">
+    <StatisticItem
+      title="Election round"
+      tooltipText="Ordinal number of the election round since the genesis block of the network."
+      tooltipLinkText="Learn more"
+      tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/council#election"
+    >
       <TextHuge bold>{cycleId} round</TextHuge>
     </StatisticItem>
     <NumericValueStat title="Total candidates" value={totalCandidates} />

diff --git a/packages/ui/src/working-groups/components/OpeningsList/Opening/OpeningDetails.tsx b/packages/ui/src/working-groups/components/OpeningsList/Opening/OpeningDetails.tsx
@@ -1,9 +1,11 @@
 import React from 'react'
+import styled from 'styled-components'
 
 import { ButtonsGroup } from '@/common/components/buttons'
 import { LinkButtonGhost } from '@/common/components/buttons/LinkButtons'
 import { TransactionButton } from '@/common/components/buttons/TransactionButton'
 import { StatiscticContentColumn, Statistics, StatsBlock, MultiColumnsStatistic } from '@/common/components/statistics'
+import { Tooltip, TooltipDefault } from '@/common/components/Tooltip'
 import { TextBig, TokenValue } from '@/common/components/typography'
 import { Subscription } from '@/common/components/typography/Subscription'
 import { isInFuture, nameMapping } from '@/common/helpers'
@@ -66,7 +68,16 @@ export const OpeningDetails = ({ opening, onClick, past }: OpeningListItemProps)
             <TextBig>
               <TokenValue value={opening.stake} />
             </TextBig>
-            <Subscription>Minimum Stake Required</Subscription>
+            <MinStake>
+              Minimum Stake Required{' '}
+              <Tooltip
+                tooltipText="Minimum tokens free of rivalrous locks required as application stake to this role."
+                tooltipLinkText="Learn more"
+                tooltipLinkURL="https://joystream.gitbook.io/testnet-workspace/system/working-groups#staking"
+              >
+                <TooltipDefault />
+              </Tooltip>
+            </MinStake>
           </StatsBlock>
         </Statistics>
         <ButtonsGroup align="right">
@@ -87,3 +98,9 @@ export const OpeningDetails = ({ opening, onClick, past }: OpeningListItemProps)
     </OpenedContainer>
   )
 }
+
+const MinStake = styled(Subscription)`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`