Merge pull request #288 from MITLibraries/use-230

Implemented icons in sidebar and callouts in results list

Author: djanelle-mit

app/assets/stylesheets/partials/_results.scss

@@ -281,6 +281,16 @@
       flex-direction: column;
       gap: 32px;
 
+      > div {
+        display: flex;
+        gap: 12px;
+
+        i {
+          font-size: 2rem;
+          margin-top: 1px;
+        }
+      }
+
       @media (max-width: 1140px) {
         flex-basis: 280px;
       }
@@ -341,8 +351,15 @@
 
   aside {
     border: 3px solid $color-border-default;
-    padding: 20px 24px;
+    padding: 20px 24px;    
+    display: flex;
+    gap: 12px;
 
+    i {
+      font-size: 2rem;
+      margin-top: 1px;
+    }
+          
     p {
       line-height: 1.4;
     }

app/views/layouts/_head.html.erb

@@ -13,6 +13,7 @@
 <![endif]-->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
 <%= stylesheet_link_tag 'https://use.typekit.net/ixd2vgq.css' %>
+<%= stylesheet_link_tag 'https://cdn.libraries.mit.edu/files/fontawesome/7.1.0/css/all.min.css' %>
 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
 
 <!-- For all other devices -->

app/views/layouts/application.html.erb

@@ -22,8 +22,6 @@
         </div>
       </div>
 
-      <script src="https://use.fontawesome.com/38304317ff.js"></script>
-
       <footer>
         <%= render partial: "layouts/libraries_footer" %>
         <%= render partial: "layouts/institute_footer" %>

app/views/search/_results_callouts.html.erb

@@ -1,14 +1,14 @@
 <div id="callout-wrapper">
   <aside class="result-callout">
-    <i></i>
+    <i class="fa-light fa-magnifying-glass"></i>
     <div>
       <h4>Refine your search</h4>
       <p>Use advanced search features to expand or filter your search.</p>
       <a href="#">Search Primo</a>
     </div>
   </aside>
   <aside class="result-callout">
-    <i></i>
+    <i class="fa-light fa-book"></i>
     <div>
       <h4>Can’t find a book?</h4>
       <p>If we don’t own it you can often request it from another library.</p>

app/views/search/_results_sidebar.html.erb

@@ -1,14 +1,14 @@
 <aside id="results-sidebar">
   <div>
-    <i></i>
+    <i class="fa-light fa-message"></i>
     <div>
       <h4>Were these results useful?</h4>
       <p>Your feedback can help shape the quality and relevance of our search results.</p>
       <a href="#">Send feedback</a>
     </div>
   </div>
   <div>
-    <i></i>
+    <i class="fa-light fa-user"></i>
     <div>
       <h4>Get help from expert librarians</h4>
       <p>From thesis research to course reserves, we can help you find what you need.</p>