create common styles for account forms

web/pw-server/src/routes/__layout.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import NavbarUserSection from "$lib/components/navbar/NavbarUserSection.svelte";
+
   import "./style.css";
 </script>
 
@@ -7,16 +9,13 @@
     <div class="navbar-main">
       <a href="/">PlanetWars</a>
     </div>
-    <div class="navbar-user">
+    <NavbarUserSection />
-      <a class="navbar-href" href="login">Sign in</a>
-      <a class="navbar-href" href="register">Sign up</a>
-    </div>
   </div>
   <slot />
 </div>
 
 <style lang="scss">
-  @import "../lib/variables.scss";
+  @import "src/styles/variables.scss";
 
   .outer-container {
     width: 100vw;
@@ -35,14 +34,6 @@
     padding: 0 15px;
   }
 
-  .navbar-user a {
-    font-size: 18px;
-    color: #eee;
-    font-family: Helvetica, sans-serif;
-    padding: 4px 8px;
-    text-decoration: none;
-  }
-
   .navbar-main {
     margin: auto 0;
   }
@@ -52,8 +43,4 @@
     color: #eee;
     text-decoration: none;
   }
-
-  .navbar-user {
-    margin: auto 0;
-  }
 </style>

web/pw-server/src/routes/index.svelte

@@ -182,7 +182,7 @@
 </div>
 
 <style lang="scss">
-  @import "../lib/variables.scss";
+  @import "src/styles/variables.scss";
 
   .container {
     display: flex;

web/pw-server/src/routes/login.svelte

@@ -35,14 +35,21 @@
   }
 </script>
 
-{#if loggedIn()}
-  you are logged in
-{/if}
 
-<form on:submit|preventDefault={login}>
+<div class="page-card">
-  <label for="username">Username</label>
+  <div class="page-card-content">
-  <input name="username" bind:value={username} />
+    <h1 class="page-card-header">Sign in</h1>
-  <label for="password">Password</label>
+    <form class="account-form" on:submit|preventDefault={login}>
-  <input type="password" name="password" bind:value={password} />
+      <label for="username">Username</label>
-  <button type="submit">Log in</button>
+      <input name="username" bind:value={username} />
-</form>
+      <label for="password">Password</label>
+      <input type="password" name="password" bind:value={password} />
+      <button type="submit">Submit</button>
+    </form>
+  </div>
+</div>
+
+
+<style lang="scss">
+  @import "src/styles/account_forms.scss";
+</style>

web/pw-server/src/routes/register.svelte

@@ -31,67 +31,16 @@
 <div class="page-card">
   <div class="page-card-content">
     <h1 class="page-card-header">Create account</h1>
-    <form class="register-form" on:submit|preventDefault={onSubmit}>
+    <form class="account-form" on:submit|preventDefault={onSubmit}>
       <label for="username">Username</label>
       <input name="username" bind:value={username} />
       <label for="password">Password</label>
       <input type="password" name="password" bind:value={password} />
-      <button type="submit">Sign up</button>
+      <button type="submit">Submit</button>
     </form>
   </div>
 </div>
 
 <style lang="scss">
-  .page-card {
+  @import "src/styles/account_forms.scss";
-    margin: 50px auto;
-    width: 40%;
-    max-width: 600px;
-    border: 1px solid #b5b5b5;
-    box-sizing: border-box;
-    border-radius: 0px;
-  }
-
-  .page-card-content {
-    margin: 20px 50px;
-  }
-
-  .page-card-header {
-    padding-top: .5em;
-    padding-bottom: 1em;
-    text-align: center;
-  }
-
-  .register-form {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    font-size: 18px;
-  }
-
-  .register-form label {
-    margin: 10px 5px;
-    font-weight: 500;
-  }
-
-  .register-form input {
-    margin: 10px 5px;
-    font-size: 1rem;
-    // height: 2.5em;
-    display: block;
-    border-radius: 4px;
-    border: 1px solid #b5b5b5;
-    padding: .75rem 1rem;
-  }
-
-  .register-form button {
-    background-color: lightgreen;
-    padding: 8px 16px;
-    border-radius: 8px;
-    border: 0;
-    font-size: 18pt;
-    display: block;
-    margin: 10px auto;
-    margin-top: 16px;
-
-  }
 </style>

web/pw-server/src/styles/account_forms.scss

@@ -0,0 +1,52 @@
+.page-card {
+  margin: 50px auto;
+  width: 40%;
+  max-width: 600px;
+  border: 1px solid #b5b5b5;
+  box-sizing: border-box;
+  border-radius: 0px;
+}
+
+.page-card-content {
+  margin: 20px 50px;
+}
+
+.page-card-header {
+  padding-top: 0.5em;
+  padding-bottom: 1em;
+  text-align: center;
+}
+
+.account-form {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  font-size: 18px;
+}
+
+.account-form label {
+  margin: 10px 5px;
+  font-weight: 500;
+}
+
+.account-form input {
+  margin: 10px 5px;
+  font-size: 1rem;
+  // height: 2.5em;
+  display: block;
+  border-radius: 4px;
+  border: 1px solid #b5b5b5;
+  padding: 0.75rem 1rem;
+}
+
+.account-form button {
+  background-color: lightgreen;
+  padding: 8px 16px;
+  border-radius: 8px;
+  border: 0;
+  font-size: 18pt;
+  display: block;
+  margin: 10px auto;
+  margin-top: 16px;
+  cursor: pointer;
+}

web/pw-server/src/styles/variables.scss

@@ -0,0 +1 @@
+$bg-color: rgb(41, 41, 41);