From 9de2949cb7c3b446c283d403ff38c82f74103ae8 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Fri, 16 Mar 2018 08:42:10 -0700
Subject: [PATCH] Simplify selectors, prefer class selectors for SVGs

---
 routes/_components/DynamicPageBanner.html     | 16 +++++++--------
 routes/_components/ExternalLink.html          |  6 +++---
 routes/_components/IconButton.html            | 20 +++++++++----------
 routes/_components/NavItem.html               | 10 +++++-----
 routes/_components/NotLoggedInHome.html       |  4 ++--
 routes/_components/PlayVideoIcon.html         |  4 ++--
 .../_components/community/PageListItem.html   |  6 +++---
 routes/_components/compose/ComposeButton.html |  4 ++--
 .../_components/dialog/GenericDialogList.html |  6 +++---
 routes/_components/search/Search.html         |  4 ++--
 .../settings/SettingsListItem.html            |  6 +++---
 routes/_components/status/StatusDetails.html  |  6 +++---
 routes/_components/status/StatusHeader.html   |  6 +++---
 .../status/StatusMediaAttachments.html        |  8 ++++----
 14 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/routes/_components/DynamicPageBanner.html b/routes/_components/DynamicPageBanner.html
index 36ff7506..21f7fee9 100644
--- a/routes/_components/DynamicPageBanner.html
+++ b/routes/_components/DynamicPageBanner.html
@@ -1,6 +1,6 @@
 <div class="dynamic-page-banner {{icon ? 'dynamic-page-with-icon' : ''}}">
   {{#if icon}}
-  <svg>
+  <svg class="dynamic-page-banner-svg">
     <use xlink:href="{{icon}}" />
   </svg>
   {{/if}}
@@ -20,18 +20,18 @@
   .dynamic-page-banner.dynamic-page-with-icon {
     grid-template-columns: min-content 1fr min-content;
   }
-  .dynamic-page-banner svg {
+  .dynamic-page-banner-svg {
     width: 24px;
     height: 24px;
     fill: var(--body-text-color);
   }
-  h1.dynamic-page-title {
+  .dynamic-page-title {
     margin: 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  button.dynamic-page-go-back {
+  .dynamic-page-go-back {
     font-size: 1.3em;
     color: var(--anchor-text);
     border: 0;
@@ -39,10 +39,10 @@
     background: none;
     justify-self: flex-end;
   }
-  button.dynamic-page-go-back:hover {
+  .dynamic-page-go-back:hover {
     text-decoration: underline;
   }
-  button.dynamic-page-go-back::before {
+  .dynamic-page-go-back::before {
     content: '<';
     margin-right: 5px;
   }
@@ -50,10 +50,10 @@
     .dynamic-page-banner {
       margin: 20px 10px 20px;
     }
-    h1.dynamic-page-title {
+    .dynamic-page-title {
       font-size: 1.3em;
     }
-    button.dynamic-page-go-back {
+    .dynamic-page-go-back {
       font-size: 1.3em;
     }
   }
diff --git a/routes/_components/ExternalLink.html b/routes/_components/ExternalLink.html
index 5f9ad958..6f8c7939 100644
--- a/routes/_components/ExternalLink.html
+++ b/routes/_components/ExternalLink.html
@@ -3,7 +3,7 @@
    href="{{href}}"
    class="{{className || ''}} {{showIcon ? 'external-link-with-icon' : ''}} {{normalIconColor ? 'normal-icon-color' : ''}}">
   <slot></slot>{{#if showIcon}}
-    <svg>
+    <svg class="external-link-svg">
       <use xlink:href="#fa-external-link" />
     </svg>
   {{/if}}</a>
@@ -12,13 +12,13 @@
     display: inline-flex;
     align-items: center;
   }
-  .external-link-with-icon svg {
+  .external-link-with-icon .external-link-svg {
     margin-left: 4px;
     width: 14px;
     height: 14px;
     fill: var(--deemphasized-text-color);
   }
-  .external-link-with-icon.normal-icon-color svg {
+  .external-link-with-icon.normal-icon-color .external-link-svg {
     fill: var(--body-text-color);
   }
 </style>
diff --git a/routes/_components/IconButton.html b/routes/_components/IconButton.html
index 4f8c9a8d..868b4094 100644
--- a/routes/_components/IconButton.html
+++ b/routes/_components/IconButton.html
@@ -5,7 +5,7 @@
           class="{{computedClass}}"
           :disabled
           delegate-key="{{delegateKey}}" >
-    <svg>
+    <svg class="icon-button-svg">
       <use xlink:href="{{href}}" />
     </svg>
   </button>
@@ -16,46 +16,46 @@
           class="{{computedClass}}"
           :disabled
           on:click >
-    <svg>
+    <svg class="icon-button-svg">
       <use xlink:href="{{href}}" />
     </svg>
   </button>
 {{/if}}
 <style>
-  button.icon-button {
+  .icon-button {
     padding: 6px 10px;
     background: none;
     border: none;
   }
 
-  button.icon-button svg {
+  .icon-button-svg {
     width: 24px;
     height: 24px;
     fill: var(--action-button-fill-color);
   }
 
-  button.icon-button.big-icon svg {
+  .icon-button.big-icon .icon-button-svg {
     width: 32px;
     height: 32px;
   }
 
-  button.icon-button:hover svg {
+  .icon-button:hover .icon-button-svg {
     fill: var(--action-button-fill-color-hover);
   }
 
-  button.icon-button.not-pressable:active svg {
+  .icon-button.not-pressable:active .icon-button-svg {
     fill: var(--action-button-fill-color-active);
   }
 
-  button.icon-button.pressed svg {
+  .icon-button.pressed .icon-button-svg {
     fill: var(--action-button-fill-color-pressed)
   }
 
-  button.icon-button.pressed:hover svg {
+  .icon-button.pressed:hover .icon-button-svg {
     fill: var(--action-button-fill-color-pressed-hover);
   }
 
-  button.icon-button.pressed:active svg {
+  .icon-button.pressed:active .icon-button-svg {
     fill: var(--action-button-fill-color-pressed-active);
   }
 </style>
diff --git a/routes/_components/NavItem.html b/routes/_components/NavItem.html
index e9c753c2..cba6413c 100644
--- a/routes/_components/NavItem.html
+++ b/routes/_components/NavItem.html
@@ -4,7 +4,7 @@
    :href >
   {{#if name === 'notifications'}}
     <div class="nav-link-svg-wrapper">
-      <svg>
+      <svg class="nav-link-svg">
         <use xlink:href="{{svg}}" />
       </svg>
       {{#if $hasNotifications}}
@@ -14,7 +14,7 @@
       {{/if}}
     </div>
   {{else}}
-    <svg>
+    <svg class="nav-link-svg">
       <use xlink:href="{{svg}}" />
     </svg>
   {{/if}}
@@ -75,11 +75,11 @@
   .main-nav-link:hover .nav-link-label {
     color: var(--nav-text-color-hover);
   }
-  .main-nav-link:hover svg {
+  .main-nav-link:hover .nav-link-svg {
     fill: var(--nav-svg-fill-hover);
   }
 
-  .main-nav-link svg {
+  .main-nav-link .nav-link-svg {
     width: 20px;
     height: 20px;
     display: inline-block;
@@ -99,7 +99,7 @@
     .main-nav-link .nav-link-label {
       display: none;
     }
-    .main-nav-link svg {
+    .main-nav-link .nav-link-svg {
       width: 25px;
       height: 25px;
     }
diff --git a/routes/_components/NotLoggedInHome.html b/routes/_components/NotLoggedInHome.html
index 90afed40..aca783f1 100644
--- a/routes/_components/NotLoggedInHome.html
+++ b/routes/_components/NotLoggedInHome.html
@@ -2,7 +2,7 @@
   <FreeTextLayout>
     <div class="not-logged-in-home">
       <div class="banner">
-        <svg aria-hidden="true" class="logo">
+        <svg aria-hidden="true" class="not-logged-in-home-svg">
           <use xlink:href="#pinafore-logo" />
         </svg>
         <h1>Pinafore</h1>
@@ -24,7 +24,7 @@
     align-items: center;
     margin: 0 0 30px;
   }
-  .not-logged-in-home svg {
+  .not-logged-in-home-svg {
     width: 70px;
     height: 70px;
     fill: royalblue;
diff --git a/routes/_components/PlayVideoIcon.html b/routes/_components/PlayVideoIcon.html
index 8b73d5bc..eaede0d7 100644
--- a/routes/_components/PlayVideoIcon.html
+++ b/routes/_components/PlayVideoIcon.html
@@ -1,5 +1,5 @@
 <div class="play-video-icon {{className || ''}}">
-  <svg>
+  <svg class="play-video-icon-svg">
     <use xlink:href="#fa-play-circle" />
   </svg>
 </div>
@@ -16,7 +16,7 @@
     z-index: 40;
     pointer-events: none;
   }
-  .play-video-icon svg {
+  .play-video-icon-svg {
     width: 72px;
     height: 72px;
     fill: var(--mask-svg-fill);
diff --git a/routes/_components/community/PageListItem.html b/routes/_components/community/PageListItem.html
index d5663676..951b6035 100644
--- a/routes/_components/community/PageListItem.html
+++ b/routes/_components/community/PageListItem.html
@@ -1,6 +1,6 @@
 <li class="page-list-item">
   <a :href>
-    <svg>
+    <svg class="page-list-item-svg">
       <use xlink:href="{{icon}}" />
     </svg>
     <span aria-label="{{label}} {{$pinnedPage === href ? 'Pinned page' : 'Unpinned page'}}">
@@ -40,7 +40,7 @@
   .page-list-item a:active {
     background: var(--settings-list-item-bg-active);
   }
-  .page-list-item svg {
+  .page-list-item-svg {
     width: 24px;
     height: 24px;
     display: inline-block;
@@ -57,7 +57,7 @@
     .page-list-item a {
       padding: 20px 10px;
     }
-    .page-list-item svg {
+    .page-list-item-svg {
       margin-right: 10px;
     }
   }
diff --git a/routes/_components/compose/ComposeButton.html b/routes/_components/compose/ComposeButton.html
index 0f92c39b..58055ce0 100644
--- a/routes/_components/compose/ComposeButton.html
+++ b/routes/_components/compose/ComposeButton.html
@@ -6,7 +6,7 @@
   </span>
   <div class="compose-box-button-spinner {{$postingStatus ? 'spin' : 'hidden'}}"
        aria-hidden="true">
-    <svg>
+    <svg class="compose-box-button-spinner-svg">
       <use xlink:href="#fa-spinner" />
     </svg>
   </div>
@@ -31,7 +31,7 @@
     left: 0;
     right: 0;
   }
-  .compose-box-button-spinner svg {
+  .compose-box-button-spinner-svg {
     width: 24px;
     height: 24px;
     fill: var(--button-primary-text);
diff --git a/routes/_components/dialog/GenericDialogList.html b/routes/_components/dialog/GenericDialogList.html
index df1cad9c..f61bc08b 100644
--- a/routes/_components/dialog/GenericDialogList.html
+++ b/routes/_components/dialog/GenericDialogList.html
@@ -2,13 +2,13 @@
   {{#each items as item @key}}
   <li class="generic-dialog-list-item">
     <button class="generic-dialog-list-button" on:click="fire('click', item)">
-      <svg>
+      <svg class="generic-dialog-list-item-svg">
         <use xlink:href="{{item.icon}}" />
       </svg>
       <span>
             {{item.label}}
           </span>
-      <svg class="{{item.selected ? '' : 'hidden'}}" aria-hidden="{{!item.selected}}">
+      <svg class="generic-dialog-list-item-svg {{item.selected ? '' : 'hidden'}}" aria-hidden="{{!item.selected}}">
         <use xlink:href="#fa-check" />
       </svg>
     </button>
@@ -29,7 +29,7 @@
     font-size: 1.2em;
     display: flex;
   }
-  .generic-dialog-list-item svg {
+  .generic-dialog-list-item-svg {
     width: 24px;
     height: 24px;
     fill: var(--svg-fill);
diff --git a/routes/_components/search/Search.html b/routes/_components/search/Search.html
index 06653ec6..ce43b36c 100644
--- a/routes/_components/search/Search.html
+++ b/routes/_components/search/Search.html
@@ -8,7 +8,7 @@
            bind:value="$queryInSearch">
   </div>
   <button type="submit" class="primary search-button" aria-label="Search" disabled="{{$searchLoading}}">
-    <svg>
+    <svg class="search-button-svg">
       <use xlink:href="#fa-search" />
     </svg>
   </button>
@@ -39,7 +39,7 @@
     border-radius: 10px;
     flex: 1;
   }
-  .search-button svg {
+  .search-button-svg {
     fill: var(--button-primary-text);
     width: 18px;
     height: 18px;
diff --git a/routes/_components/settings/SettingsListItem.html b/routes/_components/settings/SettingsListItem.html
index 02fc3129..f9f312b7 100644
--- a/routes/_components/settings/SettingsListItem.html
+++ b/routes/_components/settings/SettingsListItem.html
@@ -1,7 +1,7 @@
 <li class="settings-list-item">
   <a :href>
     {{#if icon}}
-    <svg>
+    <svg class="settings-list-item-svg">
       <use xlink:href="{{icon}}" />
     </svg>
     {{/if}}
@@ -39,7 +39,7 @@
   .settings-list-item a:active {
     background: var(--settings-list-item-bg-active);
   }
-  .settings-list-item svg {
+  .settings-list-item-svg {
     width: 24px;
     height: 24px;
     display: inline-block;
@@ -59,7 +59,7 @@
     .settings-list-item a {
       padding: 20px 10px;
     }
-    .settings-list-item svg {
+    .settings-list-item-svg {
       margin-right: 10px;
     }
     .settings-list-item .offset-for-icon {
diff --git a/routes/_components/status/StatusDetails.html b/routes/_components/status/StatusDetails.html
index 61ec29d0..0092569d 100644
--- a/routes/_components/status/StatusDetails.html
+++ b/routes/_components/status/StatusDetails.html
@@ -5,7 +5,7 @@
   <a class="status-favs-reblogs"
      href="/statuses/{{originalStatusId}}/reblogs"
      aria-label="{{favoritesLabel}}">
-    <svg>
+    <svg class="status-favs-reblogs-svg">
       <use xlink:href="#fa-retweet"/>
     </svg>
     <span>{{numReblogs}}</span>
@@ -13,7 +13,7 @@
   <a class="status-favs-reblogs"
      href="/statuses/{{originalStatusId}}/favorites"
      aria-label="{{reblogsLabel}}">
-    <svg>
+    <svg class="status-favs-reblogs-svg">
       <use xlink:href="#fa-star" />
     </svg>
     <span>{{numFavs}}</span>
@@ -57,7 +57,7 @@
     color: var(--deemphasized-text-color);
   }
 
-  .status-favs-reblogs svg {
+  .status-favs-reblogs-svg {
     fill: var(--deemphasized-text-color);
     width: 18px;
     height: 18px;
diff --git a/routes/_components/status/StatusHeader.html b/routes/_components/status/StatusHeader.html
index 907ae26d..e2591546 100644
--- a/routes/_components/status/StatusHeader.html
+++ b/routes/_components/status/StatusHeader.html
@@ -1,5 +1,5 @@
 <div class="status-header {{isStatusInNotification ? 'status-in-notification' : ''}}">
-  <svg>
+  <svg class="status-header-svg">
     <use xlink:href="{{icon}}"/>
   </svg>
   <span>
@@ -55,13 +55,13 @@
     align-items: center;
   }
 
-  .status-header svg {
+  .status-header-svg {
     width: 18px;
     height: 18px;
     fill: var(--deemphasized-text-color);
   }
 
-  .status-header.status-in-notification svg {
+  .status-header.status-in-notification .status-header-svg {
     fill: var(--body-text-color);
   }
 </style>
diff --git a/routes/_components/status/StatusMediaAttachments.html b/routes/_components/status/StatusMediaAttachments.html
index 1ccec6fb..e809d6b1 100644
--- a/routes/_components/status/StatusMediaAttachments.html
+++ b/routes/_components/status/StatusMediaAttachments.html
@@ -7,7 +7,7 @@
           aria-label="Hide sensitive media"
           delegate-key="{{delegateKey}}" >
     <div class="svg-wrapper">
-      <svg>
+      <svg class="status-sensitive-media-svg">
         <use xlink:href="#fa-eye-slash" />
       </svg>
     </div>
@@ -23,7 +23,7 @@
         <span>Sensitive content. Click to show.</span>
       </div>
       <div class="svg-wrapper">
-        <svg>
+        <svg class="status-sensitive-media-svg">
           <use xlink:href="#fa-eye" />
         </svg>
       </div>
@@ -109,7 +109,7 @@
   .status-sensitive-media-container.status-sensitive-media-shown .svg-wrapper {
     background: none;
   }
-  .status-sensitive-media-container svg {
+  .status-sensitive-media-svg {
     width: 24px;
     height: 24px;
     fill: var(--mask-svg-fill);
@@ -118,7 +118,7 @@
     margin: 1px;
     padding: 6px 10px;
   }
-  .status-sensitive-media-container.status-sensitive-media-hidden svg {
+  .status-sensitive-media-container.status-sensitive-media-hidden .status-sensitive-media-svg {
     fill: var(--deemphasized-text-color);
     background: var(--mask-opaque-bg);
   }