From f2385d4ff7a017e8337fc5c0e17d66b002f06af4 Mon Sep 17 00:00:00 2001
From: Bear <programming@hallhome.us>
Date: Sun, 8 Nov 2020 03:08:52 -0600
Subject: [PATCH] [4.0] installer header (#31310)

* fix installer header

* color styling request by chmst
---
 .../Joomla-brandmark-monochrome-white-RGB.svg      |  1 +
 .../Joomla-logo-monochrome-horizontal-white.svg    |  1 +
 installation/template/images/logo-blue.svg         |  2 +-
 installation/template/index.php                    | 12 ++++++------
 installation/template/scss/template.scss           | 14 ++++++++++++--
 5 files changed, 21 insertions(+), 9 deletions(-)
 create mode 100644 installation/template/images/Joomla-brandmark-monochrome-white-RGB.svg
 create mode 100644 installation/template/images/Joomla-logo-monochrome-horizontal-white.svg

diff --git a/installation/template/images/Joomla-brandmark-monochrome-white-RGB.svg b/installation/template/images/Joomla-brandmark-monochrome-white-RGB.svg
new file mode 100644
index 00000000000..62d0fbe36be
--- /dev/null
+++ b/installation/template/images/Joomla-brandmark-monochrome-white-RGB.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 224.1 224.7"><path d="M178.6 79.6v.4h-1.3v3.5h-.5V80h-1.3v-.5h3.1zm.5 0h.8l1.1 3.3 1.1-3.3h.8v3.9h-.5v-3.3l-1.1 3.3h-.5l-1.1-3.3v3.2h-.5v-3.8z" fill="#FFF"/><g fill="#FFF"><path d="M64.2 113l-2.9-2.9c-8.9-8.9-11.7-21.7-8.3-33-8.9-2-15.6-10-15.6-19.5 0-11.1 9-20 20-20 10 0 18.2 7.3 19.8 16.8 10.8-2.5 22.6.4 31.1 8.8l1.2 1.2-14.9 14.7-1.1-1.1c-4.8-4.8-12.6-4.8-17.4 0-4.8 4.8-4.8 12.6 0 17.4l2.9 2.9L93.8 113l15.6 15.6-14.8 14.8L79 127.8 64.2 113z"/><path d="M80.7 96.5l15.7-15.6 14.8-14.8 2.9-2.9c8.9-8.9 21.6-11.7 32.8-8.4 1.3-9.8 9.7-17.3 19.8-17.3 11.1 0 20 9 20 20 0 10.2-7.6 18.6-17.4 19.9 3.2 11.2.4 23.8-8.4 32.7l-1.2 1.2L145 96.5l1.1-1.1c4.8-4.8 4.8-12.6 0-17.4-4.8-4.8-12.5-4.8-17.4 0l-2.9 2.9L111 95.7l-15.6 15.6-14.7-14.8z"/><path d="M147.3 171.1c-11.4 3.5-24.2.7-33.2-8.3l-1.1-1.1 14.8-14.8 1.1 1.1c4.8 4.8 12.6 4.8 17.4 0 4.8-4.8 4.8-12.5 0-17.4l-2.9-2.9-14.9-14.7-15.6-15.6 14.8-14.8 15.6 15.6 14.8 14.8 2.9 2.9c8.5 8.5 11.4 20.5 8.8 31.3 9.7 1.4 17.2 9.7 17.2 19.8 0 11.1-9 20-20 20-9.8.1-17.8-6.8-19.7-15.9z"/><path d="M141.5 129.6l-15.6 15.6-14.7 14.8-2.9 2.9c-8.5 8.5-20.6 11.4-31.5 8.7-2 8.9-10 15.5-19.5 15.5-11.1 0-20-9-20-20 0-9.5 6.6-17.4 15.4-19.5-2.8-11 .1-23.1 8.7-31.7l1.1-1.1 14.8 14.8-1.1 1.1c-4.8 4.8-4.8 12.6 0 17.4 4.8 4.8 12.6 4.8 17.4 0l2.9-2.9 14.8-14.8 15.6-15.6 14.6 14.8z"/></g></svg>
\ No newline at end of file
diff --git a/installation/template/images/Joomla-logo-monochrome-horizontal-white.svg b/installation/template/images/Joomla-logo-monochrome-horizontal-white.svg
new file mode 100644
index 00000000000..352b67c7ada
--- /dev/null
+++ b/installation/template/images/Joomla-logo-monochrome-horizontal-white.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 376.3 74.8" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="M116.4 14.8v31.3c0 2.8.2 5.4-2.3 7.3-2.3 1.9-6.2 2.5-10.4 2.5-6.4 0-13.2-1.5-13.2-1.5l-1.5 4s9.5 2 16.4 2.1c5.8.1 10.9-1.2 13.7-4.4 2.3-2.6 3-5.6 2.9-10.7V14.8h-5.6M163.1 32.1c-4.2-2.3-9.3-3.5-15.1-3.5-5.7 0-10.8 1.2-15.1 3.5-5.4 2.9-8.1 7.2-8.1 12.6s2.7 9.7 8.1 12.6c4.3 2.3 9.3 3.5 15.1 3.5 5.7 0 10.8-1.2 15-3.5 5.4-2.9 8.1-7.2 8.1-12.6.1-5.5-2.7-9.7-8-12.6m-3.3 22c-3.3 1.9-7.2 2.8-11.8 2.8-4.7 0-8.7-.9-11.9-2.7-3.9-2.2-5.8-5.3-5.8-9.5 0-4.1 2-7.3 5.8-9.5 3.2-1.8 7.2-2.7 11.9-2.7 4.6 0 8.6.9 11.9 2.7 3.8 2.2 5.8 5.4 5.8 9.5 0 4-2 7.2-5.9 9.4zM212.3 32.1c-4.2-2.3-9.3-3.5-15.1-3.5-5.7 0-10.8 1.2-15.1 3.5-5.4 2.9-8.1 7.2-8.1 12.6s2.7 9.7 8.1 12.6c4.3 2.3 9.3 3.5 15.1 3.5 5.7 0 10.8-1.2 15-3.5 5.4-2.9 8.1-7.2 8.1-12.6.1-5.5-2.6-9.7-8-12.6m-3.2 22c-3.3 1.9-7.2 2.8-11.8 2.8-4.7 0-8.7-.9-11.9-2.7-3.9-2.2-5.8-5.3-5.8-9.5 0-4.1 2-7.3 5.8-9.5 3.2-1.8 7.2-2.7 11.9-2.7 4.6 0 8.6.9 11.9 2.7 3.8 2.2 5.8 5.4 5.8 9.5-.1 4-2.1 7.2-5.9 9.4zM280.2 31.3c-3-1.8-6.9-2.7-11.5-2.7-5.9 0-10.6 1.8-14.2 5.4-3.4-3.6-8.2-5.4-14.1-5.4-4.8 0-8.7 1-11.7 2.9V29h-5.3v31.1h5.3V38.9c.4-1.5 1.4-2.9 3-4.1 2.2-1.5 5-2.3 8.5-2.3 3.1 0 5.7.6 7.9 1.9 2.6 1.5 3.8 3.5 3.8 6.3v19.6h5.2V40.6c0-2.8 1.2-4.8 3.8-6.3 2.2-1.2 4.9-1.9 8-1.9s5.8.6 8 1.9c2.6 1.5 3.8 3.5 3.8 6.3v19.6h5.3V41.3c-.1-4.4-2-7.8-5.8-10M290.2 14.8v45.4h5.3V14.8h-5.3M354.5 14.8v35.1h5.3V14.8h-5.3M340.7 29v5.3c-4.5-3.8-10.5-5.8-17.9-5.8-5.9 0-11 1.1-15.2 3.4-5.2 2.9-7.9 7.1-7.9 12.7 0 5.5 2.7 9.8 8.1 12.6 4.2 2.3 9.3 3.4 15.2 3.4 2.9 0 5.8-.3 8.4-1 3.7-1 6.8-2.4 9.2-4.3v4.8h5.3V29h-5.2m-35.5 15.7c0-4.1 2-7.3 5.8-9.5 3.2-1.8 7.3-2.7 12-2.7 5.8 0 10.3 1.4 13.5 4.2 2.8 2.5 4.2 5.7 4.2 9.6V50c-2.2 2.5-5.5 4.4-9.7 5.7-2.5.8-5.2 1.2-8 1.2-4.8 0-8.8-.9-12-2.6-3.9-2.3-5.8-5.4-5.8-9.6zM357.2 54.3c-3.7 0-4.2 1.9-4.2 3.1s.6 3.1 4.2 3.1c3.7 0 4.2-2 4.2-3.1s-.5-3.1-4.2-3.1zM376.3 20.4c0 3.1-2 5.7-5.6 5.7s-5.6-2.6-5.6-5.7 2-5.7 5.6-5.7 5.6 2.6 5.6 5.7zm-10 0c0 2.6 1.6 4.6 4.4 4.6s4.4-2 4.4-4.6-1.6-4.6-4.4-4.6-4.4 2-4.4 4.6zm5.5.7c2.2-.4 2-3.7-.5-3.7h-2.7v5.8h1.1v-2h1l1.6 2h1.2V23l-1.7-1.9zm-.6-2.7c1.3 0 1.3 1.9 0 1.9h-1.6v-1.9h1.6z"/></g><g fill="#fff"><path d="M13.5 37.7L12 36.3c-4.5-4.5-5.8-10.8-4.2-16.5-4.5-1-7.8-5-7.8-9.8C0 4.5 4.5 0 10 0c5 0 9.1 3.6 9.9 8.4 5.4-1.3 11.3.2 15.5 4.4l.6.6-7.4 7.4-.6-.6c-2.4-2.4-6.3-2.4-8.7 0s-2.4 6.3 0 8.7l1.4 1.4 7.4 7.4 7.8 7.8-7.4 7.4-7.8-7.8-7.2-7.4z"/><path d="M21.8 29.5l7.8-7.8 7.4-7.4 1.4-1.4C42.9 8.4 49.2 7 54.8 8.6c.7-4.8 4.9-8.6 10-8.6 5.5 0 10 4.5 10 10 0 5.1-3.8 9.3-8.7 9.9 1.6 5.6.2 11.9-4.2 16.3l-.6.6-7.4-7.4.6-.6c2.4-2.4 2.4-6.3 0-8.7s-6.3-2.4-8.7 0l-1.4 1.4L37 29l-7.8 7.8-7.4-7.3z"/><path d="M55 66.8c-5.7 1.7-12.1.4-16.6-4.1l-.6-.6 7.4-7.4.6.6c2.4 2.4 6.3 2.4 8.7 0s2.4-6.3 0-8.7L53 45.1l-7.4-7.4-7.8-7.8 7.4-7.4 7.8 7.8 7.4 7.4 1.5 1.5c4.2 4.2 5.7 10.2 4.4 15.7 4.9.7 8.6 4.9 8.6 9.9 0 5.5-4.5 10-10 10-4.9 0-8.9-3.5-9.9-8z"/><path d="M52.2 46l-7.8 7.8-7.4 7.4-1.4 1.4c-4.3 4.3-10.3 5.7-15.7 4.4-1 4.5-5 7.8-9.8 7.8-5.5 0-10-4.5-10-10C0 60 3.3 56.1 7.7 55c-1.4-5.5.1-11.5 4.3-15.8l.6-.6L20 46l-.6.6c-2.4 2.4-2.4 6.3 0 8.7s6.3 2.4 8.7 0l1.4-1.4 7.4-7.4 7.8-7.8 7.5 7.3z"/></g></svg>
diff --git a/installation/template/images/logo-blue.svg b/installation/template/images/logo-blue.svg
index 73302ed3de2..526346860b6 100644
--- a/installation/template/images/logo-blue.svg
+++ b/installation/template/images/logo-blue.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 149.7 149.6" width="20px" height="20px"><path fill="#28466a" d="M141.4 42v.5H140V46h-.5v-3.5h-1.3V42h3.2z"/><path fill="#28466a" d="M141.8 42h.8l1.1 3.3 1.1-3.3h.8v3.9h-.5v-2.3-.4-.6l-1.1 3.3h-.5l-1.1-3.3V45.8h-.5V42z"/><g><path d="M27 75.5l-2.9-2.9c-8.9-8.9-11.7-21.7-8.3-33C6.9 37.6.2 29.6.2 20.1c0-11.1 9-20 20-20 10 0 18.2 7.3 19.8 16.8 10.8-2.5 22.6.4 31.1 8.8l1.2 1.2-14.9 14.7-1.1-1.2c-4.8-4.8-12.6-4.8-17.4 0-4.8 4.8-4.8 12.6 0 17.4l2.9 2.9 14.8 14.8 15.6 15.6-14.8 14.8-15.6-15.7L27 75.5z" fill="#28466a"/><path d="M43.5 58.9l15.6-15.6 14.8-14.8 2.9-2.9c8.9-8.9 21.6-11.7 32.8-8.4C111 7.5 119.4 0 129.5 0c11.1 0 20 9 20 20 0 10.2-7.6 18.6-17.4 19.9 3.2 11.2.4 23.8-8.4 32.7l-1.2 1.2L107.7 59l1.1-1.1c4.8-4.8 4.8-12.6 0-17.4-4.8-4.8-12.5-4.8-17.4 0l-2.9 2.9-14.6 14.7-15.6 15.6-14.8-14.8z" fill="#28466a"/><path d="M110.1 133.5c-11.4 3.5-24.2.7-33.2-8.3l-1.1-1.1 14.8-14.8 1.1 1.1c4.8 4.8 12.6 4.8 17.4 0 4.8-4.8 4.8-12.5 0-17.4l-2.9-2.9-14.9-14.6-15.6-15.7L90.5 45l15.6 15.6 14.8 14.8 2.9 2.9c8.5 8.5 11.4 20.5 8.8 31.3 9.7 1.4 17.2 9.7 17.2 19.8 0 11.1-9 20-20 20-9.8.2-17.9-6.7-19.7-15.9z" fill="#28466a"/><path d="M104.3 92l-15.6 15.6-14.8 14.8-2.9 2.9c-8.5 8.5-20.6 11.4-31.5 8.7-2 8.9-10 15.5-19.5 15.5-11.1 0-20-9-20-20 0-9.5 6.6-17.4 15.4-19.5-2.8-11 .1-23.1 8.7-31.7l1.1-1.1L40 92l-1.1 1.1c-4.8 4.8-4.8 12.6 0 17.4 4.8 4.8 12.6 4.8 17.4 0l2.9-2.9L74 92.8l15.6-15.6L104.3 92z" fill="#28466a"/></g></svg>
\ No newline at end of file
+<svg viewBox="0 0 376.3 74.8" xmlns="http://www.w3.org/2000/svg"><g fill="#28466a"><path d="M116.4 14.8v31.3c0 2.8.2 5.4-2.3 7.3-2.3 1.9-6.2 2.5-10.4 2.5-6.4 0-13.2-1.5-13.2-1.5l-1.5 4s9.5 2 16.4 2.1c5.8.1 10.9-1.2 13.7-4.4 2.3-2.6 3-5.6 2.9-10.7V14.8h-5.6M163.1 32.1c-4.2-2.3-9.3-3.5-15.1-3.5-5.7 0-10.8 1.2-15.1 3.5-5.4 2.9-8.1 7.2-8.1 12.6s2.7 9.7 8.1 12.6c4.3 2.3 9.3 3.5 15.1 3.5 5.7 0 10.8-1.2 15-3.5 5.4-2.9 8.1-7.2 8.1-12.6.1-5.5-2.7-9.7-8-12.6m-3.3 22c-3.3 1.9-7.2 2.8-11.8 2.8-4.7 0-8.7-.9-11.9-2.7-3.9-2.2-5.8-5.3-5.8-9.5 0-4.1 2-7.3 5.8-9.5 3.2-1.8 7.2-2.7 11.9-2.7 4.6 0 8.6.9 11.9 2.7 3.8 2.2 5.8 5.4 5.8 9.5 0 4-2 7.2-5.9 9.4zM212.3 32.1c-4.2-2.3-9.3-3.5-15.1-3.5-5.7 0-10.8 1.2-15.1 3.5-5.4 2.9-8.1 7.2-8.1 12.6s2.7 9.7 8.1 12.6c4.3 2.3 9.3 3.5 15.1 3.5 5.7 0 10.8-1.2 15-3.5 5.4-2.9 8.1-7.2 8.1-12.6.1-5.5-2.6-9.7-8-12.6m-3.2 22c-3.3 1.9-7.2 2.8-11.8 2.8-4.7 0-8.7-.9-11.9-2.7-3.9-2.2-5.8-5.3-5.8-9.5 0-4.1 2-7.3 5.8-9.5 3.2-1.8 7.2-2.7 11.9-2.7 4.6 0 8.6.9 11.9 2.7 3.8 2.2 5.8 5.4 5.8 9.5-.1 4-2.1 7.2-5.9 9.4zM280.2 31.3c-3-1.8-6.9-2.7-11.5-2.7-5.9 0-10.6 1.8-14.2 5.4-3.4-3.6-8.2-5.4-14.1-5.4-4.8 0-8.7 1-11.7 2.9V29h-5.3v31.1h5.3V38.9c.4-1.5 1.4-2.9 3-4.1 2.2-1.5 5-2.3 8.5-2.3 3.1 0 5.7.6 7.9 1.9 2.6 1.5 3.8 3.5 3.8 6.3v19.6h5.2V40.6c0-2.8 1.2-4.8 3.8-6.3 2.2-1.2 4.9-1.9 8-1.9s5.8.6 8 1.9c2.6 1.5 3.8 3.5 3.8 6.3v19.6h5.3V41.3c-.1-4.4-2-7.8-5.8-10M290.2 14.8v45.4h5.3V14.8h-5.3M354.5 14.8v35.1h5.3V14.8h-5.3M340.7 29v5.3c-4.5-3.8-10.5-5.8-17.9-5.8-5.9 0-11 1.1-15.2 3.4-5.2 2.9-7.9 7.1-7.9 12.7 0 5.5 2.7 9.8 8.1 12.6 4.2 2.3 9.3 3.4 15.2 3.4 2.9 0 5.8-.3 8.4-1 3.7-1 6.8-2.4 9.2-4.3v4.8h5.3V29h-5.2m-35.5 15.7c0-4.1 2-7.3 5.8-9.5 3.2-1.8 7.3-2.7 12-2.7 5.8 0 10.3 1.4 13.5 4.2 2.8 2.5 4.2 5.7 4.2 9.6V50c-2.2 2.5-5.5 4.4-9.7 5.7-2.5.8-5.2 1.2-8 1.2-4.8 0-8.8-.9-12-2.6-3.9-2.3-5.8-5.4-5.8-9.6zM357.2 54.3c-3.7 0-4.2 1.9-4.2 3.1s.6 3.1 4.2 3.1c3.7 0 4.2-2 4.2-3.1s-.5-3.1-4.2-3.1zM376.3 20.4c0 3.1-2 5.7-5.6 5.7s-5.6-2.6-5.6-5.7 2-5.7 5.6-5.7 5.6 2.6 5.6 5.7zm-10 0c0 2.6 1.6 4.6 4.4 4.6s4.4-2 4.4-4.6-1.6-4.6-4.4-4.6-4.4 2-4.4 4.6zm5.5.7c2.2-.4 2-3.7-.5-3.7h-2.7v5.8h1.1v-2h1l1.6 2h1.2V23l-1.7-1.9zm-.6-2.7c1.3 0 1.3 1.9 0 1.9h-1.6v-1.9h1.6z"/></g><g fill="#28466a"><path d="M13.5 37.7L12 36.3c-4.5-4.5-5.8-10.8-4.2-16.5-4.5-1-7.8-5-7.8-9.8C0 4.5 4.5 0 10 0c5 0 9.1 3.6 9.9 8.4 5.4-1.3 11.3.2 15.5 4.4l.6.6-7.4 7.4-.6-.6c-2.4-2.4-6.3-2.4-8.7 0s-2.4 6.3 0 8.7l1.4 1.4 7.4 7.4 7.8 7.8-7.4 7.4-7.8-7.8-7.2-7.4z"/><path d="M21.8 29.5l7.8-7.8 7.4-7.4 1.4-1.4C42.9 8.4 49.2 7 54.8 8.6c.7-4.8 4.9-8.6 10-8.6 5.5 0 10 4.5 10 10 0 5.1-3.8 9.3-8.7 9.9 1.6 5.6.2 11.9-4.2 16.3l-.6.6-7.4-7.4.6-.6c2.4-2.4 2.4-6.3 0-8.7s-6.3-2.4-8.7 0l-1.4 1.4L37 29l-7.8 7.8-7.4-7.3z"/><path d="M55 66.8c-5.7 1.7-12.1.4-16.6-4.1l-.6-.6 7.4-7.4.6.6c2.4 2.4 6.3 2.4 8.7 0s2.4-6.3 0-8.7L53 45.1l-7.4-7.4-7.8-7.8 7.4-7.4 7.8 7.8 7.4 7.4 1.5 1.5c4.2 4.2 5.7 10.2 4.4 15.7 4.9.7 8.6 4.9 8.6 9.9 0 5.5-4.5 10-10 10-4.9 0-8.9-3.5-9.9-8z"/><path d="M52.2 46l-7.8 7.8-7.4 7.4-1.4 1.4c-4.3 4.3-10.3 5.7-15.7 4.4-1 4.5-5 7.8-9.8 7.8-5.5 0-10-4.5-10-10C0 60 3.3 56.1 7.7 55c-1.4-5.5.1-11.5 4.3-15.8l.6-.6L20 46l-.6.6c-2.4 2.4-2.4 6.3 0 8.7s6.3 2.4 8.7 0l1.4-1.4 7.4-7.4 7.8-7.8 7.5 7.3z"/></g></svg>
\ No newline at end of file
diff --git a/installation/template/index.php b/installation/template/index.php
index 28d91775f94..8e7d8989e54 100644
--- a/installation/template/index.php
+++ b/installation/template/index.php
@@ -66,22 +66,22 @@ Text::script('INSTL_COMPLETE_REMOVE_FOLDER');
 			<?php // Header ?>
 			<header id="header" class="header">
 				<div class="d-flex ">
-					<div class="logo d-none d-md-block">
-						<img src="<?php echo $this->baseurl; ?>/template/images/logo-joomla-blue.svg" alt="">
+					<div class="logo d-none d-md-block col">
+						<img src="<?php echo $this->baseurl; ?>/template/images/Joomla-logo-monochrome-horizontal-white.svg" alt="">
 					</div>
 					<div class="mx-2 my-3 d-flex d-md-none">
-						<img class="logo-small d-flex d-md-none" src="<?php echo $this->baseurl; ?>/template/images/logo-blue.svg" alt="">
+						<img class="logo-small d-flex d-md-none" src="<?php echo $this->baseurl; ?>/template/images/Joomla-brandmark-monochrome-white-RGB.svg" alt="">
 					</div>
-					<div class="d-flex flex-wrap align-items-center mx-auto">
+					<div class="d-flex flex-wrap align-items-center mx-auto col-md-auto justify-content-center">
 						<h1 class="h2 mx-1 d-flex align-items-baseline">
-							<span class="icon-cogs d-none d-md-block mx-2 alig-items-center" aria-hidden="true"></span>
+							<span class="icon-cogs d-none d-md-block mx-2 align-items-center" aria-hidden="true"></span>
 							<?php echo Text::_('INSTL_PAGE_TITLE'); ?>
 						</h1>
 						<span class="small mx-1">
 							Joomla! <?php echo (new Version)->getShortVersion(); ?>
 						</span>
 					</div>
-					<div class="m-2 d-flex align-items-center">
+					<div class="m-2 d-flex align-items-center col justify-content-end">
 						<a href="https://docs.joomla.org/Special:MyLanguage/J4.x:Installing_Joomla" target="_blank">
 							<span class="icon-question" aria-hidden="true"></span>
 							<span class="sr-only"><?php echo Text::_('INSTL_HELP_LINK'); ?></span>
diff --git a/installation/template/scss/template.scss b/installation/template/scss/template.scss
index 6572b9224e4..f518ae75939 100644
--- a/installation/template/scss/template.scss
+++ b/installation/template/scss/template.scss
@@ -44,8 +44,18 @@ body {
   flex-direction: column;
   min-height: 100vh;
 
-  .logo {
-    width: auto;
+  img.logo-small,
+  svg.logo-small {
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .icon-question {
+    color: $white;
+
+    &:hover {
+      color: var(--atum-link-color);
+    }
   }
 }