restyle action response

ui/src/app/modals/action-success/action-success.page.html

@@ -1,36 +1,30 @@
 <ion-header>
   <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-button (click)="dismiss()" class="enter-click">
+        <ion-icon name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
     <ion-title>Execution Complete</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content class="ion-padding">
-  <div style="height: 100%">
-   <h2 style="margin: 0; text-align: center;">{{ actionRes.message }}</h2>
+<ion-content>
+  <ion-item>
+    <ion-label>
+      <h2>{{ actionRes.message }}</h2>
+    </ion-label>
+  </ion-item>
 
-    <ion-item *ngIf="actionRes.value" style="width: 250px; margin: auto; margin-top: 20px;" color="light">
-      <ion-label>
-        <p>{{ actionRes.value }}</p>
-      </ion-label>
-      <ion-button *ngIf="actionRes.copyable" fill="clear" (click)="copy(actionRes.value)">
-        <ion-icon slot="icon-only" name="copy-outline" size="small"></ion-icon>
-      </ion-button>
-    </ion-item>
-    <div *ngIf="actionRes.qr" class="ion-padding" style="text-align: center;">
-      <qr-code [value]="actionRes.value" size="150"></qr-code>
+  <div *ngIf="actionRes.value" class="ion-text-center" style="padding: 64px 0;">
+    <div *ngIf="actionRes.qr" class="ion-padding-bottom">
+      <qr-code [value]="actionRes.value" size="240"></qr-code>
     </div>
 
-
+    <p *ngIf="!actionRes.copyable">{{ actionRes.value }}</p>
+    <a *ngIf="actionRes.copyable" style="cursor: copy;" (click)="copy(actionRes.value)">
+      <b>{{ actionRes.value }}</b>
+      <sup><ion-icon name="copy-outline" style="padding-left: 6px; font-size: small;"></ion-icon></sup>
+    </a>
   </div>
 </ion-content>
-
-<ion-footer>
-  <ion-toolbar>
-    <ion-buttons slot="end" class="ion-padding-end">
-      <ion-button fill="outline" (click)="dismiss()" class="enter-click">
-        Close
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-footer>
-

ui/src/app/modals/action-success/action-success.page.ts

@@ -9,7 +9,6 @@ import { copyToClipboard } from 'src/app/util/web.util'
   styleUrls: ['./action-success.page.scss'],
 })
 export class ActionSuccessPage {
-
   @Input() actionRes: ActionResponse
 
   constructor (

ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts

@@ -158,10 +158,9 @@ export class AppActionsPage {
         'action-id': actionId,
         input,
       })
-      await this.modalCtrl.dismiss()
+      this.modalCtrl.dismiss()
       const successModal = await this.modalCtrl.create({
         component: ActionSuccessPage,
-        cssClass: res.qr ? 'action-success-modal-qr' : 'action-success-modal',
         componentProps: {
           actionRes: res,
         },

ui/src/app/pages/apps-routes/app-list/app-list.page.html

@@ -43,7 +43,8 @@
                   <ion-icon name="open-outline"></ion-icon>
                 </div>
               </div>
-              <img class="main-img" [src]="pkg.value.entry['static-files'].icon" alt="icon" />
+              <img style="position: absolute" class="main-img" [src]="pkg.value.entry['static-files'].icon" [alt]="pkg.value.entry.manifest.title" />
+              <img class="main-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
               <ion-card-header>
                 <ion-card-title>
                   {{ pkg.value.entry.manifest.title }}

ui/src/app/pages/apps-routes/app-list/app-list.page.scss

@@ -28,7 +28,7 @@
   height: calc(10px + .5vw);
   width: calc(10px + .5vw);
   border-radius: 100%;
-  box-shadow: 0 0 4px 4px rgba(255, 255, 255, 0.3);
+  box-shadow: 0 0 4px 4px rgba(255,213,52, 0.1);
   position: absolute !important;
   left: 10px !important;
   top: 10px !important;

ui/src/app/services/api/api.fixures.ts

@@ -832,6 +832,13 @@ export module Mock {
     },
   }
 
+  export const ActionResponse: RR.ExecutePackageActionRes = {
+    message: 'Password changed successfully. If you lose your new password, you will be lost forever.',
+    value: 'NewPassword1234!',
+    copyable: true,
+    qr: true,
+  }
+
   export const SshKeys: RR.GetSSHKeysRes = [
     {
       'created-at': new Date().toISOString(),

ui/src/app/services/api/embassy-mock-api.service.ts

@@ -406,12 +406,7 @@ export class MockApiService extends ApiService {
 
   async executePackageAction (params: RR.ExecutePackageActionReq): Promise<RR.ExecutePackageActionRes> {
     await pauseFor(2000)
-    return {
-      message: 'Action success!',
-      value: 'new password',
-      copyable: true,
-      qr: false,
-    }
+    return Mock.ActionResponse
   }
 
   async startPackageRaw (params: RR.StartPackageReq): Promise<RR.StartPackageRes> {

ui/src/global.scss

@@ -187,24 +187,6 @@ ion-button {
   }
 }
 
-.action-success-modal {
-  .modal-wrapper {
-    width: 320px !important;
-    height: 320px !important;
-    top: unset !important;
-    left: unset !important;
-  }
-}
-
-.action-success-modal-qr {
-  .modal-wrapper {
-    width: 320px !important;
-    height: 450px !important;
-    top: unset !important;
-    left: unset !important;
-  }
-}
-
 .modal-wrapper {
   position: absolute;
   height: 90% !important;