From bffd4faf6cbaf4ca57a08ed7bfb79305a742dc8e Mon Sep 17 00:00:00 2001 From: theborakompanioni Date: Sun, 26 Nov 2023 16:34:29 +0100 Subject: [PATCH] fix(style): reduce custom btn colors --- src/components/Accordion.tsx | 4 +- src/components/Earn.module.css | 10 --- src/components/Modal.module.css | 2 +- src/components/Receive.module.css | 11 ---- .../Send/AmountInputField.module.css | 4 -- src/components/Send/AmountInputField.tsx | 4 +- .../Send/DestinationInputField.module.css | 7 --- src/components/Send/DestinationInputField.tsx | 2 +- src/components/Wallet.tsx | 9 ++- src/index.css | 62 +++++++++---------- 10 files changed, 39 insertions(+), 76 deletions(-) diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx index 5e5ede36a..0a60c98e0 100644 --- a/src/components/Accordion.tsx +++ b/src/components/Accordion.tsx @@ -25,7 +25,7 @@ const Accordion = ({
setIsOpen((current) => !current)} disabled={disabled} > @@ -50,7 +50,7 @@ const Accordion = ({
-
+
{children}
 diff --git a/src/components/Earn.module.css b/src/components/Earn.module.css index f42076758..44c842f4f 100644 --- 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 index f3383043f..40ca36445 100644 --- 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 index 31adaff6f..23b573eea 100644 --- 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 index 7131bd8b4..281596345 100644 --- 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 index 11350b347..b21fb135e 100644 --- a/src/components/Send/AmountInputField.tsx +++ b/src/components/Send/AmountInputField.tsx @@ -109,7 +109,7 @@ export const AmountInputField = ({ disabled={disabled} />
diff --git a/src/components/Send/DestinationInputField.module.css b/src/components/Send/DestinationInputField.module.css index 2db805e71..419e00af4 100644 --- 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 index 2a4c4a452..c83dc69f4 100644 --- a/src/components/Send/DestinationInputField.tsx +++ b/src/components/Send/DestinationInputField.tsx @@ -140,7 +140,7 @@ export const DestinationInputField = ({ disabled={disabled} /> setDestinationJarPickerShown(true)} disabled={disabled || !walletInfo} diff --git a/src/components/Wallet.tsx b/src/components/Wallet.tsx index ebfa1f076..9246026b9 100644 --- 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 index 04db82f3e..077dfffa3 100644 --- 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,29 +658,37 @@ 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 { @@ -700,7 +696,7 @@ h2 { } :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); }