Use SVG StudyFinder with registered trademark

This swaps out the PNG StudyFinder logo with an embedded SVG that includes the registered trademark symbol (circle R). Using an embedded SVG also allows us to style the logo colors via the CSS themes.
ahcis-rds · Oct 27, 2021 · d4446d3 · d4446d3
1 parent a114851
commit d4446d3
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 2 deletions.
diff --git a/app/assets/stylesheets/base/globals.css.scss b/app/assets/stylesheets/base/globals.css.scss
@@ -5,6 +5,18 @@ body {
   color: $body_text;
 }
 
+g#studyfinder-logo-study {
+  fill: $school_main_color;
+}
+g#studyfinder-logo-finder {
+  fill: $school_secondary_color;
+}
+
+.system-logo {
+  /* Disable old PNG logo in themes */
+  background: none !important;
+}
+
 h1, h2, h3, h4, h5 {
   color: $school_main_color;
   font-weight: 400;

diff --git a/app/assets/stylesheets/theme/uw.css.scss b/app/assets/stylesheets/theme/uw.css.scss
@@ -31,4 +31,11 @@ $school_dark_color: #404d5b;
 .btn-school-inverse {
   color: $school_main_color;
   background: $school_secondary_color;
-}
+}
+
+g#studyfinder-logo-study {
+  fill: $school_main_color;
+}
+g#studyfinder-logo-finder {
+  fill: #424450 !important;
+}
diff --git a/app/views/shared/_logo.svg b/app/views/shared/_logo.svg
diff --git a/app/views/shared/_navbar.html.erb b/app/views/shared/_navbar.html.erb
@@ -1,7 +1,9 @@
 <div class="navbar">
   <div class="container brand-marks clearfix">
     <a href="#" class="brand pull-left"></a>
-    <div class="pull-right system-logo visible-lg-block visible-md-block visible-sm"></div>
+    <div class="pull-right system-logo visible-lg-block visible-md-block visible-sm">
+      <%= render "shared/logo.svg" %>
+    </div>
   </div>
   <p class="alt-header visible-xs-block">Study Finder</p>
   <div class="container main-nav">