Fix/setup

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

@@ -8,20 +8,20 @@
           <ion-card>
             <ion-row class="ion-align-items-center">
               <ion-col responsiveCol sizeXs="12" class="ion-text-center">
-                <div class="inline" style="margin-bottom: 3rem">
+                <div class="inline mb-12">
                   <ion-icon
                     name="checkmark-circle-outline"
                     color="success"
                   ></ion-icon>
                   <h1>Setup Complete!</h1>
                 </div>
                 <ion-button
+                  shape="round"
+                  class="login-button mb-12"
                   (click)="exitKiosk()"
-                  size="large"
-                  class="login-btn"
                 >
                   Continue to Login
-                  <ion-icon slot="end" name="log-in-outline"></ion-icon>
+                  <ion-icon name="log-in-outline" slot="end"></ion-icon>
                 </ion-button>
               </ion-col>
             </ion-row>
@@ -32,8 +32,8 @@ <h1>Setup Complete!</h1>
           <ion-card *ngIf="lanAddress">
             <ion-row class="ion-align-items-center">
               <ion-col responsiveCol sizeXs="12" class="ion-text-center">
-                <div style="margin-bottom: 4rem">
-                  <div class="inline">
+                <div class="mb-12">
+                  <div class="inline-container setup">
                     <ion-icon
                       name="checkmark-circle-outline"
                       color="success"
@@ -50,24 +50,19 @@ <h3 *ngIf="setupType === 'transfer'">
                 <div class="card-container">
                   <ion-card id="information" (click)="download()">
                     <ion-card-content>
-                      <ion-card-title>
-                        Download permanent address info
-                      </ion-card-title>
+                      <ion-card-title>Download address info</ion-card-title>
                       <p>
                         start.local was for setup purposes only. It will no
                         longer work.
                       </p>
                     </ion-card-content>
                     <ion-footer>
-                      <div class="container">
-                        <div class="inline">
-                          <p>DOWNLOAD</p>
-                          <ion-icon name="download-outline"></ion-icon>
-                        </div>
+                      <div class="inline-container">
+                        <p class="action-text">Download</p>
+                        <ion-icon slot="end" name="download-outline"></ion-icon>
                       </div>
                     </ion-footer>
                   </ion-card>
-
                   <ion-card
                     id="launch"
                     [disabled]="disableLogin"
@@ -83,9 +78,9 @@ <h3 *ngIf="setupType === 'transfer'">
                     </ion-card-content>
                     <ion-footer>
                       <div class="container">
-                        <div class="inline">
-                          <p>OPEN</p>
-                          <ion-icon name="open-outline"></ion-icon>
+                        <div class="inline-container">
+                          <p class="action-text">Open</p>
+                          <ion-icon slot="end" name="open-outline"></ion-icon>
                         </div>
                       </div>
                     </ion-footer>

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

@@ -18,28 +18,24 @@ ion-content {
 
 ion-grid {
   max-width: 760px;
-  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;
+.inline-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.grid-center-wrapper {
-  height: 100%;
-  width: 100%;
+.card-container {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
+  gap: 1rem;
 }
 
 ion-card {
-  padding: 3rem;
+  padding: 2.4rem;
 
   h1 {
     color: var(--ion-color-success);
@@ -53,14 +49,14 @@ ion-card {
     margin-bottom: 2rem;
   }
 
+  // download info card
   ion-card {
-    max-width: 91%;
-    min-width: 91%;
+    min-height: 260px;
+    width: 80%;
     background: #615F5F;
     color: var(--ion-text-color);
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     border-radius: 44px;
-    margin: auto;
     text-align: left;
     cursor: pointer;
     position: relative;
@@ -79,14 +75,6 @@ ion-card {
       font-size: 1.3rem;
     }
 
-    ion-card-content {
-      padding-bottom: 4rem;
-
-      p {
-        padding: 1rem 0;
-      }
-    }
-
     ion-footer {
       position: absolute;
       bottom: 10px;
@@ -109,42 +97,87 @@ ion-card {
     }
   }
 
-  .container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  .login-button {
+    --background: var(--color-accent);
+    --padding-bottom: 2.5rem;
+    --padding-top: 2.5rem;
+    --padding-start: 2.5rem;
+    --padding-end: 2.5rem;
+    --border-radius: 44px;
+    font-size: 1.4rem !important;
+    font-weight: bold;
+    text-transform: none;
+    letter-spacing: normal;
+    transition: all 350ms ease;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:hover {
+      transition-property: transform;
+      transform: scale(1.05);
+      transition-delay: 40ms;
+    }
+
+    ion-icon {
+      font-size: 1.7rem;
+    }
+  }
+
+  .launch-button {
+    --background: var(--alt-blue);
   }
 
-  #information:after {
+  #information:after, #launch:after {
     content: '';
     position: absolute;
     left: 0;
-    top: 80%;
+    top: 79%;
     width: 100%;
     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 {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 2rem;
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
+
+.action-text {
+  font-variant-caps: all-small-caps;
+  padding-right: 0.5rem;
+  font-size: 1.5rem !important;
+  letter-spacing: 0.03rem;
+  padding-bottom: 0.1rem;
 }
 
-.emphasis-warn {
-  font-weight: 600;
-  color: var(--ion-color-warning);
+@media (max-width: 700px) {
+  .setup {
+    flex-direction: column;
+  }
+
+  ion-card {
+    ion-card {
+      width: 100%;
+      padding-bottom: unset;
+    }
+    #information:after {
+      top: 84%;
+    }
+    #launch:after {
+      top: 85%;
+    }
+  }
 }

frontend/projects/setup-wizard/src/styles.scss

@@ -218,7 +218,7 @@ ion-toast {
   * {
     display: inline-block;
     vertical-align: middle;
-    padding: 0.3rem;
+    padding-left: 0px 0.3rem;
   }
 }
 

frontend/projects/ui/src/app/app/enter/enter.directive.ts → frontend/projects/shared/src/directives/enter/enter.directive.ts

@@ -1,6 +1,6 @@
 import { Directive, HostListener, Inject } from '@angular/core'
 import { DOCUMENT } from '@angular/common'
-import { debounce } from '@start9labs/shared'
+import { debounce } from '../../util/misc.util'
 
 @Directive({
   selector: '[appEnter]',

frontend/projects/shared/src/public-api.ts

@@ -24,6 +24,8 @@ export * from './directives/responsive-col/responsive-col.module'
 export * from './directives/responsive-col/responsive-col-viewport.directive'
 export * from './directives/safe-links/safe-links.directive'
 export * from './directives/safe-links/safe-links.module'
+export * from './directives/enter/enter.directive'
+export * from './directives/enter/enter.module'
 
 export * from './pipes/emver/emver.module'
 export * from './pipes/emver/emver.pipe'

frontend/projects/ui/src/app/app.module.ts

@@ -10,11 +10,12 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { IonicModule } from '@ionic/angular'
 import { MonacoEditorModule } from '@materia-ui/ngx-monaco-editor'
 import {
-  MarkdownModule,
   DarkThemeModule,
+  EnterModule,
+  LightThemeModule,
+  MarkdownModule,
   ResponsiveColModule,
   SharedPipesModule,
-  LightThemeModule,
 } from '@start9labs/shared'
 
 import { AppComponent } from './app.component'
@@ -25,7 +26,6 @@ import { MarketplaceModule } from './marketplace.module'
 import { PreloaderModule } from './app/preloader/preloader.module'
 import { FooterModule } from './app/footer/footer.module'
 import { MenuModule } from './app/menu/menu.module'
-import { EnterModule } from './app/enter/enter.module'
 import { APP_PROVIDERS } from './app.providers'
 import { PatchDbModule } from './services/patch-db/patch-db.module'
 import { ToastContainerModule } from './components/toast-container/toast-container.module'