feat(theme): add theme colors to paginaion with some cleanup

Author: Joxit

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>

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;

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>

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,
     };

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';
 

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 {

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