fix(ui): consistent button styles

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/Receive.jsx

@@ -104,8 +104,18 @@ export default function Receive({ wallet }) {
               <CopyButton
                 className="btn btn-outline-dark flex-1"
                 value={address}
-                text={t('receive.button_copy_address')}
-                successText={t('receive.text_copy_address_confirmed')}
+                text={
+                  <>
+                    <Sprite symbol="copy" className="me-1" width="24" height="24" />
+                    {t('receive.button_copy_address')}
+                  </>
+                }
+                successText={
+                  <>
+                    <Sprite color="green" symbol="checkmark" className="me-1" width="24" height="24" />
+                    {t('receive.text_copy_address_confirmed')}
+                  </>
+                }
                 disabled={!address || isLoading}
               />
               {checkIsWebShareAPISupported() && <ShareButton value={address} className="flex-1" />}

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);
 }

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);
 }

src/components/Send/index.tsx

@@ -920,10 +920,11 @@ export default function Send({ wallet }: SendProps) {
         </rb.Form>
         <rb.Button
           ref={submitButtonRef}
+          className={classNames('w-100', 'mb-4', styles.sendButton)}
           variant={submitButtonOptions.variant}
+          size="lg"
           type="submit"
           disabled={isOperationDisabled || isLoading || isSending || !formIsValid}
-          className={classNames(styles.button, styles.sendButton, 'mb-4')}
           form="send-form"
         >
           {isSending ? (

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
             />
           </div>
           <rb.Button
+            className="w-100 mb-4"
             variant="dark"
-            className={styles.button}
+            size="lg"
             type="submit"
             disabled={!sensitiveInfoWasRevealed || !userConfirmed || isSubmitting}
           >

src/components/WalletCreationForm.module.css

@@ -2,8 +2,3 @@
   height: 3.5rem;
   width: 100%;
 }
-
-.button {
-  height: 3rem;
-  width: 100%;
-}