Updated styles for the Google Auth button (GRN-31) (#296)

* Greenlight landing page layout adjustments, general cleanup and responsive styles

* Text update Signup to Sign up

* Updated Google Sign in and Sign up styles

* no changes were made to sample env but needed to commit it

* minor padding update on the Google icon

* deleted Google Auth secrets from the sameple.env

* updated the if condition in new.html.erb

* <changed logic of button display>

* Update _login_modal.html.erb

app/assets/stylesheets/main.scss

@@ -57,3 +57,41 @@
 .display-4 {
   font-weight: normal;
 }
+
+
+.customBtn-google {
+  display: inline-block;
+  background: #4688F1;
+  color: #ffffff;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
+  -webkit-transition: background-color .218s,border-color .218s,box-shadow .218s;
+  transition: background-color .218s,border-color .218s,box-shadow .218s;
+  white-space: nowrap;
+  border-radius: 2px;
+  border: 1px solid transparent;
+  &:hover {
+    cursor: pointer;
+    color: #ffffff;
+    -webkit-box-shadow: 0 0 3px 3px rgba(66,133,244,.3);
+    box-shadow: 0 0 3px 3px rgba(66,133,244,.3);
+  }
+
+  .customBtn-icon {
+    display: inline-block;
+    vertical-align: middle;
+    padding:13px 15px 13px 15px;
+    float:left;
+    background: #ffffff;
+  }
+
+  .customBtn-text {
+    font-size: 16px;
+    line-height: 48px;
+    font-weight: 600;
+    letter-spacing: .21px;
+    padding:0 25px;
+    font-family: 'Roboto', sans-serif;
+  }
+
+
+}

app/views/layouts/application.html.erb

@@ -28,6 +28,8 @@
       window.GreenLight.RELATIVE_ROOT = "<%= relative_root %>"
     </script>
 
+    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
+
     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
   </head>

app/views/shared/modals/_login_modal.html.erb

@@ -23,7 +23,19 @@
           </div>
 
           <% unless iconset_providers.length.zero? %>
-            <% iconset_providers.each do |provider| %>
+
+            <% if configured_providers.include? :google %>
+              <% provider = :google %>
+              <%= 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>
+              </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 %>

app/views/users/new.html.erb

@@ -22,7 +22,19 @@
         </div>
         <div class="card-body background">
           <% unless configured_providers.length.zero? %>
-            <% configured_providers.each do |provider| %>
+
+            <% if configured_providers.include? :google %>
+              <% provider = :google %>
+              <%= 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>
+                </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) %>
               <% end %>

config/locales/en.yml

@@ -76,7 +76,7 @@ en:
     upgrade: Show me how to upgrade to 2.0!
     version: We've released a new version of Greenlight, but your database isn't compatible.
   ldap_error: Unable to connect to the LDAP server. Please check your LDAP configuration in the env file and ensure your server is running.
-  login: Login
+  login: Sign in
   modal:
     create_room:
       auto_join: Automatically join me into the room.
@@ -96,7 +96,7 @@ en:
       warning: You will <b>not</b> be able to recover this room or any of its associated recordings.
     login:
       or: or
-      with: Login with %{provider}
+      with: Sign in with %{provider}
   omniauth_error: An error occured while authenticating with omniauth. Please try again or contact an administrator!
   password: Password
   recording: