Index page redesign

app/assets/stylesheets/_variables.scss

@@ -7,6 +7,8 @@ $color-primary-dark: #6767ca;
 $color-warning: #f2994a;
 $color-success: #27ae60;
 $color-dark-light: #eee;
+$color-green-bg: #67CAB8;
+$color-grey-bg: #EEEEEE;
 
 $body-height: calc(100vh - 38px);
 

app/assets/stylesheets/application.scss

@@ -18,19 +18,37 @@
   font-family: "Poppins", sans-serif;
 }
 
+a{
+  color: $color-primary-dark !important;
+  background-color: none;
+  font-size: 15px;
+  text-decoration: underline;
+  &:hover {
+    color: $color-primary !important;
+  }
+}
+
 .navbar-brand img {
   padding-right: 0.5em;
 }
 
 .navbar {
+  height: 5rem;
   background-color: #fff;
   -webkit-box-shadow: -4px -1px 33px -5px rgba(0, 0, 0, 0.25);
   -moz-box-shadow: -4px -1px 33px -5px rgba(0, 0, 0, 0.25);
   box-shadow: -4px -1px 33px -5px rgba(0, 0, 0, 0.25);
+  &-container{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
   h1, .logo-text {
-    font-size: 20px;
+    font-size: 21px;
     color: #4a4a4a;
     font-weight: 500;
+    line-height: 20px;
   }
   @include tablet {
     .navbar-brand {
@@ -39,8 +57,8 @@
     }
     #nav-menu {
       position: absolute;
-      top: 65px;
-      right: 17px;
+      top: 30px;
+      right: 50px;
     }
   }
   .logo {
@@ -73,6 +91,11 @@
   }
 }
 
+.user-dropdown {
+  position: absolute;
+  right: -2px;
+}
+
 .navbar.is-light {
   background-color: #f5f5f5;
   color: #363636;
@@ -81,11 +104,13 @@
 .button-primary {
   background: $color-primary-dark !important;
   color: $color-light !important;
-  padding: 4px 20px !important;
+  padding: 8px 16px !important;
   font-weight: 500 !important;
-  border: 1.5px solid $color-primary-dark !important;
+  border-radius: 6px;
   &:hover {
     text-decoration: none !important;
+    background: $color-primary !important;
+
   }
 }
 
@@ -127,6 +152,12 @@
   color: red
 }
 
+.footer {
+  padding: 40px 30px;
+  display: flex;
+  justify-content: center;
+  background-color: $color-light;
+}
 @media screen and (max-width: 800px) {
   table {
     border: 0;
@@ -168,4 +199,4 @@
   table td:last-child {
     border-bottom: 0;
   }
-}
+}

app/assets/stylesheets/home.scss

@@ -1,5 +1,71 @@
-.has-bg-img {
-  background-image: url("/images/abalone-hero.png"), linear-gradient(45deg, rgba(61, 24, 144, 0.8) 0%, rgba(105, 120, 228, 0.8) 100%);
+@import "variables";
+@import "mixins";
+@import "utils";
+
+
+.hero {
+  background-image: url("/assets/gary_web.png"), linear-gradient(45deg, rgba(61, 24, 144, 0.8) 0%, rgba(105, 120, 228, 0.8) 100%);
   background-repeat: no-repeat;
-  background-position: center center;
+  background-position: right;
+  color: $color-light;
+  @media (max-width: $tablet) {
+    background-image: linear-gradient(45deg, rgba(61, 24, 144, 0.8) 0%, rgba(105, 120, 228, 0.8) 100%);
+  }
+  @media (max-width: $desktop-max) {
+    background-color: linear-gradient(45deg, rgba(61, 24, 144, 0.8) 0%, rgba(105, 120, 228, 0.8) 100%);
+  }
+  &-container {
+    display: flex;
+    padding: 30px;
+  }
+  &-title{
+    font-size: 60px;
+  }
+  &-subtitle {
+    font-size: 28px;
+  }
+  &-left{
+    display: flex;
+    flex-basis: 600px;
+    flex-direction: column;
+  }
 }
+
+.dashboard-cards {
+  background-color: $color-green-bg;
+  padding: 30px;
+  margin:30px;
+  color: $color-light;
+  flex-grow: 1;
+  border-radius: 10px;
+  text-align: center;
+  min-height: 238px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.white-btn {
+  background-color: $color-light;
+  color: $color-green-bg !important;
+  border-radius: 6px;
+  padding: 8px 16px;
+  &:hover {
+    color: $color-green-bg !important;
+    opacity: 0.9;
+  }
+}
+
+.bottom_content {
+  background-color: $color-grey-bg;
+  padding: 60px 0px;
+  &_container {
+    margin-left: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex-basis: 593px;
+    margin-bottom: 40px;
+  }
+
+}

app/views/animals/index.html.erb

@@ -11,10 +11,12 @@
             <span class="ml-2 md:hidden">New</span>
           </button>
         <% end %>
-        <%= link_to csv_upload_animals_path, class: "bg-primary-dark hover:bg-primary text-white font-bold py-2 px-4 rounded inline-flex items-center mr-4 hover:text-white" do %>
-          <%= image_tag  "icons/plus.png", size: 17 %>
-          <span class="ml-2 hidden md:block">Upload CSV</span>
-          <span class="ml-2 md:hidden">Upload</span>
+        <%= link_to csv_upload_animals_path do %>
+          <button class="bg-primary-dark hover:bg-primary text-white font-bold py-2 px-4 rounded inline-flex items-center mr-4">
+            <%= image_tag  "icons/plus.png", size: 17 %>
+            <span class="ml-2 hidden md:block">Upload CSV</span>
+            <span class="ml-2 md:hidden">Upload</span>
+          </button>  
         <% end %>
         <%= link_to animals_path(format: :csv), id: "export_button" do %>
           <button class="bg-primary-dark hover:bg-primary text-white font-bold py-2 px-4 rounded inline-flex items-center">

app/views/cohorts/index.html.erb

@@ -11,10 +11,12 @@
             <span class="ml-2 md:hidden">New</span>
           </button>
         <% end %>
-        <%= link_to new_cohort_import_path, class: "bg-primary-dark hover:bg-primary text-white font-bold py-2 px-4 rounded inline-flex items-center mr-4 hover:text-white" do %>
-          <%= image_tag  "icons/plus.png", size: 17 %>
-          <span class="ml-2 hidden md:block">Upload CSV</span>
-            <span class="ml-2 md:hidden">Upload</span>
+        <%= link_to new_cohort_import_path do %>
+          <button class="bg-primary-dark hover:bg-primary text-white font-bold py-2 px-4 rounded inline-flex items-center mr-4">
+            <%= image_tag  "icons/plus.png", size: 17 %>
+            <span class="ml-2 hidden md:block">Upload CSV</span>
+              <span class="ml-2 md:hidden">Upload</span>
+          </button>    
         <% end %>
         <%= link_to cohorts_path(format: :csv), id: "export_button" do %>
           <button class="bg-primary-dark hover:bg-primary text-white font-bold py-2 px-4 rounded inline-flex items-center">

app/views/enclosures/index.html.erb

@@ -4,19 +4,25 @@
     <div class="flex md:flex-row flex-col md:justify-between mb-4">
       <h1 class="text-title2 text-center">Enclosures</h1>
       <div class="flex items-center justify-center">
-        <%= link_to new_enclosure_path, class: "inline-flex items-center px-4 py-2 mr-4 font-bold text-white rounded bg-primary-dark hover:bg-primary" do %>
-          <%= image_tag  "icons/plus.png", size: 17 %>
-          <span class="ml-2 hidden md:block">New Enclosure</span>
-          <span class="ml-2 md:hidden">New</span>
+        <%= link_to new_enclosure_path do %>
+          <button class="bg-primary-dark hover:bg-primary text-white font-bold py-2 px-4 rounded inline-flex items-center mr-4">
+            <%= image_tag  "icons/plus.png", size: 17 %>
+            <span class="ml-2 hidden md:block">New Enclosure</span>
+            <span class="ml-2 md:hidden">New</span>
+          </button>  
         <% end %>
-        <%= link_to csv_upload_enclosures_path, class: "inline-flex items-center px-4 py-2 mr-4 font-bold text-white rounded bg-primary-dark hover:bg-primary" do %>
-          <%= image_tag  "icons/plus.png", size: 17 %>
-          <span class="ml-2 hidden md:block">Upload CSV</span>
-          <span class="ml-2 md:hidden">Upload</span>
+        <%= link_to csv_upload_enclosures_path do %>
+          <button class="bg-primary-dark hover:bg-primary text-white font-bold py-2 px-4 rounded inline-flex items-center mr-4">
+            <%= image_tag  "icons/plus.png", size: 17 %>
+            <span class="ml-2 hidden md:block">Upload CSV</span>
+            <span class="ml-2 md:hidden">Upload</span>
+          </button>   
         <% end %>
-        <%= link_to enclosures_path(format: :csv), id: "export_button", class: "inline-flex items-center px-4 py-2 font-bold text-white rounded bg-primary-dark hover:bg-primary" do %>
-          <span class="ml-2 hidden md:block">Export to CSV</span>
-          <span class="ml-2 md:hidden">Export</span>
+        <%= link_to enclosures_path(format: :csv), id: "export_button" do %>
+          <button class="bg-primary-dark hover:bg-primary text-white font-bold py-2 px-4 rounded inline-flex items-center mr-4">
+            <span class="ml-2 hidden md:block">Export to CSV</span>
+            <span class="ml-2 md:hidden">Export</span>
+          </button>   
         <% end %>
       </div>
     </div>

app/views/home/_bottom_content.html.erb

@@ -0,0 +1,49 @@
+<div class="bottom_content">
+    <div class="container flex flex-wrap">
+      <div class="bottom_content_container">
+        <span class="text-title2 text-center pb-4">Github Repo</span>
+        <p class="pb-5">
+          If you'd like to contribute, check out our github repo or consider
+          donating to the <a href="https://give.ucdavis.edu/BOML/BMLABAL">Endangered
+          White Abalone Restoration Fund</a>.
+        </p>
+       <a href="https://github.com/rubyforgood/abalone" target="_blank" tabindex=18> <button class="button-primary"> Contribute </button> </a>
+      </div>
+      <div class="bottom_content_container">
+        <span class="text-title2 text-center">Links</span>
+          <div class="content">
+            <ul>
+              <li>
+                <a href="https://marinescience.ucdavis.edu/research-programs/conservation/saving-white-abalone">
+                  UC Davis - Saving White Abalone
+                </a>
+              </li>
+              <li>
+                <a href="https://youtu.be/kXGv5pwZ29o">Bodega Marine Lab - Delicacy of
+                  the Deep, Saving White Abalone
+                </a>
+              </li>
+              <li>
+                <a href="https://www.youtube.com/watch?v=B-FiDUIY6aQ&feature=youtu.be">
+                  360 Video: UC Davis Working to Save White Abalone
+                </a>
+              </li>
+              <li>
+                <a href="https://www.biographic.com/posts/sto/fighting-for-a-foothold">
+                  Fighting For a Foothold
+                </a>
+              </li>
+              <li>
+                <a href="https://www.facebook.com/whiteabalone/">Facebook</a>
+              </li>
+              <li>
+                <a href="https://www.instagram.com/white_abalone/">Instagram</a>
+              </li>
+              <li>
+                <a href="https://twitter.com/whiteabalone">Twitter</a>
+              </li>
+            </ul>
+          </div>
+      </div>
+    </div>
+  </div> 

app/views/home/_footer.html.erb

@@ -0,0 +1,5 @@
+<div class="footer">
+  <span>
+    The Abalone Analytics app was lovingly built by:<a href="https://rubyforgood.org/" target="_blank" tabindex=18>Ruby for Good</a>
+  </span>
+</div>

app/views/home/_hero.html.erb

@@ -0,0 +1,21 @@
+<section class="hero py-50">
+    <div class="container hero-container">
+        <div class="hero-left">
+            <h1 class="font-semibold hero-title pb-5">Abalone Analytics</h1>
+            <h3 class="hero-subtitle pb-2">About The Project</h3>
+            <p>The Bodega Marine Laboratory's White Abalone captive breeding program is
+      working to prevent the extinction of the White Abalone (<a
+      href="https://en.wikipedia.org/wiki/Haliotis_sorenseni" style="color: white !important; text-decoration: underline;">Haliotis
+      sorenseni</a>), an endangered marine snail.  White abalone are one of
+      seven species found in California and are culturally significant to the
+      native people of the area.  White abalone were perilously overfished
+      throughout the 20th century, resulting in a 99 percent population decrease
+      by the end of the 1970s.  This group is working to reverse their decline
+      and have already seen some great success, they currently have more abalone
+      in the lab than exist in the wild!  Ruby for Good is supporting these
+      efforts by developing a data tracking and analytics system for Abalone
+      population trends, mortality rates, and breeding programs to help save
+      this species from extinction. </p>
+        </div>
+    </div>
+</section>