First attempt at applying style from Invision to auth page

assets/sass/main.scss

@@ -392,6 +392,46 @@ h6 {
   }
 }
 
+body {
+  width: 100%;
 
+  background-image: linear-gradient(90deg, #004D60, #095627);
+
+  main {
+    width: 100%;
+  }
+}
+
+button.btn-primary {
+  border: 0;
+  border-radius: 5px;
+  padding: 1rem 2.5rem;
+  background-color: #0084BD;
+  color: white;
+  font-size: 1rem;
+}
 
 // Layout
+
+// Sign-in page
+
+#auth_request {
+  margin: 0 auto;
+
+  margin-top: 145px;
+
+  text-align: center;
+  padding: 70px 150px;
+
+  background-image: radial-gradient(#C7DAD5 70%, #86ADA2 100%);
+  border-radius: 10px;
+  box-shadow: 0px 0px 15px black;
+
+  form input {
+    display: block;
+    margin: 30px auto;
+    height: 40px;
+    width: 250px;
+    font-size: 20px;
+  }
+}

assets/sass/vendors/_meyerwebreset.scss

@@ -23,7 +23,6 @@ time, mark, audio, video {
   font-size: 1em;
   font: inherit;
   vertical-align: baseline;
-  display: inline-block;
 }
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, 
@@ -52,4 +51,4 @@ table {
 
 svg { 
   pointer-events: none; 
-}
+}

lib/open_pantry/web/templates/auth/request.html.eex

@@ -1,15 +1,13 @@
-<%= form_tag @callback_url, method: "post" do %>
-  <div class='control-group'>
-    <label class='control-label' for='email-input'>Email</label>
-    <input class='form-control' type='email' name='email' value='<%= @conn.params["email"] %>' />
-  </div>
+<div id="auth_request">
+  <img src="<%= static_path(@conn, "/images/auth_logo.png") %>" />
 
-  <div class='control-group'>
-    <label class='control-label' for='password-input'>Password</label>
-    <input class='form-control' type='password' name='password' />
-  </div>
+  <div>
+    <%= form_tag @callback_url, method: "post" do %>
+      <input type='email' name='email' placeholder='[email protected]' value='<%= @conn.params["email"] %>' autofocus />
+
+      <input type='password' name='password' placeholder='password' />
 
-  <div class='control-group'>
-    <button class='btn btn-primary'>Login</button>
+      <button class="btn btn-primary">Log In</button>
+    <% end %>
   </div>
-<% end %>
+</div>