From 6fe2eddad80d71fd3117cbe71e3352c4bdf2016a Mon Sep 17 00:00:00 2001
From: QiTao <qitaoweng@gmail.com>
Date: Sat, 8 Feb 2020 01:47:09 -0600
Subject: [PATCH] Task #17 - Redesign login selection.

---
 app/views/login.pug | 39 ++++++++++++++++++++++++++++-----------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/app/views/login.pug b/app/views/login.pug
index a4f56ff..8084458 100644
--- a/app/views/login.pug
+++ b/app/views/login.pug
@@ -16,6 +16,7 @@ html
                 background-color:#343a40;
             }
             #intro {
+                margin-top: 10px;
                 color: #cccccc;
                 text-align: center;
             }
@@ -27,17 +28,33 @@ html
             }
             .login-container {
                 display: grid;
-                align-items: center;
-                border: 4px solid #ccc;
-                padding: 0.01em 0.02em;
-                border-radius: .35rem;
+                color: #cccccc;
+                border: solid 7px #cccccc;
+                align-self: center;
+                background: transparent;
+                -webkit-transition: all .5s ease;
+                transition: all .5s ease;
+                outline: none;
+                box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
+                border-radius: 82px 65px 185px 1085px/72px 225px 58px 15px;
+            }
+            .btn-login {
+                color: #cccccc;
+                border: solid 7px #cccccc;
+                align-self: center;
+                background: transparent;
+                -webkit-transition: all .5s ease;
+                transition: all .5s ease;
+                outline: none;
+                box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
+                border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
             }
             .login-container div a {
                 width: 100%;
             }
             .icons {
-                font-size: 1.6em;
-                padding: 1.1em 1.1em 1.1em 1.1em;
+                font-size: 1.8em;
+                padding: 1em 1em 1em 1em;
             }
 
     body
@@ -49,22 +66,22 @@ html
     .container#login
         .login-container
             div
-                a.btn.btn-light.btn-lg(href="/auth/flitter/login")
+                a.btn.btn-login.btn-light(href="/auth/flitter/login")
                     i.icons.fas.fa-sign-in-alt
                     span Local Login
             div    
-                a.btn.btn-light.btn-lg(href="/auth/github_oauth/login")
+                a.btn.btn-login.btn-light(href="/auth/github_oauth/login")
                     i.icons.fab.fa-github
                     span Login with GitHub
             div
-                a.btn.btn-light.btn-lg.disabled(href="google.com")
+                a.btn.btn-login.btn-light.disabled(href="google.com")
                     i.icons.fab.fa-google
                     span Login with Google
             div
-                a.btn.btn-light.btn-lg.disabled(href="microsoft.com")
+                a.btn.btn-login.btn-light.disabled(href="microsoft.com")
                     i.icons.fab.fa-microsoft
                     span Login with Microsoft
             div
-                a.btn.btn-light.btn-lg.disabled(href="microsoft.com")
+                a.btn.btn-login.btn-light.disabled(href="apple.com")
                     i.icons.fab.fa-apple
                     span Login with Apple