From 455e50c9a893cd5fcdc5781a5b3cbaaaa192420b Mon Sep 17 00:00:00 2001 From: Matt Baer Date: Wed, 19 Aug 2020 15:14:29 -0400 Subject: [PATCH] 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 | 50 ++++++++++++++++++++++++++++-- static/img/mark/writeas-white.png | Bin 0 -> 2733 bytes templates/include/oauth.tmpl | 15 +++++++-- templates/user/settings.tmpl | 22 ++++++------- 4 files changed, 71 insertions(+), 16 deletions(-) create mode 100644 static/img/mark/writeas-white.png diff --git a/less/login.less b/less/login.less index b756a6a..fefeb12 100644 --- a/less/login.less +++ b/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; + } } } } diff --git a/static/img/mark/writeas-white.png b/static/img/mark/writeas-white.png new file mode 100644 index 0000000000000000000000000000000000000000..6c9b2cd5f3fa33f19aa79f30d071820d6f72ba5e GIT binary patch literal 2733 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 H#y{ylH@ie% literal 0 HcmV?d00001 diff --git a/templates/include/oauth.tmpl b/templates/include/oauth.tmpl index 6617fd0..9a8d05e 100644 --- a/templates/include/oauth.tmpl +++ b/templates/include/oauth.tmpl @@ -5,13 +5,22 @@ Sign in with Slack {{ end }} {{ if .WriteAsEnabled }} - Sign in with Write.as + + + Sign in with Write.as + {{ end }} {{ if .GitLabEnabled }} - Sign in with {{.GitLabDisplayName}} + + + Sign in with {{.GitLabDisplayName}} + {{ end }} {{ if .GiteaEnabled }} - Sign in with {{.GiteaDisplayName}} + + + Sign in with {{.GiteaDisplayName}} + {{ end }} {{ if .GenericEnabled }} Sign in with {{.GenericDisplayName}} diff --git a/templates/user/settings.tmpl b/templates/user/settings.tmpl index 95c57c4..22de3d8 100644 --- a/templates/user/settings.tmpl +++ b/templates/user/settings.tmpl @@ -107,47 +107,47 @@ h3 { font-weight: normal; }

Link External Accounts

Connect additional accounts to enable logging in with those providers, instead of using your username and password.

-
+
{{ if .OauthWriteAs }}
- Write.as + Write.as Link Write.as
{{ end }} {{ if .OauthSlack }}
- Slack - + + Slack Link Slack
{{ end }} {{ if .OauthGitLab }}
- GitLab + GitLab Link {{.GitLabDisplayName}}
{{ end }} {{ if .OauthGitea }}
- Gitea + Gitea Link {{.GiteaDisplayName}}
{{ end }} -
{{ if .OauthGeneric }} -
-
-

Link {{ .OauthGenericDisplayName }}

-
+
+ + Link {{ .OauthGenericDisplayName }} +
{{ end }} +
{{ end }} {{ end }}