From fa131ca596ba810f9e62266aecd33ee551409cb5 Mon Sep 17 00:00:00 2001 From: Thebora Kompanioni Date: Tue, 12 Apr 2022 10:30:53 +0200 Subject: [PATCH] ui: small ui fixes (#201) * ui: adapt info alert color to match figma more closely * ui: adapt connection indicator icon to match figma more closely * ui: better visibility of disabled input fields in dark-mode * ui: reorder form fields on send page to match figma * ui: default to sending as collaborative transaction * ui: add icons to receive/withdraw buttons in CurrentWalletMagic * review: use Send/Receive instead of Deposit/Withdraw * fix: spacing on send screen * fix: make collapsed accordion buttons visible in dark mode Co-authored-by: Daniel <10026790+dnlggr@users.noreply.github.com> --- public/sprite.svg | 18 +++++----- src/components/App.jsx | 8 ++++- src/components/App.test.jsx | 8 ++--- src/components/CurrentWalletMagic.jsx | 20 +++++++---- src/components/Earn.jsx | 6 ++-- src/components/Send.css | 2 +- src/components/Send.jsx | 50 ++++++++++++++------------- src/i18n/locales/en/translation.json | 4 +-- src/index.css | 20 +++++++++++ 9 files changed, 85 insertions(+), 51 deletions(-) diff --git a/public/sprite.svg b/public/sprite.svg index 962c088b..11e74fc6 100644 --- a/public/sprite.svg +++ b/public/sprite.svg @@ -10,10 +10,10 @@ - - - - + + + + @@ -21,10 +21,10 @@ - + - - - - + + + + diff --git a/src/components/App.jsx b/src/components/App.jsx index 62834288..dbe23a5f 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -18,6 +18,7 @@ import { useCurrentWallet, useSetCurrentWallet, useSetCurrentWalletInfo } from ' import { useSessionConnectionError } from '../context/ServiceInfoContext' import { setSession, clearSession } from '../session' import Onboarding from './Onboarding' +import Sprite from './Sprite' import { routes } from '../constants/routes' export default function App() { @@ -188,7 +189,12 @@ export default function App() {
- • + + + {websocketConnected ? t('footer.connected') : t('footer.disconnected')} diff --git a/src/components/App.test.jsx b/src/components/App.test.jsx index 60cbf71d..4b00c422 100644 --- a/src/components/App.test.jsx +++ b/src/components/App.test.jsx @@ -68,8 +68,8 @@ describe('', () => { render() }) - expect(screen.getByText('•').classList.contains('text-danger')).toBe(true) - expect(screen.getByText('•').classList.contains('text-success')).toBe(false) + expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-danger')).toBe(true) + expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-success')).toBe(false) expect(screen.getByText('footer.disconnected')).toBeInTheDocument() expect(screen.queryByText('footer.connected')).not.toBeInTheDocument() @@ -77,7 +77,7 @@ describe('', () => { expect(screen.queryByText('footer.disconnected')).not.toBeInTheDocument() expect(screen.getByText('footer.connected')).toBeInTheDocument() - expect(screen.getByText('•').classList.contains('text-success')).toBe(true) - expect(screen.getByText('•').classList.contains('text-danger')).toBe(false) + expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-success')).toBe(true) + expect(screen.getByTestId('connection-indicator-icon').classList.contains('text-danger')).toBe(false) }) }) diff --git a/src/components/CurrentWalletMagic.jsx b/src/components/CurrentWalletMagic.jsx index 6d36914b..1a2a8269 100644 --- a/src/components/CurrentWalletMagic.jsx +++ b/src/components/CurrentWalletMagic.jsx @@ -124,17 +124,23 @@ export default function CurrentWalletMagic() { /> - - {/* Always receive on first mixdepth. */} - - {t('current_wallet.button_deposit')} - - {/* Todo: Withdrawing needs to factor in the privacy levels as well. Depending on the mixdepth/account there will be different amounts available. */} - {t('current_wallet.button_withdraw')} +
+ +
{t('current_wallet.button_withdraw')}
+
+ + + + {/* Always receive on first mixdepth. */} + +
+ +
{t('current_wallet.button_deposit')}
+
diff --git a/src/components/Earn.jsx b/src/components/Earn.jsx index 66a4e7db..5052f138 100644 --- a/src/components/Earn.jsx +++ b/src/components/Earn.jsx @@ -254,9 +254,9 @@ export default function Earn() { -
- {t('earn.alert_coinjoin_in_progress')} -
+ + {t('earn.alert_coinjoin_in_progress')} + {alert && {alert.message}} diff --git a/src/components/Send.css b/src/components/Send.css index a9bd72ff..14f5a6de 100644 --- a/src/components/Send.css +++ b/src/components/Send.css @@ -58,7 +58,7 @@ input::-webkit-inner-spin-button { color: var(--bs-black); font-size: 0.8rem; height: 1rem; - padding-right: 0; + padding: 0; box-shadow: none; } diff --git a/src/components/Send.jsx b/src/components/Send.jsx index 6654cf37..c2370fcb 100644 --- a/src/components/Send.jsx +++ b/src/components/Send.jsx @@ -167,10 +167,10 @@ export default function Send() { const [alert, setAlert] = useState(null) const [isLoading, setIsLoading] = useState(true) const [isSending, setIsSending] = useState(false) - const [isCoinjoin, setIsCoinjoin] = useState(false) const [isCoinjoinOptionEnabled, setIsCoinjoinOptionEnabled] = useState( serviceInfo && !serviceInfo.makerRunning && !serviceInfo.coinjoinInProgress ) + const [isCoinjoin, setIsCoinjoin] = useState(isCoinjoinOptionEnabled) const [minNumCollaborators, setMinNumCollaborators] = useState(MINIMUM_MAKERS_DEFAULT_VAL) const [utxos, setUtxos] = useState(null) const [isSweep, setIsSweep] = useState(false) @@ -418,7 +418,7 @@ export default function Send() { if (!breakdown) return null return ( -
+
@@ -426,7 +426,7 @@ export default function Send() { {t('send.button_sweep_amount_breakdown')}
- + @@ -509,12 +509,10 @@ export default function Send() { -
- - {serviceInfo?.makerRunning && t('send.text_maker_running')} - {serviceInfo?.coinjoinInProgress && t('send.text_coinjoin_already_running')} - -
+ + {serviceInfo?.makerRunning && t('send.text_maker_running')} + {serviceInfo?.coinjoinInProgress && t('send.text_coinjoin_already_running')} + {alert && ( @@ -524,19 +522,6 @@ export default function Send() { )} - - {t('send.label_recipient')} - setDestination(e.target.value)} - isInvalid={destination !== null && !isValidAddress(destination)} - /> - {t('send.feedback_invalid_recipient')} - {settings.useAdvancedWalletMode ? t('send.label_account_dev_mode') : t('send.label_account')} @@ -561,7 +546,7 @@ export default function Send() { ))} - + {t('send.label_amount')}
{isSweep && frozenOrLockedWarning()} + + {t('send.label_recipient')} + setDestination(e.target.value)} + isInvalid={destination !== null && !isValidAddress(destination)} + /> + {t('send.feedback_invalid_recipient')} + {isCoinjoinOptionEnabled && ( - setIsCoinjoin(isToggled)} /> + setIsCoinjoin(isToggled)} + /> )} diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json index a7a8312f..29db3510 100644 --- a/src/i18n/locales/en/translation.json +++ b/src/i18n/locales/en/translation.json @@ -109,8 +109,8 @@ }, "current_wallet": { "text_loading": "Loading", - "button_deposit": "Deposit", - "button_withdraw": "Withdraw", + "button_deposit": "Receive", + "button_withdraw": "Send", "button_switch_wallet": "Switch wallet", "error_loading_failed": "Loading wallet failed." }, diff --git a/src/index.css b/src/index.css index ac92007f..46bf07f4 100644 --- a/src/index.css +++ b/src/index.css @@ -428,6 +428,12 @@ h2 { box-shadow: none; } +.alert-info { + color: var(--bs-white); + background-color: var(--bs-gray-800); + border-color: var(--bs-gray-900); +} + .modal-header { background-color: var(--bs-gray-800); color: var(--bs-white); @@ -438,6 +444,7 @@ h2 { url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23fff%27%3e%3cpath d=%27M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z%27/%3e%3c/svg%3e') center/1em auto no-repeat; } + /* Privacy Level Styles */ .privacy-level-4 { @@ -577,6 +584,10 @@ h2 { border-color: var(--bs-gray-800); } +:root[data-theme='dark'] .accordion-button.collapsed::after { + background-image: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23fff%27%3e%3cpath fill-rule=%27evenodd%27 d=%27M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z%27/%3e%3c/svg%3e'); +} + :root[data-theme='dark'] .btn-outline-dark:hover { background-color: var(--bs-gray-dark) !important; border-color: var(--bs-gray-dark) !important; @@ -602,3 +613,12 @@ h2 { :root[data-theme='dark'] .modal-header .btn-close { background-color: var(--bs-gray-900) !important; } + +:root[data-theme='dark'] .form-control:disabled, +.form-control[readonly] { + background-color: var(--bs-gray-500); +} + +:root[data-theme='dark'] .form-control:disabled::placeholder { + color: var(--bs-gray-600); +}