From 8c402442c258cbaac06305b2531e10ba464b345a Mon Sep 17 00:00:00 2001
From: Joxit <joxit972@gmail.com>
Date: Thu, 19 Jan 2023 20:06:36 +0100
Subject: [PATCH] feat(theme): add theme colors to paginaion with some cleanup

---
 src/components/dialogs/add-registry-url.riot  | 29 +++++++++++++++----
 .../dialogs/change-registry-url.riot          | 18 ++++++++++--
 .../dialogs/confirm-delete-image.riot         | 16 ++++++++--
 .../dialogs/remove-registry-url.riot          | 11 +++++--
 src/components/search-bar.riot                |  7 ++++-
 src/components/tag-list/pagination.riot       |  5 ++--
 src/components/tag-list/tag-table.riot        |  6 ++--
 7 files changed, 73 insertions(+), 19 deletions(-)

diff --git a/src/components/dialogs/add-registry-url.riot b/src/components/dialogs/add-registry-url.riot
index 075c2d0..8bd16d9 100644
--- a/src/components/dialogs/add-registry-url.riot
+++ b/src/components/dialogs/add-registry-url.riot
@@ -18,14 +18,33 @@
   <material-popup opened="{ props.opened }" onClick="{ props.onClose }">
     <div class="material-popup-title">Add your Server ?</div>
     <div class="material-popup-content">
-      <material-input onkeyup="{ onKeyUp }" label="Server URL" text-color="var(--primary-text)" label-color="var(--neutral-text)" color="var(--accent-text)" valid="{ registryUrlValidator }"></material-input>
+      <material-input
+        onkeyup="{ onKeyUp }"
+        label="Server URL"
+        text-color="var(--primary-text)"
+        label-color="var(--neutral-text)"
+        color="var(--accent-text)"
+        valid="{ registryUrlValidator }"
+      ></material-input>
       <span>Write your URL without /v2</span>
     </div>
     <div class="material-popup-action">
-      <material-button class="dialog-button" waves-color="var(--hover-background)" onClick="{ add }" color="inherit" text-color="var(--primary-text)">
+      <material-button
+        class="dialog-button"
+        waves-color="var(--hover-background)"
+        onClick="{ add }"
+        color="inherit"
+        text-color="var(--primary-text)"
+      >
         Add
       </material-button>
-      <material-button class="dialog-button" waves-color="var(--hover-background)" onClick="{ props.onClose }" color="inherit" text-color="var(--primary-text)">
+      <material-button
+        class="dialog-button"
+        waves-color="var(--hover-background)"
+        onClick="{ props.onClose }"
+        color="inherit"
+        text-color="var(--primary-text)"
+      >
         Cancel
       </material-button>
     </div>
@@ -56,8 +75,8 @@
         setTimeout(() => router.updateUrlQueryParam(url), 100);
       },
       registryUrlValidator(input) {
-        return /^https?:\/\//.test(input) && !/\/v2\/?$/.test(input)
-      }
+        return /^https?:\/\//.test(input) && !/\/v2\/?$/.test(input);
+      },
     };
   </script>
 </add-registry-url>
diff --git a/src/components/dialogs/change-registry-url.riot b/src/components/dialogs/change-registry-url.riot
index 6cfb364..7d711db 100644
--- a/src/components/dialogs/change-registry-url.riot
+++ b/src/components/dialogs/change-registry-url.riot
@@ -23,10 +23,22 @@
       </select>
     </div>
     <div class="material-popup-action">
-      <material-button class="dialog-button" waves-color="var(--hover-background)" onClick="{ change }"  color="inherit" text-color="var(--primary-text)">
+      <material-button
+        class="dialog-button"
+        waves-color="var(--hover-background)"
+        onClick="{ change }"
+        color="inherit"
+        text-color="var(--primary-text)"
+      >
         Change
       </material-button>
-      <material-button class="dialog-button" waves-color="var(--hover-background)" onClick="{ props.onClose }"  color="inherit" text-color="var(--primary-text)">
+      <material-button
+        class="dialog-button"
+        waves-color="var(--hover-background)"
+        onClick="{ props.onClose }"
+        color="inherit"
+        text-color="var(--primary-text)"
+      >
         Cancel
       </material-button>
     </div>
@@ -65,7 +77,7 @@
       font-size: 1em;
       line-height: 24px;
       height: 24px;
-      border-bottom: 1px solid #2f6975;
+      border-bottom: 1px solid var(--accent-text);
       appearance: none;
       -moz-appearance: none;
       -webkit-appearance: none;
diff --git a/src/components/dialogs/confirm-delete-image.riot b/src/components/dialogs/confirm-delete-image.riot
index 80dd3a7..4aaa57e 100644
--- a/src/components/dialogs/confirm-delete-image.riot
+++ b/src/components/dialogs/confirm-delete-image.riot
@@ -23,10 +23,22 @@
       </ul>
     </div>
     <div class="material-popup-action">
-      <material-button class="dialog-button" waves-color="var(--hover-background)" onClick="{ deleteImages }" color="inherit" text-color="var(--primary-text)">
+      <material-button
+        class="dialog-button"
+        waves-color="var(--hover-background)"
+        onClick="{ deleteImages }"
+        color="inherit"
+        text-color="var(--primary-text)"
+      >
         Delete
       </material-button>
-      <material-button class="dialog-button" waves-color="var(--hover-background)" onClick="{ props.onClick }" color="inherit" text-color="var(--primary-text)">
+      <material-button
+        class="dialog-button"
+        waves-color="var(--hover-background)"
+        onClick="{ props.onClick }"
+        color="inherit"
+        text-color="var(--primary-text)"
+      >
         Cancel
       </material-button>
     </div>
diff --git a/src/components/dialogs/remove-registry-url.riot b/src/components/dialogs/remove-registry-url.riot
index 51f1f1a..f0ecb07 100644
--- a/src/components/dialogs/remove-registry-url.riot
+++ b/src/components/dialogs/remove-registry-url.riot
@@ -38,7 +38,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       </ul>
     </div>
     <div class="material-popup-action">
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }" color="inherit" text-color="var(--primary-text)">
+      <material-button
+        class="dialog-button"
+        waves-color="rgba(158,158,158,.4)"
+        onClick="{ props.onClose }"
+        color="inherit"
+        text-color="var(--primary-text)"
+      >
         Close
       </material-button>
     </div>
@@ -48,10 +54,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     export default {
       remove(url) {
         return (event) => {
-          console.log(url, event)
           removeRegistryServers(url);
           setTimeout(() => this.update(), 100);
-        }
+        };
       },
       getRegistryServers,
     };
diff --git a/src/components/search-bar.riot b/src/components/search-bar.riot
index 322ba31..edaaeb4 100644
--- a/src/components/search-bar.riot
+++ b/src/components/search-bar.riot
@@ -1,5 +1,10 @@
 <search-bar>
-  <material-input label="Search in page" text-color="var(--header-text)" label-color="var(--neutral-text)" color="var(--accent-text)"></material-input>
+  <material-input
+    label="Search in page"
+    text-color="var(--header-text)"
+    label-color="var(--neutral-text)"
+    color="var(--accent-text)"
+  ></material-input>
   <script>
     import { router } from '@riotjs/route';
 
diff --git a/src/components/tag-list/pagination.riot b/src/components/tag-list/pagination.riot
index 8731971..008cd08 100644
--- a/src/components/tag-list/pagination.riot
+++ b/src/components/tag-list/pagination.riot
@@ -19,8 +19,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <div class="pagination-centered">
       <material-button
         aria-label="page-{ p.page }"
-        color="rgba(0, 0, 0, { p.current ? 0.12 : 0 } )"
-        text-color="#000"
+        color="{ p.current ? 'var(--accent-text)' : 'rgba(0, 0, 0, 0 )' }"
+        text-color="{ p.current ? 'var(--accent-text)' : 'var(--primary-text)' }"
         waves-color="rgba(158,158,158,.4)"
         each="{ (p, idx) in props.pages}"
         class="{ p.current ? 'current' : ''} { p['space-left'] ? 'space-left' : '' } { p['space-right'] ? 'space-right' : ''}"
@@ -45,6 +45,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     :host material-button > :first-child {
       padding: 0;
       min-width: 40px;
+      min-height: 44px;
     }
 
     :host material-button > :first-child .content {
diff --git a/src/components/tag-list/tag-table.riot b/src/components/tag-list/tag-table.riot
index 7c60194..17b303d 100644
--- a/src/components/tag-list/tag-table.riot
+++ b/src/components/tag-list/tag-table.riot
@@ -65,9 +65,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             <material-button
               if="{ state.toDelete.size > 0 && !state.singleDeleteAction }"
               waves-center="true"
-              color="#fff"
-              text-color="#777"
-              waves-color="#ddd"
+              color="inherit"
+              text-color="var(--neutral-background)"
+              waves-color="var(--hover-background)"
               title="This will delete selected images."
               onClick="{ deleteImages }"
               icon