fix(ui): Minor fixes related to css (#206)

* Hints within the advanced section should now be visible * Advanced section should now be properly themed * Fixed light button color --------- Co-authored-by: lupusA <[email protected]>
kopia · Nov 12, 2023 · 644d9af · 644d9af
1 parent 1fd4dd2
commit 644d9af
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/src/css/App.css b/src/css/App.css
@@ -37,6 +37,11 @@ body {
   border-color: var(--color-primary);
 }
 
+#kopia .btn-light {
+  background-color: var(--color-light);
+  border-color: var(--color-light);
+}
+
 #kopia .btn-secondary {
   background-color: var(--color-secondary);
   border-color: var(--color-secondary);
@@ -130,20 +135,17 @@ body {
 #kopia .form-check-input:focus,
 #kopia .accordion-button:focus {
   color: var(--color-text-body);
-  background-color: var(--background-color);
   box-shadow: 0 0 0 0.10rem var(--color-primary);
 }
 
 #kopia .form-check-input {
   color: var(--color-text-body);
 }
 
-#kopia .form-text {
-  color: var(--color-text-form-help)
-}
-
+#kopia .text-muted.form-text,
+#kopia .form-text,
 #kopia .form-control::placeholder {
-  color: var(--color-text-form-help);
+  color: var(--color-text-form-help) !important
 }
 
 #kopia .accordion-body,
@@ -234,8 +236,9 @@ body {
   vertical-align: middle;
 }
 
-.advancedOptions {
-  background-color: #f0f0f0;
+#kopia .advancedOptions {
+  background-color: var(--background-color);
+  color: var(--color-text-body);
   padding: 10px;
   border: 1px solid #ccc;
 }

diff --git a/src/css/Theme.css b/src/css/Theme.css
@@ -8,6 +8,7 @@
   --color-submit: #00B4D8;
   --color-select: #fefefe;
   --color-link: #2A7FFF;
+  --color-light: #6c757d; 
 
   --color-text: #ffffff;
   --color-text-body: #000000;
@@ -34,6 +35,7 @@
   --color-submit: #00B4D8;
   --color-select: #2c2c2c;
   --color-link: #799bd1;
+  --color-light: #6c757d; 
 
   --color-text: #cfcfcf;
   --color-text-body: #cfcfcf;
@@ -60,6 +62,7 @@
   --color-submit: #a0c4ff;
   --color-select: #fefefe;
   --color-link: #2A7FFF;
+  --color-light: #6c757d; 
 
   --color-text: #000000;
   --color-text-body: #000000;
@@ -86,6 +89,7 @@
   --color-submit: #00B4D8;
   --color-select: #fefefe;
   --color-link: #03045E;
+  --color-light: #6c757d; 
 
   --color-text: #ffffff;
   --color-text-body: #03045E;