Merge pull request #226 from joshua-arts/ux-changes

Improve UX style changes.

app/assets/stylesheets/main.scss

@@ -12,14 +12,7 @@
 }
 
 .feature-stamp {
-  width: 7vw !important;
+  border-radius: 6px;
-  height: 7vw !important;
-  font-size: 1vw;
-}
-
-.feature-icon {
-  transform: translateY(-50%);
-  margin-top: 50%;
 }
 
 .or-line {

app/views/main/index.html.erb

@@ -12,7 +12,7 @@
       <h1 id="main-text" class="font-weight-400 responsive-header"><%= t("landing.welcome") %></h1>
       <h4 class="text-muted"><%= t("landing.about") %></h4>
 
-      <%= link_to "https://youtu.be/Hso8yLzkqj8", class: "p-3", target: "_blank" do %>
+      <%= link_to "https://youtu.be/Hso8yLzkqj8", class: "d-inline-block p-3", target: "_blank" do %>
         <h4><%= t("landing.video") %> <i class="far fa-play-circle"></i></h4>
       <% end %>
     </div>

app/views/shared/_features.html.erb

@@ -1,24 +1,24 @@
-<h1 class="text-center mt-7"><%= t("features.title") %></h1>
+<h1 class="text-center mt-8"><%= t("features.title") %></h1>
 
 <div class="container text-center">
-  <div class="row mt-8">
+  <div class="col-12 mt-6">
-    <div class="col-4">
+    <div class="background row feature-stamp">
-      <span class="stamp feature-stamp bg-cyan">
+      <div class="col-3 my-5">
-        <i class="fas fa-chalkboard-teacher fa-3x feature-icon"></i>
+        <i class="fas fa-chalkboard-teacher fa-3x"></i>
-      </span>
+        <h4 class="mt-5"><%= t("features.rooms") %></h4>
-      <h4 class="mt-5 text-muted"><%= t("features.rooms") %></h4>
+      </div>
-    </div>
+      <div class="col-3 my-5">
-    <div class="col-4">
+        <i class="fas fa-film fa-3x"></i>
-      <span class="stamp feature-stamp bg-cyan">
+        <h4 class="mt-5"><%= t("features.recordings") %></h4>
-        <i class="fas fa-film fa-3x feature-icon"></i>
+      </div>
-      </span>
+      <div class="col-3 my-5">
-      <h4 class="mt-5 text-muted"><%= t("features.recordings") %></h4>
+        <i class="fas fa-pencil-alt fa-3x"></i>
-    </div>
+        <h4 class="mt-5"><%= t("features.designs") %></h4>
-    <div class="col-4">
+      </div>
-      <span class="stamp feature-stamp bg-cyan">
+      <div class="col-3 my-5">
-        <i class="fas fa-pencil-alt fa-3x feature-icon"></i>
+        <i class="fas fa-door-open fa-3x"></i>
-      </span>
+        <h4 class="mt-5"><%= t("features.authentication") %></h4>
-      <h4 class="mt-5 text-muted"><%= t("features.designs") %></h4>
+      </div>
     </div>
   </div>
 </div>

app/views/shared/_footer.html.erb

@@ -1,3 +1,4 @@
 <footer class="footer page-footer">
+  <p class="left position-absolute mx-3">v <%= Greenlight::Application::VERSION %></p>
   <h5 class="text-center"><%= t("footer.powered_by", href: link_to(t("bigbluebutton"), "http://bigbluebutton.org/", target: "_blank")).html_safe %></h5>
 </footer>

app/views/users/new.html.erb

@@ -1,11 +1,26 @@
 <div class="container">
-  <div class="row mt-9">
+  <div class="row mt-6">
-    <div class="col col-4 offset-4 mx-auto">
+    <div class="col col-4 offset-4">
       <div class="card">
-        <div class="card-header">
+        <div class="card-header background">
           <h4 class="mt-2"><%= t("signup.subtitle") %></h4>
         </div>
-        <div class="card-body">
+        <div class="card-body background">
+          <% unless configured_providers.length.zero? %>
+            <% configured_providers.each do |provider| %>
+              <%= 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 %>
+            <% end %>
+
+            <div class="or-line my-3">
+              <div>
+                <span class="text-uppercase" style="background-color: #F5F7FB;">
+                  <%= t("modal.login.or") %>
+                </span>
+              </div>
+            </div>
+          <% end %>
           <%= form_for @user, url: create_user_path, method: :post do |f|  %>
             <div class="form-group">
               <%= f.label t("settings.account.fullname"), class: "form-label" %>
@@ -29,7 +44,7 @@
             </div>
             <div class="card-footer">
               <%= f.submit t("signup.title"), class: "btn btn-primary float-right ml-2" %>
-              <%= link_to t("cancel"), root_path, class: "btn btn-danger float-right ml-2" %>
+              <%= link_to t("cancel"), root_path, class: "btn btn-secondary float-right ml-2" %>
             </div>
           <% end %>
         </div>

config/initializers/version.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Greenlight
+  class Application
+    VERSION = "2.1.0"
+  end
+end

config/locales/en.yml

@@ -30,6 +30,7 @@ en:
     rooms: Personalized Rooms
     recordings: Recording Management
     designs: Custom Designs
+    authentication: User Authentication
   footer:
     powered_by: Powered by %{href}.
   go_back: Go back
@@ -118,6 +119,7 @@ en:
     password_confirm: Password Confirmation
     subtitle: Create an Account
     title: Signup
+    with: Signup with %{provider}
   terms:
     accept: I accept the terms and conditions.
     title: Terms and Conditions