From 7b2b1dec43fb585c91509efef723deb70a3daf54 Mon Sep 17 00:00:00 2001 From: Radu Mojic Date: Fri, 15 Mar 2024 17:20:37 +0200 Subject: [PATCH] interface fixes --- src/assets/scss/_shared-styles.scss | 8 ++++++++ .../HeroDetailsCard/HeroDetailsCard.tsx | 6 +++--- .../HeroDetailsCard/heroDetailsCard.styles.scss | 14 ++++++++------ src/components/Trim/trim.styles.scss | 7 +++++++ .../TransactionErrorDisplay.tsx | 6 ++++-- .../TransactionInfo/transactionInfo.styles.scss | 5 ----- src/types/growthWidgets/mostUsed.types.ts | 1 + src/widgets/MostUsed/MostUsedApplications.tsx | 16 ++++++++++++++-- 8 files changed, 45 insertions(+), 18 deletions(-) diff --git a/src/assets/scss/_shared-styles.scss b/src/assets/scss/_shared-styles.scss index 7d8c4c8ea..d5a2c106b 100644 --- a/src/assets/scss/_shared-styles.scss +++ b/src/assets/scss/_shared-styles.scss @@ -483,3 +483,11 @@ img.loading { ); background-size: contain; } + +.text-break { + word-wrap: break-word; + word-break: break-word; + white-space: break-spaces; + overflow-wrap: break-word; // inline elements + line-break: auto; // characters +} diff --git a/src/components/HeroDetailsCard/HeroDetailsCard.tsx b/src/components/HeroDetailsCard/HeroDetailsCard.tsx index 1558e1ca5..cad433290 100644 --- a/src/components/HeroDetailsCard/HeroDetailsCard.tsx +++ b/src/components/HeroDetailsCard/HeroDetailsCard.tsx @@ -139,7 +139,7 @@ export const HeroDetailsCard = ({
{title && (
@@ -173,9 +173,9 @@ export const HeroDetailsCard = ({ })} data-testid={`${testIdPrefix}title`} > - {title}{' '} + {title} {isVerified && ( - <>{verifiedComponent ?? } + <> {verifiedComponent ?? } )}
diff --git a/src/components/HeroDetailsCard/heroDetailsCard.styles.scss b/src/components/HeroDetailsCard/heroDetailsCard.styles.scss index f6da37c65..76c39c1e3 100644 --- a/src/components/HeroDetailsCard/heroDetailsCard.styles.scss +++ b/src/components/HeroDetailsCard/heroDetailsCard.styles.scss @@ -61,7 +61,7 @@ @include media-breakpoint-up(xxl) { &.has-content { display: contents; - span { + .title-container { display: block; max-width: 46rem; overflow: hidden; @@ -72,17 +72,19 @@ } } .trim { - max-width: calc(90vw - 4rem); + max-width: calc(90vw - 5rem); letter-spacing: normal; - span { + .left span, + .right span, + .ellipsis { font-size: 1.5rem; letter-spacing: normal; + @include media-breakpoint-up(md) { + font-size: 2.5rem; + } } @include media-breakpoint-up(md) { max-width: 32rem; - span { - font-size: 2.5rem; - } } @include media-breakpoint-up(lg) { max-width: 44rem; diff --git a/src/components/Trim/trim.styles.scss b/src/components/Trim/trim.styles.scss index 3834b2da6..16efc6133 100644 --- a/src/components/Trim/trim.styles.scss +++ b/src/components/Trim/trim.styles.scss @@ -74,6 +74,13 @@ color: var(--primary-200); } } + &.text-neutral-400 { + .ellipsis, + .left span, + .right span { + color: var(--neutral-400); + } + } /* IE fix */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { diff --git a/src/pages/TransactionDetails/components/TransactionInfo/TransactionErrorDisplay/TransactionErrorDisplay.tsx b/src/pages/TransactionDetails/components/TransactionInfo/TransactionErrorDisplay/TransactionErrorDisplay.tsx index 9fd64593e..31067bff0 100644 --- a/src/pages/TransactionDetails/components/TransactionInfo/TransactionErrorDisplay/TransactionErrorDisplay.tsx +++ b/src/pages/TransactionDetails/components/TransactionInfo/TransactionErrorDisplay/TransactionErrorDisplay.tsx @@ -68,7 +68,9 @@ export const TransactionErrorDisplay = ({ transform={{ rotate: 45 }} />
- + {capitalizeFirstLetter(transactionMessage.toString().trim())}
@@ -111,7 +113,7 @@ export const TransactionErrorDisplay = ({ style={{ marginTop: '2px' }} transform={{ rotate: 45 }} /> - + Block Reverted
diff --git a/src/pages/TransactionDetails/components/TransactionInfo/transactionInfo.styles.scss b/src/pages/TransactionDetails/components/TransactionInfo/transactionInfo.styles.scss index dcd5c11ff..db764cd54 100644 --- a/src/pages/TransactionDetails/components/TransactionInfo/transactionInfo.styles.scss +++ b/src/pages/TransactionDetails/components/TransactionInfo/transactionInfo.styles.scss @@ -5,11 +5,6 @@ .transaction-info { .transaction-error-message { font-size: 0.75rem; // use rem instead of em because on long texts Chrome breaks the layout - word-wrap: break-word; - word-break: break-word; - white-space: break-spaces; - overflow-wrap: break-word; // inline elements - line-break: auto; // characters } .status-success { diff --git a/src/types/growthWidgets/mostUsed.types.ts b/src/types/growthWidgets/mostUsed.types.ts index e1abe8b36..4979dba18 100644 --- a/src/types/growthWidgets/mostUsed.types.ts +++ b/src/types/growthWidgets/mostUsed.types.ts @@ -20,6 +20,7 @@ export interface MostUsedApplicationsType extends MostUsedBaseType { extraInfo?: { assets?: AccountAssetType; deployedAt?: number; + isVerified?: boolean; }; } diff --git a/src/widgets/MostUsed/MostUsedApplications.tsx b/src/widgets/MostUsed/MostUsedApplications.tsx index 071ef6b0b..a21fb6dde 100644 --- a/src/widgets/MostUsed/MostUsedApplications.tsx +++ b/src/widgets/MostUsed/MostUsedApplications.tsx @@ -3,10 +3,10 @@ import BigNumber from 'bignumber.js'; import classNames from 'classnames'; import { useSelector } from 'react-redux'; -import { Loader, ShowcaseCard, Trim, NetworkLink } from 'components'; +import { Loader, Overlay, ShowcaseCard, Trim, NetworkLink } from 'components'; import { urlBuilder, addressIsBech32 } from 'helpers'; import { useIsMainnet, useFetchGrowthMostUsed, useScollInView } from 'hooks'; -import { faAngleLeft, faAngleRight } from 'icons/solid'; +import { faAngleLeft, faAngleRight, faBadgeCheck } from 'icons/solid'; import { growthMostUsedSelector } from 'redux/selectors'; import { applicationsRoutes } from 'routes'; import { WithClassnameType } from 'types'; @@ -121,6 +121,18 @@ export const MostUsedApplications = ({ {contract.extraInfo?.assets?.name ?? ( )} + {contract.extraInfo?.isVerified && ( + + + + )} } icon={