melon-archive
/
summer-ui
Archived
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

Fix up login and register from styling
ci/woodpecker/push/build Pipeline was successful Details

This commit is contained in:
Melon 2022-11-24 01:59:50 +00:00
parent 21bee958c2
commit f4cebbcece
Signed by: melon
GPG Key ID: 6C9D970C50D26A25
2 changed files with 41 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/login/LoginForm.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import {createEventDispatcher} from "svelte"; import {createEventDispatcher} from "svelte";
import {link, navigate} from "svelte-navigator";
let inputEmail: string = ""; let inputEmail: string = "";
let inputPassword: string = ""; let inputPassword: string = "";
@ -27,6 +28,9 @@
<div class="login-action"> <div class="login-action">
<section> <section>
<button type="submit">Login</button> <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> </section>
</div> </div>
</form> </form>
@ -83,6 +87,19 @@
background: var(--bg-panel-action); background: var(--bg-panel-action);
padding: 24px; padding: 24px;
border-radius: 0 0 var(--large-curve) var(--large-curve); 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> </style>

26
src/components/register/RegisterForm.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import {createEventDispatcher} from "svelte"; import {createEventDispatcher} from "svelte";
import {navigate} from "svelte-navigator";
import {getEnv} from "~/utils/env"; import {getEnv} from "~/utils/env";
export let err: {message: string; log_id: string}; export let err: {message: string; log_id: string};
@ -42,7 +43,7 @@
<h2>Account</h2> <h2>Account</h2>
<section> <section class="first-section">
<label for="email">Email</label> <label for="email">Email</label>
<input id="email" type="email" name="email" placeholder=" " autocomplete="username" required bind:value={inputEmail} /> <input id="email" type="email" name="email" placeholder=" " autocomplete="username" required bind:value={inputEmail} />
@ -124,6 +125,8 @@
{/if} {/if}
<section> <section>
<button type="submit">Register</button> <button type="submit">Register</button>
<div class="flex-gap" />
<button on:click={() => navigate("/login")} class="grey-btn">Login</button>
</section> </section>
</div> </div>
</form> </form>
@ -174,11 +177,15 @@
} }
> section { > section {
padding-bottom: 16px; padding-bottom: 24px;
display: grid; display: grid;
grid-template-columns: repeat(2, auto); grid-template-columns: repeat(2, auto);
gap: 16px; gap: 16px;
&.first-section {
padding-bottom: 8px;
}
> label { > label {
align-self: center; align-self: center;
} }
@ -217,10 +224,25 @@
background: var(--bg-panel-action); background: var(--bg-panel-action);
padding: 24px; padding: 24px;
border-radius: 0 0 var(--large-curve) var(--large-curve); 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 { #password-constraints > ul {
margin: 0;
> li.follows-constraint { > li.follows-constraint {
color: darken(#bdd358, 5); color: darken(#bdd358, 5);
} }