mobile styling for email login form #63 (comment)

dwyl · May 2, 2020 · 250e8bc · 250e8bc
1 parent f0da368
commit 250e8bc
Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/lib/auth_web/templates/layout/app.html.eex b/lib/auth_web/templates/layout/app.html.eex
@@ -13,7 +13,7 @@
 
     <%= render "nav.html", assigns %>
 
-    <main role="main" class="container ph3 pt5">
+    <main role="main" class="container pt5">
       <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
       <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
       <%= render @view_module, @view_template, assigns %>

diff --git a/lib/auth_web/templates/page/index.html.eex b/lib/auth_web/templates/page/index.html.eex
@@ -1,8 +1,8 @@
-<div class="phx-hero w-80 center">
+<div class="phx-hero w-100 center">
   <h1 class="center tc">Please Sign in to Continue</h1>
-  <p class="center tc f3">Use your GitHub or Google Account: </p>
+  <p class="center tc f3">Use GitHub or Google: </p>
 
-  <div style="display:flex; flex-direction:column; width:22em; margin: 20px auto;">
+  <div style="display:flex; flex-direction:column; width:21em; margin: 20px auto;">
     <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
     <a href="<%= @oauth_github_url %>"
       style="display:inline-flex; align-items:center; min-height:60px;
@@ -45,26 +45,29 @@
   <div>
 
   <div class="center">
-    <p class="center tc pt2 f3"><u>Or</u> use your email address: </p>
+    <p class="center tc pt2 f3"><u>Or</u> your email address: </p>
 
     <%= form_for @changeset, @action,  fn f -> %>
       <%= email_input f, :email, class:
-      "db w-100 mt2 pa2 ba b--dark-grey f3",
+      "db w-100 mt2 pa3 ba b--dark-grey f3",
         placeholder: "your@email.com"%>
       <%= error_tag f, :email %>
       <br />
       <%= hidden_input f, :state, id: "state", value: @state %>
 
 
       <%= submit "Login / Register",
-        class: "pointer br2 ba dwyl-bg-mint white pa3 ml1 mv1 f3
-        shadow-hover bg-animate hover-bg-dark-green border-box no-underline db",
+        class: "w-100 pointer ba border-box dwyl-bg-mint white pa3 ml1 mv1 f3
+        shadow-hover bg-animate hover-dwyl-teal-darkest no-underline db",
         style: "margin:0 auto; border-color: #318d7b;"
       %>
     <% end %>
     <style>
     .dwyl-bg-mint {
-      background-color: #4BC0A9;
+      background-color: #339999;
+    }
+    .hover-dwyl-teal-darkest:hover,  .hover-dwyl-teal-darkest:focus {
+      background-color: #318d7b;
     }
     </style>