From 45aa5781ce611ea411e34e3b18358a9fe15f67ce Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 9 Jun 2022 22:25:23 +0200 Subject: Change brand color and logotypes (#18592) - Add rake task for generating Apple/Android icons and favicons from SVG - Add rake task for generating PNG icons and logos for e-mails from SVG - Remove obsolete Microsoft icons and configuration - Remove PWA shortcut icons --- lib/assets/wordmark.dark.css | 1 + lib/assets/wordmark.dark.png | Bin 0 -> 8942 bytes lib/assets/wordmark.light.css | 1 + lib/assets/wordmark.light.png | Bin 0 -> 8576 bytes lib/tasks/branding.rake | 78 ++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 80 insertions(+) create mode 100644 lib/assets/wordmark.dark.css create mode 100644 lib/assets/wordmark.dark.png create mode 100644 lib/assets/wordmark.light.css create mode 100644 lib/assets/wordmark.light.png create mode 100644 lib/tasks/branding.rake (limited to 'lib') diff --git a/lib/assets/wordmark.dark.css b/lib/assets/wordmark.dark.css new file mode 100644 index 000000000..d87069178 --- /dev/null +++ b/lib/assets/wordmark.dark.css @@ -0,0 +1 @@ +// Not needed diff --git a/lib/assets/wordmark.dark.png b/lib/assets/wordmark.dark.png new file mode 100644 index 000000000..f3d714d3a Binary files /dev/null and b/lib/assets/wordmark.dark.png differ diff --git a/lib/assets/wordmark.light.css b/lib/assets/wordmark.light.css new file mode 100644 index 000000000..9a601f972 --- /dev/null +++ b/lib/assets/wordmark.light.css @@ -0,0 +1 @@ +use { color: #000 !important; } diff --git a/lib/assets/wordmark.light.png b/lib/assets/wordmark.light.png new file mode 100644 index 000000000..50bbb6bd3 Binary files /dev/null and b/lib/assets/wordmark.light.png differ diff --git a/lib/tasks/branding.rake b/lib/tasks/branding.rake new file mode 100644 index 000000000..d513465ed --- /dev/null +++ b/lib/tasks/branding.rake @@ -0,0 +1,78 @@ +namespace :branding do + desc 'Generate necessary graphic assets for branding from source SVG files' + task generate: :environment do + Rake::Task['branding:generate_app_icons'].invoke + Rake::Task['branding:generate_app_badge'].invoke + Rake::Task['branding:generate_github_assets'].invoke + Rake::Task['branding:generate_mailer_assets'].invoke + end + + desc 'Generate PNG icons and logos for e-mail templates' + task generate_mailer_assets: :environment do + rsvg_convert = Terrapin::CommandLine.new('rsvg-convert', '-w :w -h :h :input -o :output') + output_dest = Rails.root.join('app', 'javascript', 'images', 'mailer') + + # Displayed size is 64px, at 3x it's 192px + Dir[Rails.root.join('app', 'javascript', 'images', 'icons', '*.svg')].each do |path| + rsvg_convert.run(input: path, w: 192, h: 192, output: output_dest.join("#{File.basename(path, '.svg')}.png")) + end + + # Displayed size is 34px, at 3x it's 102px + rsvg_convert.run(input: Rails.root.join('app', 'javascript', 'images', 'logo-symbol-wordmark.svg'), w: (102 * (261.0 / 66)).ceil, h: 102, output: output_dest.join('wordmark.png')) + + # Displayed size is 24px, at 3x it's 72px + rsvg_convert.run(input: Rails.root.join('app', 'javascript', 'images', 'logo-symbol-icon.svg'), w: (72 * (79.0 / 75)).ceil, h: 72, output: output_dest.join('logo.png')) + end + + desc 'Generate light/dark logotypes for GitHub' + task generate_github_assets: :environment do + rsvg_convert = Terrapin::CommandLine.new('rsvg-convert', '--stylesheet :stylesheet -w :w -h :h :input -o :output') + output_dest = Rails.root.join('lib', 'assets') + + rsvg_convert.run(stylesheet: Rails.root.join('lib', 'assets', 'wordmark.dark.css'), input: Rails.root.join('app', 'javascript', 'images', 'logo-symbol-wordmark.svg'), w: (102 * (261.0 / 66)).ceil, h: 102, output: output_dest.join('wordmark.dark.png')) + rsvg_convert.run(stylesheet: Rails.root.join('lib', 'assets', 'wordmark.light.css'), input: Rails.root.join('app', 'javascript', 'images', 'logo-symbol-wordmark.svg'), w: (102 * (261.0 / 66)).ceil, h: 102, output: output_dest.join('wordmark.light.png')) + end + + desc 'Generate favicons and app icons from SVG source files' + task generate_app_icons: :environment do + favicon_source = Rails.root.join('app', 'javascript', 'images', 'logo.svg') + app_icon_source = Rails.root.join('app', 'javascript', 'images', 'app-icon.svg') + output_dest = Rails.root.join('app', 'javascript', 'icons') + + rsvg_convert = Terrapin::CommandLine.new('rsvg-convert', '-w :size -h :size :input -o :output') + convert = Terrapin::CommandLine.new('convert', ':input :output') + + favicon_sizes = [16, 32, 48] + apple_icon_sizes = [57, 60, 72, 76, 114, 120, 144, 152, 167, 180, 1024] + android_icon_sizes = [36, 48, 72, 96, 144, 192, 256, 384, 512] + + favicons = [] + + favicon_sizes.each do |size| + output_path = output_dest.join("favicon-#{size}x#{size}.png") + favicons << output_path + rsvg_convert.run(size: size, input: favicon_source, output: output_path) + end + + convert.run(input: favicons, output: Rails.root.join('public', 'favicon.ico')) + + apple_icon_sizes.each do |size| + rsvg_convert.run(size: size, input: app_icon_source, output: output_dest.join("apple-touch-icon-#{size}x#{size}.png")) + end + + android_icon_sizes.each do |size| + rsvg_convert.run(size: size, input: app_icon_source, output: output_dest.join("android-chrome-#{size}x#{size}.png")) + end + end + + desc 'Generate badge icon from SVG source files' + task generate_app_badge: :environment do + rsvg_convert = Terrapin::CommandLine.new('rsvg-convert', '--stylesheet :stylesheet -w :w -h :h :input -o :output') + badge_source = Rails.root.join('app', 'javascript', 'images', 'logo-symbol-icon.svg') + source_ratio = 79.0 / 75 + output_dest = Rails.root.join('public') + stylesheet = Rails.root.join('lib', 'assets', 'wordmark.light.css') + + rsvg_convert.run(stylesheet: stylesheet, input: badge_source, w: (192 * source_ratio).ceil, h: 192, output: output_dest.join('badge.png')) + end +end -- cgit From fe2d6fe1057677a1060fe1d882aac744456deff4 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sat, 11 Jun 2022 20:32:02 +0200 Subject: Fix wrong aspect ratio of logo in icons (#18639) --- app/helpers/branding_helper.rb | 2 +- app/javascript/icons/favicon-16x16.png | Bin 650 -> 639 bytes app/javascript/icons/favicon-32x32.png | Bin 1248 -> 1250 bytes app/javascript/icons/favicon-48x48.png | Bin 1798 -> 1899 bytes app/javascript/images/logo-symbol-icon.svg | 2 +- app/javascript/images/logo.svg | 2 +- app/javascript/images/mailer/logo.png | Bin 1745 -> 1673 bytes app/javascript/images/mailer/wordmark.png | Bin 8942 -> 8991 bytes lib/assets/wordmark.dark.png | Bin 8942 -> 8991 bytes lib/assets/wordmark.light.png | Bin 8576 -> 8625 bytes lib/tasks/branding.rake | 21 ++++++++++----------- public/badge.png | Bin 4248 -> 4058 bytes public/favicon.ico | Bin 15086 -> 15086 bytes 13 files changed, 13 insertions(+), 14 deletions(-) (limited to 'lib') diff --git a/app/helpers/branding_helper.rb b/app/helpers/branding_helper.rb index c91661e56..ad7702aea 100644 --- a/app/helpers/branding_helper.rb +++ b/app/helpers/branding_helper.rb @@ -15,7 +15,7 @@ module BrandingHelper end def _logo_as_symbol_icon - content_tag(:svg, tag(:use, href: '#logo-symbol-icon'), viewBox: '0 0 79 75', class: 'logo logo--icon') + content_tag(:svg, tag(:use, href: '#logo-symbol-icon'), viewBox: '0 0 79 79', class: 'logo logo--icon') end def render_logo diff --git a/app/javascript/icons/favicon-16x16.png b/app/javascript/icons/favicon-16x16.png index e7037f4cf..33ef3bb8c 100644 Binary files a/app/javascript/icons/favicon-16x16.png and b/app/javascript/icons/favicon-16x16.png differ diff --git a/app/javascript/icons/favicon-32x32.png b/app/javascript/icons/favicon-32x32.png index a91b02463..7b9a37403 100644 Binary files a/app/javascript/icons/favicon-32x32.png and b/app/javascript/icons/favicon-32x32.png differ diff --git a/app/javascript/icons/favicon-48x48.png b/app/javascript/icons/favicon-48x48.png index d3721fbdd..5b35eb233 100644 Binary files a/app/javascript/icons/favicon-48x48.png and b/app/javascript/icons/favicon-48x48.png differ diff --git a/app/javascript/images/logo-symbol-icon.svg b/app/javascript/images/logo-symbol-icon.svg index 12f4e078e..56cf03921 100644 --- a/app/javascript/images/logo-symbol-icon.svg +++ b/app/javascript/images/logo-symbol-icon.svg @@ -1,2 +1,2 @@ - + diff --git a/app/javascript/images/logo.svg b/app/javascript/images/logo.svg index 6ffc988e5..11d0c30c5 100644 --- a/app/javascript/images/logo.svg +++ b/app/javascript/images/logo.svg @@ -1,4 +1,4 @@ - + diff --git a/app/javascript/images/mailer/logo.png b/app/javascript/images/mailer/logo.png index 54c8afd6a..77d0ef849 100644 Binary files a/app/javascript/images/mailer/logo.png and b/app/javascript/images/mailer/logo.png differ diff --git a/app/javascript/images/mailer/wordmark.png b/app/javascript/images/mailer/wordmark.png index f3d714d3a..defe50178 100644 Binary files a/app/javascript/images/mailer/wordmark.png and b/app/javascript/images/mailer/wordmark.png differ diff --git a/lib/assets/wordmark.dark.png b/lib/assets/wordmark.dark.png index f3d714d3a..defe50178 100644 Binary files a/lib/assets/wordmark.dark.png and b/lib/assets/wordmark.dark.png differ diff --git a/lib/assets/wordmark.light.png b/lib/assets/wordmark.light.png index 50bbb6bd3..d4485c0fb 100644 Binary files a/lib/assets/wordmark.light.png and b/lib/assets/wordmark.light.png differ diff --git a/lib/tasks/branding.rake b/lib/tasks/branding.rake index d513465ed..2eec7c9e1 100644 --- a/lib/tasks/branding.rake +++ b/lib/tasks/branding.rake @@ -9,28 +9,28 @@ namespace :branding do desc 'Generate PNG icons and logos for e-mail templates' task generate_mailer_assets: :environment do - rsvg_convert = Terrapin::CommandLine.new('rsvg-convert', '-w :w -h :h :input -o :output') + rsvg_convert = Terrapin::CommandLine.new('rsvg-convert', '-h :size --keep-aspect-ratio :input -o :output') output_dest = Rails.root.join('app', 'javascript', 'images', 'mailer') # Displayed size is 64px, at 3x it's 192px Dir[Rails.root.join('app', 'javascript', 'images', 'icons', '*.svg')].each do |path| - rsvg_convert.run(input: path, w: 192, h: 192, output: output_dest.join("#{File.basename(path, '.svg')}.png")) + rsvg_convert.run(input: path, size: 192, output: output_dest.join("#{File.basename(path, '.svg')}.png")) end # Displayed size is 34px, at 3x it's 102px - rsvg_convert.run(input: Rails.root.join('app', 'javascript', 'images', 'logo-symbol-wordmark.svg'), w: (102 * (261.0 / 66)).ceil, h: 102, output: output_dest.join('wordmark.png')) + rsvg_convert.run(input: Rails.root.join('app', 'javascript', 'images', 'logo-symbol-wordmark.svg'), size: 102, output: output_dest.join('wordmark.png')) # Displayed size is 24px, at 3x it's 72px - rsvg_convert.run(input: Rails.root.join('app', 'javascript', 'images', 'logo-symbol-icon.svg'), w: (72 * (79.0 / 75)).ceil, h: 72, output: output_dest.join('logo.png')) + rsvg_convert.run(input: Rails.root.join('app', 'javascript', 'images', 'logo-symbol-icon.svg'), size: 72, output: output_dest.join('logo.png')) end desc 'Generate light/dark logotypes for GitHub' task generate_github_assets: :environment do - rsvg_convert = Terrapin::CommandLine.new('rsvg-convert', '--stylesheet :stylesheet -w :w -h :h :input -o :output') + rsvg_convert = Terrapin::CommandLine.new('rsvg-convert', '--stylesheet :stylesheet -h :size --keep-aspect-ratio :input -o :output') output_dest = Rails.root.join('lib', 'assets') - rsvg_convert.run(stylesheet: Rails.root.join('lib', 'assets', 'wordmark.dark.css'), input: Rails.root.join('app', 'javascript', 'images', 'logo-symbol-wordmark.svg'), w: (102 * (261.0 / 66)).ceil, h: 102, output: output_dest.join('wordmark.dark.png')) - rsvg_convert.run(stylesheet: Rails.root.join('lib', 'assets', 'wordmark.light.css'), input: Rails.root.join('app', 'javascript', 'images', 'logo-symbol-wordmark.svg'), w: (102 * (261.0 / 66)).ceil, h: 102, output: output_dest.join('wordmark.light.png')) + rsvg_convert.run(stylesheet: Rails.root.join('lib', 'assets', 'wordmark.dark.css'), input: Rails.root.join('app', 'javascript', 'images', 'logo-symbol-wordmark.svg'), size: 102, output: output_dest.join('wordmark.dark.png')) + rsvg_convert.run(stylesheet: Rails.root.join('lib', 'assets', 'wordmark.light.css'), input: Rails.root.join('app', 'javascript', 'images', 'logo-symbol-wordmark.svg'), size: 102, output: output_dest.join('wordmark.light.png')) end desc 'Generate favicons and app icons from SVG source files' @@ -39,7 +39,7 @@ namespace :branding do app_icon_source = Rails.root.join('app', 'javascript', 'images', 'app-icon.svg') output_dest = Rails.root.join('app', 'javascript', 'icons') - rsvg_convert = Terrapin::CommandLine.new('rsvg-convert', '-w :size -h :size :input -o :output') + rsvg_convert = Terrapin::CommandLine.new('rsvg-convert', '-w :size -h :size --keep-aspect-ratio :input -o :output') convert = Terrapin::CommandLine.new('convert', ':input :output') favicon_sizes = [16, 32, 48] @@ -67,12 +67,11 @@ namespace :branding do desc 'Generate badge icon from SVG source files' task generate_app_badge: :environment do - rsvg_convert = Terrapin::CommandLine.new('rsvg-convert', '--stylesheet :stylesheet -w :w -h :h :input -o :output') + rsvg_convert = Terrapin::CommandLine.new('rsvg-convert', '--stylesheet :stylesheet -w :size -h :size --keep-aspect-ratio :input -o :output') badge_source = Rails.root.join('app', 'javascript', 'images', 'logo-symbol-icon.svg') - source_ratio = 79.0 / 75 output_dest = Rails.root.join('public') stylesheet = Rails.root.join('lib', 'assets', 'wordmark.light.css') - rsvg_convert.run(stylesheet: stylesheet, input: badge_source, w: (192 * source_ratio).ceil, h: 192, output: output_dest.join('badge.png')) + rsvg_convert.run(stylesheet: stylesheet, input: badge_source, size: 192, output: output_dest.join('badge.png')) end end diff --git a/public/badge.png b/public/badge.png index 0449e9292..bd618c729 100644 Binary files a/public/badge.png and b/public/badge.png differ diff --git a/public/favicon.ico b/public/favicon.ico index ccccbfc1c..b09a98bb9 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ -- cgit