UI: Removed labels; Added SVGs instead

3 months ago · 8b148d329f
6 changed files with 21 additions and 10 deletions
--- a/pages/index.html
+++ b/pages/index.html
@ -28,9 +28,9 @@
    </div>


-    <div class="d-flex flex-column p-4 gap-4 py-md-5 align-items-start justify-content-center">
+    <!-- <div class="d-flex flex-column p-4 gap-4 py-md-5 align-items-start justify-content-center"> -->
+    <div class="py-md-5">
      <form onsubmit="return false;">
-        <!-- <label for="new-category-input" class="form-label">New category</label> -->
        <input type="text" name="newCategory" class="form-control" id="new-category-input" placeholder="Category Name">
        <input type="submit" value="Create" onclick="createNewCategory();" class="btn btn-primary">
      </form>
--- a/pages/login.html
+++ b/pages/login.html
@ -9,12 +9,12 @@
        <h3>Log in</h3>
        <form name="loginForm" onsubmit="return false;">
            <p>
-                <label for="login" class="form-label">Login</label> <br>
+                <img src="/static/images/universal-access.svg" alt="Login">
                <input type="text" name="login" minlength="3" placeholder="Login" required>
            </p>
        
            <p>
-                <label for="password" class="form-label">Password</label> <br>
+                <img src="/static/images/key.svg" alt="Password">
                <input type="password" name="password" minlength="3" placeholder="Password" required>
            </p>
            
--- a/pages/register.html
+++ b/pages/register.html
@ -7,18 +7,18 @@
        <h3>Register</h3>
        <form name="registerForm" onsubmit="return false;">
          <p>
-              <label for="login" class="form-label">Login</label> <br>
-              <input type="text" name="login" minlength="3" placeholder="Login" required>
+                <img src="/static/images/universal-access.svg" alt="Login">
+                <input type="text" name="login" minlength="3" placeholder="Login" required>
          </p>
        
          <p>
-            <label for="email" class="form-label">Email</label> <br>
-            <input type="email" name="email" minlength="3" placeholder="login@example.com" required>
+                <img src="/static/images/envelope-at.svg" alt="E-mail">
+                <input type="email" name="email" minlength="3" placeholder="login@example.com" required>
          </p>
        
          <p>
-              <label for="password" class="form-label">Password</label> <br>
-              <input type="password" name="password" minlength="3" placeholder="Password" required>
+                <img src="/static/images/key.svg" alt="Password">
+                <input type="password" name="password" minlength="3" placeholder="Password" required>
          </p>
        
            <p><span id="error_message" class="text-danger"></span></p> 
--- a/static/images/envelope-at.svg
+++ b/static/images/envelope-at.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-at" viewBox="0 0 16 16">
+  <path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2zm3.708 6.208L1 11.105V5.383zM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2z"/>
+  <path d="M14.247 14.269c1.01 0 1.587-.857 1.587-2.025v-.21C15.834 10.43 14.64 9 12.52 9h-.035C10.42 9 9 10.36 9 12.432v.214C9 14.82 10.438 16 12.358 16h.044c.594 0 1.018-.074 1.237-.175v-.73c-.245.11-.673.18-1.18.18h-.044c-1.334 0-2.571-.788-2.571-2.655v-.157c0-1.657 1.058-2.724 2.64-2.724h.04c1.535 0 2.484 1.05 2.484 2.326v.118c0 .975-.324 1.39-.639 1.39-.232 0-.41-.148-.41-.42v-2.19h-.906v.569h-.03c-.084-.298-.368-.63-.954-.63-.778 0-1.259.555-1.259 1.4v.528c0 .892.49 1.434 1.26 1.434.471 0 .896-.227 1.014-.643h.043c.118.42.617.648 1.12.648m-2.453-1.588v-.227c0-.546.227-.791.573-.791.297 0 .572.192.572.708v.367c0 .573-.253.744-.564.744-.354 0-.581-.215-.581-.8Z"/>
+</svg>
--- a/static/images/key.svg
+++ b/static/images/key.svg
@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-key" viewBox="0 0 16 16">
+  <path d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8m4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5"/>
+  <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
+</svg>
--- a/static/images/universal-access.svg
+++ b/static/images/universal-access.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-universal-access" viewBox="0 0 16 16">
+  <path d="M9.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0M6 5.5l-4.535-.442A.531.531 0 0 1 1.531 4H14.47a.531.531 0 0 1 .066 1.058L10 5.5V9l.452 6.42a.535.535 0 0 1-1.053.174L8.243 9.97c-.064-.252-.422-.252-.486 0l-1.156 5.624a.535.535 0 0 1-1.053-.174L6 9z"/>
+</svg>