diff --git a/src/common/enums/externalLinks.ts b/src/common/enums/externalLinks.ts index 9a7ad45c07..4a82e7d790 100644 --- a/src/common/enums/externalLinks.ts +++ b/src/common/enums/externalLinks.ts @@ -63,10 +63,10 @@ export const GUIDE_LINKS = { }, PWA: { zh_hant: - 'https://matters.news/zh-Hant/@1ampa55ag3/24439-guidance-%E5%A6%82%E4%BD%95%E8%AE%A9%E4%BD%A0%E7%9A%84matters%E4%B9%8B%E6%97%85%E6%9B%B4%E4%BE%BF%E6%8D%B7-bafyreiayiuxi4qc2a7qpgjp3fe42wmaoppqykckcvtq4hiukl5pgs3dn2m', + 'https://matters.news/@hi176/342215-%E6%8C%87%E5%8D%97-%E6%83%B3%E5%9C%A8%E6%89%8B%E6%A9%9F%E4%B8%8A%E6%96%B9%E4%BE%BF%E5%9C%B0%E4%BD%BF%E7%94%A8-matters-%E9%80%99%E8%A3%A1%E6%9C%89%E4%B8%80%E5%80%8B%E5%BE%88%E5%A5%BD%E7%9A%84%E6%96%B9%E6%B3%95-bafyreiclzb52uisucbf7gch2k2ll7mcc6kiivaxxqdqo7drnx5oj4sqvu4', zh_hans: - 'https://matters.news/@1ampa55ag3/24439-guidance-%E5%A6%82%E4%BD%95%E8%AE%A9%E4%BD%A0%E7%9A%84matters%E4%B9%8B%E6%97%85%E6%9B%B4%E4%BE%BF%E6%8D%B7-bafyreiayiuxi4qc2a7qpgjp3fe42wmaoppqykckcvtq4hiukl5pgs3dn2m', - en: 'https://matters.news/en/@1ampa55ag3/24439-guidance-%E5%A6%82%E4%BD%95%E8%AE%A9%E4%BD%A0%E7%9A%84matters%E4%B9%8B%E6%97%85%E6%9B%B4%E4%BE%BF%E6%8D%B7-bafyreiayiuxi4qc2a7qpgjp3fe42wmaoppqykckcvtq4hiukl5pgs3dn2m', + 'https://matters.news/zh-Hans/@hi176/342215-%E6%8C%87%E5%8D%97-%E6%83%B3%E5%9C%A8%E6%89%8B%E6%A9%9F%E4%B8%8A%E6%96%B9%E4%BE%BF%E5%9C%B0%E4%BD%BF%E7%94%A8-matters-%E9%80%99%E8%A3%A1%E6%9C%89%E4%B8%80%E5%80%8B%E5%BE%88%E5%A5%BD%E7%9A%84%E6%96%B9%E6%B3%95-bafyreiclzb52uisucbf7gch2k2ll7mcc6kiivaxxqdqo7drnx5oj4sqvu4', + en: 'https://matters.news/en/@hi176/342215-%E6%8C%87%E5%8D%97-%E6%83%B3%E5%9C%A8%E6%89%8B%E6%A9%9F%E4%B8%8A%E6%96%B9%E4%BE%BF%E5%9C%B0%E4%BD%BF%E7%94%A8-matters-%E9%80%99%E8%A3%A1%E6%9C%89%E4%B8%80%E5%80%8B%E5%BE%88%E5%A5%BD%E7%9A%84%E6%96%B9%E6%B3%95-bafyreiclzb52uisucbf7gch2k2ll7mcc6kiivaxxqdqo7drnx5oj4sqvu4', }, RSS: { zh_hant: diff --git a/src/components/Forms/PaymentForm/PayTo/CurrencyChoice/index.tsx b/src/components/Forms/PaymentForm/PayTo/CurrencyChoice/index.tsx index bd57eeb7eb..e39391b12a 100644 --- a/src/components/Forms/PaymentForm/PayTo/CurrencyChoice/index.tsx +++ b/src/components/Forms/PaymentForm/PayTo/CurrencyChoice/index.tsx @@ -2,13 +2,13 @@ import { useQuery } from '@apollo/react-hooks' import _pickBy from 'lodash/pickBy' import { - Avatar, CurrencyFormatter, Dialog, IconFiatCurrency40, Spinner, TextIcon, Translate, + UserDigest, } from '~/components' import WALLET_BALANCE from '~/components/GQL/queries/walletBalance' @@ -49,11 +49,19 @@ const CurrencyChoice: React.FC = ({ - - {recipient.displayName} + - + diff --git a/src/components/Forms/PaymentForm/PayTo/CurrencyChoice/styles.css b/src/components/Forms/PaymentForm/PayTo/CurrencyChoice/styles.css index c400ba6220..a21e9b6d08 100644 --- a/src/components/Forms/PaymentForm/PayTo/CurrencyChoice/styles.css +++ b/src/components/Forms/PaymentForm/PayTo/CurrencyChoice/styles.css @@ -7,18 +7,16 @@ @mixin flex-center-start; margin: var(--spacing-base) 0; - font-size: 1rem; + font-size: var(--font-size-md-s); line-height: 1.5rem; - & .userInfo { - @mixin inline-flex-center-start; + & :global(> *) { + flex-shrink: 0; + } - gap: var(--spacing-xx-tight); + & .userInfo { + flex-shrink: 1; margin: 0 var(--spacing-x-tight); - - & .userName { - font-weight: var(--font-weight-semibold); - } } } diff --git a/src/components/Forms/PaymentForm/Processing/index.tsx b/src/components/Forms/PaymentForm/Processing/index.tsx index 25de93a1ca..be183733b3 100644 --- a/src/components/Forms/PaymentForm/Processing/index.tsx +++ b/src/components/Forms/PaymentForm/Processing/index.tsx @@ -267,9 +267,9 @@ const USDTProcessingForm: React.FC = ({

diff --git a/src/components/UserDigest/Mini/index.tsx b/src/components/UserDigest/Mini/index.tsx index 0c7a6f7932..a98cb3b515 100644 --- a/src/components/UserDigest/Mini/index.tsx +++ b/src/components/UserDigest/Mini/index.tsx @@ -27,9 +27,10 @@ export type UserDigestMiniProps = { avatarSize?: Extract textSize?: 'xs' | 'sm-s' | 'sm' | 'md-s' | 'md' - textWeight?: 'md' + textWeight?: 'md' | 'semibold' nameColor?: 'black' | 'white' | 'grey-darker' | 'green' direction?: 'row' | 'column' + spacing?: 'xxtight' | 'xtight' hasAvatar?: boolean hasDisplayName?: boolean @@ -61,6 +62,7 @@ const Mini = ({ textWeight, nameColor = 'black', direction = 'row', + spacing = 'xtight', hasAvatar, hasDisplayName, @@ -79,6 +81,7 @@ const Mini = ({ [`text-size-${textSize}`]: !!textSize, [`text-weight-${textWeight}`]: !!textWeight, [`name-color-${nameColor}`]: !!nameColor, + [`spacing-${spacing}`]: !!spacing, hasAvatar, disabled: disabled || isArchived, }) diff --git a/src/components/UserDigest/Mini/styles.css b/src/components/UserDigest/Mini/styles.css index 33f17eb8f5..65695b3922 100644 --- a/src/components/UserDigest/Mini/styles.css +++ b/src/components/UserDigest/Mini/styles.css @@ -1,10 +1,6 @@ .container { @mixin flex-center-start; - &.hasAvatar .name { - margin-left: var(--spacing-x-tight); - } - &:not(.disabled) { &:hover, &:focus { @@ -40,10 +36,14 @@ } .displayname { + @mixin line-clamp; + line-height: 1.25; } .username { + @mixin line-clamp; + margin-left: var(--spacing-xx-tight); font-size: var(--font-size-sm); line-height: 1.25; @@ -73,6 +73,9 @@ .text-weight-md { font-weight: var(--font-weight-medium); } +.text-weight-semibold { + font-weight: var(--font-weight-semibold); +} .name-color-black { & .displayname { @@ -97,3 +100,15 @@ color: var(--color-matters-green); } } + +.spacing-xtight { + &.hasAvatar .name { + margin-left: var(--spacing-x-tight); + } +} + +.spacing-xxtight { + &.hasAvatar .name { + margin-left: var(--spacing-xx-tight); + } +}