use keys to complete setup and redesign final buttons (#2492)

frontend/projects/setup-wizard/src/app/pages/success/success.page.html

@@ -15,16 +15,14 @@
                   ></ion-icon>
                   <h1>Setup Complete!</h1>
                 </div>
-                <div class="card-container">
-                  <ion-card id="exit" (click)="exitKiosk()" tabindex="0">
-                    <div class="container">
-                      <div class="inline">
-                        <p>Continue to login</p>
-                        <ion-icon name="log-in-outline"></ion-icon>
-                      </div>
-                    </div>
-                  </ion-card>
-                </div>
+                <ion-button
+                  (click)="exitKiosk()"
+                  size="large"
+                  class="login-btn"
+                >
+                  Continue to Login
+                  <ion-icon slot="end" name="log-in-outline"></ion-icon>
+                </ion-button>
               </ion-col>
             </ion-row>
           </ion-card>
@@ -63,24 +61,34 @@
                     <ion-footer>
                       <div class="container">
                         <div class="inline">
-                          <p>Download</p>
+                          <p>DOWNLOAD</p>
                           <ion-icon name="download-outline"></ion-icon>
                         </div>
                       </div>
                     </ion-footer>
                   </ion-card>
+
                   <ion-card
-                    [disabled]="disableLogin"
                     id="launch"
+                    [disabled]="disableLogin"
                     href="{{ lanAddress }}"
                     target="_blank"
                   >
-                    <div class="container">
-                      <div class="inline">
-                        <p>Login to StartOS</p>
-                        <ion-icon name="open-outline"></ion-icon>
+                    <ion-card-content>
+                      <ion-card-title>Trust your Root CA</ion-card-title>
+                      <p>
+                        In the new tab, follow instructions to trust your
+                        server's Root CA and log in.
+                      </p>
+                    </ion-card-content>
+                    <ion-footer>
+                      <div class="container">
+                        <div class="inline">
+                          <p>OPEN</p>
+                          <ion-icon name="open-outline"></ion-icon>
+                        </div>
                       </div>
-                    </div>
+                    </ion-footer>
                   </ion-card>
                 </div>
               </ion-col>

frontend/projects/setup-wizard/src/app/pages/success/success.page.scss

@@ -21,6 +21,15 @@ ion-grid {
   height: 100%;
 }
 
+.login-btn {
+  --background: var(--color-accent);
+  --border-radius: 44px;
+  --box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  --padding-start: 36px;
+  --padding-end: 36px;
+  height: 76px;
+}
+
 .grid-center-wrapper {
   height: 100%;
   width: 100%;
@@ -105,34 +114,6 @@ ion-card {
     justify-content: center;
     align-items: center;
   }
-
-  #exit {
-    background: var(--color-accent);
-    height: 100%;
-
-    .container p {
-      font-size: 1.4rem !important;
-      font-weight: bold;
-    }
-
-    ion-icon {
-      font-size: 1.7rem;
-    }
-  }
-
-  #launch {
-    background: var(--alt-blue);
-    height: 100%;
-    
-    .container p {
-      font-size: 1.4rem !important;
-      font-weight: bold;
-    }
-
-    ion-icon {
-      font-size: 1.7rem;
-    }
-  }
   
   #information:after {
     content: '';
@@ -143,6 +124,16 @@ ion-card {
     height: 100%;
     background: var(--color-accent);
   }
+
+  #launch:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 80%;
+    width: 100%;
+    height: 100%;
+    background: var(--alt-blue);
+  }
 }
 
 .card-container {