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

This commit is contained in:
Matt Hill
2023-11-01 16:30:42 -06:00
committed by GitHub
parent 27c5464cb6
commit 9c6dcc4a43
2 changed files with 44 additions and 45 deletions

View File

@@ -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"
>
<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>Login to StartOS</p>
<p>OPEN</p>
<ion-icon name="open-outline"></ion-icon>
</div>
</div>
</ion-footer>
</ion-card>
</div>
</ion-col>

View File

@@ -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%;
@@ -106,34 +115,6 @@ ion-card {
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: '';
position: absolute;
@@ -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 {