Merge pull request #12955 from grafana/12951-login-buttons

Login button issue in light theme

public/app/partials/login.html

@@ -55,12 +55,12 @@
             <i class="btn-service-icon fa fa-gitlab"></i>
             Sign in with GitLab
           </a>
-          <a class="btn btn-medium btn-inverse btn-service btn-service--grafanacom login-btn" href="login/grafana_com" target="_self"
+          <a class="btn btn-medium 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-inverse btn-service btn-service--oauth login-btn" href="login/generic_oauth" target="_self"
+          <a class="btn btn-medium 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}}

public/sass/_variables.scss

@@ -197,7 +197,7 @@ $external-services: (
     github: (bgColor: #464646, borderColor: #393939, icon: ''),
     gitlab: (bgColor: #fc6d26, borderColor: #e24329, icon: ''),
     google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''),
-    grafanacom: (bgColor: inherit, borderColor: #393939, icon: ''),
-    oauth: (bgColor: inherit, borderColor: #393939, icon: '')
+    grafanacom: (bgColor: #262628, borderColor: #393939, icon: ''),
+    oauth: (bgColor: #262628, borderColor: #393939, icon: '')
   )
   !default;

public/sass/pages/_login.scss

@@ -76,6 +76,15 @@ select:-webkit-autofill:focus {
       margin-left: 1rem;
     }
   }
+  & .btn-inverse {
+    color: #e3e3e3;
+    text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1);
+    background-color: #2a2a2c;
+    background-image: linear-gradient(to bottom, #262628, #303032);
+    background-repeat: repeat-x;
+    border-color: #262628;
+    box-shadow: -1px -1px 0 0 rgba(255, 255, 255, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
+  }
 }
 
 .login-button-forgot-password {