Refactor weather toggle icon to use inline svg

guardian · Mar 24, 2015 · 3e4d907 · 3e4d907
1 parent fbae57d
commit 3e4d907
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/static/src/stylesheets/module/_weather.scss b/static/src/stylesheets/module/_weather.scss
@@ -142,9 +142,14 @@ $weather-large-size: 60px;
     }
 
     .weather__toggle-icon {
-        width: 18px;
-        height: 8px;
+        display: inline-block;
         margin-bottom: $gs-baseline / 6;
+        fill: colour(neutral-1);
+
+        svg {
+            width: 18px;
+            height: 8px;
+        }
 
         .is-expanded & {
             @include transform(rotate(180deg));

diff --git a/weather/app/views/cityWeather.scala.html b/weather/app/views/cityWeather.scala.html
@@ -15,7 +15,7 @@
         @fragments.inlineSvg(s"weather-${weather.WeatherIcon}", "weather", Seq("weather__icon","js-weather-icon"), Some(weather.WeatherText))<span class="u-h">@weather.WeatherText</span>
     </div>
     <button class="weather__toggle-forecast meta-button js-toggle-forecast mobile-only" data-link-name="weather-toggle-forecast"
-    href="#toggle-forecast"><span class="u-h">Toggle forecast</span><i class="i i-arrow-grey-large weather__toggle-icon"></i>
+    href="#toggle-forecast"><span class="u-h">Toggle forecast</span>@fragments.inlineSvg("arrow", "icon", List("weather__toggle-icon"))
     </button>
     <ul class="js-weather-forecast forecast"></ul>
     <div class="weather__location">