[Auth forms] Apply styling for auth forms

src/index.js

@@ -12,11 +12,11 @@ import * as bootstrap from "bootstrap"
 // include htmx library
 import * as htmx from "htmx.org"
 
+// include custom stylesheets and javascript
+import "./scss/auth.scss"
 import "./scss/detail.scss"
 import "./scss/form.scss"
 import "./scss/list.scss"
 import "./scss/profile.scss"
-import "./scss/sign-in.scss"
-import "./scss/sign-up.scss"
 
 import "./js/tasks"

src/scss/auth.scss

@@ -0,0 +1,25 @@
+// authentication form view stylesheet
+
+$input-border-radius: 0.75rem;
+
+#formAuth {
+  .form-floating {
+    input {
+      border-radius: 0;
+    }
+  }
+
+  .form-floating:first-of-type {
+    input {
+      border-top-right-radius: $input-border-radius;
+      border-top-left-radius: $input-border-radius;
+    }
+  }
+
+  .form-floating:last-of-type {
+    input {
+      border-bottom-right-radius: $input-border-radius;
+      border-bottom-left-radius: $input-border-radius;
+    }
+  }
+}

src/views/partials/signin_form.hbs

@@ -1,4 +1,4 @@
-<form class="w-50 m-auto v-100" id="formAuth" aria-label="Login Form">
+<form class="w-50 m-auto" id="formAuth" aria-label="Login Form">
   <h1 class="h3 fw-normal mb-3 text-center">Please sing in</h1>
   <div class="form-floating">
     <input type="text" class="form-control shadow" id="username" name="username" placeholder="Username">

src/views/partials/signup_form.hbs

@@ -1,4 +1,4 @@
-<form class="w-50 m-auto form-registration" id="formAuth" aria-label="Login Form">
+<form class="w-50 m-auto" id="formAuth" aria-label="Login Form">
   <h1 class="h3 fw-normal mb-3 text-center">Register a new account</h1>
   <div class="form-floating">
     <input type="text" class="form-control shadow" id="username" name="username" placeholder="Username">