nypublicradio · marineb · Dec 20, 2016 · Dec 7, 2016 · Dec 7, 2016 · Dec 7, 2016
diff --git a/app/components/about-page/template.hbs b/app/components/about-page/template.hbs
@@ -1,4 +1,4 @@
-<div class="text text--medium about-show" data-test-selector="about-page">
+<div class="text about-show" data-test-selector="about-page">
   {{{ model.aboutPage.escapedBody }}}
 </div>
 

diff --git a/app/components/related-stories/template.hbs b/app/components/related-stories/template.hbs
@@ -1,6 +1,6 @@
 {{#if stories}}
 <div class="list-heading">
-    <h1 class="h4">Related</h1>
+    <h1 class="h5">Related</h1>
 </div>
 {{/if}}
 

diff --git a/app/components/wnyc-svg/pause-circle/template.hbs b/app/components/wnyc-svg/pause-circle/template.hbs
@@ -1,3 +1,10 @@
-<svg class={{className}} width="54" height="54" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <path d="M27,54 C41.9116882,54 54,41.9116882 54,27 C54,12.0883118 41.9116882,0 27,0 C12.0883118,0 0,12.0883118 0,27 C0,41.9116882 12.0883118,54 27,54 Z M27,51.0545455 C40.2849586,51.0545455 51.0545455,40.2849586 51.0545455,27 C51.0545455,13.7150414 40.2849586,2.94545455 27,2.94545455 C13.7150414,2.94545455 2.94545455,13.7150414 2.94545455,27 C2.94545455,40.2849586 13.7150414,51.0545455 27,51.0545455 Z M29.4545455,18.6545455 L33.3818182,18.6545455 L33.3818182,35.3454545 L29.4545455,35.3454545 L29.4545455,18.6545455 Z M20.6181818,18.6545455 L24.5454545,18.6545455 L24.5454545,35.3454545 L20.6181818,35.3454545 L20.6181818,18.6545455 Z" id="pause" fill-rule="evenodd"></path>
-</svg>
+<!-- 
+  TODO: Ultimately this button should be phased out against the pause-hollow once
+  we emberize the homepage. MB, Dec 7th, 2016. 
+ -->
+ <svg class={{className}} width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+   <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+       <path d="M11,22 C17.0751322,22 22,17.0751322 22,11 C22,4.92486777 17.0751322,0 11,0 C4.92486777,0 0,4.92486777 0,11 C0,17.0751322 4.92486777,22 11,22 L11,22 L11,22 Z M11,20.8 C16.4123905,20.8 20.8,16.4123905 20.8,11 C20.8,5.58760946 16.4123905,1.2 11,1.2 C5.58760946,1.2 1.2,5.58760946 1.2,11 C1.2,16.4123905 5.58760946,20.8 11,20.8 L11,20.8 L11,20.8 Z" class="svg-path-circle-icon outer" fill="#000000"></path>
+       <path d="M12,7.60000002 L13.6,7.60000002 L13.6,14.4 L12,14.4 L12,7.60000002 Z M8.39999999,7.60000002 L10,7.60000002 L10,14.4 L8.39999999,14.4 L8.39999999,7.60000002 Z" class="svg-path-pause-icon inner" fill="#000000"></path>
+   </g>
+ </svg>
diff --git a/app/components/wnyc-svg/play-circle/template.hbs b/app/components/wnyc-svg/play-circle/template.hbs
@@ -1,3 +1,10 @@
-<svg class={{className}} width="54" height="54" viewBox="0 0 54 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <path d="M27,54 C41.9116882,54 54,41.9116882 54,27 C54,12.0883118 41.9116882,0 27,0 C12.0883118,0 0,12.0883118 0,27 C0,41.9116882 12.0883118,54 27,54 Z M27,51.0545455 C40.2849586,51.0545455 51.0545455,40.2849586 51.0545455,27 C51.0545455,13.7150414 40.2849586,2.94545455 27,2.94545455 C13.7150414,2.94545455 2.94545455,13.7150414 2.94545455,27 C2.94545455,40.2849586 13.7150414,51.0545455 27,51.0545455 Z M21.2599945,36.9025636 L21.2599945,17.3333333 L37.1599941,27.1179485 L21.2599945,36.9025636 Z" id="play-circle" fill-rule="evenodd"></path>
+<!-- 
+  TODO: Ultimately this button should be phased out against the play-hollow once
+  we emberize the homepage. MB, Dec 7th, 2016. 
+ -->
+<svg class={{className}} width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <path d="M11,22 C17.0751322,22 22,17.0751322 22,11 C22,4.92486777 17.0751322,0 11,0 C4.92486777,0 0,4.92486777 0,11 C0,17.0751322 4.92486777,22 11,22 L11,22 L11,22 Z M11,20.8 C16.4123905,20.8 20.8,16.4123905 20.8,11 C20.8,5.58760946 16.4123905,1.2 11,1.2 C5.58760946,1.2 1.2,5.58760946 1.2,11 C1.2,16.4123905 5.58760946,20.8 11,20.8 L11,20.8 L11,20.8 Z" class="svg-path-circle-icon outer" fill="#000000"></path>
+      <polygon class="svg-path-play-icon inner" fill="#000000" points="8.66147924 15.0343778 8.66147924 7.06172838 15.1392569 11.0480531 8.66147924 15.0343778"></polygon>
+  </g>
 </svg>
diff --git a/app/shows/template.hbs b/app/shows/template.hbs
@@ -34,7 +34,7 @@
   <section class="shows-list">
     {{#if noResults}}
       <div class="doubledown box box--luxe">
-        <p class="text aligncenter">Sorry, but no matching shows were found. Try a different spelling or other words in the title of the show you're looking for. If you're looking for something other than a show name, try our <a href="http://www.wnyc.org/search/">sitewide search</a>.</p>
+        <p class="text aligncenter">Sorry, but no matching shows were found. Try a different spelling or other words in the title of the show you're looking for. If you're looking for something other than a show name, try searching <a href="http://www.wnyc.org/search/">the rest of the website</a>.</p>
       </div>
     {{else}}
      <ul class="list list--borderbottom">

diff --git a/app/styles/_base.scss b/app/styles/_base.scss
@@ -142,7 +142,8 @@ i {
 hr {
     border: none;
     height: 1px;
-    background-color: $lightestgray;
+    background-color: $nearwhite;
+    margin: 40px 0;
 }
 
 /**

diff --git a/app/styles/_buttons.scss b/app/styles/_buttons.scss
@@ -788,53 +788,6 @@
   }
 }
 
-// Ember Button Components
-.queue-button {
-  @include btn;
-  @include btn--strongtext;
-  @include btn--smalltext;
-  @include thickbtn;
-
-  &.queue-button--fancyfeature {
-    @include gray-btn-jshover;
-
-    @include mq($small-and-up) {
-      @include white-btn-jshover;
-    }
-  }
-
-  &.queue-button--storyheader {
-    @include gray-btn-jshover;
-
-    @include mq($medium-and-up) {
-      @include white-btn-jshover;
-    }
-  }
-
-  &.just-gray {
-    @include gray-btn-jshover;
-  }
-
-  &.small-blue {
-    @include btn;
-    @include btn--circle;
-    @include btn--fat;
-
-    &:focus,
-    &:hover {
-      border-color: rgba($darkgray, 0.2);
-      color: $lightgray;
-      opacity: 1;
-    }
-
-    &.is-hovering {
-      border-color: rgba($darkgray, 0.2);
-      color: $lightgray;
-      opacity: 1;
-    }
-  }
-}
-
 .callout-button {
   @include btn;
   @include btn--large;
@@ -852,6 +805,24 @@
   }
 }
 
+@mixin gray-hollow-svg($color) {
+  svg .outer {
+    fill: rgba($lightgray, 0.2);
+  }
+  svg .inner {
+    fill: $color;
+  }  
+}
+
+@mixin gray-hollow-svg-hover($color) {
+  svg .outer {
+    fill: rgba($darkgray, 0.2);
+  }
+  svg .inner {
+    fill: rgba($color, 1);
+  }  
+}
+
 @mixin gray-svg {
   @include svg-color($lightgray);
 }
@@ -935,7 +906,6 @@
   }
 }
 
-
 @mixin white-listen-spinner {
   .listen-spinner {
     @include spinner(
@@ -972,6 +942,52 @@
   }
 }
 
+// Queue Buttons
+
+.queue-button {
+  @include btn;
+  @include btn--strongtext;
+  @include btn--smalltext;
+  @include thickbtn;
+
+  &.queue-button--fancyfeature {
+    @include gray-btn-jshover;
+
+    @include mq($small-and-up) {
+      @include white-btn-jshover;
+    }
+  }
+
+  &.queue-button--storyheader {
+    @include gray-btn-jshover;
+
+    @include mq($medium-and-up) {
+      @include white-btn-jshover;
+    }
+  }
+
+  &.just-gray {
+    @include gray-btn-jshover;
+  }
+
+  &.small-blue {
+    @include btn-size(44px);
+
+    &:focus,
+    &:hover {
+      border-color: rgba($darkgray, 0.2);
+      color: $lightgray;
+      opacity: 1;
+    }
+
+    &.is-hovering {
+      border-color: rgba($darkgray, 0.2);
+      color: $lightgray;
+      opacity: 1;
+    }
+  }
+}
+
 // Listen Buttons
 
 .listen-button {
@@ -1019,15 +1035,15 @@
   &.blue-hollow {
     @include btn-size(44px);
 
-    @include blue-svg;
+    @include gray-hollow-svg($blue);
     @include blue-listen-spinner;
 
     &:hover .listen-ui,
     &:focus .listen-ui {
-      @include svg-color($darkblue);
+      @include gray-hollow-svg-hover($blue);
     }
     &:active .listen-ui {
-      @include svg-color(#013f73);
+      @include gray-hollow-svg($gray);
     }
   }
 
@@ -1065,24 +1081,13 @@
   &.red-hollow-small {
     @include btn-size(24px);
 
+    @include gray-hollow-svg($red);
     @include red-listen-spinner;
 
-    svg .outer {
-      fill: rgba($lightgray, 0.2);
-    }
-    svg .inner {
-      fill: $red;
-    }
-
     &:hover .listen-ui,
     &:focus .listen-ui,
     &:active .listen-ui {
-      svg .outer {
-        fill: rgba($lightgray, 0.16);
-      }
-      svg .inner {
-        fill: rgba($red, 0.8);
-      }
+      @include gray-hollow-svg-hover($red);
     }
   }
 

diff --git a/app/styles/_forms.scss b/app/styles/_forms.scss
@@ -121,6 +121,10 @@
   padding: 20px 20px 20px 60px; /* room at left for magnifying glass icon */
   border-radius: 100px;
 
+  &:hover {
+    box-shadow: 1px 1px 1px rgba(black, .2);
+  }
+
   .input-icon {
     position: absolute;
     top: 21px;

diff --git a/app/styles/_utilities.scss b/app/styles/_utilities.scss
@@ -58,7 +58,7 @@
  *
  *      @example
  *      p Listen <span class="text--small dimmed">21 min</span>
- *      p <span class="text--small dimmed">Published in</span>
+ *      p <span class="text--small dimmed">Published by</span>
  */
 .dimmed {
     opacity: 0.7;

diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -87,6 +87,7 @@ body:not(.simplified_wrapper):not(.container_stripped) > :not(
 @import 'legacy/schedule';
 @import 'legacy/nav-menu';
 @import 'legacy/user-profile';
+@import 'legacy/story';
 @import 'legacy/footer';
 
 // MISC

diff --git a/app/styles/legacy/_home-compat.scss b/app/styles/legacy/_home-compat.scss
@@ -50,7 +50,7 @@
 .story-wrapper .description {
   &, p {
     font-size: 14px;
-    color: #444;
+    color: $darkergray;
   }
 }
 
@@ -262,17 +262,15 @@ body.ember-application {
     font-weight: normal;
   }
 
-  #top-stories-wrapper .story-wrapper {
+  .story-wrapper {
+    border-radius: 3px;
+
     a h4.show-name {
       color: $lightgray;
       font-weight: normal;
       font-size: 12px;
     }
-  }
-
-  .story-wrapper {
-    border-radius: 3px;
-
+
     .media {
       border-radius: 3px 3px 0 0;
     }     

diff --git a/app/styles/legacy/_screen.scss b/app/styles/legacy/_screen.scss
@@ -78,13 +78,6 @@ ol.decimal {
   list-style: decimal outside none;
 }
 
-hr {
-  border: 0 #ccc solid;
-  border-top-width: 1px;
-  clear: both;
-  height: 0;
-}
-
 #loginbox {
   font-size: 11px;
   text-align: right;

diff --git a/app/styles/legacy/_story.scss b/app/styles/legacy/_story.scss
@@ -0,0 +1,21 @@
+article section {
+  a {
+    border-bottom: .08em solid rgba(black, .1);
+  }
+
+  h2 {
+    margin-bottom: 1rem;
+  }
+
+  h3, h4 {
+    margin-bottom: 0;
+  }
+
+  blockquote {
+    border-left: 4px solid $nearwhite;
+    padding-left: 20px;
+    font-size: 18px;
+    line-height: 1.6em;
+    font-weight: bold;
+  }
+}
diff --git a/tests/acceptance/shows-test.js b/tests/acceptance/shows-test.js
@@ -62,7 +62,7 @@ test('searching with no results /shows', function(assert) {
 
   //show the no results found message
   andThen(function() {
-    assert.equal(find(".shows-list").text().trim(), "Sorry, but no matching shows were found. Try a different spelling or other words in the title of the show you're looking for. If you're looking for something other than a show name, try our sitewide search.", "No results message displays");
+    assert.equal(find(".shows-list").text().trim(), "Sorry, but no matching shows were found. Try a different spelling or other words in the title of the show you're looking for. If you're looking for something other than a show name, try searching the rest of the website.", "No results message displays");
   });
 
 });