fix(riot-ui): upgrade tag dialogs

Author: Joxit

src/components/dialogs/add-registry-url.riot

@@ -16,16 +16,16 @@
 -->
 <add-registry-url>
   <material-popup opened="{ props.opened }" onClick="{ props.onClose }">
-    <div slot="title">Add your Server ?</div>
-    <div slot="content">
-      <material-input onkeyup="{ onKeyUp }" placeholder="Server URL"></material-input>
+    <div class="material-popup-title">Add your Server ?</div>
+    <div class="material-popup-content">
+      <material-input onkeyup="{ onKeyUp }" label="Server URL" label-color="#666" valid="{ registryUrlValidator }"></material-input>
       <span>Write your URL without /v2</span>
     </div>
-    <div slot="action">
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ add }">
+    <div class="material-popup-action">
+      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ add }" color="#000" inverted>
         Add
       </material-button>
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }">
+      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }" color="#000" inverted>
         Cancel
       </material-button>
     </div>
@@ -55,6 +55,9 @@
         this.props.onClose();
         setTimeout(() => router.updateUrlQueryParam(url), 100);
       },
+      registryUrlValidator(input) {
+        return /^https?:\/\//.test(input) && !/\/v2\/?$/.test(input)
+      }
     };
   </script>
 </add-registry-url>

src/components/dialogs/change-registry-url.riot

@@ -15,18 +15,18 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <change-registry-url>
-  <material-popup opened="{ props.opened }" onClick="{ props.onClick }">
-    <div slot="title">Change your Server ?</div>
-    <div slot="content">
+  <material-popup opened="{ props.opened }" onClick="{ props.onClose }">
+    <div class="material-popup-title">Change your Server ?</div>
+    <div class="material-popup-content">
       <select>
         <option each="{ url in getRegistryServers() }" value="{ url }">{ url }</option>
       </select>
     </div>
-    <div slot="action">
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ change }">
+    <div class="material-popup-action">
+      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ change }" color="#000" inverted>
         Change
       </material-button>
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }">
+      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }" color="#000" inverted>
         Cancel
       </material-button>
     </div>
@@ -62,6 +62,7 @@
       background: 0 0;
       border: none;
       font-weight: 400;
+      font-size: 1em;
       line-height: 24px;
       height: 24px;
       border-bottom: 1px solid #2f6975;

src/components/dialogs/remove-registry-url.riot

@@ -16,17 +16,18 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <remove-registry-url>
   <material-popup opened="{ props.opened }" onClick="{ props.onClose }">
-    <div slot="title">Remove your Registry Server ?</div>
-    <div slot="content">
+    <div class="material-popup-title">Remove your Registry Server ?</div>
+    <div class="material-popup-content">
       <ul class="list">
         <li each="{ url in getRegistryServers() }">
           <span>
             <material-button
-              onClick="{ remove }"
+              onClick="{ remove(url) }"
               url="{ url }"
-              rounded="true"
               waves-color="rgba(158,158,158,.4)"
               waves-center="true"
+              inverted
+              icon
             >
               <i class="material-icons">delete</i>
             </material-button>
@@ -35,19 +36,21 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         </li>
       </ul>
     </div>
-    <div slot="action">
-      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }">
+    <div class="material-popup-action">
+      <material-button class="dialog-button" waves-color="rgba(158,158,158,.4)" onClick="{ props.onClose }" color="#000" inverted>
         Close
       </material-button>
     </div>
   </material-popup>
   <script>
     import { getRegistryServers, removeRegistryServers } from '../../scripts/utils';
     export default {
-      remove(event) {
-        const url = event.currentTarget.attributes.url && event.currentTarget.attributes.url.value;
-        removeRegistryServers(url);
-        setTimeout(() => this.update(), 100);
+      remove(url) {
+        return (event) => {
+          console.log(url, event)
+          removeRegistryServers(url);
+          setTimeout(() => this.update(), 100);
+        }
       },
       getRegistryServers,
     };