Use `<use />` to render transparent SVG logo instead of inserting it (#10845)

4 files changed, 3 insertions, 33 deletions

diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 48236a286..d35a59821 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -306,7 +306,7 @@
 .button.logo-button {
   color: $white;
 
-  svg path:first-child {
+  svg {
     fill: $white;
   }
 }
diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index 368c2304b..0eae4939f 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -359,10 +359,6 @@
 
       .logo-button {
         background-color: $secondary-text-color;
-
-        svg path:last-child {
-          fill: $secondary-text-color;
-        }
       }
     }
 
diff --git a/app/javascript/styles/mastodon/footer.scss b/app/javascript/styles/mastodon/footer.scss
index 4d75477e0..f74c004e9 100644
--- a/app/javascript/styles/mastodon/footer.scss
+++ b/app/javascript/styles/mastodon/footer.scss
@@ -122,10 +122,7 @@
         height: 36px;
         width: auto;
         margin: 0 auto;
-
-        path {
-          fill: lighten($ui-base-color, 34%);
-        }
+        fill: lighten($ui-base-color, 34%);
       }
 
       &:hover,
diff --git a/app/javascript/styles/mastodon/stream_entries.scss b/app/javascript/styles/mastodon/stream_entries.scss
index 63eeffe25..bfbb907e0 100644
--- a/app/javascript/styles/mastodon/stream_entries.scss
+++ b/app/javascript/styles/mastodon/stream_entries.scss
@@ -89,40 +89,21 @@
     height: auto;
     vertical-align: middle;
     margin-right: 5px;
-
-    path:first-child {
-      fill: $primary-text-color;
-    }
-
-    path:last-child {
-      fill: $ui-highlight-color;
-    }
+    fill: $primary-text-color;
   }
 
   &:active,
   &:focus,
   &:hover {
     background: lighten($ui-highlight-color, 10%);
-
-    svg path:last-child {
-      fill: lighten($ui-highlight-color, 10%);
-    }
   }
 
   &:disabled,
   &.disabled {
-    svg path:last-child {
-      fill: $ui-primary-color;
-    }
-
     &:active,
     &:focus,
     &:hover {
       background: $ui-primary-color;
-
-      svg path:last-child {
-        fill: $ui-primary-color;
-      }
     }
   }
 
@@ -131,10 +112,6 @@
     &:focus,
     &:hover {
       background: $error-red;
-
-      svg path:last-child {
-        fill: $error-red;
-      }
     }
   }