Use branded OAuth buttons

This includes the platform mark with each login button and uses
brand colors. It also uses the same style on the Account Settings
page. And it wraps buttons on login / signup pages.

less/login.less

@@ -9,17 +9,63 @@
  */
 
 .row.signinbtns {
-	justify-content: space-evenly;
+	justify-content: center;
 	font-size: 1em;
 	margin-top: 2em;
 	margin-bottom: 1em;
+	flex-wrap: wrap;
 
 	.loginbtn {
 		height: 40px;
+		margin: 0.5em;
 
-		&.btn.cta {
+		&.btn {
 			box-sizing: border-box;
 			font-size: 17px;
+			white-space: nowrap;
+
+			img {
+				height: 1.5em;
+				vertical-align: middle;
+			}
+		}
+
+		&#writeas-login, &#slack-login {
+			img {
+				margin-top: -0.2em;
+			}
+		}
+
+		&#gitlab-login {
+			background-color: #fc6d26;
+			border-color: #fc6d26;
+			&:hover {
+				background-color: darken(#fc6d26, 5%);
+				border-color: darken(#fc6d26, 5%);
+			}
+		}
+
+		&#gitea-login {
+			background-color: #2ecc71;
+			border-color: #2ecc71;
+			&:hover {
+				background-color: #2cc26b;
+				border-color: #2cc26b;
+			}
+		}
+
+		&#slack-login, &#gitlab-login, &#gitea-login, &#generic-oauth-login {
+			font-size: 0.86em;
+			font-family: @sansFont;
+		}
+
+		&#slack-login, &#generic-oauth-login {
+			color: @lightTextColor;
+			background-color: @lightNavBG;
+			border-color: @lightNavBorder;
+			&:hover {
+				background-color: @lightNavHoverBG;
+			}
 		}
 	}
 }

templates/include/oauth.tmpl

@@ -5,13 +5,22 @@
                 <a class="loginbtn" href="/oauth/slack"><img alt="Sign in with Slack" height="40" width="172" src="/img/sign_in_with_slack.png" srcset="/img/sign_in_with_slack.png 1x, /img/sign_in_with_slack@2x.png 2x" /></a>
             {{ end }}
             {{ if .WriteAsEnabled }}
-                <a class="btn cta loginbtn" id="writeas-login" href="/oauth/write.as">Sign in with <strong>Write.as</strong></a>
+                <a class="btn cta loginbtn" id="writeas-login" href="/oauth/write.as">
+                    <img src="/img/mark/writeas-white.png" />
+                    Sign in with <strong>Write.as</strong>
+                </a>
             {{ end }}
             {{ if .GitLabEnabled }}
-                <a class="btn cta loginbtn" id="gitlab-login" href="/oauth/gitlab">Sign in with <strong>{{.GitLabDisplayName}}</strong></a>
+                <a class="btn cta loginbtn" id="gitlab-login" href="/oauth/gitlab">
+                    <img src="/img/mark/gitlab.png" />
+                    Sign in with <strong>{{.GitLabDisplayName}}</strong>
+                </a>
             {{ end }}
             {{ if .GiteaEnabled }}
-                <a class="btn cta loginbtn" id="gitea-login" href="/oauth/gitea">Sign in with <strong>{{.GiteaDisplayName}}</strong></a>
+                <a class="btn cta loginbtn" id="gitea-login" href="/oauth/gitea">
+                    <img src="/img/mark/gitea.png" />
+                    Sign in with <strong>{{.GiteaDisplayName}}</strong>
+                </a>
             {{ end }}
             {{ if .GenericEnabled }}
                 <a class="btn cta loginbtn" id="generic-oauth-login" href="/oauth/generic">Sign in with <strong>{{.GenericDisplayName}}</strong></a>

templates/user/settings.tmpl

@@ -107,47 +107,47 @@ h3 { font-weight: normal; }
 		<div class="option">
 			<h2>Link External Accounts</h2>
 			<p>Connect additional accounts to enable logging in with those providers, instead of using your username and password.</p>
-			<div class="row">
+			<div class="row signinbtns">
 			{{ if .OauthWriteAs }}
 				<div class="section oauth-provider">
-					<img src="/img/mark/writeas.png" alt="Write.as" />
 					<a class="btn cta loginbtn" id="writeas-login" href="/oauth/write.as?attach=t">
+						<img src="/img/mark/writeas-white.png" alt="Write.as" />
 						Link <strong>Write.as</strong>
 					</a>
 				</div>
 			{{ end }}
 			{{ if .OauthSlack }}
 				<div class="section oauth-provider">
-					<img src="/img/mark/slack.png" alt="Slack" />
-					<a class="btn cta loginbtn" href="/oauth/slack?attach=t">
+					<a class="btn cta loginbtn" id="slack-login" href="/oauth/slack?attach=t">
+						<img src="/img/mark/slack.png" alt="Slack" />
 						Link <strong>Slack</strong>
 					</a>
 				</div>
 			{{ end }}
 			{{ if .OauthGitLab }}
 				<div class="section oauth-provider">
-					<img src="/img/mark/gitlab.png" alt="GitLab" />
 					<a class="btn cta loginbtn" id="gitlab-login" href="/oauth/gitlab?attach=t">
+						<img src="/img/mark/gitlab.png" alt="GitLab" />
 						Link <strong>{{.GitLabDisplayName}}</strong>
 					</a>
 				</div>
 			{{ end }}
 			{{ if .OauthGitea }}
 				<div class="section oauth-provider">
-					<img src="/img/mark/gitea.png" alt="Gitea" />
 					<a class="btn cta loginbtn" id="gitea-login" href="/oauth/gitea?attach=t">
+						<img src="/img/mark/gitea.png" alt="Gitea" />
 						Link <strong>{{.GiteaDisplayName}}</strong>
 					</a>
 				</div>
 			{{ end }}
-			</div>
 			{{ if .OauthGeneric }}
-				<div class="row">
-					<div class="section oauth-provider">
-						<p><a class="btn cta loginbtn" id="generic-oauth-login" href="/oauth/generic?attach=t">Link <strong>{{ .OauthGenericDisplayName }}</strong></a></p>
-					</div>
+				<div class="section oauth-provider">
+					<a class="btn cta loginbtn" id="generic-oauth-login" href="/oauth/generic?attach=t">
+						Link <strong>{{ .OauthGenericDisplayName }}</strong>
+					</a>
 				</div>
 			{{ end }}
+			</div>
 		</div>
 		{{ end }}
 	{{ end }}