fix(riot-ui): upgrade and fix dialog confirm popup

Author: Joxit

src/components/dialogs/confirm-delete-image.riot

@@ -16,17 +16,17 @@
 -->
 <confirm-delete-image>
   <material-popup opened="{ props.opened }" onClick="{ props.onClick }">
-    <div slot="title">These images will be deleted</div>
-    <div slot="content">
+    <div class="material-popup-title">These images will be deleted</div>
+    <div class="material-popup-content">
       <ul>
         <li each="{ image in displayImagesToDelete(props.toDelete, props.tags) }">{ image.name }:{ image.tag }</li>
       </ul>
     </div>
-    <div slot="action">
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ deleteImages }">
+    <div class="material-popup-action">
+      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ deleteImages }" color="#000" inverted>
         Delete
       </material-button>
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClick }">
+      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClick }" color="#000" inverted>
         Cancel
       </material-button>
     </div>

src/components/tag-list/remove-image.riot

@@ -58,8 +58,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
       deleteImage() {
         this.props.handleCheckboxChange(ACTION_DELETE_IMAGE, this.props.image);
       },
-      handleCheckboxChange(checked) {
-        const action = checked ? ACTION_CHECK_TO_DELETE : ACTION_UNCHECK_TO_DELETE;
+      handleCheckboxChange(event) {
+        const action = event.target.checked ? ACTION_CHECK_TO_DELETE : ACTION_UNCHECK_TO_DELETE;
         this.props.handleCheckboxChange(action, this.props.image);
       },
     };

src/components/tag-list/tag-table.riot

@@ -174,7 +174,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           confirmDeleteImage: false,
         });
       },
-      onRemoveImageHeaderChange(checked, event) {
+      onRemoveImageHeaderChange(event) {
         if (event.altKey === true) {
           const tags = getPage(this.props.tags, this.props.page);
           tags
@@ -186,7 +186,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           });
         } else {
           this.update({
-            multiDelete: checked,
+            multiDelete: event.target.checked,
           });
         }
       },

src/style.scss

@@ -89,8 +89,6 @@ material-tabs {
 
 material-tabs material-button,
 material-tabs material-button .content .text {
-  background-color: #fff;
-  color: #aaa;
   text-transform: none;
 }
 
@@ -246,17 +244,14 @@ material-card table th {
   text-align: left;
 }
 
-material-card .material-card-title-action material-button:hover a,
+material-button:hover > :first-child[inverted='true'],
 material-card .material-card-title-action material-button:hover button,
-material-card table tbody tr:hover,
-pagination material-button:hover > :first-child {
+material-card table tbody tr:hover {
   background-color: #eee !important;
 }
 
-material-card material-button a,
-material-card material-button button,
-material-card table tbody tr,
-pagination material-button > :first-child {
+material-button > :first-child[inverted='true'],
+material-card table tbody tr {
   transition-duration: .28s;
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
   transition-property: background-color;
@@ -317,18 +312,13 @@ material-snackbar .toast {
   height: auto;
 }
 
-material-popup material-button {
-  background-color: #fff;
-  color: #000;
-}
-
 material-popup material-button:hover material-waves {
   background-color: hsla(0, 0%, 75%, .2);
 }
 
-material-popup .popup {
+material-popup .popup > .content {
+  padding: 1em;
   max-width: 450px;
-  top: 2em;
 }
 
 footer {