From 52bbe50203bdc6a27ee4c34c285529c900fd1ffc Mon Sep 17 00:00:00 2001
From: "Tim T. Joe" <106974662+TimTJoe@users.noreply.github.com>
Date: Thu, 15 Aug 2024 15:28:47 +0000
Subject: [PATCH] redesigned login page

---
 public/css/form.css     | 40 ++++++++++++++++++++++++++++++++
 public/css/reset.css    |  3 +--
 public/css/root.css     | 29 ++++++++++++++---------
 public/css/style.css    | 50 ++++++++++++++++++++++++++++++++++++++++
 public/css/text.css     | 51 ++++++++++++-----------------------------
 views/login.ejs         | 50 ++++++++++++++++++----------------------
 views/partials/head.ejs |  2 +-
 7 files changed, 147 insertions(+), 78 deletions(-)
 create mode 100644 public/css/form.css
 create mode 100644 public/css/style.css

diff --git a/public/css/form.css b/public/css/form.css
new file mode 100644
index 0000000..13c3fb0
--- /dev/null
+++ b/public/css/form.css
@@ -0,0 +1,40 @@
+.label {
+    display: flex;
+    font-weight: 600;
+    font-size: 15px;
+    justify-content: space-between;
+    margin-bottom: 5px;
+    margin-top: 10px;
+    cursor: pointer;
+}
+
+.input {
+    border-radius: 2px;
+    width: 100%;
+    background-color: var(--noir);
+    color: var(--midnight);
+    line-height: 100%;
+    outline: none;
+    font: 16px;
+    caret-color: var(--crimson);
+    width: 100%;
+    padding: 12px;
+    border: 1px solid var(--ink);
+}
+
+.button {
+    border-radius: 4px;
+    border: none;
+    color: var(--white);
+    min-width: 120px;
+    min-height: 46px;
+    line-height: 22px;
+    font-weight: 700;
+    padding: 6px 8px;
+    user-select: none;
+    cursor: pointer;
+    text-align: center;
+    width: 100%;
+    margin-top: 21px;
+    background-color: var(--crimson);
+}
\ No newline at end of file
diff --git a/public/css/reset.css b/public/css/reset.css
index 17078ed..d2bd58e 100644
--- a/public/css/reset.css
+++ b/public/css/reset.css
@@ -44,10 +44,9 @@ textarea {
 /* Set core body defaults */
 body {
     line-height: 1.5;
-    background-color: var(--bg-neutral);
     font-family: Arial, sans-serif;
-    color: var(--text-secondary);
     height: inherit;
+    color: var(--midnight);
 }
 
 /* Set core root defaults */
diff --git a/public/css/root.css b/public/css/root.css
index d7a9e42..30a1a89 100644
--- a/public/css/root.css
+++ b/public/css/root.css
@@ -10,6 +10,24 @@
     --red: #FF4136;
     --purple: #8b058b;
 
+    /* backgrounds */
+    --crimson: #fe2c55;
+    --charcoal: #1b1b1b;
+    --noir: #1618230f;
+    --ink: #1618231f;
+    
+    /* fills */
+    --aqua: #25f4ee;
+    --midnight:#161823;
+    --shadow: #16182399;
+    --smoke: #16182357;
+    --cobalt: #2b5db9;
+    --black: #000000;
+    /* borders */
+    --ash: #e3e3e5;
+    --fog: #1618231f;
+    --whisper: #16182308;
+
     --white: #ffffff;
     --gray-light: #f6f8fa;
     --gray: #c0c0c0;
@@ -45,15 +63,4 @@
     --box-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.2);
     --box-shadow-xl: 0 15px 30px rgba(0, 0, 0, 0.25);
 
-    /* Background Colors */
-    --bg-primary: var(--navy);
-    --bg-secondary: var(--navy-light);
-    --bg-accent: var(--complementary-blue);
-    --bg-neutral: var(--gray-light);
-
-    /* Text Colors */
-    --text-primary: var(--white);
-    --text-secondary: var(--gray-dark);
-    --text-accent: var(--yellow);
-    --text-muted: var(--gray);
 }
diff --git a/public/css/style.css b/public/css/style.css
new file mode 100644
index 0000000..35e40e3
--- /dev/null
+++ b/public/css/style.css
@@ -0,0 +1,50 @@
+@import url("./root.css");
+@import url("./reset.css");
+@import url("./text.css");
+@import url("./form.css");
+
+/* NAVIGATION */
+.navigation {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 60px;
+    padding: 0 20px;
+    width: calc(100% - 0px);
+    background-color: var(--white);
+}
+
+/* TEXT */
+.larger {
+    font-size: 1.5rem;
+    unicode-bidi: isolate;
+    display: block;
+    margin: 0.83em 0px;
+    font-weight: bold;
+}
+
+
+/* divs */
+.center {
+    display: grid;
+    place-items: center;
+}
+
+.smblock {
+    width: 363px;
+    min-height: 60px;
+}
+
+.container {
+    min-height: 80vh;
+}
+
+.footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 60px;
+    padding: 0 20px;
+    width: calc(100% - 0px);
+    background-color: var(--white);
+}
\ No newline at end of file
diff --git a/public/css/text.css b/public/css/text.css
index 392bb45..a26b282 100644
--- a/public/css/text.css
+++ b/public/css/text.css
@@ -1,50 +1,22 @@
 .bold {
     font-weight: bolder;
 }
-.smallest {
-    font-size: var(--font-xxs);
-}
-.smaller {
-    font-size: var(--font-xs);
-}
-.small {
-    font-size: var(--font-sm);
-}
-.medium {
-    font-size: var(--font-md);
-}
-.large {
-    font-size: var(--font-lg);
-}
-.larger {
-    font-size: var(--font-xl);
-}
-.largest {
-    font-size: var(--font-xxl);
-}
-.huge {
-    font-size: var(--font-xxxl);
-}
 
-.secondary {
-    color: var(--text-secondary);
-}
-.primary {
-    color: var(--text-primary);
-}
-.accent {
-    color: var(--text-accent);
-}
-.muted {
-    color: var(--text-muted);
+.larger {
+    font-size: 1.5rem;
+    unicode-bidi: isolate;
+    display: block;
+    margin: 0.83em 0px;
+    font-weight: bold;
 }
-
 .center-align {
     text-align: center;
 }
+
 .left-align {
     text-align: left;
 }
+
 .right-align {
     text-align: right;
 }
@@ -52,3 +24,10 @@
 .underline {
     text-decoration: underline;
 }
+
+.link {
+    color: rgba(22, 24, 35, 0.75);
+    font-weight: 600;
+    font-size: 12px;
+    display: inline-block;
+}
\ No newline at end of file
diff --git a/views/login.ejs b/views/login.ejs
index c81be34..d14675f 100644
--- a/views/login.ejs
+++ b/views/login.ejs
@@ -1,29 +1,23 @@
 <%- include("./partials/head") %>
-  <main class="fullbleed center">
-    <form action="/login" method="post" class="card wide white">
-      <header>
-        <h1 class="larger">Log in to your account</h1>
-      </header>
-      <hr class="divider margin-top margin-bottom">
-      <fieldset class="field">
-        <legend>Username</legend>
-        <input type="text" name="username" placeholder="Enter username" required />
-      </fieldset>
-      <fieldset class="field no-margin">
-        <legend>Password</legend>
-        <input type="password" name="password" placeholder="Enter password" required />
-      </fieldset>
-      <% if(data.errors) { %>
-        <small>
-          <% data.errors %>
-        </small>
-        <%}%>
-          <a href="reset-password" class="medium padding-bottom">Forget Password?</a>
-          <button type="submit" class="primary full">Log In</button>
-          <hr class="divider margin-top">
-          <p class="medium padding-bottom padding-top center-align">
-            <span>Don't have an account?</span>
-            <a href="/voters/registration">Create new account</a>
-          </p>
-    </form>
-  </main>
\ No newline at end of file
+  <nav class="navigation">
+    <a href="" class="larger">Election App</a>
+    <span class=""></span>
+  </nav>
+  <main class="container center">
+    <div class="smblock">
+      <h2 class="larger center-align">Log in</h2>
+      <form action="" method="post">
+
+          <label class="label" for="username">Username </label>
+          <input type="username" name="username" id="username" class="input" />
+
+          <label class="label" for="password">Password</label>
+          <input type="password" name="password" id="password" class="input"  />
+
+        <a href="/reset-password" class="link">Forget Password?</a>
+
+        <button type="submit" class="button">Log In</button>
+      </form>
+    </div>
+  </main>
+  <footer class="footer">&copy; 2024</footer>
\ No newline at end of file
diff --git a/views/partials/head.ejs b/views/partials/head.ejs
index 18a6147..5c63109 100644
--- a/views/partials/head.ejs
+++ b/views/partials/head.ejs
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/css/imports.css">
+    <link rel="stylesheet" href="/css/style.css">
     <title>Election App</title>
 </head>