Added color variables, style preview page, and test for page (#1011)

Author: kelynch

app/assets/stylesheets/_styles_preview.scss

@@ -0,0 +1,111 @@
+@import "variables";
+
+@import "bootstrap";
+
+.colors-section div{
+    border: #000000 solid 1px;
+    margin: 10px;
+    padding-top: 30px;
+    padding-left: 10px;
+    font-size: 16px;
+}
+
+.princeton-orange {
+    background-color: $princeton-orange;
+    color: #000000;
+}
+
+.princeton-orange-80 {
+    background-color: $princeton-orange-80;
+    color: #000000;
+}
+
+.princeton-orange-20 {
+    background-color: $princeton-orange-20;
+    color: #000000;
+}
+
+.cool-gray {
+    background-color: $cool-gray;
+    color: #FFFFFF;
+}
+
+.cool-gray-80 {
+    background-color: $cool-gray-80;
+    color: #FFFFFF;
+}
+
+.cool-gray-60 {
+    background-color: $cool-gray-60;
+    color: #000000;
+}
+
+.gray-100 {
+    background-color: $gray-100;
+    color: #FFFFFF;
+}
+
+.gray-60 {
+    background-color: $gray-60;
+    color: #FFFFFF;
+}
+
+.gray-20 {
+    background-color: $gray-20;
+    color: #000000;
+}
+
+.gray-10 {
+    background-color: $gray-10;
+    color: #000000;
+}
+
+.white {
+    background-color: $white;
+    color: #000000;
+}
+
+.green-dark {
+    background-color: $green-dark;
+    color: #000000;
+}
+
+.red-dark {
+    background-color: $red-dark;
+    color: #000000;
+}
+
+.yellow {
+    background-color: $yellow;
+    color: #000000;
+}
+
+.blue {
+    background-color: $blue;
+    color: #000000;
+}
+
+.light-blue {
+    background-color: $light-blue;
+    color: #000000;
+}
+
+.status-success {
+    background-color: $status-success;
+    color: #000000;
+}
+
+.status-error {
+    background-color: $status-warning;
+    color: #000000;
+}
+
+.status-warning {
+    background-color: $status-warning;
+    color: #000000;
+}
+
+.status-info {
+    background-color: $status-info;
+    color: #000000;
+}

app/assets/stylesheets/_variables.scss

@@ -0,0 +1,24 @@
+$princeton-orange: #E77500;
+$princeton-orange-80: #EC9133;
+$princeton-orange-20: #FAE3CC;
+
+$cool-gray: #091F30;
+$cool-gray-80: #3A4C59;
+$cool-gray-60: #6B7983;
+
+$gray-100: #121212;
+$gray-60: #717171;
+$gray-20: #D0D0D0;
+$gray-10: #EEEEEE;
+$white: #FFFFFF;
+
+$green-dark: #006450;
+$red-dark: #B00002;
+$yellow: #FBC129;
+$blue: #0B7097;
+$light-blue: #BED8E2;
+
+$status-success: #DDEDE6;
+$status-error: #F3D9D9;
+$status-warning: #FFF6DF;
+$status-info: #E6EEF8;

app/assets/stylesheets/application.scss

@@ -18,5 +18,8 @@
 @import "header";
 @import "footer";
 @import "components/mediaflux_status";
+@import "variables";
+@import "styles_preview";
 
 @import "bootstrap";
+

app/controllers/welcome_controller.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 class WelcomeController < ApplicationController
-  skip_before_action :authenticate_user!
+  skip_before_action :authenticate_user!, except: [:styles_preview]
   def index
     return if current_user.nil?
     @sponsored_projects = Project.sponsored_projects(@current_user.uid)

app/views/welcome/styles_preview.html.erb

@@ -0,0 +1,42 @@
+<h1>Styles Preview</h1>
+
+<p>This page shows the styles that have been implemented for this site's look and feel.</p>
+
+<h2>Colors</h2>
+
+<div class="colors-section">
+<div class="princeton-orange">Princeton Orange</div>
+<div class="princeton-orange-80">Princeton Orange 80</div>
+<div class="princeton-orange-20">Princeton Orange 20</div>
+
+<div class="cool-gray">Cool Gray</div>
+<div class="cool-gray-80">Cool Gray 80</div>
+<div class="cool-gray-60">Cool Gray 60</div>
+
+<div class="gray-100">Gray 100</div>
+<div class="gray-60">Gray 60</div>
+<div class="gray-20">Gray 20</div>
+<div class="gray-10">Gray 10</div>
+
+<div class="white">White</div>
+
+<div class="green-dark">Green Dark</div>
+<div class="red-dark">Red Dark</div>
+<div class="yellow">Yello</div>
+<div class="blue">Blue</div>
+<div class="light-blue">Light Blue</div>
+
+<div class="status-success">Status Success</div>
+<div class="status-error">Status Error</div>
+<div class="status-warning">Status Warning</div>
+<div class="status-info">Status Info</div>
+</div>
+
+
+
+
+
+
+
+
+

config/routes.rb

@@ -20,6 +20,7 @@
   root to: "welcome#index"
   get "help", to: "welcome#help", as: :help
   post "emulate", to: "welcome#emulate", as: :emulate
+  get "styles_preview", to: "welcome#styles_preview", as: :styles_preview
 
   resources :organizations
   resources :projects

spec/controllers/welcome_controller_spec.rb

@@ -77,4 +77,21 @@
       end
     end
   end
+
+  it "does not render the styles preview page for a non-logged-in user" do
+    get :styles_preview
+    expect(response).to redirect_to("/sign_in")
+  end
+
+  context "when a user is logged in", connect_to_mediaflux: true do
+    let(:user) { FactoryBot.create :user }
+    before do
+      sign_in user
+    end
+
+    it "renders the styles preview page" do
+      get :styles_preview
+      expect(response).to render_template("styles_preview")
+    end
+  end
 end