Fix up login and register from styling
ci/woodpecker/push/build Pipeline was successful
Details
ci/woodpecker/push/build Pipeline was successful
Details
This commit is contained in:
parent
21bee958c2
commit
f4cebbcece
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import {createEventDispatcher} from "svelte";
|
||||
import {link, navigate} from "svelte-navigator";
|
||||
|
||||
let inputEmail: string = "";
|
||||
let inputPassword: string = "";
|
||||
|
@ -27,6 +28,9 @@
|
|||
<div class="login-action">
|
||||
<section>
|
||||
<button type="submit">Login</button>
|
||||
<div class="flex-gap" />
|
||||
<!-- <button on:click={() => navigate("/forgot-password")} class="grey-btn">Forgot My Password</button> -->
|
||||
<button on:click={() => navigate("/register")} class="grey-btn">Register</button>
|
||||
</section>
|
||||
</div>
|
||||
</form>
|
||||
|
@ -83,6 +87,19 @@
|
|||
background: var(--bg-panel-action);
|
||||
padding: 24px;
|
||||
border-radius: 0 0 var(--large-curve) var(--large-curve);
|
||||
|
||||
> section {
|
||||
display: flex;
|
||||
|
||||
> .grey-btn {
|
||||
margin-left: 8px;
|
||||
background-color: #616161;
|
||||
}
|
||||
|
||||
> .flex-gap {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import {createEventDispatcher} from "svelte";
|
||||
import {navigate} from "svelte-navigator";
|
||||
import {getEnv} from "~/utils/env";
|
||||
|
||||
export let err: {message: string; log_id: string};
|
||||
|
@ -42,7 +43,7 @@
|
|||
|
||||
<h2>Account</h2>
|
||||
|
||||
<section>
|
||||
<section class="first-section">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" name="email" placeholder=" " autocomplete="username" required bind:value={inputEmail} />
|
||||
|
||||
|
@ -124,6 +125,8 @@
|
|||
{/if}
|
||||
<section>
|
||||
<button type="submit">Register</button>
|
||||
<div class="flex-gap" />
|
||||
<button on:click={() => navigate("/login")} class="grey-btn">Login</button>
|
||||
</section>
|
||||
</div>
|
||||
</form>
|
||||
|
@ -174,11 +177,15 @@
|
|||
}
|
||||
|
||||
> section {
|
||||
padding-bottom: 16px;
|
||||
padding-bottom: 24px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
gap: 16px;
|
||||
|
||||
&.first-section {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
> label {
|
||||
align-self: center;
|
||||
}
|
||||
|
@ -217,10 +224,25 @@
|
|||
background: var(--bg-panel-action);
|
||||
padding: 24px;
|
||||
border-radius: 0 0 var(--large-curve) var(--large-curve);
|
||||
|
||||
> section {
|
||||
display: flex;
|
||||
|
||||
> .grey-btn {
|
||||
margin-left: 0 8px;
|
||||
background-color: #616161;
|
||||
}
|
||||
|
||||
> .flex-gap {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#password-constraints > ul {
|
||||
margin: 0;
|
||||
|
||||
> li.follows-constraint {
|
||||
color: darken(#bdd358, 5);
|
||||
}
|
||||
|
|
Reference in New Issue