Change full logo to use primary text color of the given theme (mastod…

…on#10994) * Change full logo to use primary text color of the given theme * Fix colors of public layout header in light theme
ProjectMyosotis · Oct 2, 2019 · 73444bc · 73444bc
1 parent e68df72
commit 73444bc
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 19 deletions.
diff --git a/app/helpers/stream_entries_helper.rb b/app/helpers/stream_entries_helper.rb
@@ -38,6 +38,10 @@ def svg_logo
     content_tag(:svg, tag(:use, 'xlink:href' => '#mastodon-svg-logo'), 'viewBox' => '0 0 216.4144 232.00976')
   end
 
+  def svg_logo_full
+    content_tag(:svg, tag(:use, 'xlink:href' => '#mastodon-svg-logo-full'), 'viewBox' => '0 0 713.35878 175.8678')
+  end
+
   def account_badge(account, all: false)
     roles = []
 

diff --git a/app/javascript/images/logo_full.svg b/app/javascript/images/logo_full.svg
diff --git 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
@@ -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
@@ -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;

diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml
@@ -8,7 +8,7 @@
 .landing
   .landing__brand
     = link_to root_url, class: 'brand' do
-      = image_pack_tag 'logo_full.svg', alt: 'Mastodon'
+      = svg_logo_full
       %span.brand__tagline=t 'about.tagline'
 
   .landing__grid

diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
@@ -36,3 +36,4 @@
 
     %div{ style: 'display: none'}
       = render file: Rails.root.join('app', 'javascript', 'images', 'logo_transparent.svg')
+      = render file: Rails.root.join('app', 'javascript', 'images', 'logo_full.svg')
diff --git a/app/views/layouts/auth.html.haml b/app/views/layouts/auth.html.haml
@@ -6,7 +6,7 @@
     .logo-container
       %h1
         = link_to root_path do
-          = image_pack_tag 'logo_full.svg', alt: 'Mastodon'
+          = svg_logo_full
 
     .form-container
       = render 'flashes'

diff --git a/app/views/layouts/public.html.haml b/app/views/layouts/public.html.haml
@@ -8,7 +8,7 @@
         %nav.header
           .nav-left
             = link_to root_url, class: 'brand' do
-              = image_pack_tag 'logo_full.svg', alt: 'Mastodon'
+              = svg_logo_full
 
             = link_to t('directories.directory'), explore_path, class: 'nav-link optional' if Setting.profile_directory
             = link_to t('about.about_this'), about_more_path, class: 'nav-link optional'