Add thumbnail replacement for new logo

js/components/ascribe_accordion_list/accordion_list_item_piece.js

@@ -34,23 +34,42 @@ let AccordionListItemPiece = React.createClass({
     },
 
     render() {
+        const { className, piece, artistName, buttons, badge, children, subsubheading } = this.props;
+        const { url, url_safe } = piece.thumbnail;
+        let thumbnail;
+
+        // Since we're going to refactor the thumbnail generation anyway at one point,
+        // for not use the annoying ascribe_spiral.png, we're matching the url against
+        // this name and replace it with a CSS version of the new logo.
+        if(url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
+            thumbnail = (
+                <span className="ascribe-logo-circle">
+                    <span>A</span>
+                </span>
+            );
+        } else {
+            thumbnail = (
+                <div style={{backgroundImage: 'url("' + url_safe + '")'}}/>
+            );
+        }
+
         return (
             <AccordionListItem
-                className={this.props.className}
+                className={className}
-                thumbnail={<div style={{backgroundImage: 'url("' + this.props.piece.thumbnail.url_safe + '")'}}/>}
+                thumbnail={thumbnail}
-                heading={<h1>{this.props.piece.title}</h1>}
+                heading={<h1>{piece.title}</h1>}
                 subheading={
                     <h3>
                         {getLangText('by ')}
-                        {this.props.artistName ? this.props.artistName : this.props.piece.artist_name}
+                        {artistName ? artistName : piece.artist_name}
                     </h3>
                 }
-                subsubheading={this.props.subsubheading}
+                subsubheading={subsubheading}
-                buttons={this.props.buttons}
+                buttons={buttons}
-                badge={this.props.badge}
+                badge={badge}
                 linkData={this.getLinkData()}
                 >
-                {this.props.children}
+                {children}
             </AccordionListItem>
         );
     }

sass/ascribe-fonts/ascribe-fonts.scss

@@ -249,17 +249,20 @@
   padding: 4px 12px 0 10px
 }
 
-@font-face {
+.ascribe-logo-circle {
-  font-family: mercury_regular;
+  border: 5px solid white;
-  src: url(Mercury_Regular.otf);
+  border-radius: 10em;
-}
 
-@font-face {
+  display: block;
-  font-family: mercury_medium;
+  width: 100%;
-  src: url(Mercury_Medium.otf);
+  height: 100%;
-}
 
-@font-face {
+  > span {
-  font-family: mercury_light;
+    color: white;
-  src: url(Mercury_Light.otf);
+    position: absolute;
+    top: -.35em;
+    left: .11em;
+
+    font-size: 8.35em;
+  }
 }

sass/ascribe_accordion_list.scss

@@ -39,6 +39,7 @@ $ascribe-accordion-list-item-height: 100px;
 
         // ToDo: Include media queries for thumbnail
         .thumbnail-wrapper {
+            background-color: #EEEEEE;
             margin-right: 2em;
             width: $ascribe-accordion-list-item-height;
             height: $ascribe-accordion-list-item-height;