Writefreely
/
writefreely
mirror of https://github.com/writeas/writefreely
1
0
Fork 0
Code Issues Releases Wiki Activity

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.
This commit is contained in:
Matt Baer 2020-08-19 15:14:29 -04:00
parent a78b36b871
commit 455e50c9a8
4 changed files with 71 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
less/login.less
View File

@ -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;
}
}
}
}

BIN
static/img/mark/writeas-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

15
templates/include/oauth.tmpl
View File

@ -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>

22
templates/user/settings.tmpl
View File

@ -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 }}