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);
+ }
+}