fix(style): reduce custom btn colors

joinmarket-webui · Nov 26, 2023 · bffd4fa · bffd4fa
1 parent a0bc8c8
commit bffd4fa
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 76 deletions.
diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx
@@ -25,7 +25,7 @@ const Accordion = ({
     <div>
       <rb.Button
         variant={settings.theme}
-        className="d-flex align-items-center bg-transparent border-0 w-100 px-0 py-2"
+        className="d-flex align-items-center bg-transparent border-0 rounded-0 w-100 px-0 py-2"
         onClick={() => setIsOpen((current) => !current)}
         disabled={disabled}
       >
@@ -50,7 +50,7 @@ const Accordion = ({
         </div>
         <Sprite symbol={`caret-${isOpen ? 'up' : 'down'}`} className="ms-1" width="20" height="20" />
       </rb.Button>
-      <hr className="m-0 pb-4 text-secondary" />
+      <div className="m-0 mb-4 border-0 border-bottom" />
       <rb.Collapse in={isOpen}>
         <div>{children}</div>
       </rb.Collapse>

diff --git a/src/components/Earn.module.css b/src/components/Earn.module.css
@@ -20,16 +20,6 @@
   font-size: 1.2rem;
 }
 
-.earn hr {
-  border-color: rgba(222, 222, 222, 1);
-  opacity: 100%;
-}
-
-:root[data-theme='dark'] .earn hr {
-  border-color: var(--bs-gray-800);
-  opacity: 100%;
-}
-
 .offerLoader {
   height: 10rem;
   border-radius: 0.25rem;

diff --git a/src/components/Modal.module.css b/src/components/Modal.module.css
@@ -38,8 +38,8 @@
 }
 
 .modal-footer :global .btn {
+  --bs-btn-border-color: var(--bs-border-color);
   flex-grow: 1;
   min-height: 2.8rem;
   font-weight: 500;
-  border-color: rgba(222, 222, 222, 1);
 }
diff --git a/src/components/Receive.module.css b/src/components/Receive.module.css
@@ -1,16 +1,5 @@
-.receive hr {
-  border-color: rgba(222, 222, 222, 1);
-  opacity: 100%;
-}
-
-:root[data-theme='dark'] .receive hr {
-  border-color: var(--bs-gray-800);
-  opacity: 100%;
-}
-
 .receive button {
   font-weight: 500;
-  border-color: rgba(222, 222, 222, 1);
 }
 
 .receive form input {

diff --git a/src/components/Send/AmountInputField.module.css b/src/components/Send/AmountInputField.module.css
@@ -6,12 +6,8 @@
 .input {
   height: 3.5rem;
   width: 100%;
-  border-right: none !important;
 }
 
 .button {
-  --bs-btn-border-color: var(--bs-border-color) !important;
-  --bs-btn-hover-border-color: var(--bs-btn-border-color) !important;
-  border-left: none !important;
   font-size: 0.875rem !important;
 }
diff --git a/src/components/Send/AmountInputField.tsx b/src/components/Send/AmountInputField.tsx
@@ -109,7 +109,7 @@ export const AmountInputField = ({
                     disabled={disabled}
                   />
                   <rb.Button
-                    variant="light"
+                    variant="outline-dark"
                     className={classNames(styles.button, {
                       'cursor-not-allowed': !sourceJarBalance,
                     })}
@@ -124,7 +124,7 @@ export const AmountInputField = ({
                         true,
                       )
                     }}
-                    disabled={disabled}
+                    disabled={disabled || !sourceJarBalance}
                   >
                     <div className="d-flex justify-content-center align-items-center">
                       <Sprite symbol="sweep" width="24px" height="24px" className="me-1" />

diff --git a/src/components/Send/DestinationInputField.module.css b/src/components/Send/DestinationInputField.module.css
@@ -6,11 +6,4 @@
 .input {
   height: 3.5rem;
   width: 100%;
-  border-right: none !important;
-}
-
-.button {
-  --bs-btn-border-color: var(--bs-border-color) !important;
-  --bs-btn-hover-border-color: var(--bs-btn-border-color) !important;
-  border-left: none !important;
 }
diff --git a/src/components/Send/DestinationInputField.tsx b/src/components/Send/DestinationInputField.tsx
@@ -140,7 +140,7 @@ export const DestinationInputField = ({
                     disabled={disabled}
                   />
                   <rb.Button
-                    variant="light"
+                    variant="outline-dark"
                     className={styles.button}
                     onClick={() => setDestinationJarPickerShown(true)}
                     disabled={disabled || !walletInfo}

diff --git a/src/components/Wallet.tsx b/src/components/Wallet.tsx
@@ -3,12 +3,12 @@ import { Link } from 'react-router-dom'
 import { Formik, FormikErrors } from 'formik'
 import * as rb from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import { walletDisplayName } from '../utils'
 import { TabActivityIndicator, JoiningIndicator } from './ActivityIndicators'
 import Sprite from './Sprite'
 import { routes } from '../constants/routes'
-import styles from './Wallet.module.css'
+import { walletDisplayName } from '../utils'
 import { WalletFileName } from '../libs/JmWalletApi'
+import styles from './Wallet.module.css'
 
 interface WalletLockFormProps {
   walletFileName: WalletFileName
@@ -82,9 +82,8 @@ const WalletUnlockForm = ({ walletFileName, unlockWallet }: WalletUnlockFormProp
   }
 
   const onSubmit = useCallback(
-    async (values) => {
-      const { password } = values
-      await unlockWallet(walletFileName, password)
+    async (values: WalletUnlockFormValues) => {
+      await unlockWallet(walletFileName, values.password)
     },
     [walletFileName, unlockWallet],
   )

diff --git a/src/index.css b/src/index.css
@@ -523,10 +523,6 @@ h2 {
   color: currentColor;
 }
 
-.form-control.is-invalid + .btn {
-  --bs-btn-border-color: var(--bs-form-invalid-border-color) !important;
-}
-
 .alert-info {
   color: var(--bs-white);
   background-color: var(--bs-gray-800);
@@ -562,7 +558,6 @@ h2 {
 }
 
 /* Wallets Styles */
-
 .wallets a.wallet-name {
   text-decoration: none;
   color: var(--bs-body-color);
@@ -572,14 +567,7 @@ h2 {
   text-decoration: underline;
 }
 
-.wallets .btn.btn-outline-dark:not(:hover) {
-  border-color: rgba(222, 222, 222, 1);
-}
-:root[data-theme='dark'] .wallets .btn.btn-outline-dark:not(:hover) {
-  border-color: var(--bs-gray-800);
-}
 /* Alpha Warning */
-
 .warning-card-wrapper {
   position: fixed;
   height: 100%;
@@ -670,37 +658,45 @@ h2 {
 :root[data-theme='dark'] .btn:not(.btn-light) {
   --bs-btn-color: var(--bs-white);
 }
-
-:root[data-theme='dark'] .btn-dark {
-  background-color: var(--bs-gray-800);
-  border-color: var(--bs-gray-800);
-}
-
 :root[data-theme='dark'] .input-group-text {
   background-color: var(--bs-gray-800);
 }
 
-:root[data-theme='dark'] .btn-dark:hover {
-  background-color: var(--bs-gray-dark);
-  border-color: var(--bs-gray-dark) !important;
+:root[data-theme='dark'] .btn-dark {
+  --bs-btn-color: var(--bs-light);
+  --bs-btn-bg: var(--bs-gray-800);
+  --bs-btn-border-color: var(--bs-btn-bg);
+  --bs-btn-hover-bg: var(--bs-gray-dark);
+  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: var(--bs-btn-hover-bg);
+  --bs-btn-active-border-color: var(--bs-btn-active-bg);
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: var(--bs-light);
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: var(--bs-btn-border-color);
 }
 
 :root[data-theme='dark'] .btn-outline-dark {
-  color: var(--bs-white);
-  border-color: var(--bs-gray-800);
-}
-
-:root[data-theme='dark'] .btn-outline-dark:hover {
-  background-color: var(--bs-gray-dark) !important;
-  border-color: var(--bs-gray-dark) !important;
+  --bs-btn-color: var(--bs-light);
+  --bs-btn-border-color: var(--bs-gray-800);
+  --bs-btn-hover-bg: var(--bs-gray-dark);
+  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: var(--bs-btn-hover-bg);
+  --bs-btn-active-border-color: var(--bs-btn-active-bg);
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: var(--bs-light);
+  --bs-btn-disabled-bg: transparent;
+  --bs-btn-disabled-border-color: var(--bs-btn-border-color);
 }
 
 :root[data-theme='dark'] .offcanvas {
   background-color: var(--bs-gray-900);
 }
 
 :root[data-theme='dark'] .spinner-border {
-  border-color: var(--bs-white) !important;
+  border-color: var(--bs-light) !important;
   border-right-color: transparent !important;
 }
 
@@ -719,7 +715,7 @@ h2 {
 
 :root[data-theme='dark'] .form-control:disabled,
 :root[data-theme='dark'] .form-select:disabled,
-.form-control[readonly] {
+:root[data-theme='dark'] .form-control[readonly] {
   --bs-border-color: var(--bs-gray-500);
   background-color: var(--bs-gray-500);
 }
@@ -729,15 +725,15 @@ h2 {
 }
 
 :root[data-theme='dark'] .link-dark {
-  color: var(--bs-white) !important;
-  text-decoration-color: RGBA(var(--bs-white), var(--bs-link-underline-opacity, 1)) !important;
+  color: var(--bs-light) !important;
+  text-decoration-color: rgba(var(--bs-light), var(--bs-link-underline-opacity, 1)) !important;
 }
 
 :root[data-theme='dark'] .toast {
   background-color: transparent;
 }
 :root[data-theme='dark'] .toast-header {
-  color: var(--bs-white);
+  color: var(--bs-light);
   background-color: var(--bs-gray-800);
   border-color: var(--bs-gray-900);
 }