Skip to content
Snippets Groups Projects
Unverified Commit 207ec6ff authored by Jesus Federico's avatar Jesus Federico Committed by GitHub
Browse files

Unify the UI style in sign up, sign in buttons when using omniauth (GRN-35) (#301)

* Changed style to buttons for sign up

* Added assets and generalized code for sign up buttons

* Added new style to sign in modal

* Replaced hex colors with the official ones

* Removed the old social icons that are no longer used

* Centred text in sign up buttons

* Base button rendering on iconset_providers and secured office 365
parent 1bb5be68
No related branches found
No related tags found
No related merge requests found
app/assets/images/google-logo.png

22.6 KiB

app/assets/images/google_logo.png

771 B

app/assets/images/office365-logo.jpeg

30.1 KiB

app/assets/images/twitter-logo.png

14 KiB

app/assets/images/twitter_logo.png

1.2 KiB

app/assets/images/windows-logo.png

16.8 KiB

......@@ -58,10 +58,10 @@
font-weight: normal;
}
.customBtn-google {
display: inline-block;
background: #4688F1;
.customBtn {
display: block;
text-align: center;
background: #cccccc;
color: #ffffff;
box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
-webkit-transition: background-color .218s,border-color .218s,box-shadow .218s;
......@@ -69,6 +69,7 @@
white-space: nowrap;
border-radius: 2px;
border: 1px solid transparent;
margin-bottom:20px;
&:hover {
cursor: pointer;
color: #ffffff;
......@@ -93,5 +94,53 @@
font-family: 'Roboto', sans-serif;
}
.customBtn-image {
background: #ffffff;
background-size: 18px 18px;
padding:10px 10px 10px 10px;
}
}
.customBtn-google {
@extend .customBtn;
background: #4688f1;
.customBtn-image {
background: #ffffff image-url("google-logo.png") no-repeat left top;
background-size: 18px 18px;
padding:10px 10px 10px 10px;
}
}
.customBtn-twitter {
@extend .customBtn;
background: #1da1f2;
.customBtn-image {
background: #ffffff image-url("twitter-logo.png") no-repeat left top;
background-size: 18px 18px;
padding:10px 10px 10px 10px;
}
}
.customBtn-microsoft_office365 {
@extend .customBtn;
background: #f65314;
.customBtn-image {
background: #ffffff image-url("office365-logo.jpeg") no-repeat left top;
background-size: 18px 18px;
padding:10px 10px 10px 10px;
}
}
.customBtn-microsoft_windows {
@extend .customBtn;
background: #00a1f1;
.customBtn-image {
background: #ffffff image-url("windows-logo.png") no-repeat left top;
background-size: 18px 18px;
padding:10px 10px 10px 10px;
}
}
......@@ -28,7 +28,7 @@ module ApplicationHelper
# Determines which providers can show a login button in the login modal.
def iconset_providers
configured_providers & [:google, :twitter]
configured_providers & [:google, :twitter, :microsoft_office365]
end
# Generates the login URL for a specific provider.
......
......@@ -21,32 +21,15 @@
<div class="card-title">
<h3><%= t("login") %></h3>
</div>
<% unless iconset_providers.length.zero? %>
<% if configured_providers.include? :google %>
<% provider = :google %>
<% iconset_providers.each do |provider| %>
<%= link_to omniauth_login_url(provider), class: "customBtn-#{provider}" do %>
<span class="customBtn-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg>
<img class="customBtn-image"></img>
</span>
<span class="customBtn-text"><%= t("modal.login.with", provider: provider.capitalize) %></span>
<% end %>
<% end %>
<% if configured_providers.include? :twitter %>
<% provider = :twitter %>
<%= link_to omniauth_login_url(provider), class: "btn btn-pill btn-#{provider} btn-block" do %>
<i class="fab fa-<%= provider %>"></i>&ensp;<%= t("modal.login.with", provider: provider.capitalize) %>
<% end %>
<% end %>
<% if configured_providers.include? :microsoft_office365 %>
<%= link_to omniauth_login_url(:microsoft_office365), class: "btn btn-pill btn-primary btn-block" do %>
<i class="fab fa-windows"></i>&ensp;<%= t("modal.login.with", provider: "Office365") %>
<span class="customBtn-text"><%= t("modal.login.with", provider: t("provider.#{provider}")) %></span>
<% end %>
<% end %>
<div class="or-line my-6">
<div>
<span class="text-uppercase">
......@@ -55,7 +38,6 @@
</div>
</div>
<% end %>
<%= form_for(:session, url: create_session_path) do |f| %>
<div class="form-group">
<div class="input-icon">
......@@ -65,7 +47,6 @@
<%= f.text_field :email, class: "form-control", placeholder: t("email"), value: "" %>
</div>
</div>
<div class="form-group">
<div class="input-icon">
<span class="input-icon-addon">
......@@ -74,7 +55,6 @@
<%= f.password_field :password, class: "form-control", placeholder: t("password"), value: "" %>
</div>
</div>
<div class="form-footer">
<%= f.submit t("login"), class: "btn btn-outline-primary btn-block btn-pill" %>
</div>
......
......@@ -21,31 +21,15 @@
<h4 class="mt-2"><%= t("signup.subtitle") %></h4>
</div>
<div class="card-body background">
<% unless configured_providers.length.zero? %>
<% if configured_providers.include? :google %>
<% provider = :google %>
<% unless iconset_providers.length.zero? %>
<% iconset_providers.each do |provider| %>
<%= link_to omniauth_login_url(provider), class: "customBtn-#{provider}" do %>
<span class="customBtn-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg"><g><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path><path fill="none" d="M0 0h48v48H0z"></path></g></svg>
<img class="customBtn-image"></img>
</span>
<span class="customBtn-text"><%= t("signup.with", provider: provider.capitalize) %></span>
<% end %>
<% end %>
<% if configured_providers.include? :twitter %>
<% provider = :twitter %>
<%= link_to omniauth_login_url(provider), class: "btn btn-pill btn-#{provider} btn-block" do %>
<i class="fab fa-<%= provider %>"></i>&ensp;<%= t("signup.with", provider: provider.capitalize) %>
<span class="customBtn-text"><%= t("signup.with", provider: t("provider.#{provider}")) %></span>
<% end %>
<% end %>
<% if configured_providers.include? :microsoft_office365 %>
<%= link_to omniauth_login_url(:microsoft_office365), class: "btn btn-pill btn-primary btn-block" do %>
<i class="fab fa-windows"></i>&ensp;<%= t("signup.with", provider: "Office365") %>
<% end %>
<% end %>
<div class="or-line my-3">
<div>
<span class="text-uppercase" style="background-color: #F5F7FB;">
......
......@@ -100,6 +100,10 @@ en:
with: Sign in with %{provider}
omniauth_error: An error occured while authenticating with omniauth. Please try again or contact an administrator!
password: Password
provider:
google: Google
microsoft_office365: Office 365
twitter: Twitter
recording:
email: Email Recording
no_recordings: This room has no %{inject}recordings.
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment