From 7274a81dc33f4bdb2fd21b73fe51d001214714fe Mon Sep 17 00:00:00 2001
From: Mikko Ahlroth <mikko@ahlroth.fi>
Date: Sat, 10 Sep 2022 23:57:42 +0300
Subject: [PATCH] Make login nicer looking

---
 assets/css/app.css                            | 22 ++++++++++++++++---
 .../live/main/index.html.heex                 | 20 ++++++++++-------
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 995dff6..d1ea3d7 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -8,27 +8,33 @@
   border: 1px solid transparent;
   border-radius: 4px;
 }
+
 .alert-info {
   color: #31708f;
   background-color: #d9edf7;
   border-color: #bce8f1;
 }
+
 .alert-warning {
   color: #8a6d3b;
   background-color: #fcf8e3;
   border-color: #faebcc;
 }
+
 .alert-danger {
   color: #a94442;
   background-color: #f2dede;
   border-color: #ebccd1;
 }
+
 .alert p {
   margin-bottom: 0;
 }
+
 .alert:empty {
   display: none;
 }
+
 .invalid-feedback {
   color: #a94442;
   display: block;
@@ -46,14 +52,19 @@
   transition: opacity 1s ease-out;
 }
 
-.phx-disconnected{
+.phx-disconnected {
   cursor: wait;
 }
-.phx-disconnected *{
+
+.phx-disconnected * {
   pointer-events: none;
 }
 
-html, body, div[data-phx-main="true"], main.container, .main-view-component {
+html,
+body,
+div[data-phx-main="true"],
+main.container,
+.main-view-component {
   width: 100%;
   height: 100%;
   margin: 0;
@@ -65,6 +76,7 @@ html, body, div[data-phx-main="true"], main.container, .main-view-component {
   margin: 1rem;
   display: block;
 }
+
 .gthm-logo img {
   width: auto;
   display: block;
@@ -92,3 +104,7 @@ html, body, div[data-phx-main="true"], main.container, .main-view-component {
 .pump-btn-loading:hover {
   cursor: progress;
 }
+
+.login-container {
+  padding: 10px;
+}
diff --git a/lib/geo_therminator_web/live/main/index.html.heex b/lib/geo_therminator_web/live/main/index.html.heex
index 71b4596..eff13ae 100644
--- a/lib/geo_therminator_web/live/main/index.html.heex
+++ b/lib/geo_therminator_web/live/main/index.html.heex
@@ -1,9 +1,13 @@
-<form phx-submit="login">
-  <label>Email <input type="email" name="username" /></label>
-  <label>Password <input type="password" name="password" /></label>
-  <button>Log in</button>
+<div class="container login-container">
+  <form phx-submit="login">
+    <h1>Log in</h1>
 
-  <%= if @error do %>
-    <div class="error">Error occurred, please try again.</div>
-  <% end %>
-</form>
+    <label>Email <input type="email" name="username" /></label>
+    <label>Password <input type="password" name="password" /></label>
+    <button>Log in</button>
+
+    <%= if @error do %>
+      <div class="error">Error occurred, please try again.</div>
+    <% end %>
+  </form>
+</div>