From 20dda5cca0a4015a743250b4e584a3101e7675f2 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 8 Jun 2019 15:30:06 +0200 Subject: [PATCH] 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 --- app/helpers/stream_entries_helper.rb | 4 ++++ app/javascript/images/logo_full.svg | 2 +- app/javascript/styles/mastodon-light/diff.scss | 15 +++------------ app/javascript/styles/mastodon/about.scss | 3 ++- app/javascript/styles/mastodon/containers.scss | 6 ++++-- app/views/about/show.html.haml | 2 +- app/views/layouts/application.html.haml | 1 + app/views/layouts/auth.html.haml | 2 +- app/views/layouts/public.html.haml | 2 +- 9 files changed, 18 insertions(+), 19 deletions(-) diff --git a/app/helpers/stream_entries_helper.rb b/app/helpers/stream_entries_helper.rb index a66fb83ea4..02a860a748 100644 --- a/app/helpers/stream_entries_helper.rb +++ b/app/helpers/stream_entries_helper.rb @@ -38,6 +38,10 @@ module StreamEntriesHelper 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) if account.bot? content_tag(:div, content_tag(:div, t('accounts.roles.bot'), class: 'account-role bot'), class: 'roles') diff --git a/app/javascript/images/logo_full.svg b/app/javascript/images/logo_full.svg index c33883342d..03bcf93e39 100644 --- a/app/javascript/images/logo_full.svg +++ b/app/javascript/images/logo_full.svg @@ -1 +1 @@ - + diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss index 21b7621822..b6c95fe6a1 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 d3b4a59098..61637ce967 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 2d68d2b706..3564bf07b4 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; diff --git a/app/views/about/show.html.haml b/app/views/about/show.html.haml index 45e5f0717b..f24f4e1957 100644 --- 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 index 220a4ca9bd..747d80bf02 100755 --- 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 index aa1990972a..585e246557 100644 --- 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 index ee34936d67..2929ac599c 100644 --- 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'