[Glitch] Use `<use />` to render transparent SVG logo instead of inserting it

Port SCSS changes from c5234ac2aa to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>

app/javascript/flavours/glitch/styles/containers.scss

@@ -361,10 +361,6 @@
 
       .logo-button {
         background-color: $secondary-text-color;
-
-        svg path:last-child {
-          fill: $secondary-text-color;
-        }
       }
     }
 

app/javascript/flavours/glitch/styles/footer.scss

@@ -122,10 +122,7 @@
         height: 36px;
         width: auto;
         margin: 0 auto;
-
+        fill: lighten($ui-base-color, 34%);
-        path {
-          fill: lighten($ui-base-color, 34%);
-        }
       }
 
       &:hover,

app/javascript/flavours/glitch/styles/mastodon-light/diff.scss

@@ -320,7 +320,7 @@
 .button.logo-button {
   color: $white;
 
-  svg path:first-child {
+  svg {
     fill: $white;
   }
 }

app/javascript/flavours/glitch/styles/stream_entries.scss

@@ -89,40 +89,21 @@
     height: auto;
     vertical-align: middle;
     margin-right: 5px;
-
+    fill: $primary-text-color;
-    path:first-child {
-      fill: $primary-text-color;
-    }
-
-    path:last-child {
-      fill: $ui-highlight-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;
-      }
     }
   }