ux: Update ui of login buttons via third parties and add link to sign up page (#9879)

public/app/partials/login.html

@@ -1,7 +1,7 @@
 <div class="login container">
   <div class="login-content">
     <div class="login-branding">
-      <img class="logo-icon" src="public/img/grafana_icon.svg"></img>
+      <img class="logo-icon" src="public/img/grafana_icon.svg" alt="Grafana" />
       <i class="icon-gf icon-gf-grafana_wordmark"></i>
     </div>
     <div class="login-inner-box">
@@ -42,16 +42,20 @@
       </div>
       <div class="clearfix"></div>
       <div class="login-oauth text-center" ng-show="oauthEnabled">
-        <a class="btn btn-medium btn-google login-btn" href="login/google" target="_self" ng-if="oauth.google">
+        <a class="btn btn-medium btn-service btn-service--google login-btn" href="login/google" target="_self" ng-if="oauth.google">
+          <i class="btn-service-icon fa fa-google"></i>
           Sign in with Google
         </a>
-        <a class="btn btn-medium btn-github login-btn" href="login/github" target="_self" ng-if="oauth.github">
+        <a class="btn btn-medium btn-service btn-service--github login-btn" href="login/github" target="_self" ng-if="oauth.github">
+          <i class="btn-service-icon fa fa-github"></i>
           Sign in with GitHub
         </a>
-        <a class="btn btn-medium btn-grafana-com login-btn" href="login/grafana_com" target="_self" ng-if="oauth.grafana_com">
+        <a class="btn btn-medium btn-inverse btn-service btn-service--grafanacom login-btn" href="login/grafana_com" target="_self" ng-if="oauth.grafana_com">
+          <i class="btn-service-icon"></i>
           Sign in with Grafana.com
         </a>
-        <a class="btn btn-medium btn-generic-oauth login-btn" href="login/generic_oauth" target="_self" ng-if="oauth.generic_oauth">
+        <a class="btn btn-medium btn-inverse btn-service btn-service--oauth login-btn" href="login/generic_oauth" target="_self" ng-if="oauth.generic_oauth">
+          <i class="btn-service-icon fa fa-sign-in"></i>
           Sign in with {{oauth.generic_oauth.name}}
         </a>
       </div>
@@ -59,7 +63,7 @@
         <div class="login-signup-title p-r-1">
           New to Grafana?
         </div>
-        <a class="btn btn-medium btn-signup btn-p-x-2">
+        <a href="/signup" class="btn btn-medium btn-signup btn-p-x-2">
           Sign Up
         </a>
       </div>

public/sass/_variables.scss

@@ -237,3 +237,25 @@ $panel-padding: 0px 10px 5px 10px;
 // tabs
 $tabs-padding: 10px 15px 9px;
 
+$external-services: (
+  github: (
+    bgColor: #464646,
+    borderColor: #393939,
+    icon: ''
+  ),
+  google: (
+    bgColor: #e84d3c,
+    borderColor: #b83e31,
+    icon: ''
+  ),
+  grafanacom: (
+    bgColor: inherit,
+    borderColor: #393939,
+    icon: ''
+  ),
+  oauth: (
+    bgColor: inherit,
+    borderColor: #393939,
+    icon: ''
+  )
+) !default;

public/sass/components/_buttons.scss

@@ -143,7 +143,57 @@
   }
 }
 
+// Extra padding
 .btn-p-x-2 {
   padding-left: 20px;
   padding-right: 20px;
 }
+
+// External services
+// Usage:
+// <div class="btn btn-service btn-service--facebook">Button text</div>
+
+$btn-service-icon-width: 35px;
+.btn-service {
+  position: relative;
+}
+
+@each $service, $data in $external-services {
+  $serviceBgColor: map-get($data, bgColor);
+  $serviceBorderColor: map-get($data, borderColor);
+
+  .btn-service--#{$service} {
+    background-color: $serviceBgColor;
+    border: 1px solid $serviceBorderColor;
+
+    .btn-service-icon {
+      font-size: 24px; // Override
+      border-right: 1px solid $serviceBorderColor;
+    }
+  }
+}
+
+.btn-service-icon {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  top: 0;
+  padding-left: .5rem;
+  padding-right: .5rem;
+  width: $btn-service-icon-width;
+  text-align: center;
+
+  &::before {
+    position: relative;
+    top: 4px;
+  }
+}
+
+.btn-service--grafanacom {
+  .btn-service-icon {
+    background-image: url(/public/img/grafana_mask_icon_white.svg);
+    background-repeat: no-repeat;
+    background-position: 50%;
+    background-size: 60%;
+  }
+}

public/sass/pages/_login.scss

@@ -105,6 +105,7 @@ select:-webkit-autofill:focus {
   align-items: center;
   justify-content: center;
   flex-grow: 1;
+  max-width: 415px;
 }
 
 .login-tab-header {
@@ -173,30 +174,6 @@ select:-webkit-autofill:focus {
 
 .login-oauth {
   width: 100%;
-
-  .btn {
-    margin: 0 0 1rem;
-  }
-
-  .btn-google {
-    background: #dd4b39;
-    color: white;
-  }
-
-  .btn-github {
-    background: #555;
-    color: white;
-  }
-
-  .btn-grafana-com {
-    @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
-    box-shadow: $card-shadow;
-
-    img {
-      width: 19px;
-      vertical-align: sub;
-    }
-  }
 }
 
 .password-recovery {