traumschule · traumschule · Nov 7, 2022 · Nov 7, 2022
diff --git a/packages/ui/src/accounts/components/StakeStep.tsx b/packages/ui/src/accounts/components/StakeStep.tsx
@@ -8,10 +8,8 @@ import { Account, LockType } from '@/accounts/types'
 import { CurrencyName } from '@/app/constants/currency'
 import { InputComponent, TokenInput } from '@/common/components/forms'
 import { getErrorMessage, hasError } from '@/common/components/forms/FieldError'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import { Row } from '@/common/components/Modal'
 import { RowGapBlock } from '@/common/components/page/PageContent'
-import { TooltipExternalLink } from '@/common/components/Tooltip'
 import { TextMedium, TokenValue } from '@/common/components/typography'
 import { formatTokenValue } from '@/common/model/formatters'
 import { VoteForCouncilEvent, VoteForCouncilMachineState } from '@/council/modals/VoteForCouncil/machine'

diff --git a/packages/ui/src/app/pages/Election/Election.tsx b/packages/ui/src/app/pages/Election/Election.tsx
@@ -4,12 +4,11 @@ import { useHistory } from 'react-router-dom'
 import { PageHeaderRow, PageHeaderWrapper, PageLayout } from '@/app/components/PageLayout'
 import { ButtonsGroup, CopyButtonTemplate } from '@/common/components/buttons'
 import { LinkIcon } from '@/common/components/icons'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import { Loading } from '@/common/components/Loading'
 import { MainPanel } from '@/common/components/page/PageContent'
 import { PageTitle } from '@/common/components/page/PageTitle'
 import { BlockDurationStatistics, StatisticItem, Statistics } from '@/common/components/statistics'
-import { TextHuge, TextMedium } from '@/common/components/typography'
+import { TextHuge } from '@/common/components/typography'
 import { camelCaseToText } from '@/common/helpers'
 import { useRefetchQueries } from '@/common/hooks/useRefetchQueries'
 import { MILLISECONDS_PER_BLOCK } from '@/common/model/formatters'

diff --git a/packages/ui/src/bounty/modals/ContributeFundsModal/ContributeFundsModal.tsx b/packages/ui/src/bounty/modals/ContributeFundsModal/ContributeFundsModal.tsx
@@ -20,7 +20,6 @@ import { SuccessTransactionModal } from '@/bounty/modals/SuccessTransactionModal
 import { isFundingLimited } from '@/bounty/types/Bounty'
 import { Input, InputComponent, TokenInput } from '@/common/components/forms'
 import { getErrorMessage, hasError } from '@/common/components/forms/FieldError'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import {
   AmountButton,
   AmountButtons,

diff --git a/packages/ui/src/common/components/Tooltip/Tooltip.tsx b/packages/ui/src/common/components/Tooltip/Tooltip.tsx
@@ -4,11 +4,12 @@ import { usePopper } from 'react-popper'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 
+import { TextMedium } from '@/common/components/typography'
+
 import { BorderRad, Colors, Fonts, Transitions, ZIndex } from '../../constants'
 import { LinkSymbol, LinkSymbolStyle } from '../icons/symbols'
 
 import { DefaultTooltip } from './TooltipDefault'
-import { TextMedium } from '@/common/components/typography'
 
 export interface TooltipProps extends Omit<TooltipPopupProps, 'popUpHandlers' | 'position'> {
   absolute?: boolean
@@ -130,17 +131,21 @@ export const Tooltip = ({
                 forBig={forBig}
               >
                 {tooltipTitle && <TooltipPopupTitle>{tooltipTitle}</TooltipPopupTitle>}
-                <TooltipText>{tooltipText}</TooltipText>
-                {tooltipLinkURL &&
-                  (isExternalLink() ? (
-                    <TooltipExternalLink href={tooltipLinkURL} target="_blank">
-                      <TextMedium>{tooltipLinkText ?? 'Link'}</TextMedium> <LinkSymbol />
-                    </TooltipExternalLink>
-                  ) : (
-                    <TooltipLink to={tooltipLinkURL} target="_blank">
-                      <TextMedium>{tooltipLinkText ?? 'Link'}</TextMedium> <LinkSymbol />
-                    </TooltipLink>
-                  ))}
+                <TooltipText>
+                  {tooltipText}
+                  {tooltipLinkURL &&
+                    (isExternalLink() ? (
+                      <TooltipExternalLink href={tooltipLinkURL} target="_blank">
+                        <TextMedium>{tooltipLinkText ?? 'Link'}</TextMedium>
+                        <LinkSymbol />
+                      </TooltipExternalLink>
+                    ) : (
+                      <TooltipLink to={tooltipLinkURL} target="_blank">
+                        <TextMedium>{tooltipLinkText ?? 'Link'}</TextMedium>
+                        <LinkSymbol />
+                      </TooltipLink>
+                    ))}
+                </TooltipText>
               </TooltipPopupContainer>,
               document.body
             ))}

diff --git a/packages/ui/src/common/components/forms/InputComponent.tsx b/packages/ui/src/common/components/forms/InputComponent.tsx
@@ -28,7 +28,7 @@ export type InputComponentProps = InputProps &
     message?: React.ReactElement | string
     tooltipText?: React.ReactElement | string
     tooltipTitle?: string
-    tooltipLinkText?: React.ReactElement
+    tooltipLinkText?: React.ReactElement | string
     tooltipLinkURL?: string
     className?: string
     children: React.ReactNode

diff --git a/packages/ui/src/common/components/icons/symbols/LinkSymbol.tsx b/packages/ui/src/common/components/icons/symbols/LinkSymbol.tsx
@@ -15,10 +15,12 @@ export function LinkSymbol({ className, color }: SymbolProps) {
       className={className}
     >
       <path
+        className="blackPart"
         d="M1.1001 3.99998L2.0001 3.09998H12.8001V4.89998H2.9001V21.1H19.1001V11.2H20.9001V22L20.0001 22.9H2.0001L1.1001 22V3.99998Z"
         fill={color ?? Colors.Black[900]}
       />
       <path
+        className="primaryPart"
         d="M15.4999 1.09998H21.9999L22.8999 1.99998V8.49998H21.0999V4.17277L10.6363 14.6364L9.36353 13.3636L19.8271 2.89998H15.4999V1.09998Z"
         fill={color ?? Colors.Blue[500]}
       />

diff --git a/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipFormModal.tsx b/packages/ui/src/memberships/modals/BuyMembershipModal/BuyMembershipFormModal.tsx
@@ -21,7 +21,6 @@ import {
   ToggleCheckbox,
 } from '@/common/components/forms'
 import { Arrow } from '@/common/components/icons'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import { Loading } from '@/common/components/Loading'
 import {
   ModalFooter,
@@ -33,7 +32,6 @@ import {
   ScrolledModalContainer,
   TransactionInfoContainer,
 } from '@/common/components/Modal'
-import { TooltipExternalLink } from '@/common/components/Tooltip'
 import { TransactionInfo } from '@/common/components/TransactionInfo'
 import { TextMedium } from '@/common/components/typography'
 import { definedValues } from '@/common/utils'

diff --git a/packages/ui/src/memberships/modals/InviteMemberModal/InviteMemberFormModal.tsx b/packages/ui/src/memberships/modals/InviteMemberModal/InviteMemberFormModal.tsx
@@ -4,7 +4,6 @@ import * as Yup from 'yup'
 
 import { ButtonPrimary } from '@/common/components/buttons'
 import { InputComponent, InputText, InputTextarea } from '@/common/components/forms'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import { Loading } from '@/common/components/Loading'
 import {
   ModalFooter,
@@ -14,7 +13,6 @@ import {
   ScrolledModalContainer,
   Row,
 } from '@/common/components/Modal'
-import { TooltipExternalLink } from '@/common/components/Tooltip'
 import { TextMedium } from '@/common/components/typography'
 import { useKeyring } from '@/common/hooks/useKeyring'
 import { useYupValidationResolver } from '@/common/utils/validation'

diff --git a/packages/ui/src/proposals/components/ProposalList/ProposalListItem.tsx b/packages/ui/src/proposals/components/ProposalList/ProposalListItem.tsx
@@ -5,12 +5,11 @@ import styled from 'styled-components'
 import { BadgeStatus } from '@/common/components/BadgeStatus'
 import { CopyButtonTemplate } from '@/common/components/buttons'
 import { LinkIcon } from '@/common/components/icons'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import { TableListItem } from '@/common/components/List'
 import { GhostRouterLink } from '@/common/components/RouterLink'
 import { Tooltip, TooltipDefault } from '@/common/components/Tooltip'
 import { Subscription } from '@/common/components/typography/Subscription'
-import { TextSmall, TextMedium } from '@/common/components/typography/Text'
+import { TextSmall } from '@/common/components/typography/Text'
 import { Colors, Overflow } from '@/common/constants'
 import { camelCaseToText } from '@/common/helpers'
 import { toDDMMYY } from '@/common/utils/dates'

diff --git a/...s/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetReferralCut.tsx b/...s/ui/src/proposals/modals/AddNewProposal/components/SpecificParameters/SetReferralCut.tsx
@@ -2,10 +2,8 @@ import React from 'react'
 
 import { useApi } from '@/api/hooks/useApi'
 import { InputComponent, InputNumber } from '@/common/components/forms'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import { Row } from '@/common/components/Modal'
 import { RowGapBlock } from '@/common/components/page/PageContent'
-import { TooltipExternalLink } from '@/common/components/Tooltip'
 import { TextMedium, TokenValue } from '@/common/components/typography'
 import { useFirstObservableValue } from '@/common/hooks/useFirstObservableValue'
 

diff --git a/packages/ui/src/proposals/modals/AddNewProposal/components/StakingAccountStep.tsx b/packages/ui/src/proposals/modals/AddNewProposal/components/StakingAccountStep.tsx
@@ -3,10 +3,8 @@ import React from 'react'
 
 import { SelectStakingAccount } from '@/accounts/components/SelectAccount'
 import { InputComponent } from '@/common/components/forms'
-import { LinkSymbol } from '@/common/components/icons/symbols'
 import { Row } from '@/common/components/Modal'
 import { RowGapBlock } from '@/common/components/page/PageContent'
-import { TooltipExternalLink } from '@/common/components/Tooltip'
 import { TextMedium, TokenValue } from '@/common/components/typography'
 
 interface StakingAccountStepProps {
@@ -36,7 +34,7 @@ export const StakingAccountStep = ({ requiredStake }: StakingAccountStepProps) =
             label="Select account for Staking"
             tooltipText="The budget is the root resource pool for all token minting in the working group, and the size of the pool is denoted by budget."
             tooltipLinkURL="https://joystream.gitbook.io/joystream-handbook/key-concepts/staking#locks-1"
-	    tooltipLinkText="Learn more"
+            tooltipLinkText="Learn more"
             inputSize="l"
             required
             name="stakingAccount.stakingAccount"