WIP: reconstruct layouts

* login

lib/views/login.html

@@ -132,19 +132,22 @@
           </div>
         </form>
 
+        {% if googleLoginEnabled() %}
         <hr>
 
-        <div class="row">
-          {% if googleLoginEnabled() %}
-          <div class="col-md-8">
-            <p>{{ t('Sign in by Google Account') }}</p>
-            <form role="form" action="/login/google" method="get">
-              <button type="submit" class="btn btn-block btn-google"><i class="fa fa-google-plus-square"></i> {{ t('Sign in') }}</button>
-              <input type="hidden" name="_csrf" value="{{ csrf() }}">
-            </form>
-          </div>
-          {% endif %}
+        <div class="input-group m-t-15 m-b-10 mx-auto">
+          <form role="form" action="/login/google" method="get">
+            <input type="hidden" name="_csrf" value="{{ csrf() }}">
+            <button type="submit" class="fcbtn btn btn-danger btn-1b btn-login-google">
+              <span class="btn-label"><i class="icon-social-google"></i></span>
+              {{ t('Sign in') }}
+            </button>
+            <div class="small text-right">by Google Account</div>
+          </form>
         </div>
+        {% endif %}
+
+        <hr>
 
         {% if config.crowi['security:registrationMode'] != 'Closed' %}
         <div class="row">
@@ -230,18 +233,6 @@
 
         <hr>
 
-        <div class="row">
-          {% if googleLoginEnabled() %}
-          <div class="col-md-6">
-            <p>{{ t('Sign up with Google Account') }}</p>
-            <form role="form" method="post" action="/register/google">
-              <input type="hidden" name="_csrf" value="{{ csrf() }}">
-              <button type="submit" class="btn btn-block btn-google"><i class="fa fa-google-plus-square"></i> {{ t('Login') }}</button>
-            </form>
-          </div>
-          {% endif %}
-        </div>
-
         <div class="row">
           <div class="col-xs-12 text-right">
             <a href="#login" id="login" class="link-switch">

resource/styles/scss/_login.scss

@@ -59,7 +59,6 @@
   .login-header {
     background-color: rgba(white, 0.5);
     .logo {
-      width: 70px;
       .group1, .group2 {
         fill: rgba(black, 0.5);
       }
@@ -100,7 +99,7 @@
   }
 
   // button style
-  .btn-login.fcbtn, .btn-register.fcbtn {
+  .btn-login.fcbtn, .btn-register.fcbtn, .btn-login-google.fcbtn {
     border: none;
     color: white;
     background-color: rgba(lighten(black, 20%), 0.4);
@@ -121,6 +120,14 @@
       background-color: #7e4153;
     }
   }
+  .btn-login-google.fcbtn {
+    .btn-label {
+      background-color: rgba(#444, 0.4);
+    }
+    &:after {
+      background-color: #555;
+    }
+  }
   .btn-register.fcbtn {
     .btn-label {
       background-color: rgba($brand-success, 0.4);