replace sliding items with close buttons

ui/src/app/pages/notifications/notifications.page.html

@@ -33,28 +33,24 @@
   </ion-item-group>
 
   <ion-item-group style="margin-bottom: 16px;">
-    <ion-item-sliding *ngFor="let not of notifications; let i = index">
-      <ion-item-options side="end">
-        <ion-item-option color="danger" (click)="remove(not.id, i)">
-          <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
-        </ion-item-option>
-      </ion-item-options>
-      <ion-item>
-        <ion-label class="ion-text-wrap">
-          <h2>
-            <ion-text [color]="getColor(not)"><b>{{ not.title }}</b></ion-text>
-          </h2>
-          <h2 class="notification-message">{{ not.message }}</h2>
-          <p>{{ not.createdAt | date: 'short' }}</p>
-          <p>
-            <a style="text-decoration: none;"
-              [routerLink]="['/services', 'installed', not.appId]">{{ not.appId }}</a>
-            <span> - </span>
-            Code: {{ not.code }}
-          </p>
-        </ion-label>
-      </ion-item>
-    </ion-item-sliding>
+    <ion-item *ngFor="let not of notifications; let i = index">
+      <ion-label class="ion-text-wrap">
+        <h2>
+          <ion-text [color]="getColor(not)"><b>{{ not.title }}</b></ion-text>
+        </h2>
+        <h2 class="notification-message">{{ not.message }}</h2>
+        <p>{{ not.createdAt | date: 'short' }}</p>
+        <p>
+          <a style="text-decoration: none;"
+            [routerLink]="['/services', 'installed', not.appId]">{{ not.appId }}</a>
+          <span> - </span>
+          Code: {{ not.code }}
+        </p>
+      </ion-label>
+      <ion-button slot="end" fill="clear" (click)="remove(not.id, i)">
+        <ion-icon slot="icon-only" name="close-outline" color="medium"></ion-icon>
+      </ion-button>
+    </ion-item>
   </ion-item-group>
 
   <ion-infinite-scroll [disabled]="!needInfinite" (ionInfinite)="doInfinite($event)">

ui/src/app/pages/server-routes/developer-routes/dev-ssh-keys/dev-ssh-keys.page.html

@@ -29,17 +29,14 @@
     </ion-item>
 
     <ion-item-divider>Saved Keys</ion-item-divider>
-    <ion-item-sliding *ngFor="let fingerprint of server.ssh | async">
-      <ion-item-options side="end">
-        <ion-item-option color="danger" (click)="delete(fingerprint)">
-          <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
-        </ion-item-option>
-      </ion-item-options>
-      <ion-item>
-        <ion-label class="ion-text-wrap">{{ fingerprint.alg }} {{ fingerprint.hash }} {{ fingerprint.hostname }}
-        </ion-label>
-      </ion-item>
-    </ion-item-sliding>
+    <ion-item *ngFor="let fingerprint of server.ssh | async">
+      <ion-label class="ion-text-wrap">
+        {{ fingerprint.alg }} {{ fingerprint.hash }} {{ fingerprint.hostname }}
+      </ion-label>
+      <ion-button slot="end" fill="clear" (click)="presentAlertDelete(fingerprint)">
+        <ion-icon slot="icon-only" name="close-outline" color="medium"></ion-icon>
+      </ion-button>
+    </ion-item>
   </ion-item-group>
 
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">

ui/src/app/pages/server-routes/developer-routes/dev-ssh-keys/dev-ssh-keys.page.ts

@@ -6,6 +6,7 @@ import { PropertySubject } from 'src/app/util/property-subject.util'
 import { ServerConfigService } from 'src/app/services/server-config.service'
 import { LoaderService } from 'src/app/services/loader.service'
 import { ModelPreload } from 'src/app/models/model-preload'
+import { AlertController } from '@ionic/angular'
 
 @Component({
   selector: 'dev-ssh-keys',
@@ -21,6 +22,7 @@ export class DevSSHKeysPage {
     private readonly loader: LoaderService,
     private readonly preload: ModelPreload,
     private readonly serverConfigService: ServerConfigService,
+    private readonly alertCtrl: AlertController,
   ) { }
 
   ngOnInit () {
@@ -41,6 +43,28 @@ export class DevSSHKeysPage {
     await this.serverConfigService.presentModalValueEdit('ssh', true)
   }
 
+  async presentAlertDelete (fingerprint: SSHFingerprint) {    
+    const alert = await this.alertCtrl.create({
+      backdropDismiss: false,
+      header: 'Caution',
+      message: `Are you sure you want to delete this SSH key?`,
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Delete',
+          cssClass: 'alert-danger',
+          handler: () => {
+            this.delete(fingerprint)
+          },
+        },
+      ],
+    })
+    await alert.present()
+  }
+
   async delete (fingerprint: SSHFingerprint) {
     this.loader.of({
       message: 'Deleting...',