diff --git a/extension/package.json b/extension/package.json index 56af63b4be..615c882d84 100755 --- a/extension/package.json +++ b/extension/package.json @@ -22,7 +22,7 @@ "@shared/api": "1.0.0", "@shared/constants": "1.0.0", "@shared/helpers": "1.0.0", - "@stellar/design-system": "^0.8.1", + "@stellar/design-system": "^1.0.0-beta.14", "@stellar/wallet-sdk": "^0.8.0", "@testing-library/react": "^10.4.8", "@testing-library/user-event": "^7.1.2", diff --git a/extension/public/index.html b/extension/public/index.html index a1b1713dbf..02f0d95bc8 100644 --- a/extension/public/index.html +++ b/extension/public/index.html @@ -14,7 +14,7 @@ Freighter - +
diff --git a/extension/src/popup/basics/Forms/styles.scss b/extension/src/popup/basics/Forms/styles.scss index 0b66fed7df..b4e3b94ce3 100644 --- a/extension/src/popup/basics/Forms/styles.scss +++ b/extension/src/popup/basics/Forms/styles.scss @@ -9,7 +9,7 @@ } .FormError { - color: var(--pal-error); + color: var(--color-red-60); font-size: 0.8125rem; padding: 0.25rem 0 0.75rem; line-height: 1; diff --git a/extension/src/popup/basics/InfoBlock/index.tsx b/extension/src/popup/basics/InfoBlock/index.tsx deleted file mode 100644 index 1175f9a865..0000000000 --- a/extension/src/popup/basics/InfoBlock/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from "react"; -import { InfoBlock as SDSInfoBlock } from "@stellar/design-system"; -import IconWarning from "popup/assets/icon-warning-red.svg"; - -import "./styles.scss"; - -enum InfoBlockVariant { - info = "info", - success = "success", - error = "error", - warning = "warning", -} - -interface InfoBlockProps extends React.InputHTMLAttributes { - className?: string; - variant?: InfoBlockVariant; - children: string | React.ReactNode; -} - -// TODO - reconcile with SDS, for now using local triangle icon for error info blocks -const ErrorInfoBlock = ({ - children, -}: { - children: string | React.ReactNode; -}) => ( -
-
- warning -
- {children} -
-); - -export const InfoBlock = ({ children, className, variant }: InfoBlockProps) => ( -
- {variant === InfoBlockVariant.error ? ( - {children} - ) : ( - {children} - )} -
-); - -InfoBlock.variant = InfoBlockVariant; diff --git a/extension/src/popup/basics/InfoBlock/styles.scss b/extension/src/popup/basics/InfoBlock/styles.scss deleted file mode 100644 index a65e8179b7..0000000000 --- a/extension/src/popup/basics/InfoBlock/styles.scss +++ /dev/null @@ -1,20 +0,0 @@ -.BasicInfoBlock { - .InfoBlock { - border: none; - border-radius: 0.5rem; - display: flex; - font-size: var(--font-size-secondary); - gap: 0.5rem; - padding: 0.875rem; - - &__icon { - position: static; - } - &--warning { - background-color: rgba(241, 165, 50, 0.32); - } - &--error { - background-color: rgba(241, 50, 50, 0.32); - } - } -} diff --git a/extension/src/popup/basics/InfoTooltip/index.tsx b/extension/src/popup/basics/InfoTooltip/index.tsx new file mode 100644 index 0000000000..a3218ee4b4 --- /dev/null +++ b/extension/src/popup/basics/InfoTooltip/index.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { FloaterPlacement, Icon, Tooltip } from "@stellar/design-system"; +import "./styles.scss"; + +interface InfoTooltipProps { + children: React.ReactNode; + infoText: React.ReactNode; + placement?: FloaterPlacement; +} + +export const InfoTooltip = ({ + children, + infoText, + placement = "right", +}: InfoTooltipProps) => ( +
+ {children} + + +
+ } + placement={placement} + > + {infoText} + + +); diff --git a/extension/src/popup/basics/InfoTooltip/styles.scss b/extension/src/popup/basics/InfoTooltip/styles.scss new file mode 100644 index 0000000000..a0ca22a4e1 --- /dev/null +++ b/extension/src/popup/basics/InfoTooltip/styles.scss @@ -0,0 +1,33 @@ +.InfoTooltip { + display: inline-flex; + align-items: center; + gap: 0.3125rem; + position: relative; + + // Make sure tooltip covers other info buttons + &:has(.trigger--active) { + z-index: var(--z-index-tooltip); + } + + &__button { + width: 0.875rem; + height: 1.5rem; + cursor: pointer; + display: flex; + align-items: center; + color: var(--color-gray-60); + + svg { + display: block; + width: 0.75rem; + height: 0.75rem; + fill: currentColor; + } + + @media (hover: hover) { + &:hover { + color: var(--color-gray-70); + } + } + } +} diff --git a/extension/src/popup/basics/ListNavLink/styles.scss b/extension/src/popup/basics/ListNavLink/styles.scss index 18e73173aa..267e8d3149 100644 --- a/extension/src/popup/basics/ListNavLink/styles.scss +++ b/extension/src/popup/basics/ListNavLink/styles.scss @@ -3,7 +3,7 @@ a { align-items: center; - color: var(--pal-text-primary); + color: var(--color-gray-90); display: flex; justify-content: space-between; } diff --git a/extension/src/popup/basics/LoadingBackground/styles.scss b/extension/src/popup/basics/LoadingBackground/styles.scss index 0c4f111ef3..04cef2782b 100644 --- a/extension/src/popup/basics/LoadingBackground/styles.scss +++ b/extension/src/popup/basics/LoadingBackground/styles.scss @@ -10,7 +10,7 @@ transition-delay: 0.1s; &--active { - background-color: rgba(var(--pal-shadow-rbg), 0.6); + background-color: rgba(var(--color-shadow-rgb), 0.6); opacity: 1; z-index: 1; } diff --git a/extension/src/popup/basics/TransactionHeading/styles.scss b/extension/src/popup/basics/TransactionHeading/styles.scss index af46772524..85e83b4079 100644 --- a/extension/src/popup/basics/TransactionHeading/styles.scss +++ b/extension/src/popup/basics/TransactionHeading/styles.scss @@ -1,5 +1,5 @@ .TransactionHeading { - border-bottom: 1px solid var(--pal-border-secondary); + border-bottom: 1px solid var(--color-gray-30); font-size: 0.875rem; font-weight: var(--font-weight-medium); line-height: 0.72rem; diff --git a/extension/src/popup/basics/buttons/Button/index.tsx b/extension/src/popup/basics/buttons/Button/index.tsx deleted file mode 100644 index a51ea28689..0000000000 --- a/extension/src/popup/basics/buttons/Button/index.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from "react"; -import { Button as SDSButton } from "@stellar/design-system"; - -import "./styles.scss"; - -// override SDS Button css with freighter design - -enum ButtonVariant { - primary = SDSButton.variant.primary, - tertiary = SDSButton.variant.tertiary, -} - -interface ButtonComponent { - variant: typeof ButtonVariant; -} - -interface ButtonProps extends React.ButtonHTMLAttributes { - children: React.ReactNode; - isLoading?: boolean; - fullWidth?: boolean; - variant?: ButtonVariant; -} - -export const Button: React.FC & ButtonComponent = ({ - children, - isLoading, - fullWidth, - variant = ButtonVariant.primary, - ...props -}: ButtonProps) => { - const sdsVariant = - variant === ButtonVariant.primary - ? SDSButton.variant.primary - : SDSButton.variant.tertiary; - const sds = SDSButton({ - variant: sdsVariant, - fullWidth, - children, - }); - - return ( - - {children} - - ); -}; - -Button.variant = ButtonVariant; diff --git a/extension/src/popup/basics/buttons/Button/styles.scss b/extension/src/popup/basics/buttons/Button/styles.scss deleted file mode 100644 index f00559095f..0000000000 --- a/extension/src/popup/basics/buttons/Button/styles.scss +++ /dev/null @@ -1,20 +0,0 @@ -.Button.BasicButton { - border-radius: 0.5rem; - box-shadow: none; - padding: 1rem 0; - - &--primary { - border-color: var(--button-bg--primary); - background: var(--button-bg--primary); - } - - &--tertiary { - border-color: var(--button-bg--tertiary); - background: var(--button-bg--tertiary); - - &:hover { - background-color: var(--background-color); - border: 1px var(--button-bg--tertiary) solid; - } - } -} diff --git a/extension/src/popup/basics/buttons/PillButton/index.tsx b/extension/src/popup/basics/buttons/PillButton/index.tsx index b48542e4f8..23eca321a7 100644 --- a/extension/src/popup/basics/buttons/PillButton/index.tsx +++ b/extension/src/popup/basics/buttons/PillButton/index.tsx @@ -1,8 +1,6 @@ import React from "react"; import { Button } from "@stellar/design-system"; -import "./styles.scss"; - interface PillButtonProps extends React.ButtonHTMLAttributes { disabled?: boolean; @@ -18,9 +16,11 @@ export const PillButton = ({ }: PillButtonProps) => (
); }; diff --git a/extension/src/popup/components/BottomNav/styles.scss b/extension/src/popup/components/BottomNav/styles.scss index 5133d6bb22..5ab45235f6 100644 --- a/extension/src/popup/components/BottomNav/styles.scss +++ b/extension/src/popup/components/BottomNav/styles.scss @@ -1,5 +1,5 @@ .BottomNav { - border-top: solid 1px var(--pal-example-details); + border-top: solid 1px var(--color-gray-40); display: flex; align-items: center; justify-content: space-between; diff --git a/extension/src/popup/components/Header/styles.scss b/extension/src/popup/components/Header/styles.scss index cc21b269c9..0c663b5d31 100644 --- a/extension/src/popup/components/Header/styles.scss +++ b/extension/src/popup/components/Header/styles.scss @@ -1,5 +1,5 @@ .Header { - border-bottom: 1px solid var(--pal-border-primary); + border-bottom: 1px solid var(--color-gray-30); padding: 1.5rem 0; &__popup { diff --git a/extension/src/popup/components/ModalInfo/index.tsx b/extension/src/popup/components/ModalInfo/index.tsx index cc64dafb1d..e56abde37f 100644 --- a/extension/src/popup/components/ModalInfo/index.tsx +++ b/extension/src/popup/components/ModalInfo/index.tsx @@ -20,7 +20,7 @@ export const ModalInfo = ({ }: ModalInfoProps) => ( <>
- +
{subject}
{children} diff --git a/extension/src/popup/components/ModalInfo/styles.scss b/extension/src/popup/components/ModalInfo/styles.scss index f05fce6be8..b2262af85d 100644 --- a/extension/src/popup/components/ModalInfo/styles.scss +++ b/extension/src/popup/components/ModalInfo/styles.scss @@ -1,7 +1,7 @@ .ModalInfo { &--subject { - border-bottom: 1px solid var(--pal-border-secondary); - color: var(--pal-text-primary); + border-bottom: 1px solid var(--color-gray-30); + color: var(--color-gray-90); line-height: 1.5rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; diff --git a/extension/src/popup/components/Onboarding/styles.scss b/extension/src/popup/components/Onboarding/styles.scss index 002e801b64..80536f763f 100644 --- a/extension/src/popup/components/Onboarding/styles.scss +++ b/extension/src/popup/components/Onboarding/styles.scss @@ -11,7 +11,7 @@ .OnboardingHeader { font-size: 2.5rem; line-height: 120%; - color: var(--pal-text-primary); + color: var(--color-gray-90); } .OnboardingScreen { diff --git a/extension/src/popup/components/PunycodedDomain/styles.scss b/extension/src/popup/components/PunycodedDomain/styles.scss index ed53626068..c039d24709 100644 --- a/extension/src/popup/components/PunycodedDomain/styles.scss +++ b/extension/src/popup/components/PunycodedDomain/styles.scss @@ -17,11 +17,11 @@ } &__domain { - color: var(--pal-text-primary); + color: var(--color-gray-90); } &__title { - color: var(--pal-text-tertiary); + color: var(--color-gray-60); font-size: 0.875rem; } diff --git a/extension/src/popup/components/SlideupModal/styles.scss b/extension/src/popup/components/SlideupModal/styles.scss index 243967fd8f..b75aa63280 100644 --- a/extension/src/popup/components/SlideupModal/styles.scss +++ b/extension/src/popup/components/SlideupModal/styles.scss @@ -1,5 +1,5 @@ .SlideupModal { - background: var(--background-color); + background: var(--background-color--overlay); border-radius: 1.5rem 1.5rem 0 0; box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.24); position: absolute; diff --git a/extension/src/popup/components/SubviewHeader/styles.scss b/extension/src/popup/components/SubviewHeader/styles.scss index 9c19b3534c..bac2af24f2 100644 --- a/extension/src/popup/components/SubviewHeader/styles.scss +++ b/extension/src/popup/components/SubviewHeader/styles.scss @@ -1,6 +1,6 @@ .SubviewHeader { align-items: center; - color: var(--pal-brand-primary-on); + color: var(--color-white); display: flex; height: var(--subview--header--height); padding-bottom: 2rem; diff --git a/extension/src/popup/components/WarningMessages/index.tsx b/extension/src/popup/components/WarningMessages/index.tsx index b457c605e7..c7d4e3cec0 100644 --- a/extension/src/popup/components/WarningMessages/index.tsx +++ b/extension/src/popup/components/WarningMessages/index.tsx @@ -1,7 +1,7 @@ import React, { useState, useRef, useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { createPortal } from "react-dom"; -import { Icon } from "@stellar/design-system"; +import { Button, Icon, Notification } from "@stellar/design-system"; import { useTranslation } from "react-i18next"; import { POPUP_HEIGHT } from "constants/dimensions"; import StellarSdk, { Account } from "stellar-sdk"; @@ -10,8 +10,6 @@ import { ActionStatus } from "@shared/api/types"; import { xlmToStroop } from "helpers/stellar"; import { AppDispatch } from "popup/App"; -import { Button } from "popup/basics/buttons/Button"; -import { InfoBlock } from "popup/basics/InfoBlock"; import { signFreighterTransaction, submitFreighterTransaction, @@ -84,7 +82,7 @@ export const WarningMessage = ({ data-testid="WarningMessage" >
- +
{header}
{headerChildren}
@@ -97,8 +95,9 @@ export const WarningMessage = ({
{children}
{isSendWarning && ( diff --git a/extension/src/popup/components/account/NotFundedMessage/styles.scss b/extension/src/popup/components/account/NotFundedMessage/styles.scss index 5192314843..8c33ee4873 100644 --- a/extension/src/popup/components/account/NotFundedMessage/styles.scss +++ b/extension/src/popup/components/account/NotFundedMessage/styles.scss @@ -7,7 +7,7 @@ &__header { display: flex; align-items: center; - color: var(--pal-text-primary); + color: var(--color-gray-90); font-size: 0.875rem; line-height: 1.5rem; font-weight: var(--font-weight-medium); @@ -27,7 +27,7 @@ padding-top: 0.5rem; a { - color: var(--pal-text-primary); + color: var(--color-gray-90); text-decoration: underline; } } diff --git a/extension/src/popup/components/accountHistory/AssetNetworkInfo/styles.scss b/extension/src/popup/components/accountHistory/AssetNetworkInfo/styles.scss index ab65df3ce4..20604c8be9 100644 --- a/extension/src/popup/components/accountHistory/AssetNetworkInfo/styles.scss +++ b/extension/src/popup/components/accountHistory/AssetNetworkInfo/styles.scss @@ -9,7 +9,7 @@ margin-top: 0.75rem; &__icon { - background: var(--pal-brand-primary); + background: var(--color-purple-60); border-radius: 10rem; height: var(--TransactionDetail--icon-dimension); width: var(--TransactionDetail--icon-dimension); diff --git a/extension/src/popup/components/accountHistory/HistoryItem/index.tsx b/extension/src/popup/components/accountHistory/HistoryItem/index.tsx index 16d4d1609f..de3a538192 100644 --- a/extension/src/popup/components/accountHistory/HistoryItem/index.tsx +++ b/extension/src/popup/components/accountHistory/HistoryItem/index.tsx @@ -95,7 +95,9 @@ export const HistoryItem = ({ let paymentDifference = ""; let rowText = ""; let dateText = date; - let IconComponent = ; + let IconComponent = ( + + ); let PaymentComponent = null as React.ReactElement | null; // TODO should be combined with isPayment const isSorobanTx = typeI === 24; diff --git a/extension/src/popup/components/accountHistory/HistoryItem/styles.scss b/extension/src/popup/components/accountHistory/HistoryItem/styles.scss index c88716fa3e..10c61c63af 100644 --- a/extension/src/popup/components/accountHistory/HistoryItem/styles.scss +++ b/extension/src/popup/components/accountHistory/HistoryItem/styles.scss @@ -1,5 +1,5 @@ .HistoryItem { - color: var(--pal-text-primary); + color: var(--color-gray-90); cursor: pointer; &__row { @@ -7,7 +7,7 @@ } &__icon { - border: 1px solid var(--pal-border-primary); + border: 1px solid var(--color-gray-30); border-radius: 2rem; display: flex; align-items: center; @@ -26,7 +26,7 @@ } &--received { - color: var(--pal-success); + color: var(--color-green-60); } } diff --git a/extension/src/popup/components/accountHistory/TransactionDetail/index.tsx b/extension/src/popup/components/accountHistory/TransactionDetail/index.tsx index 58f583ab97..4627e655a9 100644 --- a/extension/src/popup/components/accountHistory/TransactionDetail/index.tsx +++ b/extension/src/popup/components/accountHistory/TransactionDetail/index.tsx @@ -1,8 +1,7 @@ import React from "react"; import { useTranslation } from "react-i18next"; import { useSelector } from "react-redux"; - -import { Button } from "popup/basics/buttons/Button"; +import { Button } from "@stellar/design-system"; import { KeyIdenticon } from "popup/components/identicons/KeyIdenticon"; import { SubviewHeader } from "popup/components/SubviewHeader"; @@ -147,12 +146,13 @@ export const TransactionDetail = ({
{!isCustomNetwork(networkDetails) ? ( diff --git a/extension/src/popup/components/accountHistory/TransactionDetail/styles.scss b/extension/src/popup/components/accountHistory/TransactionDetail/styles.scss index 26dbaceeb4..80ffbabc12 100644 --- a/extension/src/popup/components/accountHistory/TransactionDetail/styles.scss +++ b/extension/src/popup/components/accountHistory/TransactionDetail/styles.scss @@ -9,8 +9,8 @@ padding: var(--popup-vertical-padding) var(--popup--side-padding); &__header { - border-bottom: 1px solid var(--pal-example-details); - color: var(--pal-brand-primary-on); + border-bottom: 1px solid var(--color-gray-40); + color: var(--color-white); font-size: 2rem; font-weight: var(--font-weight-light); padding-bottom: 1.5rem; @@ -35,7 +35,7 @@ justify-content: space-between; div:nth-child(2) { - color: var(--pal-success-on); + color: var(--color-white); } } } diff --git a/extension/src/popup/components/hardwareConnect/LedgerSign/index.tsx b/extension/src/popup/components/hardwareConnect/LedgerSign/index.tsx index 7962654e22..f062d56135 100644 --- a/extension/src/popup/components/hardwareConnect/LedgerSign/index.tsx +++ b/extension/src/popup/components/hardwareConnect/LedgerSign/index.tsx @@ -3,13 +3,12 @@ import { useDispatch, useSelector } from "react-redux"; import { useTranslation } from "react-i18next"; import TransportWebUSB from "@ledgerhq/hw-transport-webusb"; import LedgerApi from "@ledgerhq/hw-app-str"; -import { Icon } from "@stellar/design-system"; +import { Button, Icon } from "@stellar/design-system"; import { handleSignedHwTransaction } from "@shared/api/internal"; import { POPUP_HEIGHT } from "constants/dimensions"; import { AppDispatch } from "popup/App"; -import { Button } from "popup/basics/buttons/Button"; import { SubviewHeader } from "popup/components/SubviewHeader"; import Ledger from "popup/assets/ledger.png"; import LedgerSigning from "popup/assets/ledger-signing.png"; @@ -125,7 +124,7 @@ export const LedgerSign = () => {
} + customBackIcon={} title="Connect Ledger" />
@@ -149,8 +148,9 @@ export const LedgerSign = () => { {isDetectBtnDirty && } {!ledgerConnectSuccessful && (
{isCurrencyNotFound ? ( - {t("Asset not found")} + ) : null} {assetRows.length ? ( <> @@ -132,7 +134,9 @@ export const AddAsset = () => {
@@ -173,7 +172,7 @@ export const ChooseAsset = ({ balances }: ChooseAssetProps) => { ) : null}
- diff --git a/extension/src/popup/components/manageAssets/ChooseAsset/styles.scss b/extension/src/popup/components/manageAssets/ChooseAsset/styles.scss index 1bb1cf2e73..904b9d4fb1 100644 --- a/extension/src/popup/components/manageAssets/ChooseAsset/styles.scss +++ b/extension/src/popup/components/manageAssets/ChooseAsset/styles.scss @@ -37,7 +37,7 @@ &__button { a { - color: var(--pal-text-primary); + color: var(--color-gray-90); } } } diff --git a/extension/src/popup/components/manageAssets/ManageAssetRows/styles.scss b/extension/src/popup/components/manageAssets/ManageAssetRows/styles.scss index 2ff13cce04..6dd3eb3661 100644 --- a/extension/src/popup/components/manageAssets/ManageAssetRows/styles.scss +++ b/extension/src/popup/components/manageAssets/ManageAssetRows/styles.scss @@ -24,7 +24,7 @@ justify-content: space-between; &__info { - color: var(--pal-text-primary); + color: var(--color-gray-90); flex-grow: 1; line-height: 1.5rem; &__header { @@ -38,13 +38,13 @@ } &__bullet { - background: var(--pal-brand-primary); + background: var(--color-purple-60); height: 1.5rem; width: 1.5rem; } &__domain { - color: var(--pal-text-tertiary); + color: var(--color-gray-60); font-size: var(--font-size-secondary); line-height: 1.375rem; } diff --git a/extension/src/popup/components/manageAssets/SearchAsset/index.tsx b/extension/src/popup/components/manageAssets/SearchAsset/index.tsx index fe0250ca91..32aba40d87 100644 --- a/extension/src/popup/components/manageAssets/SearchAsset/index.tsx +++ b/extension/src/popup/components/manageAssets/SearchAsset/index.tsx @@ -2,12 +2,10 @@ import React, { useEffect, useCallback, useRef, useState } from "react"; import { useSelector } from "react-redux"; import { Link, Redirect } from "react-router-dom"; import { Formik, Form, Field, FieldProps } from "formik"; -import { Input, Loader } from "@stellar/design-system"; +import { Button, Input, Loader, Notification } from "@stellar/design-system"; import debounce from "lodash/debounce"; import { useTranslation } from "react-i18next"; -import { Button } from "popup/basics/buttons/Button"; -import { InfoBlock } from "popup/basics/InfoBlock"; import { FormRows } from "popup/basics/Forms"; import { ROUTES } from "popup/constants/routes"; @@ -47,7 +45,7 @@ const ResultsHeader = () => { return (
- +
{t( "Multiple assets have a similar code, please check the domain before adding.", @@ -62,7 +60,7 @@ const ResultsHeader = () => {
- +
); }; @@ -150,6 +148,7 @@ export const SearchAsset = () => { {({ field }: FieldProps) => ( { {!dirty && hasNoResults ? (
- diff --git a/extension/src/popup/components/manageAssets/SearchAsset/styles.scss b/extension/src/popup/components/manageAssets/SearchAsset/styles.scss index fea0e654d7..a8499a9d26 100644 --- a/extension/src/popup/components/manageAssets/SearchAsset/styles.scss +++ b/extension/src/popup/components/manageAssets/SearchAsset/styles.scss @@ -18,7 +18,7 @@ &__InfoBlock { padding-bottom: 1.625rem; a { - color: var(--pal-brand-primary-on); + color: var(--color-white); text-decoration: underline; } } @@ -46,7 +46,7 @@ text-align: center; a { - color: var(--pal-brand-primary-on); + color: var(--color-white); text-decoration: underline; } } diff --git a/extension/src/popup/components/manageAssets/SelectAssetRows/styles.scss b/extension/src/popup/components/manageAssets/SelectAssetRows/styles.scss index 95f582648f..a2d50f21f9 100644 --- a/extension/src/popup/components/manageAssets/SelectAssetRows/styles.scss +++ b/extension/src/popup/components/manageAssets/SelectAssetRows/styles.scss @@ -22,7 +22,7 @@ cursor: pointer; &__info { - color: var(--pal-text-primary); + color: var(--color-gray-90); flex-grow: 1; line-height: 1.5rem; &__header { @@ -36,13 +36,13 @@ } &__bullet { - background: var(--pal-brand-primary); + background: var(--color-purple-60); height: 1.5rem; width: 1.5rem; } &__domain { - color: var(--pal-text-tertiary); + color: var(--color-gray-60); font-size: var(--font-size-secondary); line-height: 1.375rem; } diff --git a/extension/src/popup/components/manageAssets/TrustlineError/index.tsx b/extension/src/popup/components/manageAssets/TrustlineError/index.tsx index 019146b573..0090ced3c2 100644 --- a/extension/src/popup/components/manageAssets/TrustlineError/index.tsx +++ b/extension/src/popup/components/manageAssets/TrustlineError/index.tsx @@ -3,9 +3,8 @@ import { useHistory, Link } from "react-router-dom"; import { useDispatch, useSelector } from "react-redux"; import BigNumber from "bignumber.js"; import { useTranslation } from "react-i18next"; +import { Button, Icon, Notification } from "@stellar/design-system"; -import { Button } from "popup/basics/buttons/Button"; -import { InfoBlock } from "popup/basics/InfoBlock"; import { resetSubmission, transactionSubmissionSelector, @@ -59,7 +58,7 @@ const RenderedError = ({ switch (errorState) { case TRUSTLINE_ERROR_STATES.NOT_ENOUGH_LUMENS: return ( - +

{t("Not enough lumens")}

0.500001 XLM {t("are required to add a new asset.")}

@@ -73,16 +72,16 @@ const RenderedError = ({

- + ); case TRUSTLINE_ERROR_STATES.ASSET_HAS_BALANCE: return ( <> - -

- {t("This asset has a balance")} -

- + } + />

{t("This asset has a balance of")} {assetBalance}.{" "} {t("You must have a balance of")} 0{" "} @@ -94,18 +93,16 @@ const RenderedError = ({ default: return ( <> - -

-

- {t("This transaction could not be completed.")} + + {resultCodes ? ( +

+ {t("Error code")}: {resultCodes}

- {resultCodes ? ( -

- {t("Error code")}: {resultCodes} -

- ) : null} -
- + ) : null} + ); } @@ -156,7 +153,9 @@ export const TrustlineError = ({
) } @@ -522,6 +525,7 @@ export const SendAmount = ({
- +
{isSwap ? ( @@ -189,7 +186,7 @@ export const SubmitSuccess = ({ viewDetails }: { viewDetails: () => void }) => {
{suggestRemoveTrustline && ( - +

Your {sourceAsset.code} balance is now empty. Would you like to @@ -203,14 +200,16 @@ export const SubmitSuccess = ({ viewDetails }: { viewDetails: () => void }) => { Remove Trustline - + )}

-