From 964dbc92d3abb638b0834e3b213a1c9a6a9edc26 Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Sat, 9 Sep 2023 14:41:08 +0200 Subject: [PATCH 01/18] fix(ui): consistent button styles in WalletCreationForm --- src/components/WalletCreationForm.module.css | 5 ----- src/components/WalletCreationForm.tsx | 18 +++++++++--------- 2 files changed, 9 insertions(+), 14 deletions(-) diff --git a/src/components/WalletCreationForm.module.css b/src/components/WalletCreationForm.module.css index 7221cc054..821c7c679 100644 --- a/src/components/WalletCreationForm.module.css +++ b/src/components/WalletCreationForm.module.css @@ -2,8 +2,3 @@ height: 3.5rem; width: 100%; } - -.button { - height: 3rem; - width: 100%; -} diff --git a/src/components/WalletCreationForm.tsx b/src/components/WalletCreationForm.tsx index 14dde360d..fd4c6dbef 100644 --- a/src/components/WalletCreationForm.tsx +++ b/src/components/WalletCreationForm.tsx @@ -116,14 +116,12 @@ const WalletCreationForm = ({ {errors.passwordConfirm} - {isSubmitting ? ( -
+
+ {isSubmitting && (
- ) : ( - submitButtonText(isSubmitting) - )} + )} + {submitButtonText(isSubmitting)} +
{isSubmitting && (
@@ -137,8 +135,10 @@ const WalletCreationForm = ({ disabled={isSubmitting} onClick={() => onCancel()} > - - {t('global.cancel')} +
+ + {t('global.cancel')} +
)} From 057f2842d1a7f417604c98fe6004a8d538041309 Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Sat, 9 Sep 2023 14:46:02 +0200 Subject: [PATCH 02/18] fix(ui): consistent button styles in WalletCreationConfirmation --- src/components/WalletCreationConfirmation.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/WalletCreationConfirmation.tsx b/src/components/WalletCreationConfirmation.tsx index 55250067f..41b84d18f 100644 --- a/src/components/WalletCreationConfirmation.tsx +++ b/src/components/WalletCreationConfirmation.tsx @@ -5,8 +5,6 @@ import { Formik } from 'formik' import Seedphrase from './Seedphrase' import ToggleSwitch from './ToggleSwitch' import { walletDisplayName } from '../utils' -// TODO: currently reusing CreateWallet styles - move to own module.css? -import styles from './CreateWallet.module.css' export type WalletInfo = { walletFileName: string @@ -82,8 +80,9 @@ const WalletCreationConfirmation = ({ wallet, submitButtonText, onSubmit }: Wall />
From c9520b04da00200f9b0541d782804b6c7fa7a330 Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Sat, 9 Sep 2023 15:02:30 +0200 Subject: [PATCH 03/18] fix(ui): consistent button styles in Create/Import Wallet --- src/components/CreateWallet.jsx | 22 +++++++++---------- src/components/ImportWallet.tsx | 6 +++-- ...odule.css => MnemonicWordInput.module.css} | 5 ----- src/components/MnemonicWordInput.tsx | 2 +- 4 files changed, 16 insertions(+), 19 deletions(-) rename src/components/{CreateWallet.module.css => MnemonicWordInput.module.css} (71%) diff --git a/src/components/CreateWallet.jsx b/src/components/CreateWallet.jsx index b4e2072c5..0eacb0949 100644 --- a/src/components/CreateWallet.jsx +++ b/src/components/CreateWallet.jsx @@ -13,7 +13,6 @@ import { useServiceInfo } from '../context/ServiceInfoContext' import * as Api from '../libs/JmWalletApi' import { routes } from '../constants/routes' import { isDebugFeatureEnabled } from '../constants/debugFeatures' -import styles from './CreateWallet.module.css' const BackupConfirmation = ({ wallet, onSuccess, onCancel }) => { const { t } = useTranslation() @@ -45,17 +44,18 @@ const BackupConfirmation = ({ wallet, onSuccess, onCancel }) => {
{t('create_wallet.feedback_seed_confirmed')}
)} - onSuccess()} disabled={!isSeedBackupConfirmed}> + onSuccess()} + > {t('create_wallet.confirmation_button_fund_wallet')} -
- onCancel()} - > +
+ onCancel()}>
{t('create_wallet.back_button')} @@ -64,10 +64,10 @@ const BackupConfirmation = ({ wallet, onSuccess, onCancel }) => { {showSkipButton && ( onSuccess()} disabled={isSeedBackupConfirmed} + onClick={() => onSuccess()} >
{t('create_wallet.skip_button')} diff --git a/src/components/ImportWallet.tsx b/src/components/ImportWallet.tsx index 916a0707f..36a2271e8 100644 --- a/src/components/ImportWallet.tsx +++ b/src/components/ImportWallet.tsx @@ -209,8 +209,10 @@ const ImportWalletDetailsForm = ({
diff --git a/src/components/CreateWallet.module.css b/src/components/MnemonicWordInput.module.css similarity index 71% rename from src/components/CreateWallet.module.css rename to src/components/MnemonicWordInput.module.css index 36257fcbb..f4576c8e8 100644 --- a/src/components/CreateWallet.module.css +++ b/src/components/MnemonicWordInput.module.css @@ -3,11 +3,6 @@ width: 100%; } -.button { - height: 3rem; - width: 100%; -} - .seedwordIndexBackup { width: 5ch; justify-content: right; diff --git a/src/components/MnemonicWordInput.tsx b/src/components/MnemonicWordInput.tsx index 8d63b6b61..fcbf93a23 100644 --- a/src/components/MnemonicWordInput.tsx +++ b/src/components/MnemonicWordInput.tsx @@ -1,6 +1,6 @@ import * as rb from 'react-bootstrap' import { useTranslation } from 'react-i18next' -import styles from './CreateWallet.module.css' +import styles from './MnemonicWordInput.module.css' interface MnemonicWordInputProps { index: number From 4722fffedeae346eef4bc1061efcfaccdd1307df Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Sat, 9 Sep 2023 15:08:10 +0200 Subject: [PATCH 04/18] fix(ui): consistent button styles on Wallet List --- src/index.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/index.css b/src/index.css index fa4002b30..3f6b0fb7b 100644 --- a/src/index.css +++ b/src/index.css @@ -506,11 +506,6 @@ h2 { text-decoration: underline; } -.wallets .btn { - padding: 0.25rem 1rem; - font-weight: 500; -} - .wallets .btn.btn-outline-dark:not(:hover) { border-color: rgba(222, 222, 222, 1); } From 10722f4d8ee09d3bf2c3dd691fbc824c601bbeb8 Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Sat, 9 Sep 2023 15:08:50 +0200 Subject: [PATCH 05/18] fix(ui): consistent button text when submitting on create wallet --- src/i18n/locales/en/translation.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json index 649ece11e..6f5a99605 100644 --- a/src/i18n/locales/en/translation.json +++ b/src/i18n/locales/en/translation.json @@ -133,7 +133,7 @@ "placeholder_password_confirm": "Repeat the password...", "feedback_invalid_password_confirm": "Given passwords do not match.", "button_create": "Create", - "button_creating": "Creating", + "button_creating": "Creating...", "error_creating_failed": "Error while creating the wallet. Reason: {{ reason }}", "alert_confirmation_failed": "Wallet confirmation failed.", "confirmation_label_wallet_name": "Wallet Name", From 4c0831181976d26a75968dc7f6750a666e0e2fe8 Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Sat, 9 Sep 2023 15:15:30 +0200 Subject: [PATCH 06/18] fix(ui): consistent button styles on Send page --- src/components/Send/Send.module.css | 15 ++------------- src/components/Send/index.tsx | 3 ++- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/src/components/Send/Send.module.css b/src/components/Send/Send.module.css index 052d3ad47..e4539b2f1 100644 --- a/src/components/Send/Send.module.css +++ b/src/components/Send/Send.module.css @@ -103,24 +103,13 @@ input[type='number'] { color: var(--bs-white) !important; } -.button { - height: 3rem; - width: 100%; -} - .inputLoader { height: 3.5rem; border-radius: 0.25rem; } -.serviceRunning .sendForm { - filter: blur(2px); -} - -.serviceRunning .collaboratorsSelector { - filter: blur(2px); -} - +.serviceRunning .sendForm, +.serviceRunning .collaboratorsSelector, .serviceRunning .sendButton { filter: blur(2px); } diff --git a/src/components/Send/index.tsx b/src/components/Send/index.tsx index a41c14d94..a82411140 100644 --- a/src/components/Send/index.tsx +++ b/src/components/Send/index.tsx @@ -920,10 +920,11 @@ export default function Send({ wallet }: SendProps) { {isSending ? ( From 1a94c78d013bcf1a4b9ce8de57a91461590da0d1 Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Sat, 9 Sep 2023 15:23:48 +0200 Subject: [PATCH 07/18] fix(ui): consistent button styles on Earn page --- src/components/Earn.jsx | 59 ++++++++++++++++------------------ src/components/Earn.module.css | 5 --- 2 files changed, 28 insertions(+), 36 deletions(-) diff --git a/src/components/Earn.jsx b/src/components/Earn.jsx index a9a5a383d..b17427be6 100644 --- a/src/components/Earn.jsx +++ b/src/components/Earn.jsx @@ -368,7 +368,7 @@ export default function Earn({ wallet }) {
- + @@ -610,21 +610,22 @@ export default function Earn({ wallet }) { )} -
- -
- {(isWaitingMakerStart || isWaitingMakerStop) && ( + +
+ {isWaitingMakerStart || isWaitingMakerStop ? ( + <>
- -
+ {isWaitingMakerStart && t('earn.text_starting')} + {isWaitingMakerStop && t('earn.text_stopping')} + + ) : ( + <>{serviceInfo?.makerRunning === true ? t('earn.button_stop') : t('earn.button_start')} + )} +
+ )} @@ -652,7 +649,7 @@ export default function Earn({ wallet }) { )} - + setIsShowOrderbook(true)} > @@ -673,7 +670,7 @@ export default function Earn({ wallet }) { setIsShowReport(true)} > diff --git a/src/components/Earn.module.css b/src/components/Earn.module.css index f43f9129d..f42076758 100644 --- a/src/components/Earn.module.css +++ b/src/components/Earn.module.css @@ -12,11 +12,6 @@ height: 3.5rem; } -.earn .earn-btn { - height: 3rem; - width: 100%; -} - .inputGroupText { width: 5ch; display: inline-flex; From 6438a40ceaa0dc1dcd49dcedea5cbdbc0150d28a Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Sat, 9 Sep 2023 18:32:08 +0200 Subject: [PATCH 08/18] fix(ui): consistent button stlyes on MainWalletView page --- src/components/MainWalletView.module.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/MainWalletView.module.css b/src/components/MainWalletView.module.css index 4ee6a051f..36e3de5dc 100644 --- a/src/components/MainWalletView.module.css +++ b/src/components/MainWalletView.module.css @@ -62,7 +62,6 @@ } .sendReceiveButton { - padding: 0.25rem; font-weight: 500; - border-color: rgba(222, 222, 222, 1) !important; + border-color: rgba(222, 222, 222, 1); } From dea8e0148faf171b05555137d9db2c196786c02b Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Sat, 9 Sep 2023 19:11:47 +0200 Subject: [PATCH 09/18] fix(ui): consistent button styles on Receive page --- src/components/Receive.jsx | 15 +++++++++++++-- src/components/Receive.module.css | 1 - 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/Receive.jsx b/src/components/Receive.jsx index 433b2f4b3..e232bb99d 100644 --- a/src/components/Receive.jsx +++ b/src/components/Receive.jsx @@ -103,9 +103,20 @@ export default function Receive({ wallet }) {
+ + {t('receive.button_copy_address')} + + } + successText={ + <> + + {t('receive.text_copy_address_confirmed')} + + } disabled={!address || isLoading} /> {checkIsWebShareAPISupported() && } diff --git a/src/components/Receive.module.css b/src/components/Receive.module.css index 844a123fc..31adaff6f 100644 --- a/src/components/Receive.module.css +++ b/src/components/Receive.module.css @@ -9,7 +9,6 @@ } .receive button { - padding: 0.25rem 1rem; font-weight: 500; border-color: rgba(222, 222, 222, 1); } From 50ec43c13ab4508e7b3dbbec4260b68bd8ec7444 Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Sat, 9 Sep 2023 19:16:23 +0200 Subject: [PATCH 10/18] refactor(CopyButton): remove sprites --- src/components/CopyButton.tsx | 20 ++++---------------- src/components/Receive.jsx | 1 - src/components/fb/ExistingFidelityBond.tsx | 1 - src/components/fb/FidelityBondSteps.tsx | 2 -- src/components/jar_details/DisplayBranch.tsx | 3 +-- 5 files changed, 5 insertions(+), 22 deletions(-) diff --git a/src/components/CopyButton.tsx b/src/components/CopyButton.tsx index e8dd31128..8d7bab20e 100644 --- a/src/components/CopyButton.tsx +++ b/src/components/CopyButton.tsx @@ -1,5 +1,4 @@ -import React, { PropsWithChildren, useState, useEffect, useRef } from 'react' -import Sprite from './Sprite' +import { ReactNode, PropsWithChildren, useState, useEffect, useRef } from 'react' const copyToClipboard = ( text: string, @@ -69,10 +68,9 @@ function Copyable({ value, onSuccess, onError, className, children, ...props }: } interface CopyButtonProps extends CopyableProps { - text: React.ReactNode | string - successText?: React.ReactNode | string + text: ReactNode + successText?: ReactNode successTextTimeout?: number - showSprites?: boolean } export function CopyButton({ @@ -83,7 +81,6 @@ export function CopyButton({ successText = text, successTextTimeout = 1_500, className, - showSprites = true, ...props }: CopyButtonProps) { const [showValueCopiedConfirmation, setShowValueCopiedConfirmation] = useState(false) @@ -112,16 +109,7 @@ export function CopyButton({ }} >
- {showSprites && ( - <> - {showValueCopiedConfirmation ? ( - - ) : ( - - )} - - )} - <>{showValueCopiedConfirmation ? successText : text} + {showValueCopiedConfirmation ? successText : text}
) diff --git a/src/components/Receive.jsx b/src/components/Receive.jsx index e232bb99d..d51ecd56d 100644 --- a/src/components/Receive.jsx +++ b/src/components/Receive.jsx @@ -103,7 +103,6 @@ export default function Receive({ wallet }) {
diff --git a/src/components/fb/ExistingFidelityBond.tsx b/src/components/fb/ExistingFidelityBond.tsx index 9ccb8fa7f..7a9dfda66 100644 --- a/src/components/fb/ExistingFidelityBond.tsx +++ b/src/components/fb/ExistingFidelityBond.tsx @@ -77,7 +77,6 @@ const ExistingFidelityBond = ({ fidelityBond, children }: PropsWithChildren
} successText={} value={fidelityBond.address} diff --git a/src/components/fb/FidelityBondSteps.tsx b/src/components/fb/FidelityBondSteps.tsx index 8168a3255..1dfd3174d 100644 --- a/src/components/fb/FidelityBondSteps.tsx +++ b/src/components/fb/FidelityBondSteps.tsx @@ -316,7 +316,6 @@ const ReviewInputs = ({ lockDate, jar, utxos, selectedUtxos, timelockedAddress } { icon: ( } successText={} value={timelockedAddress} @@ -391,7 +390,6 @@ const CreatedFidelityBond = ({ fbUtxo, frozenUtxos }: CreatedFidelityBondProps)
} successText={} value={fbUtxo.address} diff --git a/src/components/jar_details/DisplayBranch.tsx b/src/components/jar_details/DisplayBranch.tsx index ad1bd306a..99c6a4202 100644 --- a/src/components/jar_details/DisplayBranch.tsx +++ b/src/components/jar_details/DisplayBranch.tsx @@ -126,8 +126,7 @@ const DisplayBranchEntry = ({ entry, ...props }: DisplayBranchEntryProps) => { {address} From 4400680530f600532a03155426920ea1c4c1c78a Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Sat, 9 Sep 2023 19:55:51 +0200 Subject: [PATCH 11/18] ui(Earn): reduce spacing between buttons --- src/components/Earn.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Earn.jsx b/src/components/Earn.jsx index b17427be6..251b1510b 100644 --- a/src/components/Earn.jsx +++ b/src/components/Earn.jsx @@ -368,7 +368,7 @@ export default function Earn({ wallet }) {
- + From 9e03bc3c52b350c9afd26e88c3d117e694455aa4 Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Sat, 9 Sep 2023 20:02:21 +0200 Subject: [PATCH 12/18] fix(ui): consistent button styles on Jam page --- src/components/Jam.module.css | 5 ----- src/components/Jam.tsx | 6 ++++-- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/Jam.module.css b/src/components/Jam.module.css index 6f2500007..fc6c44f9f 100644 --- a/src/components/Jam.module.css +++ b/src/components/Jam.module.css @@ -1,8 +1,3 @@ -.submit { - height: 3rem; - width: 100%; -} - .input { height: 3.5rem; width: 100%; diff --git a/src/components/Jam.tsx b/src/components/Jam.tsx index f197a097f..d215cd219 100644 --- a/src/components/Jam.tsx +++ b/src/components/Jam.tsx @@ -345,8 +345,9 @@ export default function Jam({ wallet }: JamProps) {
{ await stopSchedule() @@ -506,8 +507,9 @@ export default function Jam({ wallet }: JamProps) {

{t('scheduler.description_fees')}

From fccc3d3c8c94e6cbec2a195f7602e8d88587c4c7 Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Sat, 9 Sep 2023 21:21:11 +0200 Subject: [PATCH 13/18] fix(ui): consistent button styles in CreateFidelityBond flow --- src/components/fb/CreateFidelityBond.module.css | 15 --------------- src/components/fb/CreateFidelityBond.tsx | 7 ++++--- 2 files changed, 4 insertions(+), 18 deletions(-) diff --git a/src/components/fb/CreateFidelityBond.module.css b/src/components/fb/CreateFidelityBond.module.css index 8bb622249..2b4545daf 100644 --- a/src/components/fb/CreateFidelityBond.module.css +++ b/src/components/fb/CreateFidelityBond.module.css @@ -43,21 +43,6 @@ display: none; } -.buttons { - display: flex; - flex-direction: column; - gap: 0.5rem; - margin-top: 1rem; -} - -.buttons > button { - display: flex; - justify-content: center; - align-items: center; - height: 2.2rem; - font-size: 1rem; -} - .successCheckmark { width: '2rem'; height: '2rem'; diff --git a/src/components/fb/CreateFidelityBond.tsx b/src/components/fb/CreateFidelityBond.tsx index b4a497a97..45909cd86 100644 --- a/src/components/fb/CreateFidelityBond.tsx +++ b/src/components/fb/CreateFidelityBond.tsx @@ -452,7 +452,7 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon } if (currentStep === steps.selectJar) { - if (selectedJar !== null) { + if (selectedJar !== undefined) { return steps.selectUtxos } } @@ -625,9 +625,10 @@ const CreateFidelityBond = ({ otherFidelityBondExists, wallet, walletInfo, onDon
{stepComponent(step)}
-
+
{!isLoading && primaryButtonText(step) !== null && ( )} {!isLoading && secondaryButtonText(step) !== null && ( - + {secondaryButtonText(step)} )} From da1e59397e7898cc88e45fd6dadd98c94eb99f83 Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Sat, 9 Sep 2023 21:48:29 +0200 Subject: [PATCH 14/18] fix(ui): border color of send/receive button on MainWalletView --- src/components/MainWalletView.module.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/MainWalletView.module.css b/src/components/MainWalletView.module.css index 36e3de5dc..f882ae277 100644 --- a/src/components/MainWalletView.module.css +++ b/src/components/MainWalletView.module.css @@ -63,5 +63,9 @@ .sendReceiveButton { font-weight: 500; - border-color: rgba(222, 222, 222, 1); + border-color: var(--bs-border-color) !important; +} + +.sendReceiveButton:hover { + border-color: transparent !important; } From 430f6aaae74656be86f96c0295675b5b37ce2354 Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Sat, 9 Sep 2023 21:55:10 +0200 Subject: [PATCH 15/18] fix(ui): button spacing on Jam page --- src/components/Jam.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Jam.tsx b/src/components/Jam.tsx index d215cd219..08158953e 100644 --- a/src/components/Jam.tsx +++ b/src/components/Jam.tsx @@ -522,7 +522,7 @@ export default function Jam({ wallet }: JamProps) { )} - + Date: Sat, 9 Sep 2023 22:12:46 +0200 Subject: [PATCH 16/18] dev(feat): add fast theme toggle to navbar --- src/components/Navbar.tsx | 36 ++++++++++++++++++++++++++++++++-- src/constants/debugFeatures.ts | 2 ++ src/index.css | 4 ++++ 3 files changed, 40 insertions(+), 2 deletions(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 14118e079..df5b985fa 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,4 +1,4 @@ -import { useMemo, useState } from 'react' +import { useCallback, useMemo, useState } from 'react' import { Link, NavLink, To } from 'react-router-dom' import * as rb from 'react-bootstrap' import { useTranslation } from 'react-i18next' @@ -6,7 +6,7 @@ import classNames from 'classnames' import Sprite from './Sprite' import Balance from './Balance' import { TabActivityIndicator, JoiningIndicator } from './ActivityIndicators' -import { useSettings } from '../context/SettingsContext' +import { useSettings, useSettingsDispatch } from '../context/SettingsContext' import { CurrentWallet, useCurrentWallet, useCurrentWalletInfo } from '../context/WalletContext' import { useServiceInfo, useSessionConnectionError } from '../context/ServiceInfoContext' import { walletDisplayName } from '../utils' @@ -14,6 +14,7 @@ import { routes } from '../constants/routes' import { AmountSats } from '../libs/JmWalletApi' import styles from './Navbar.module.css' +import { isDebugFeatureEnabled } from '../constants/debugFeatures' const BalanceLoadingIndicator = () => { return ( @@ -187,6 +188,11 @@ const TrailingNav = ({ joiningRoute, onClick }: TrailingNavProps) => {
)} + {isDebugFeatureEnabled('fastThemeToggle') && ( + + + + )} { ) } +function FastThemeToggle() { + const settings = useSettings() + const settingsDispatch = useSettingsDispatch() + const isLightTheme = useMemo(() => settings.theme === window.JM.THEMES[0], [settings]) + + const setTheme = useCallback( + (theme) => { + if (window.JM.THEMES.includes(theme)) { + document.documentElement.setAttribute(window.JM.THEME_ROOT_ATTR, theme) + settingsDispatch({ theme }) + } + }, + [settingsDispatch] + ) + + return ( + setTheme(isLightTheme ? window.JM.THEMES[1] : window.JM.THEMES[0])} + symbol={isLightTheme ? window.JM.THEMES[0] : window.JM.THEMES[1]} + width="30" + height="30" + /> + ) +} + export default function Navbar() { const { t } = useTranslation() const settings = useSettings() diff --git a/src/constants/debugFeatures.ts b/src/constants/debugFeatures.ts index eb3dcc635..97e3ab76d 100644 --- a/src/constants/debugFeatures.ts +++ b/src/constants/debugFeatures.ts @@ -5,6 +5,7 @@ interface DebugFeatures { errorExamplePage: boolean importDummyMnemonicPhrase: boolean rescanChainPage: boolean + fastThemeToggle: boolean } const devMode = process.env.NODE_ENV === 'development' && process.env.REACT_APP_JAM_DEV_MODE === 'true' @@ -16,6 +17,7 @@ const debugFeatures: DebugFeatures = { errorExamplePage: devMode, importDummyMnemonicPhrase: devMode, rescanChainPage: devMode, + fastThemeToggle: devMode, } type DebugFeature = keyof DebugFeatures diff --git a/src/index.css b/src/index.css index 3f6b0fb7b..0e76a8d92 100644 --- a/src/index.css +++ b/src/index.css @@ -293,6 +293,10 @@ main { font-size: 0.875rem; } +.cursor-pointer { + cursor: pointer; +} + /* Fullscreen Overlays */ .offcanvas-fullscreen { width: 100vw !important; From fc3afc4aaf5d9dabfa414d01e691a76428522d2e Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Sun, 10 Sep 2023 01:08:14 +0200 Subject: [PATCH 17/18] fix(ui): align onboarding flow --- src/components/App.tsx | 4 +- src/components/Onboarding.jsx | 124 +++++++++++++++------------ src/components/Onboarding.module.css | 9 ++ src/index.css | 17 ++-- 4 files changed, 84 insertions(+), 70 deletions(-) create mode 100644 src/components/Onboarding.module.css diff --git a/src/components/App.tsx b/src/components/App.tsx index cf5c76b8c..89eecfbdb 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -179,8 +179,8 @@ export default function App() { if (settings.showOnboarding === true) { return ( - - + + diff --git a/src/components/Onboarding.jsx b/src/components/Onboarding.jsx index dc151e61e..4207ae824 100644 --- a/src/components/Onboarding.jsx +++ b/src/components/Onboarding.jsx @@ -1,76 +1,83 @@ +import { useCallback, useState, useMemo } from 'react' import * as rb from 'react-bootstrap' -import React, { useState } from 'react' import { Trans, useTranslation } from 'react-i18next' import Sprite from './Sprite' import { useSettingsDispatch } from '../context/SettingsContext' +import styles from './Onboarding.module.css' export default function Onboarding() { const { t } = useTranslation() const [step, setStep] = useState(0) const settingsDispatch = useSettingsDispatch() - const next = () => { + const steps = useMemo( + () => [ + { + title: t('onboarding.screen_1_title'), + description: t('onboarding.screen_1_description'), + icon: , + }, + { + title: t('onboarding.screen_2_title'), + description: t('onboarding.screen_2_description'), + icon: , + }, + { + title: t('onboarding.screen_3_title'), + description: t('onboarding.screen_3_description'), + icon: , + }, + { + title: t('onboarding.screen_4_title'), + description: t('onboarding.screen_4_description'), + icon: , + }, + { + title: t('onboarding.screen_5_title'), + description: t('onboarding.screen_5_description'), + icon: , + }, + ], + [t] + ) + + const next = useCallback(() => { if (step < steps.length) { setStep(step + 1) } else { settingsDispatch({ showOnboarding: false }) } - } + }, [step, steps.length, settingsDispatch]) - const steps = [ - { - title: t('onboarding.screen_1_title'), - description: t('onboarding.screen_1_description'), - icon: 'welcome', - }, - { - title: t('onboarding.screen_2_title'), - description: t('onboarding.screen_2_description'), - icon: 'collab', - }, - { - title: t('onboarding.screen_3_title'), - description: t('onboarding.screen_3_description'), - icon: 'key', - }, - { - title: t('onboarding.screen_4_title'), - description: t('onboarding.screen_4_description'), - icon: 'handshake', - }, - { - title: t('onboarding.screen_5_title'), - description: t('onboarding.screen_5_description'), - icon: 'shield-outline', - }, - ] + const back = () => setStep((current) => Math.max(0, current - 1)) if (step === 0) { return ( -
-
+ <> +
-
-

{t('onboarding.splashscreen_title')}

-

{t('onboarding.splashscreen_subtitle')}

-
- +

{t('onboarding.splashscreen_title')}

+

{t('onboarding.splashscreen_subtitle')}

+ {t('onboarding.splashscreen_button_get_started')} -
-
- settingsDispatch({ showOnboarding: false })}> + settingsDispatch({ showOnboarding: false })} + > {t('onboarding.splashscreen_button_skip_intro')}
-

- {t('onboarding.splashscreen_description_line1')} -
- {t('onboarding.splashscreen_description_line2')} -

-
-
{t('onboarding.splashscreen_warning_title')}
-
+
+

+ {t('onboarding.splashscreen_description_line1')} +
+ {t('onboarding.splashscreen_description_line2')} +

+
{t('onboarding.splashscreen_warning_title')}
+

While JoinMarket is tried and tested, Jam is not. It is in a beta stage, so use with caution. -

+

-
+ ) } else { const content = steps[step - 1] return ( <> -
-
- +
+
{content.icon}
+

{content.title}

+
+ {content.description}
-

{content.title}

-

{content.description}

-
- +
+ {step === steps.length ? t('onboarding.button_complete') : t('onboarding.button_next')} + + {t('global.back')} +
) diff --git a/src/components/Onboarding.module.css b/src/components/Onboarding.module.css new file mode 100644 index 000000000..80b18a493 --- /dev/null +++ b/src/components/Onboarding.module.css @@ -0,0 +1,9 @@ +.icon { + min-height: 19ch; +} +.title { + min-height: 4ch; +} +.description { + min-height: 17ch; +} diff --git a/src/index.css b/src/index.css index 0e76a8d92..62c5ce85e 100644 --- a/src/index.css +++ b/src/index.css @@ -292,10 +292,16 @@ main { .text-small { font-size: 0.875rem; } +.text-justify { + text-align: justify; +} .cursor-pointer { cursor: pointer; } +.cursor-wait { + cursor: wait; +} /* Fullscreen Overlays */ .offcanvas-fullscreen { @@ -550,21 +556,10 @@ h2 { } } -/* Onboarding */ - -.onboarding button { - height: 3rem; - width: 80%; -} - .btn:disabled:hover { cursor: not-allowed; } -.cursor-wait { - cursor: wait; -} - .accordion { --bs-accordion-color: var(--bs-black); --bs-accordion-active-color: var(--bs-black); From 3ea7c3eb78b4bacf445839c7a76eb05a7562e674 Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Sun, 10 Sep 2023 01:42:48 +0200 Subject: [PATCH 18/18] dev(ui): hide fast theme toggle on small screens --- src/components/Navbar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index df5b985fa..7d59c3bc3 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -189,7 +189,7 @@ const TrailingNav = ({ joiningRoute, onClick }: TrailingNavProps) => { )} {isDebugFeatureEnabled('fastThemeToggle') && ( - + )}