refreshing the logged out state of the home page (#1132)

* refreshing the logged out state of the home page

* updating tests

* Adjusted display for fixed margins width (#1130)

* Fixed bug in download link in modal (#1131)

* Fixed bug in download link in modal

* Fixed breaking test

---------

Co-authored-by: Robert-Anthony Lee-Faison <[email protected]>

* WIP getting image flush to bottom of page

* Fixed logged out layout, adjusted flash warning placement, fixed link color for logout button

* Applied heading font across the application

* Replaced image

* Adjustments based on feedback from PO

* Data users new design (#1088)

* WIP

* First sort-of runnig version. Still WIP but much more advanced

* Got the delete to work, fixed a few validation issues.

* Adjusted the save logic to account for the new way we represent RO vs RW users

* Display the initial list of rw and ro users

* Fix merge conflict

* Minor clean up

* Moved CSS to the application level

* Started re-creating the data users tests

* Adjusted test to use new HTML FORM keys

* Bye byebug

* Adjust the test for the new keys

* Adjust the test for the new HTML FORM keys

* Adjust test to new UI for data users

* Added test for invalid data users entered

* Removed commented lines

---------

Co-authored-by: Kate Lynch <[email protected]>
Co-authored-by: Robert-Anthony Lee-Faison <[email protected]>
Co-authored-by: Hector Correa <[email protected]>
Co-authored-by: Bess Sadler <[email protected]>

app/assets/stylesheets/_header.scss

@@ -42,7 +42,8 @@
     padding: 0.5rem 2rem;
     font-family: "Libre Franklin";
     font-size: 16px;
-    color: $princeton-orange;
+    color: $black;
+    border: none;
   }
 }
 
@@ -83,6 +84,7 @@
     .navbar-item a:hover {
       text-decoration: underline;
     }
+
     .dropdown-menu { 
       left: -5em;
       --bs-dropdown-spacer: 1em;
@@ -96,4 +98,8 @@
     .dropdown-menu a:hover {
       width: 85%;
     }
+  }
+
+  a.dropdown-item {
+    color: #000000 !important;
   }

app/assets/stylesheets/_welcome_portal.scss

@@ -0,0 +1,126 @@
+@import "variables";
+@import "typography";
+@import "bootstrap";
+
+.welcome-portal {
+    display: inline-flex;
+    width: 95vw;
+    margin-top: -5em;
+    margin-bottom: -5em;
+}
+
+.welcome-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    min-width: 30em;
+    padding-right: 7.5em;
+    margin-left: 10%;
+    margin-right: 15%;
+  }
+
+  .LO-h1 {
+    margin-bottom: 0.75rem;
+
+    align-self: stretch;
+    color: var(--Neutral-Black, #121212);
+
+    /* Heading 1 */
+    font-family: "Libre Franklin";
+    font-size: 2.5rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 3rem; /* 120% */
+  }
+
+  .LO-h2 {
+    margin-bottom: 0.5rem;
+
+    align-self: stretch;
+    color: var(--Neutral-Dark-Gray, #717171);
+
+    /* Heading 3 */
+    font-family: "Libre Franklin";
+    font-size: 1.75rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 2rem; /* 114.286% */
+  }
+
+  .LO-p {
+    color: #000;
+
+    /* Body */
+    font-family: "Libre Franklin";
+    font-size: 1.125rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.6875rem; /* 150% */
+  }
+
+  .LO-b {
+    color: var(--Neutral-White, #FFF);
+    text-align: center;
+
+    /* Body S Bold */
+    font-family: "Libre Franklin";
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 1.5rem; /* 150% */
+
+    display: flex;
+    padding: 0.5rem 1.25rem;
+    justify-content: center;
+    align-items: center;
+    gap: 0.25rem;
+    border-radius: 0.25rem;
+    background: var(--Neutral-Black, #121212);
+  }
+
+  .LO-c {
+    margin-top: 2rem;
+    color: var(--Neutral-Dark-Gray, #717171);
+
+    /* Body XXS */
+    font-family: "Libre Franklin";
+    font-size: 0.75rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.125rem; /* 150% */
+
+    /* Body XXS */
+    font-family: "Libre Franklin";
+    font-size: 0.75rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.125rem;
+    text-decoration-style: solid;
+    text-decoration-skip-ink: none;
+    text-decoration-thickness: auto;
+    text-underline-offset: auto;
+    text-underline-position: from-font;
+  }
+
+  .welcome-contact-us{
+    color: var(--Neutral-Dark-Gray, #717171);
+
+    /* Body XXS */
+    font-family: "Libre Franklin";
+    font-size: 0.75rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.125rem; /* 150% */
+
+    text-decoration: underline;
+  }
+
+  .welcome-image {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    flex: 1 0 0;
+    align-self: stretch;
+  }

app/assets/stylesheets/application.scss

@@ -27,14 +27,14 @@
 @import "settings";
 @import "styles_preview";
 @import "typography";
+@import "welcome_portal";
 
 
 body {
     font-family: $libre-franklin;
     color: $black;
 
     .main-content {
-      min-height:100vh;
       display: flex;
       padding: 3rem 7.5rem;
       flex-direction: column;
@@ -48,6 +48,11 @@ body {
     }
 }
 
+h1, h2, h3, h4, h5, h6 {
+  font-family: $libre-franklin !important;
+  font-weight: 600;
+}
+
 .heading-decoration {
   background-color: $princeton-orange;
   width: 100px;
@@ -113,7 +118,6 @@ body {
   color: var(--Secondary-Red-Dark, #b00002);
 }
 
-
 /* Used for the delete button when adding users */
 .transparent-button {
   background-color: transparent;
@@ -143,3 +147,8 @@ body {
 .delete-user-row {
   color: red;
 }
+
+.alert-primary {
+  position: absolute;
+}
+

app/views/welcome/_logged_out.html.erb

@@ -0,0 +1,14 @@
+<div class="welcome-portal">
+    <div class="welcome-text">
+        <h2 class="LO-h2">Welcome to</h2>
+        <h1 class="LO-h1">TigerData Web Portal</h1>
+        <p class="LO-p">TigerData is a data management service for the Princeton research community that includes a suite of software tools and scalable, tiered storage to enable the organization, description, storage, sharing, and long-term sustainability of research and administrative data. </p>
+        <p class="LO-p">It enables the things you want to do (with your data), and makes it easier to do the things you have to do.</p>
+        <%= button_to "Learn More", user_cas_omniauth_authorize_path, class: "LO-b" %>
+        <p class="LO-c">Log in is currently limited to early adopters. <%= link_to "Contact us", "mailto:[email protected]", class: "welcome-contact-us" %> for more information.</p>
+
+    </div>
+    <div class="welcome-image">
+        <%= image_tag("welcome_portal.png", alt: "Welcome to the Tigerdata Portal") %>
+    </div>
+</div>

app/views/welcome/index.html.erb

@@ -1,7 +1,6 @@
 <div id="welcome">
     <% unless current_user %>
-    <h1>Welcome to TigerData</h1>
-    Please log in.
+    <%= render partial: "logged_out" %>
     <% else %>
 
       <%= render partial: "logged_in" %>

spec/system/welcome_spec.rb

@@ -6,7 +6,7 @@
   context "unauthenticated user" do
     it "shows the 'Log In' button" do
       visit "/"
-      expect(page).to have_content "Welcome to TigerData"
+      expect(page).to have_content "TigerData Web Portal"
       expect(page).to have_content "Log in"
       expect(page).to have_link "Accessibility", href: "https://accessibility.princeton.edu/help"
     end