Small style refactoring of suggestion panel and refactor of focus outline mixin

Author: djanelle-mit

app/assets/stylesheets/partials/_effects.scss

@@ -16,8 +16,14 @@
 
 // OUTLINE
 
-@mixin set-focus-outline() {
+@mixin set-focus-outline-dark() {
     *:focus-visible {
         outline: 2px solid $color-focus-dark;
     }
 }
+
+@mixin set-focus-outline() {
+    *:focus-visible {
+        outline: 2px solid $color-focus;
+    }
+}

app/assets/stylesheets/partials/_header.scss

@@ -1,5 +1,5 @@
 .institute-bar, .libraries-header {
-    @include set-focus-outline();
+    @include set-focus-outline-dark();
 }
 
 .institute-bar {

app/assets/stylesheets/partials/_layouts.scss

@@ -39,7 +39,7 @@
 // FOOTER STYLES
 
 .wrap-outer-footer, .wrap-outer-footer-institute {
-  @include set-focus-outline();
+  @include set-focus-outline-dark();
 }
 
 

app/assets/stylesheets/partials/_suggestion-panel.scss

@@ -1,4 +1,9 @@
+#hint {padding-top: 24px;} //Temporary spacing above panel until we can revisit entire page layout
+
 .mitlib-suggestion-panel {
+
+    @include set-focus-outline;
+    
     border: 4px solid $color-suggestion-border;
 
     display: flex;
@@ -9,24 +14,26 @@
 
     .panel-type {
         color: $color-suggestion-accent-text;
-        font-size: 14px;
+        font-size: 1.4rem;
         font-weight: 600;
         margin-bottom: 8px;
     }
 
     h3 {
-        font-size: 20px;
-        font-weight: 600;
-        line-height: 1.25;
+        font-size: 2rem;
         margin-bottom: 8px;
     }
 
     p {
-        font-size: 16px;
+        font-size: 1.6rem;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
     }
 
     ul.metadata {
-        font-size: 14px;
+        font-size: 1.4rem;
         list-style: none inside;
         padding-left: 0;
         margin-bottom: 20px;
@@ -51,8 +58,6 @@
 
 	    @include hover-transition;
 
-        @include set-focus-outline;
-
         &:hover {
             background-color: $color-gray-100;
         }
@@ -71,8 +76,6 @@
 
     @include hover-transition;
 
-    @include set-focus-outline;
-
     &:hover {
         color: $color-white;
         background-color: $color-black;