From 8ecd091beea8c6705642a9128b05bee95812e752 Mon Sep 17 00:00:00 2001
From: lupusA <lupusapps@gmail.com>
Date: Sun, 1 Oct 2023 09:26:37 +0200
Subject: [PATCH] Further refactoring. Properly overriding bootstrap

---
 public/index.html |   2 +-
 src/css/App.css   | 233 +++++++++++++++++-----------------------------
 src/css/Theme.css |  12 ++-
 3 files changed, 92 insertions(+), 155 deletions(-)
diff --git a/public/index.html b/public/index.html
index f22fed5..32f1d80 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,7 +12,7 @@
   <title>KopiaUI</title>
 </head>
 
-<body>
+<body id="kopia">
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
   <div id="appVersion" style="display: none">
diff --git a/src/css/App.css b/src/css/App.css
index 4e1d38c..3a94164 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -11,226 +11,165 @@ body {
   color: var(--color-text-body);
 }
 
-
-.options-select {
+#kopia .options-select {
   overflow: ellipsis
 }
 
-.btn-close {
+#kopia .btn-close {
   background-color: var(--background-color);
 }
 
-.btn {
+#kopia .btn {
   color: var(--color-text);
   margin-right: 5px;
 }
 
-.btn-primary {
+#kopia .btn:hover,
+#kopia .btn:focus,
+#kopia .btn:active,
+#kopia .btn:disabled {
+  color: var(--color-text);
+  filter: brightness(80%);
+}
+
+#kopia .btn-primary {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
 }
 
-.btn-secondary {
+#kopia .btn-secondary {
   background-color: var(--color-secondary);
   border-color: var(--color-secondary);
 }
 
-.btn-submit {
+#kopia .btn-submit {
   background-color: var(--color-submit);
   border-color: var(--color-submit);
 }
 
-.btn-success {
+#kopia .btn-success {
   background-color: var(--color-success);
   border-color: var(--color-success);
 }
 
-.btn-warning {
+#kopia .btn-warning {
   background-color: var(--color-warning);
   border-color: var(--color-warning);
 }
 
-.btn-danger {
+#kopia .btn-danger {
   background-color: var(--color-danger);
   border-color: var(--color-danger);
 }
 
-.btn-primary:hover,
-.btn-primary:focus,
-.btn-primary:active,
-.btn-primary:disabled {
-  background-color: var(--color-primary);
-  border-color: var(--color-primary);
-  color: var(--color-text);
-  filter: brightness(80%);
-}
-
-.btn-secondary:hover,
-.btn-secondary:focus,
-.btn-secondary:active,
-.btn-secondary:disabled {
-  background-color: var(--color-secondary);
-  border-color: var(--color-secondary);
-  color: var(--color-text);
-  filter: brightness(80%);
-}
-
-.btn-warning:hover,
-.btn-warning:focus,
-.btn-warning:active,
-.btn-warning:disabled {
-  background-color: var(--color-warning);
-  border-color: var(--color-warning);
-  color: var(--color-text);
-  filter: brightness(80%);
-}
-
-.btn-success:hover,
-.btn-success:focus,
-.btn-success:active,
-.btn-success:disabled {
-  background-color: var(--color-success);
-  border-color: var(--color-success);
-  color: var(--color-text);
-  filter: brightness(80%);
-}
-
-.btn-danger:hover,
-.btn-danger:focus,
-.btn-danger:active,
-.btn-danger:disabled {
-  background-color: var(--color-danger);
-  border-color: var(--color-danger);
-  color: var(--color-text);
-  filter: brightness(80%);
-}
-
-.btn-submit:hover,
-.btn-submit:focus,
-.btn-submit:active,
-.btn-submit:disabled {
-  background-color: var(--color-submit);
-  border-color: var(--color-submit);
-  color: var(--color-text);
-  filter: brightness(80%);
-}
-
-.breadcrumb {
-  color: var(--color-text-body);
-}
-
-a,
-.breadcrumb-item,
-.breadcrumb-item.active {
+#kopia a,
+#kopia .breadcrumb-item,
+#kopia .breadcrumb-item.active {
   color: var(--color-link);
 }
 
-a:hover,
-a:active {
+#kopia a:hover,
+#kopia a:active {
   color: var(--color-link);
   filter: brightness(80%);
 }
 
-.table,
-.table-hover>tbody>tr:hover>* {
+#kopia .table,
+#kopia .table-hover>tbody>tr:hover>* {
   color: var(--color-text-body);
 }
 
-.table-striped>tbody>tr:nth-of-type(odd)>* {
+#kopia .table-striped>tbody>tr:nth-of-type(odd)>* {
   color: var(--color-text-body);
   background-color: var(--color-select);
 }
 
-.table-striped>tbody>tr:nth-of-type(even)>* {
+#kopia .table-striped>tbody>tr:nth-of-type(even)>* {
   color: var(--color-text-body);
   background-color: var(--background-color);
 }
 
-.navbar-light .navbar-nav .nav-link,
-.navbar-light .navbar-nav .nav-link.active,
-.navbar-light .navbar-nav .show>.nav-link {
+#kopia nav.navbar {
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-bottom: 10px;
+}
+
+#kopia .navbar-light .navbar-nav .nav-link,
+#kopia .navbar-light .navbar-nav .nav-link.active,
+#kopia .navbar-light .navbar-nav .show>.nav-link {
   color: var(--color-text-nav);
 }
 
-.navbar-light .navbar-nav .nav-link:hover {
+#kopia .navbar-light .navbar-nav .nav-link:hover {
   color: var(--color-text-nav);
   filter: brightness(80%);
 }
 
-.form-control,
-.form-control[readonly],
-.form-control:active,
-.form-control:hover,
-.form-control:disabled {
+#kopia .form-control {
   color: var(--color-text-body);
   background-color: var(--background-color);
 }
 
-.form-select,
-.form-select:active,
-.form-select:hover,
-.form-select:disabled {
+#kopia .form-select {
   color: var(--color-text-body);
   background-color: var(--background-color);
 }
 
-.form-control-sm,
-.form-control-sm:active,
-.form-control-sm:hover,
-.form-control-sm:disabled {
+#kopia .form-control-sm {
   color: var(--color-text-body);
   background-color: var(--background-color);
 }
 
-.form-select:focus,
-.form-control:focus,
-.form-control-sm:focus,
-.form-check-input:focus,
-.accordion-button:focus {
+#kopia .form-select:focus,
+#kopia .form-control:focus,
+#kopia .form-control-sm:focus,
+#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);
 }
 
-.form-check-input,
-.form-check-input:active,
-.form-check-input:disabled {
+#kopia .form-check-input {
   color: var(--color-text-body);
 }
 
-.accordion-body,
-.accordion-button:not(.collapsed) {
+#kopia .form-text {
+  color: var(--color-text-form-help)
+}
+
+#kopia .accordion-body,
+#kopia .accordion-button:not(.collapsed) {
   color: var(--color-text-body);
   background-color: var(--background-color);
 }
 
-.accordion-button {
+#kopia .accordion-button {
   padding: 10px;
   font-weight: bold;
   color: var(--color-text-body);
   background-color: var(--background-color)
 }
 
-.accordion-button:link,
-.accordion-button:visited,
-.accordion-button:hover,
-.accordion-button:active,
-.accordion-button:focus-within,
-.accordion-button:focus-visible {
+#kopia .accordion-button.collapsed {
+  font-weight: bold;
+  padding: 10px;
+}
+
+#kopia .accordion-button:active,
+#kopia .accordion-button:visited,
+#kopia .accordion-button:hover,
+#kopia .accordion-button:focus {
   color: var(--color-text-body);
   background-color: var(--color-select);
   filter: brightness(95%)
 }
 
-.accordion-item {
+#kopia .accordion-item {
   border: 1px solid rgba(0,0,0,.125);
 }
 
-.accordion-button.collapsed {
-  font-weight: bold;
-  padding: 10px;
-}
-
 .popover {
   max-width: 1000px;
 }
@@ -339,15 +278,15 @@ div.tab-body {
   width: 400px;
 }
 
-.version-info {
+#kopia .version-info {
   padding-left: 10px;
   color: #aaa;
   font-size: 80%;
 }
 
-.modal-footer,
-.modal-header,
-.modal-body {
+#kopia .modal-footer,
+#kopia .modal-header,
+#kopia .modal-body {
   color: var(--color-text-body);
   background-color: var(--background-color);
 }
@@ -396,41 +335,41 @@ div.tab-body {
   margin: 2px;
 }
 
-.badge {
-  margin-block-start: 5px;
-}
-
-.badge.bg-policy-badge {
+#kopia .badge.bg-policy-badge {
   margin-right: 5px;
   background-color: var(--color-primary);
   color: var(--color-text);
 }
 
-.badge.bg-retention-badge-warning {
+#kopia .badge {
+  margin-block-start: 5px;
+}
+
+#kopia .badge.bg-retention-badge-warning {
   background-color: var(--color-badge-warning);
 }
 
-.badge.bg-retention-badge-danger {
+#kopia .badge.bg-retention-badge-danger {
   background-color: var(--color-badge-danger);
 }
 
-.badge.bg-retention-badge-info {
+#kopia .badge.bg-retention-badge-info {
   background-color: var(--color-badge-info);
 }
 
-.badge.bg-retention-badge-primary {
+#kopia .badge.bg-retention-badge-primary {
   background-color: var(--color-badge-primary);
 }
 
-.badge.bg-retention-badge-secondary {
+#kopia .badge.bg-retention-badge-secondary{
   background-color: var(--color-badge-secondary);
 }
 
-.badge.bg-retention-badge-success {
+#kopia .badge.bg-retention-badge-success {
   background-color: var(--color-badge-success);
 }
 
-.badge.bg-snapshot-pin {
+#kopia .badge.bg-snapshot-pin {
   background-color: var(--color-primary);
   color: var(--color-text);
 }
@@ -460,18 +399,12 @@ div.tab-body {
   font-family: monospace;
 }
 
-nav.navbar {
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-bottom: 10px;
-}
-
 .vpadded {
   padding-top: 6px;
   padding-bottom: 6px;
 }
 
-.multiselect {
+#kopia .multiselect {
   width: 20px;
   padding-left: 35px;
   padding-top: 0x;
@@ -480,22 +413,22 @@ nav.navbar {
   margin-bottom: 0px;
 }
 
-.select-theme {
+#kopia .select-theme {
   font-size: 90%;
 }
 
-.snapshot-hash {
+#kopia .snapshot-hash {
   font-family: 'Courier New', Courier, monospace;
   font-size: 80%;
   font-weight: bold;
 }
 
-.snapshot-description {
+#kopia .snapshot-description {
   font-size: 80%;
   color: var(--color-text-body);
 }
 
-.snapshot-description-set {
+#kopia .snapshot-description-set {
   color: var(--color-badge-warning);
 }
 
diff --git a/src/css/Theme.css b/src/css/Theme.css
index 82fea08..330bf0e 100644
--- a/src/css/Theme.css
+++ b/src/css/Theme.css
@@ -6,12 +6,13 @@
   --color-warning: #e1704b;
   --color-success: #5ea5cd;
   --color-submit: #00B4D8;
-  --color-select: #f4f4f4;
+  --color-select: #fefefe;
   --color-link: #2A7FFF;
 
   --color-text: #ffffff;
   --color-text-body: #000000;
   --color-text-nav: #000000;
+  --color-text-form-help :#6c757d;
 
   --color-error: #d2475a;
   --color-danger: #d2475a;
@@ -27,7 +28,7 @@
 .dark {
   --background-color: #222222;
   --color-primary: #1162b1;
-  --color-secondary: #0d9aab;
+  --color-secondary: #0d8b99;
   --color-warning: #7e0d6b;
   --color-success: #0d9aab;
   --color-submit: #00B4D8;
@@ -37,6 +38,7 @@
   --color-text: #cfcfcf;
   --color-text-body: #cfcfcf;
   --color-text-nav: #cfcfcf;
+  --color-text-form-help :#6c757d;
   
   --color-error: #891905;
   --color-danger: #891905;
@@ -56,12 +58,13 @@
   --color-warning: #ffd6a5;
   --color-success: #bdb2ff;
   --color-submit: #a0c4ff;
-  --color-select: #f5f4f4;
+  --color-select: #fefefe;
   --color-link: #2A7FFF;
   
   --color-text: #000000;
   --color-text-body: #000000;
   --color-text-nav: #c095e4;
+  --color-text-form-help :#6c757d;
 
   --color-error: #ffadad;
   --color-danger: #ffadad;
@@ -81,12 +84,13 @@
   --color-warning: #e8cc2a;
   --color-success: #0077B6;
   --color-submit: #00B4D8;
-  --color-select: #f5f4f4;
+  --color-select: #fefefe;
   --color-link: #03045E;
   
   --color-text: #ffffff;
   --color-text-body: #03045E;
   --color-text-nav: #03045E;
+  --color-text-form-help :#6c757d;
 
   --color-error: #d2475a;
   --color-danger: #d2475a;
