fix: text and border colors after bootstrap update (#432)

* fix: accordion text and border color in dark mode * fix: button text color on dark theme * fix: address-copy button padding
joinmarket-webui · Aug 2, 2022 · 96a401c · 96a401c
1 parent c4a76fa
commit 96a401c
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 30 deletions.
diff --git a/src/components/DisplayBranch.module.css b/src/components/DisplayBranch.module.css
@@ -17,11 +17,10 @@
 
 .address-copy-button {
   text-align: left !important;
-  padding: 0 !important;
+  padding: 0 var(--bs-btn-padding-y) !important;
 }
 
 .address-copy-button .sprite {
-  min-width: 2rem;
   margin-left: 0.25rem !important;
 }
 

diff --git a/src/components/DisplayBranch.tsx b/src/components/DisplayBranch.tsx
@@ -68,7 +68,7 @@ export function DisplayBranchBody({ branch }: DisplayBranchProps) {
   const { branch: detailsString, entries } = branch
   const xpub: string | undefined = detailsString.split('\t')[2]
   return (
-    <rb.Container fluid>
+    <rb.Container className="mb-2" fluid>
       <rb.Row>
         <rb.Col>
           {xpub && (

diff --git a/src/index.css b/src/index.css
@@ -511,20 +511,13 @@ h2 {
   --bs-body-bg-rgb: 33, 37, 41;
   --bs-body-color: var(--bs-white);
   --bs-body-bg: var(--bs-gray-900);
+  --bs-border-color: var(--bs-gray-800);
   --bs-gray-dark: #16191c;
   --bs-black: #000;
 }
 
-:root[data-theme='dark'] .border-top,
-:root[data-theme='dark'] .border-bottom,
-:root[data-theme='dark'] .border-left,
-:root[data-theme='dark'] .border-right,
-:root[data-theme='dark'] .border {
-  border-color: var(--bs-gray-800) !important;
-}
-
 :root[data-theme='dark'] a.nav-link.active {
-  border-color: white !important;
+  border-color: var(--bs-white) !important;
 }
 
 :root[data-theme='dark'] .card {
@@ -536,6 +529,10 @@ h2 {
   border-color: var(--bs-gray-800) !important;
 }
 
+:root[data-theme='dark'] .btn {
+  --bs-btn-color: var(--bs-white);
+}
+
 :root[data-theme='dark'] .btn-dark {
   background-color: var(--bs-gray-800);
   border-color: var(--bs-gray-800);
@@ -546,22 +543,24 @@ h2 {
   border-color: var(--bs-gray-dark) !important;
 }
 
-:root[data-theme='dark'] .accordion-item {
-  background: transparent !important;
-  border-color: var(--bs-gray-800) !important;
+:root[data-theme='dark'] .accordion {
+  --bs-accordion-color: var(--bs-white);
+  --bs-accordion-bg: transparent;
 }
 
-:root[data-theme='dark'] .accordion-button,
-:root[data-theme='dark'] .btn-outline-dark {
-  color: var(--bs-white);
-  background: transparent !important;
-  border-color: var(--bs-gray-800);
+:root[data-theme='dark'] .accordion-button {
+  color: var(--bs-accordion-color);
 }
 
 :root[data-theme='dark'] .accordion-button.collapsed::after {
   background-image: url('data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27%23fff%27%3e%3cpath fill-rule=%27evenodd%27 d=%27M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z%27/%3e%3c/svg%3e');
 }
 
+: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;
@@ -584,20 +583,10 @@ h2 {
   background-color: var(--bs-gray-900);
 }
 
-:root[data-theme='dark'] .modal-header,
-:root[data-theme='dark'] .modal-footer {
-  border-color: var(--bs-gray-800) !important;
-}
-
 :root[data-theme='dark'] .modal-header .btn-close {
   background-color: var(--bs-gray-900) !important;
 }
 
-:root[data-theme='dark'] .table,
-:root[data-theme='dark'] .table > :not(:first-child) {
-  border-color: var(--bs-gray-800) !important;
-}
-
 :root[data-theme='dark'] .form-control:disabled,
 :root[data-theme='dark'] .form-select:disabled,
 .form-control[readonly] {