fix(ui): consistent button styles (#656)

* fix(ui): consistent button styles in WalletCreationForm

* fix(ui): consistent button styles in WalletCreationConfirmation

* fix(ui): consistent button styles in Create/Import Wallet

* fix(ui): consistent button styles on Wallet List

* fix(ui): consistent button text when submitting on create wallet

* fix(ui): consistent button styles on Send page

* fix(ui): consistent button styles on Earn page

* fix(ui): consistent button stlyes on MainWalletView page

* fix(ui): consistent button styles on Receive page

* refactor(CopyButton): remove sprites

* fix(ui): consistent button styles on Jam page

* fix(ui): consistent button styles in CreateFidelityBond flow

* fix(ui): border color of send/receive button on MainWalletView

* dev(feat): add fast theme toggle to navbar

* fix(ui): align onboarding flow

src/components/App.tsx

@@ -179,8 +179,8 @@ export default function App() {
 
   if (settings.showOnboarding === true) {
     return (
-      <rb.Container className="onboarding my-5">
-        <rb.Row className="justify-content-center mt-md-5">
+      <rb.Container className="onboarding pt-3 pt-md-5">
+        <rb.Row className="justify-content-center">
           <rb.Col xs={10} sm={10} md={8} lg={6} xl={4}>
             <Onboarding />
           </rb.Col>

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({
       }}
     >
       <div className="d-flex align-items-center justify-content-center">
-        {showSprites && (
-          <>
-            {showValueCopiedConfirmation ? (
-              <Sprite color="green" symbol="checkmark" className="me-1" width="20" height="20" />
-            ) : (
-              <Sprite symbol="copy" className="me-1" width="20" height="20" />
-            )}
-          </>
-        )}
-        <>{showValueCopiedConfirmation ? successText : text}</>
+        {showValueCopiedConfirmation ? successText : text}
       </div>
     </Copyable>
   )

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 }) => {
         <div className="mb-4 text-center text-success">{t('create_wallet.feedback_seed_confirmed')}</div>
       )}
 
-      <rb.Button variant="dark" className={styles.button} onClick={() => onSuccess()} disabled={!isSeedBackupConfirmed}>
+      <rb.Button
+        className="w-100 mb-4"
+        variant="dark"
+        size="lg"
+        disabled={!isSeedBackupConfirmed}
+        onClick={() => onSuccess()}
+      >
         {t('create_wallet.confirmation_button_fund_wallet')}
       </rb.Button>
 
-      <div className="d-flex mt-4 mb-4 gap-4">
-        <rb.Button
-          variant="outline-dark"
-          disabled={isSeedBackupConfirmed}
-          className={styles.button}
-          onClick={() => onCancel()}
-        >
+      <div className="d-flex justify-content-between mb-4 gap-4">
+        <rb.Button variant="none" disabled={isSeedBackupConfirmed} onClick={() => onCancel()}>
           <div className="d-flex justify-content-center align-items-center">
             <Sprite symbol="arrow-left" width="20" height="20" className="me-2" />
             {t('create_wallet.back_button')}
@@ -64,10 +64,10 @@ const BackupConfirmation = ({ wallet, onSuccess, onCancel }) => {
 
         {showSkipButton && (
           <rb.Button
+            className="position-relative"
             variant="outline-dark"
-            className={`${styles.button} position-relative`}
-            onClick={() => onSuccess()}
             disabled={isSeedBackupConfirmed}
+            onClick={() => onSuccess()}
           >
             <div className="d-flex justify-content-center align-items-center">
               {t('create_wallet.skip_button')}

src/components/Earn.jsx

@@ -368,7 +368,7 @@ export default function Earn({ wallet }) {
     <div className={styles['earn']}>
       <PageTitle title={t('earn.title')} subtitle={t('earn.subtitle')} />
 
-      <rb.Row>
+      <rb.Row className="mb-2">
         <rb.Col>
           <rb.Fade in={serviceInfo?.coinjoinInProgress} mountOnEnter={true} unmountOnExit={true}>
             <rb.Alert variant="info" className="mb-4">
@@ -610,21 +610,22 @@ export default function Earn({ wallet }) {
                         </>
                       </Accordion>
                     )}
-                    <div className="mb-4">
-                      <rb.Button
-                        variant="dark"
-                        type="submit"
-                        className={styles['earn-btn']}
-                        disabled={
-                          isLoading ||
-                          isSubmitting ||
-                          serviceInfo?.rescanning === true ||
-                          isWaitingMakerStart ||
-                          isWaitingMakerStop
-                        }
-                      >
-                        <div className="d-flex justify-content-center align-items-center">
-                          {(isWaitingMakerStart || isWaitingMakerStop) && (
+                    <rb.Button
+                      className="w-100 mb-4"
+                      variant="dark"
+                      size="lg"
+                      type="submit"
+                      disabled={
+                        isLoading ||
+                        isSubmitting ||
+                        serviceInfo?.rescanning === true ||
+                        isWaitingMakerStart ||
+                        isWaitingMakerStop
+                      }
+                    >
+                      <div className="d-flex justify-content-center align-items-center">
+                        {isWaitingMakerStart || isWaitingMakerStop ? (
+                          <>
                             <rb.Spinner
                               as="span"
                               animation="border"
@@ -633,26 +634,22 @@ export default function Earn({ wallet }) {
                               aria-hidden="true"
                               className="me-2"
                             />
-                          )}
-                          {isWaitingMakerStart || isWaitingMakerStop ? (
-                            <>
-                              {isWaitingMakerStart && t('earn.text_starting')}
-                              {isWaitingMakerStop && t('earn.text_stopping')}
-                            </>
-                          ) : (
-                            <>{serviceInfo?.makerRunning === true ? t('earn.button_stop') : t('earn.button_start')}</>
-                          )}
-                        </div>
-                      </rb.Button>
-                    </div>
+                            {isWaitingMakerStart && t('earn.text_starting')}
+                            {isWaitingMakerStop && t('earn.text_stopping')}
+                          </>
+                        ) : (
+                          <>{serviceInfo?.makerRunning === true ? t('earn.button_stop') : t('earn.button_start')}</>
+                        )}
+                      </div>
+                    </rb.Button>
                   </rb.Form>
                 </>
               )}
             </Formik>
           )}
         </rb.Col>
       </rb.Row>
-      <rb.Row className="my-3">
+      <rb.Row className="mb-4">
         <rb.Col className="d-flex justify-content-center">
           <OrderbookOverlay
             show={isShowOrderbook}
@@ -661,7 +658,7 @@ export default function Earn({ wallet }) {
           />
           <rb.Button
             variant="outline-dark"
-            className="border-0 mb-2 d-inline-flex align-items-center"
+            className="border-0 d-inline-flex align-items-center"
             onClick={() => setIsShowOrderbook(true)}
           >
             <Sprite symbol="globe" width="24" height="24" className="me-2" />
@@ -673,7 +670,7 @@ export default function Earn({ wallet }) {
 
           <rb.Button
             variant="outline-dark"
-            className="border-0 mb-2 d-inline-flex align-items-center"
+            className="border-0 d-inline-flex align-items-center"
             onClick={() => setIsShowReport(true)}
           >
             <Sprite symbol="show" width="24" height="24" className="me-2" />

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;

src/components/ImportWallet.tsx

@@ -209,8 +209,10 @@ const ImportWalletDetailsForm = ({
           </rb.Button>
           <div className="d-flex mb-4 gap-4">
             <rb.Button variant="none" hidden={isSubmitting} disabled={isSubmitting} onClick={() => onCancel()}>
-              <Sprite symbol="arrow-left" width="20" height="20" className="me-2" />
-              {t('global.back')}
+              <div className="d-flex justify-content-center align-items-center">
+                <Sprite symbol="arrow-left" width="20" height="20" className="me-2" />
+                {t('global.back')}
+              </div>
             </rb.Button>
           </div>
         </rb.Form>

src/components/Jam.module.css

@@ -1,8 +1,3 @@
-.submit {
-  height: 3rem;
-  width: 100%;
-}
-
 .input {
   height: 3.5rem;
   width: 100%;

src/components/Jam.tsx

@@ -345,8 +345,9 @@ export default function Jam({ wallet }: JamProps) {
                   </div>
 
                   <rb.Button
-                    className={styles.submit}
+                    className="w-100 mb-4"
                     variant="dark"
+                    size="lg"
                     disabled={isLoading}
                     onClick={async () => {
                       await stopSchedule()
@@ -506,8 +507,9 @@ export default function Jam({ wallet }: JamProps) {
                           <p className="text-secondary mb-4">{t('scheduler.description_fees')}</p>
 
                           <rb.Button
-                            className={styles.submit}
+                            className="w-100 mb-4"
                             variant="dark"
+                            size="lg"
                             type="submit"
                             disabled={isSubmitting || !isValid || serviceInfo?.rescanning === true}
                           >
@@ -520,7 +522,7 @@ export default function Jam({ wallet }: JamProps) {
                     )}
                   </Formik>
 
-                  <rb.Row className="mt-5 mb-3">
+                  <rb.Row className="mt-2 mb-4">
                     <rb.Col className="d-flex justify-content-center">
                       <rb.Button
                         variant="outline-dark"

src/components/MainWalletView.module.css

@@ -62,7 +62,10 @@
 }
 
 .sendReceiveButton {
-  padding: 0.25rem;
   font-weight: 500;
-  border-color: rgba(222, 222, 222, 1) !important;
+  border-color: var(--bs-border-color) !important;
+}
+
+.sendReceiveButton:hover {
+  border-color: transparent !important;
 }

src/components/CreateWallet.module.css → src/components/MnemonicWordInput.module.css

@@ -3,11 +3,6 @@
   width: 100%;
 }
 
-.button {
-  height: 3rem;
-  width: 100%;
-}
-
 .seedwordIndexBackup {
   width: 5ch;
   justify-content: right;

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

src/components/Navbar.tsx

@@ -1,19 +1,20 @@
-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'
 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'
 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) => {
           </div>
         </rb.Nav.Item>
       )}
+      {isDebugFeatureEnabled('fastThemeToggle') && (
+        <rb.Nav.Item className="d-none d-md-flex align-items-center pe-2">
+          <FastThemeToggle />
+        </rb.Nav.Item>
+      )}
       <rb.Nav.Item className="d-flex align-items-stretch">
         <NavLink
           to={routes.settings}
@@ -203,6 +209,32 @@ const TrailingNav = ({ joiningRoute, onClick }: TrailingNavProps) => {
   )
 }
 
+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 (
+    <Sprite
+      className="cursor-pointer"
+      onClick={() => 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()