Update icons on /subreddits page.

Updates the icons to match the new interstitial designs.  Also adds a
quarantined icon.

r2/r2/public/static/css/reddit.less

@@ -11079,3 +11079,45 @@ body:not(.loggedin) .reply-button,
 body:not(.loggedin) .report-button {
     display: none;
 }
+
+.sr-type-icon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+
+    &.sr-type-icon-banned {
+        .hdpi-bg-image(@1x: url(../sr-type-icon-banned.png), @2x: url(../sr-type-icon-banned_2x.png));
+    }
+
+    &.sr-type-icon-moderator {
+        .hdpi-bg-image(@1x: url(../sr-type-icon-moderator.png), @2x: url(../sr-type-icon-moderator_2x.png));
+    }
+
+    &.sr-type-icon-approved {
+        .hdpi-bg-image(@1x: url(../sr-type-icon-approved.png), @2x: url(../sr-type-icon-approved_2x.png));
+    }
+
+    &.sr-type-icon-restricted {
+        .hdpi-bg-image(@1x: url(../sr-type-icon-restricted.png), @2x: url(../sr-type-icon-restricted_2x.png));
+    }
+
+    &.sr-type-icon-private {
+        .hdpi-bg-image(@1x: url(../sr-type-icon-private.png), @2x: url(../sr-type-icon-private_2x.png));
+    }
+
+    &.sr-type-icon-quarantined {
+        .hdpi-bg-image(@1x: url(../sr-type-icon-quarantined.png), @2x: url(../sr-type-icon-quarantined_2x.png));
+    }
+
+    &.sr-type-icon-nsfw {
+        .hdpi-bg-image(@1x: url(../sr-type-icon-nsfw.png), @2x: url(../sr-type-icon-nsfw_2x.png));
+    }
+}
+
+.subscription-box .sr-type-icon {
+    margin-right: 3px;
+}
+
+.subreddit .midcol .sr-type-icon {
+    margin-left: 3px;
+}

r2/r2/templates/subreddit.html

@@ -61,34 +61,39 @@
   ${_("a community for %(time)s") % dict(time=timesince(thing._date))}
 </%def>
 
+<%def name="sr_type_icon(name, title)">
+  <span class="sr-type-icon sr-type-icon-${name}"
+       title="${title}"
+       alt="${title}"></span>
+</%def>
+
 ##this function is used by subscriptionbox.html
 <%def name="permission_icons(sr)">
-  %if sr.moderator:
-    <img class="sr-type-img" title="${_('moderator')}" alt="${_('moderator')}" src="${static('shield.png')}" />
+  %if sr.spammy():
+    ${self.sr_type_icon("banned", _("banned"))}
+  %else:
+    %if sr.moderator:
+      ${self.sr_type_icon("moderator", _("moderator"))}
+    %elif sr.type in ("restricted", "private"):
+      %if sr.contributor:
+        ${self.sr_type_icon("approved", _("approved submitter"))}
+      %else:
+        ${self.sr_type_icon("restricted", _("not approved"))}
+      %endif
+    %endif 
+
+    %if sr.type in sr.private_types:
+      ${self.sr_type_icon("private", _("private"))}
+    %endif
+
+    %if sr.quarantine:
+      ${self.sr_type_icon("quarantined", _("quarantined"))}
+    %endif
+
+    %if sr.over_18:
+      ${self.sr_type_icon("nsfw", _("NSFW"))}
+    %endif
   %endif
-
-  %if sr.type in ("restricted", "private") and not sr.moderator:
-    <img class="sr-type-img"
-       %if sr.contributor:
-         alt="${_('approved submitter')}"
-         title="${_('approved submitter')}"
-         src="${static('pencil.png')}"
-       %else:
-         alt="${_('not approved')}"
-         title="${_('not approved')}"
-         src="${static('pencil-gray.png')}"
-       %endif
-    />
-  %endif 
-
-  %if sr.type in sr.private_types:
-    <img class="sr-type-img" title="${_('private')}" alt="${_('private')}" src="${static('eye.png')}" />
-  %endif
-
-  %if sr.over_18:
-    <img class="sr-type-img" title="${_('over18')}" alt="${_('over18')}" src="${static('over18_icon.png')}" />
-  %endif
-
 </%def>
 
 <%def name="midcol(display=True, cls='')">

r2/r2/templates/subscriptionbox.html

@@ -62,15 +62,17 @@
           <span class="fancy-toggle-button">
             <span class="active banned">${_("banned")}</span>
           </span>
-          <span class="title banned">${sr.name}</span>
-        %elif is_spam:
-          ${SubscribeButton(sr)}
-          <span class="title banned">${sr.name}</span>
         %else:
           ${SubscribeButton(sr)}
-          ${plain_link(sr.name, sr.path, _class="title")}
-          ${permission_icons(sr)}
         %endif
+
+        %if is_spam:
+          <span class="title banned">${sr.name}</span>
+        %else:
+          ${plain_link(sr.name, sr.path, _class="title")}
+        %endif
+
+        ${permission_icons(sr)}
       </li>
     %endfor
     </ul>