Change full logo to use primary text color of the given theme (#10994)

* Change full logo to use primary text color of the given theme

* Fix colors of public layout header in light theme

3 files changed, 9 insertions, 15 deletions

diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 21b762182..b6c95fe6a 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -531,23 +531,14 @@ html {
   }
 
   .header {
-    background: lighten($ui-base-color, 24%);
-
-    .nav-link {
-      color: $white;
-
-      &:hover,
-      &:focus,
-      &:active {
-        color: $white;
-      }
-    }
+    background: $ui-base-color;
+    border: 1px solid lighten($ui-base-color, 8%);
 
     .brand {
       &:hover,
       &:focus,
       &:active {
-        background: lighten($ui-base-color, 28%);
+        background: lighten($ui-base-color, 4%);
       }
     }
   }
diff --git a/app/javascript/styles/mastodon/about.scss b/app/javascript/styles/mastodon/about.scss
index d3b4a5909..61637ce96 100644
--- a/app/javascript/styles/mastodon/about.scss
+++ b/app/javascript/styles/mastodon/about.scss
@@ -659,7 +659,8 @@ $small-breakpoint: 960px;
     align-items: center;
     padding: 50px;
 
-    img {
+    svg {
+      fill: $primary-text-color;
       height: 52px;
     }
 
diff --git a/app/javascript/styles/mastodon/containers.scss b/app/javascript/styles/mastodon/containers.scss
index 2d68d2b70..3564bf07b 100644
--- a/app/javascript/styles/mastodon/containers.scss
+++ b/app/javascript/styles/mastodon/containers.scss
@@ -21,7 +21,8 @@
     justify-content: center;
     align-items: center;
 
-    img {
+    svg {
+      fill: $primary-text-color;
       height: 42px;
       margin-right: 10px;
     }
@@ -256,12 +257,13 @@
       display: block;
       padding: 15px;
 
-      img {
+      svg {
         display: block;
         height: 18px;
         width: auto;
         position: relative;
         bottom: -2px;
+        fill: $primary-text-color;
 
         @media screen and (max-width: $no-gap-breakpoint) {
           height: 20px;