From 9aaed8db4c947b7dd105e5a0fe4386105c1fab41 Mon Sep 17 00:00:00 2001
From: Simon Evans <simon.evans@torchbox.com>
Date: Fri, 24 Jan 2020 11:29:53 +0000
Subject: [PATCH] Refactor logo SVG partials and update bg colour

---
 client/scss/components/_logo.scss             | 68 ++++++-------------
 .../wagtailadmin/images/logo-background.svg   |  3 -
 wagtail/admin/templates/wagtailadmin/404.html |  4 +-
 .../admin/templates/wagtailadmin/base.html    |  7 +-
 .../wagtailadmin/shared/animated_logo.html    | 10 ++-
 .../shared/animated_logo_background.html      | 11 ---
 6 files changed, 34 insertions(+), 69 deletions(-)
 delete mode 100644 wagtail/admin/static_src/wagtailadmin/images/logo-background.svg
 delete mode 100644 wagtail/admin/templates/wagtailadmin/shared/animated_logo_background.html

diff --git a/client/scss/components/_logo.scss b/client/scss/components/_logo.scss
index 4f96ab4f1..18804efc1 100644
--- a/client/scss/components/_logo.scss
+++ b/client/scss/components/_logo.scss
@@ -17,10 +17,8 @@
     &:hover {
         color: $color-white;
     }
-}
 
-@include media-breakpoint-down(xs) {
-    .logo {
+    @include media-breakpoint-down(xs) {
         padding: 0 1.2em;
         margin: 0.9em 0;
         height: 28px;
@@ -28,74 +26,52 @@
         display: flex;
         align-items: center;
     }
-}
 
-// Desktop styling (override mobile styling):
-@include media-breakpoint-up(sm) {
-    .logo {
-        margin: 1em auto;
+    // Desktop styling (override mobile styling):
+    @include media-breakpoint-up(sm) {
+        margin: 2em auto;
         text-align: center;
     }
 }
 
 .wagtail-logo-container__mobile {
     position: relative;
-
-    .wagtail-logo,
-    .wagtail-logo-container__background {
-        float: left;
-    }
-
-    .wagtail-logo,
-    .wagtail-logo-container-inner {
-        width: 20px;
-    }
+    margin-right: 10px;
+    background-color: #555;
+    border-radius: 50%;
+    padding: 5px 7.5px;
 
     .wagtail-logo {
+        float: left;
+        width: 20px;
         border: 0;
         margin-right: 1em;
     }
 
-    .wagtail-logo-container__background {
-        width: 28px;
-        margin-right: 5px;
-    }
-
     .wagtail-logo-container-inner {
-        height: 20px;
-        margin-left: 4px;
-        margin-top: 3px;
-        position: absolute;
-    }
-
-    &:hover {
-        color: $color-white;
+        width: 20px;
+        height: 25px;
     }
 }
 
 .wagtail-logo-container__desktop {
     position: relative;
-    width: 80px;
-    height: 80px;
+    width: 100px;
+    height: 100px;
+    background-color: #555;
+    border-radius: 50%;
+    margin: 0 auto;
 
-    .wagtail-logo-container__background {
-        position: absolute;
-        top: -3px;
-        left: 0;
+    .page404__bg & {
+        background-color: transparent;
     }
 
     .wagtail-logo-container-inner {
-        width: 45px;
-        height: 75px;
+        width: 52px;
+        height: 100px;
         margin: auto;
         position: relative;
     }
-}
-
-.wagtail-logo-container-inner,
-.wagtail-logo-container__desktop.animated-logo-container {
-    display: block;
-    transition: all 0.25s cubic-bezier(0.28, 0.15, 0, 2.1);
 
     .wagtail-logo {
         display: block;
@@ -104,7 +80,7 @@
         width: 100%;
         height: 100%;
         position: absolute;
-        transition: inherit;
+        transition: all 0.25s cubic-bezier(0.28, 0.15, 0, 2.1);
 
         &.wagtail-logo__eye--open {
             // stylelint-disable-next-line declaration-no-important
diff --git a/wagtail/admin/static_src/wagtailadmin/images/logo-background.svg b/wagtail/admin/static_src/wagtailadmin/images/logo-background.svg
deleted file mode 100644
index afad9a1ec..000000000
--- a/wagtail/admin/static_src/wagtailadmin/images/logo-background.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <circle id="Oval" fill="#007D7E" cx="40" cy="40" r="40"></circle>
-</svg>
\ No newline at end of file
diff --git a/wagtail/admin/templates/wagtailadmin/404.html b/wagtail/admin/templates/wagtailadmin/404.html
index 24b40bb9d..a20a20d07 100644
--- a/wagtail/admin/templates/wagtailadmin/404.html
+++ b/wagtail/admin/templates/wagtailadmin/404.html
@@ -14,7 +14,9 @@
     <div class="page404__bg">
         <div class="page404__wrapper">
             {% block branding_logo %}
-                {% include "wagtailadmin/shared/animated_logo.html" %}
+                <div class="wagtail-logo-container__desktop animated-logo-container u-hidden@xs">
+                    {% include "wagtailadmin/shared/animated_logo.html" %}
+                </div>
             {% endblock %}
 
             <div class="page404__text-container">
diff --git a/wagtail/admin/templates/wagtailadmin/base.html b/wagtail/admin/templates/wagtailadmin/base.html
index 184b12987..811946ee1 100644
--- a/wagtail/admin/templates/wagtailadmin/base.html
+++ b/wagtail/admin/templates/wagtailadmin/base.html
@@ -8,14 +8,17 @@
                 {% block branding_logo %}
                     {# Mobile-only logo: #}
                     <div class="wagtail-logo-container__mobile u-hidden@sm">
-                        <img class="wagtail-logo-container__background" src="{% versioned_static 'wagtailadmin/images/logo-background.svg' %}" alt=""/>
                         <div class="wagtail-logo-container-inner">
                           <img class="wagtail-logo wagtail-logo__full" src="{% versioned_static 'wagtailadmin/images/wagtail-logo.svg' %}" alt="Wagtail" width="80" />
                         </div>
                     </div>
 
                     {# Desktop logo (animated): #}
-                    {% include "wagtailadmin/shared/animated_logo_background.html" %}
+                    <div class="wagtail-logo-container__desktop animated-logo-container u-hidden@xs">
+                        <div class="wagtail-logo-container-inner">
+                            {% include "wagtailadmin/shared/animated_logo.html" %}
+                        </div>
+                    </div>
                 {% endblock %}
                 <span class="u-hidden@sm">{% trans "Dashboard" %}</span>
             </a>
diff --git a/wagtail/admin/templates/wagtailadmin/shared/animated_logo.html b/wagtail/admin/templates/wagtailadmin/shared/animated_logo.html
index bb4350f3a..6effd2719 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/animated_logo.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/animated_logo.html
@@ -1,8 +1,6 @@
 {% load wagtailadmin_tags %}
 
-<div class="wagtail-logo-container__desktop animated-logo-container u-hidden@xs">
-  <img class="wagtail-logo wagtail-logo__body" src="{% versioned_static 'wagtailadmin/images/logo-body.svg' %}" alt=""/>
-  <img class="wagtail-logo wagtail-logo__tail" src="{% versioned_static 'wagtailadmin/images/logo-tail.svg' %}" alt="" />
-  <img class="wagtail-logo wagtail-logo__eye--open" src="{% versioned_static 'wagtailadmin/images/logo-eyeopen.svg' %}" alt="" />
-  <img class="wagtail-logo wagtail-logo__eye--closed" src="{% versioned_static 'wagtailadmin/images/logo-eyeclosed.svg' %}" alt="" />
-</div>
+<img class="wagtail-logo wagtail-logo__body" src="{% versioned_static 'wagtailadmin/images/logo-body.svg' %}" alt=""/>
+<img class="wagtail-logo wagtail-logo__tail" src="{% versioned_static 'wagtailadmin/images/logo-tail.svg' %}" alt="" />
+<img class="wagtail-logo wagtail-logo__eye--open" src="{% versioned_static 'wagtailadmin/images/logo-eyeopen.svg' %}" alt="" />
+<img class="wagtail-logo wagtail-logo__eye--closed" src="{% versioned_static 'wagtailadmin/images/logo-eyeclosed.svg' %}" alt="" />
diff --git a/wagtail/admin/templates/wagtailadmin/shared/animated_logo_background.html b/wagtail/admin/templates/wagtailadmin/shared/animated_logo_background.html
deleted file mode 100644
index 6965683eb..000000000
--- a/wagtail/admin/templates/wagtailadmin/shared/animated_logo_background.html
+++ /dev/null
@@ -1,11 +0,0 @@
-{% load wagtailadmin_tags static %}
-
-<div class="wagtail-logo-container__desktop u-hidden@xs">
-  <img class="wagtail-logo wagtail-logo-container__background" src="{% static 'wagtailadmin/images/logo-background.svg' %}" alt=""/>
-  <div class="wagtail-logo-container-inner animated-logo-container">
-    <img class="wagtail-logo wagtail-logo__body" src="{% static 'wagtailadmin/images/logo-body.svg' %}" alt=""/>
-    <img class="wagtail-logo wagtail-logo__tail" src="{% static 'wagtailadmin/images/logo-tail.svg' %}" alt="" />
-    <img class="wagtail-logo wagtail-logo__eye--open" src="{% static 'wagtailadmin/images/logo-eyeopen.svg' %}" alt="" />
-    <img class="wagtail-logo wagtail-logo__eye--closed" src="{% static 'wagtailadmin/images/logo-eyeclosed.svg' %}" alt="" />
-  </div>
-</div>