Sidebar style updates (#8118)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

client/scss/components/_logo.scss

@@ -27,6 +27,8 @@
   }
 }
 
+// Backwards-compatibility for branding_logo customisations in legacy sidebar.
+//RemovedInWagtail218Warning Remove when removing the legacy sidebar.
 .wagtail-logo-container__mobile {
   margin-inline-end: 10px;
   background-color: #555;
@@ -40,91 +42,7 @@
   }
 }
 
-.wagtail-logo-container__desktop {
-  position: relative;
-  width: 100px;
-  height: 100px;
-  background-color: #555;
-  border-radius: 50%;
-  margin: 0 auto;
-  transition: all 0.25s cubic-bezier(0.28, 0.15, 0, 2.1);
-
-  .page404__bg & {
-    background-color: transparent;
-  }
-
-  .wagtail-logo-container-inner {
-    width: 52px;
-    height: 100px;
-    margin: auto;
-    position: relative;
-
-    .page404__bg & {
-      width: auto;
-      height: auto;
-      position: static;
-    }
-  }
-
-  .wagtail-logo {
-    display: block;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: 0;
-    inset-inline-start: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    transition: inherit;
-
-    &.wagtail-logo__eye--open {
-      // stylelint-disable-next-line declaration-no-important
-      display: inline !important; // doesn't work without `!important`, likely a specificity issue
-    }
-
-    &.wagtail-logo__eye--closed {
-      // stylelint-disable-next-line declaration-no-important
-      display: none !important;
-    }
-  }
-
-  // Wagtail 'serious' animation (nod):
-  &.logo-serious {
-    &:hover {
-      transform: rotate(4deg);
-    }
-  }
-
-  // Wagtail 'playful' animation (tail-wag, triggered by JS in base.html):
-  &.logo-playful {
-    &:hover {
-      transform: rotate(8deg);
-      transition: transform 1.2s ease;
-
-      .wagtail-logo {
-        // stylelint-disable max-nesting-depth
-        &.wagtail-logo__tail {
-          animation: tail-wag 0.09s alternate;
-          animation-iteration-count: infinite;
-        }
-
-        &.wagtail-logo__eye--open {
-          // stylelint-disable-next-line declaration-no-important
-          display: none !important;
-        }
-
-        &.wagtail-logo__eye--closed {
-          // stylelint-disable-next-line declaration-no-important
-          display: inline !important;
-        }
-      }
-    }
-  }
-}
-
 // Media for Windows High Contrast mode
-
 @media (forced-colors: $media-forced-colours) {
   .wagtail-logo-container__desktop {
     background-color: $system-color-link-text;

client/scss/components/_main-nav.scss

@@ -165,7 +165,7 @@
   display: block;
   width: 4rem;
   height: 4rem;
-  margin: 0 auto 0.8em;
+  margin: 75px auto 0.8em;
   opacity: 0.15;
 }
 

client/scss/settings/_variables.scss

@@ -157,7 +157,7 @@ $nav-submenu-bg: color.adjust($color-white, $lightness: -85%);
 $nav-footer-account-bg: $nav-item-active-bg;
 $nav-footer-submenu-bg: $nav-submenu-bg;
 $nav-footer-closed-height: 50px;
-$nav-footer-submenu-height: 77px;
+$nav-footer-submenu-height: 85px;
 $nav-footer-open-height: $nav-footer-closed-height + $nav-footer-submenu-height;
 
 // Nav search

client/src/components/PageExplorer/PageExplorer.scss

@@ -1,5 +1,3 @@
-$c-page-explorer-bg: #4c4e4d;
-$c-page-explorer-bg-dark: $nav-grey-1;
 $c-page-explorer-bg-active: rgba(0, 0, 0, 0.425);
 $c-page-explorer-secondary: #a5a5a5;
 $c-page-explorer-easing: cubic-bezier(0.075, 0.82, 0.165, 1);
@@ -10,10 +8,10 @@ $menu-footer-height: 50px;
 @import 'PageExplorerItem';
 
 .c-page-explorer {
+  @apply w-bg-primary-200;
   max-width: 485px;
-  width: 90vw;
+  width: 100vw;
   height: 100vh;
-  background: $c-page-explorer-bg;
   overflow: hidden;
   flex: 1;
 
@@ -43,12 +41,10 @@ $menu-footer-height: 50px;
 $explorer-header-horizontal-padding: 10px;
 
 .c-page-explorer__header {
+  @apply w-bg-black/50 w-text-white/85;
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
-  background-color: $c-page-explorer-bg-dark;
-  border-bottom: 1px solid $c-page-explorer-bg-dark;
-  color: $color-white;
   margin-inline-start: $sidebar-toggle-spacing * 2 + $sidebar-toggle-size;
   height: $sidebar-toggle-spacing * 2 + $sidebar-toggle-size;
 
@@ -61,18 +57,9 @@ $explorer-header-horizontal-padding: 10px;
 .c-page-explorer__header__title {
   color: inherit;
 
-  &:focus {
-    background-color: $c-page-explorer-bg-active;
-    color: $color-white;
-  }
-
-  // Overrides for default link hover.
+  &:focus,
   &:hover {
-    color: $color-white;
-  }
-
-  @include hover {
-    background-color: $c-page-explorer-bg-active;
+    @apply w-bg-black/50 w-text-white;
   }
 }
 
@@ -83,17 +70,17 @@ $explorer-header-horizontal-padding: 10px;
   white-space: nowrap;
 
   .icon {
-    color: $c-page-explorer-secondary;
+    @apply w-text-white/85;
     margin-inline-end: 0.25rem;
     font-size: 1rem;
   }
 
   .icon--explorer-header {
+    @apply w-text-white/85;
     width: 1.25em;
     height: 1.25em;
     margin-inline-end: 0.25rem;
     vertical-align: text-top;
-    color: $c-page-explorer-secondary;
   }
 
   @include media-breakpoint-up(sm) {
@@ -102,16 +89,14 @@ $explorer-header-horizontal-padding: 10px;
 }
 
 .c-page-explorer__header__select {
+  @apply w-text-white w-bg-primary;
   $margin: 10px;
   margin-inline-end: $margin;
 
   > select {
     padding: 5px 30px 5px 10px;
-
-    background-color: $c-page-explorer-bg-dark;
     border-radius: 0;
     border-color: #4c4e4d;
-    color: $color-white;
     font-size: 0.875rem;
 
     &:disabled {

client/src/components/PageExplorer/PageExplorerItem.scss

@@ -1,23 +1,14 @@
 .c-page-explorer__item {
-  display: flex;
-  flex-flow: row nowrap;
-  border-bottom: 1px solid $c-page-explorer-bg-dark;
+  @apply w-flex w-flex-row w-flex-nowrap w-border-0 w-border-b w-border-solid w-border-black/50 w-divide-x w-divide-solid w-divide-black/50 w-divide-y-0;
 }
 
 .c-page-explorer__item__link {
-  display: inline-flex;
-  align-items: center;
-  flex-grow: 1;
+  @apply w-inline-flex w-items-start sm:w-items-center w-flex-wrap w-grow w-cursor-pointer w-gap-1;
   padding: 1.45em 1em;
-  cursor: pointer;
-
-  &:focus {
-    background: $c-page-explorer-bg-active;
-    color: $color-white;
-  }
 
-  // Overrides for default link hover.
+  &:focus,
   &:hover {
+    background: $c-page-explorer-bg-active;
     color: $color-white;
   }
 
@@ -31,9 +22,9 @@
 }
 
 .c-page-explorer__item__link .icon {
+  @apply w-text-white/85;
   width: 2em;
   height: 2em;
-  color: $c-page-explorer-secondary;
   margin-inline-end: 0.75rem;
 }
 
@@ -44,6 +35,7 @@
 }
 
 .c-page-explorer__item__action {
+  @apply w-text-white/85;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -53,21 +45,9 @@
   line-height: 1;
   font-size: 2em;
   cursor: pointer;
-  color: $c-page-explorer-secondary;
-  border: 0;
-  border-inline-start: solid 1px $c-page-explorer-bg-dark;
 
-  &:focus {
-    background: $c-page-explorer-bg-active;
-    color: $color-white;
-  }
-
-  // Overrides for default link hover.
+  &:focus,
   &:hover {
-    color: $c-page-explorer-secondary;
-  }
-
-  @include hover {
     background: $c-page-explorer-bg-active;
     color: $color-white;
   }
@@ -87,7 +67,6 @@
 }
 
 .c-page-explorer__meta {
-  margin-inline-start: 0.5rem;
-  color: $c-page-explorer-secondary;
+  @apply w-flex w-gap-2 w-text-white/85;
   font-size: 12px;
 }

client/src/components/PageExplorer/PageExplorerItem.tsx

@@ -40,7 +40,6 @@ const PageExplorerItem: React.FunctionComponent<PageExplorerItemProps> = ({
         className="c-page-explorer__item__link"
       >
         {hasChildren ? childrenIcon : null}
-
         <h3 className="c-page-explorer__item__title">{title}</h3>
 
         {(!isPublished || localeName) && (

client/src/components/PublicationStatus/PublicationStatus.scss

@@ -1,7 +1,6 @@
 .c-status {
-  background: $color-grey-1;
+  @apply w-bg-black/50 w-tracking-tight w-text-white/85;
   // stylelint-disable-next-line property-disallowed-list
   text-transform: uppercase;
-  letter-spacing: 0.03rem;
   font-size: 10px;
 }

client/src/components/Sidebar/Sidebar.scss

@@ -17,16 +17,20 @@
   border-radius: 50%;
   border: 1px solid transparent;
 
-  &:hover {
-    background-color: #3a3a3a;
-    color: #ccc;
-  }
-
   svg {
     width: 15px;
     height: 16px;
   }
 
+  @include media-breakpoint-up(sm) {
+    inset-inline-end: $sidebar-toggle-spacing;
+
+    // Remove once we drop support for Safari 13.
+    // stylelint-disable-next-line property-disallowed-list
+    left: initial;
+    inset-inline-start: initial;
+  }
+
   .has-messages & {
     top: $sidebar-toggle-spacing + 70px;
 
@@ -37,18 +41,12 @@
 }
 
 .sidebar {
-  position: fixed;
+  @apply w-fixed w-flex w-flex-col w-h-full w-bg-primary w-z-[300];
+  width: $menu-width;
   // Remove once we drop support for Safari 13.
   // stylelint-disable-next-line property-disallowed-list
   left: 0;
   inset-inline-start: 0;
-  width: $menu-width;
-  float: left;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background: $nav-grey-3;
-  z-index: 300;
 
   @include transition(
     width $menu-transition-duration ease,
@@ -75,11 +73,8 @@
   }
 
   &__inner {
-    height: 100%;
-    background: $nav-grey-3;
     // On medium, make it possible for the nav links to scroll.
-    display: flex;
-    flex-flow: column nowrap;
+    @apply w-h-full w-bg-primary w-flex w-flex-col w-flex-nowrap;
   }
 
   &__collapse-toggle {
@@ -109,22 +104,12 @@
   display: none; // Nav toggle is for mobile only
   z-index: 305;
 
-  &:hover {
-    background: var(--color-primary-dark);
-    color: #fff;
-  }
-
   &--mobile {
     display: grid;
   }
 
   &--open {
-    position: fixed;
-
-    &:hover {
-      background-color: #3a3a3a;
-      color: #ccc;
-    }
+    @apply w-fixed hover:w-bg-primary-200 hover:w-text-white;
   }
 }
 

client/src/components/Sidebar/Sidebar.stories.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 
 import { ModuleDefinition, Sidebar, Strings } from './Sidebar';
-import { WagtailBrandingModuleDefinition } from './modules/WagtailBranding';
 import { SearchModuleDefinition } from './modules/Search';
 import { MainMenuModuleDefinition } from './modules/MainMenu';
 import { PageExplorerMenuItemDefinition } from './menu/PageExplorerMenuItem';
@@ -19,21 +18,6 @@ const STRINGS: Strings = {
   SEARCH: 'Search',
 };
 
-function wagtailBrandingModule(): WagtailBrandingModuleDefinition {
-  return new WagtailBrandingModuleDefinition('/admin/', {
-    mobileLogo:
-      'https://wagtail.org/static/wagtailadmin/images/wagtail-logo.svg',
-    desktopLogoBody:
-      'https://wagtail.org/static/wagtailadmin/images/logo-body.svg',
-    desktopLogoTail:
-      'https://wagtail.org/static/wagtailadmin/images/logo-tail.svg',
-    desktopLogoEyeOpen:
-      'https://wagtail.org/static/wagtailadmin/images/logo-eyeopen.svg',
-    desktopLogoEyeClosed:
-      'https://wagtail.org/static/wagtailadmin/images/logo-eyeclosed.svg',
-  });
-}
-
 function searchModule(): SearchModuleDefinition {
   return new SearchModuleDefinition('/admin/search/');
 }
@@ -258,11 +242,7 @@ function renderSidebarStory(
 }
 
 export function standard() {
-  return renderSidebarStory([
-    wagtailBrandingModule(),
-    searchModule(),
-    bogStandardMenuModule(),
-  ]);
+  return renderSidebarStory([searchModule(), bogStandardMenuModule()]);
 }
 
 export function withNestedSubmenu() {
@@ -339,11 +319,7 @@ export function withNestedSubmenu() {
     ),
   );
 
-  return renderSidebarStory([
-    wagtailBrandingModule(),
-    searchModule(),
-    menuModule,
-  ]);
+  return renderSidebarStory([searchModule(), menuModule]);
 }
 
 export function withLargeSubmenu() {
@@ -375,11 +351,7 @@ export function withLargeSubmenu() {
     ),
   );
 
-  return renderSidebarStory([
-    wagtailBrandingModule(),
-    searchModule(),
-    menuModule,
-  ]);
+  return renderSidebarStory([searchModule(), menuModule]);
 }
 
 export function withoutSearch() {
@@ -557,8 +529,8 @@ function arabicMenuModule(): MainMenuModuleDefinition {
 }
 
 export function rightToLeft() {
-  return renderSidebarStory(
-    [wagtailBrandingModule(), searchModule(), arabicMenuModule()],
-    { rtl: true, strings: STRINGS_AR },
-  );
+  return renderSidebarStory([searchModule(), arabicMenuModule()], {
+    rtl: true,
+    strings: STRINGS_AR,
+  });
 }

client/src/components/Sidebar/Sidebar.tsx

@@ -183,17 +183,18 @@ export const Sidebar: React.FunctionComponent<SidebarProps> = ({
       >
         <div className="sidebar__inner">
           <button
-            className="button sidebar__collapse-toggle"
             onClick={onClickCollapseToggle}
             aria-label={strings.TOGGLE_SIDEBAR}
             aria-expanded={slim ? 'false' : 'true'}
             type="button"
+            className="button sidebar__collapse-toggle hover:w-bg-primary-200 hover:text-white hover:opacity-100"
           >
-            {collapsed ? (
-              <Icon name="angle-double-right" />
-            ) : (
-              <Icon name="angle-double-left" />
-            )}
+            <Icon
+              name="expand-right"
+              className={`w-transition motion-reduce:w-transition-none
+                ${!collapsed ? '-w-rotate-180' : ''}
+                `}
+            />
           </button>
 
           <div

client/src/components/Sidebar/__snapshots__/Sidebar.test.js.snap

@@ -10,12 +10,15 @@ exports[`Sidebar should render with the minimum required props 1`] = `
     >
       <button
         aria-expanded="true"
-        className="button sidebar__collapse-toggle"
+        className="button sidebar__collapse-toggle hover:w-bg-primary-200 hover:text-white hover:opacity-100"
         onClick={[Function]}
         type="button"
       >
         <Icon
-          name="angle-double-left"
+          className="w-transition motion-reduce:w-transition-none
+                -w-rotate-180
+                "
+          name="expand-right"
         />
       </button>
       <div

client/src/components/Sidebar/menu/MenuItem.scss

@@ -31,7 +31,6 @@
     // making the text semi-transparent
     &:hover,
     &:focus {
-      background-color: $nav-item-hover-bg;
       color: $color-white;
       text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
     }
@@ -64,18 +63,16 @@
   }
 
   &--in-sub-menu {
+    @apply hover:w-bg-primary;
+
     #{$root}__link {
       // Links inside a submenu should have normal wrapping
       white-space: normal;
     }
-
-    &:hover {
-      background-color: rgba(100, 100, 100, 0.2);
-    }
   }
 
   &--active {
-    background: $nav-item-active-bg;
+    @apply w-bg-primary-200;
     text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
 
     > a {

client/src/components/Sidebar/menu/SubMenuItem.scss

@@ -30,11 +30,8 @@
 }
 
 .sidebar-sub-menu-panel {
-  display: flex;
-  flex-direction: column;
-  background: $nav-submenu-bg;
+  @apply w-flex w-flex-col w-bg-primary-200 w-h-screen;
   width: $menu-width;
-  height: 100vh;
 
   > h2,
   &__list {
@@ -42,12 +39,8 @@
   }
 
   > h2 {
-    display: block;
-    padding: 0.2em 0;
-    font-size: 1.2em;
-    font-weight: 500;
-    text-align: center;
-    color: $color-menu-text;
+    // w-min-h-[160px] and w-mt-[35px] classes are to vertically align the title and icon combination to the search input on the left
+    @apply w-min-h-[160px] w-mt-[35px] w-text-white w-mb-0 w-inline-flex w-flex-col w-justify-center w-items-center;
 
     &:before {
       font-size: 4em;

client/src/components/Sidebar/menu/SubMenuItem.tsx

@@ -82,7 +82,7 @@ export const SubMenuItem: React.FunctionComponent<SubMenuItemProps> = ({
         <div className="sidebar-sub-menu-panel">
           <h2
             id={`wagtail-sidebar-submenu${path.split('.').join('-')}-title`}
-            className={item.classNames}
+            className={`${item.classNames} w-h4`}
           >
             {item.iconName && (
               <Icon name={item.iconName} className="icon--submenu-header" />

client/src/components/Sidebar/menu/__snapshots__/SubMenuItem.test.js.snap

@@ -28,7 +28,7 @@ exports[`SubMenuItem should render with the minimum required props 1`] = `
       className="sidebar-sub-menu-panel"
     >
       <h2
-        className=""
+        className=" w-h4"
         id="wagtail-sidebar-submenu-reports-title"
       />
       <ul

client/src/components/Sidebar/modules/MainMenu.scss

@@ -1,10 +1,8 @@
-$avatar-size: 60px;
-
 // stylelint-disable declaration-no-important
 .sidebar-main-menu {
   overflow: auto;
   overflow-x: hidden;
-  margin-bottom: $avatar-size;
+  margin-bottom: 60px;
   @include transition(margin-bottom $menu-transition-duration ease);
 
   &--open-footer {
@@ -48,11 +46,9 @@ $avatar-size: 60px;
 }
 
 .sidebar-footer {
-  position: fixed !important; // override li styling in MenuWrapper
-  width: $menu-width;
-  bottom: 0;
-  background-color: $nav-footer-submenu-bg;
+  @apply w-bg-primary w-bottom-0 w-fixed;
   transition: width $menu-transition-duration ease !important; // Override body.ready
+  width: $menu-width;
 
   > ul,
   ul > li {
@@ -88,76 +84,24 @@ $avatar-size: 60px;
   }
 
   &__account {
-    background: $nav-footer-account-bg;
-    color: $color-menu-text;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    position: relative;
-    padding: 0;
-    width: 100%;
-    appearance: none;
-    border: 0;
-    overflow: hidden;
-
-    @include clearfix;
-
-    &:hover,
-    &:focus {
-      background-color: rgba(100, 100, 100, 0.15);
-      color: $color-white;
-      text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
-    }
-
-    .avatar {
-      width: $avatar-size;
-      height: $avatar-size;
-
-      &:before {
-        color: inherit;
-        border-color: inherit;
-      }
-    }
-
-    $icon-size: 1.5em;
-
-    &-icon {
-      height: $icon-size;
-      width: $icon-size;
-    }
-
     &-toggle {
-      @include show-focus-outline-inside();
-      display: grid;
-      grid-template-columns: 1fr min-content;
-      box-sizing: border-box;
-      padding: 0 0.9em;
-      font-style: normal;
-      font-weight: 700;
-      width: $menu-width - $avatar-size;
-      line-height: $icon-size;
-      position: absolute;
-      // Remove once we drop support for Safari 13.
-      // stylelint-disable-next-line property-disallowed-list
-      left: $avatar-size; // Width of avatar
-      inset-inline-start: $avatar-size; // Width of avatar
-      transform: translateX(0);
-      transition: transform $menu-transition-duration ease;
+      @apply w-pl-2 w-inline-flex w-justify-between w-w-full w-translate-x-0 w-transition w-duration-150;
     }
 
     &-label {
-      text-align: start;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+      @apply w-text-white w-text-left w-overflow-hidden w-whitespace-nowrap w-text-ellipsis;
     }
   }
 
   @at-root .sidebar--slim #{&} {
     width: $menu-width-slim;
 
+    &__account {
+      @apply w-px-0 w-pb-3 w-justify-center;
+    }
+
     &__account-toggle {
-      transform: translateX($menu-width-slim - $menu-width);
+      @apply w-hidden;
     }
   }
 
@@ -169,11 +113,4 @@ $avatar-size: 60px;
       visibility: visible;
     }
   }
-
-  &--open &__account-toggle {
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: $avatar-size !important;
-    inset-inline-start: $avatar-size !important;
-  }
 }

client/src/components/Sidebar/modules/MainMenu.tsx

@@ -66,6 +66,7 @@ interface MenuProps {
   expandingOrCollapsing: boolean;
   currentPath: string;
   strings: Strings;
+
   navigate(url: string): Promise<void>;
 }
 
@@ -202,7 +203,23 @@ export const Menu: React.FunctionComponent<MenuProps> = ({
         }
       >
         <button
-          className="sidebar-footer__account"
+          className="
+          sidebar-footer__account
+          w-bg-primary
+          w-text-white
+          w-flex
+          w-items-center
+          w-relative
+          w-p-0
+          w-w-full
+          w-appearance-none
+          w-border-0
+          w-overflow-hidden
+          w-px-5
+          w-py-3
+          hover:w-bg-primary-200
+          focus:w-bg-primary-200
+          w-transition"
           title={strings.EDIT_YOUR_ACCOUNT}
           onClick={onClickAccountSettings}
           aria-label={strings.EDIT_YOUR_ACCOUNT}
@@ -210,13 +227,15 @@ export const Menu: React.FunctionComponent<MenuProps> = ({
           aria-expanded={accountSettingsOpen ? 'true' : 'false'}
           type="button"
         >
-          <div className="avatar square avatar-on-dark">
+          <div className="avatar avatar-on-dark w-flex-shrink-0 !w-w-[28px] !w-h-[28px]">
             <img src={user.avatarUrl} alt="" />
           </div>
           <div className="sidebar-footer__account-toggle">
-            <div className="sidebar-footer__account-label">{user.name}</div>
+            <div className="sidebar-footer__account-label w-label-3">
+              {user.name}
+            </div>
             <Icon
-              className="sidebar-footer__account-icon"
+              className="w-w-4 w-h-4 w-text-white"
               name={accountSettingsOpen ? 'arrow-down' : 'arrow-up'}
             />
           </div>

client/src/components/Sidebar/modules/Search.scss

@@ -1,16 +1,10 @@
 // stylelint-disable declaration-no-important
 .sidebar-search {
+  @apply w-relative w-box-border w-flex w-items-center w-flex-row w-h-[42px] w-px-5;
   $root: &;
-  position: relative;
-  box-sizing: border-box;
-  padding: 0 20px;
-  display: flex;
-  align-items: center;
-  flex-direction: row-reverse;
-  height: 42px;
 
   .sidebar--slim & {
-    padding: 0;
+    @apply w-justify-center w-p-0;
   }
 
   &__label {
@@ -19,6 +13,7 @@
 
   // Beat specificity
   input:not([type='submit']) {
+    @apply w-pl-[45px];
     @include show-focus-outline-inside();
     position: absolute;
     // Remove once we drop support for Safari 13.
@@ -26,9 +21,6 @@
     left: 0;
     inset-inline-start: 0;
     top: 0;
-    // Need !important to override body.ready class
-    transition: background-color $menu-transition-duration ease,
-      opacity $menu-transition-duration ease !important;
     font-size: 13px;
     font-weight: 400;
     background-color: transparent;
@@ -48,11 +40,6 @@
 
   &__submit {
     @include show-focus-outline-inside();
-    position: absolute;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 0;
-    inset-inline-end: 0;
     background-color: transparent;
     border: 0;
     border-radius: 0;
@@ -64,13 +51,11 @@
       width $menu-transition-duration ease;
 
     svg {
-      margin-inline-end: 15px;
+      margin-inline-end: 20px;
       transition: margin-inline-end $menu-transition-duration ease;
     }
 
     .sidebar--slim & {
-      width: 100%;
-
       svg {
         margin-inline-end: 0;
       }

client/src/components/Sidebar/modules/Search.tsx

@@ -8,6 +8,7 @@ interface SearchInputProps {
   expandingOrCollapsing: boolean;
   searchUrl: string;
   strings: Strings;
+
   navigate(url: string): void;
 }
 
@@ -48,6 +49,13 @@ export const SearchInput: React.FunctionComponent<SearchInputProps> = ({
       method="get"
       onSubmit={onSubmitForm}
     >
+      <button
+        className="button sidebar-search__submit"
+        type="submit"
+        aria-label={strings.SEARCH}
+      >
+        <Icon className="icon--menuitem" name="search" />
+      </button>
       <label className="sidebar-search__label" htmlFor="menu-search-q">
         {strings.SEARCH}
       </label>
@@ -58,13 +66,6 @@ export const SearchInput: React.FunctionComponent<SearchInputProps> = ({
         name="q"
         placeholder={strings.SEARCH}
       />
-      <button
-        className="button sidebar-search__submit"
-        type="submit"
-        aria-label={strings.SEARCH}
-      >
-        <Icon className="icon--menuitem" name="search" />
-      </button>
     </form>
   );
 };

client/src/components/Sidebar/modules/WagtailBranding.scss

@@ -26,12 +26,7 @@
     width $menu-transition-duration ease, height $menu-transition-duration ease,
     padding-top $menu-transition-duration ease;
   box-sizing: border-box;
-  overflow: hidden;
-
-  &:hover {
-    color: $color-white;
-    transform: rotate(4deg);
-  }
+  border-radius: 100%;
 
   // Reduce overall size when in slim mode
   .sidebar--slim & {
@@ -47,30 +42,28 @@
   // Set wagging styles
   &--wagging {
     &:hover {
-      transform: rotate(8deg);
       transition: transform 1.2s ease;
 
-      #{$root}__icon {
-        // stylelint-disable max-nesting-depth
-        &[data-part='tail'] {
-          animation: tail-wag 0.09s alternate;
-          animation-iteration-count: infinite;
-        }
-
-        // TODO: Fix legacy specificity issues
-        &[data-part='eye--open'] {
-          display: none !important;
-        }
-
-        &[data-part='eye--closed'] {
-          display: inline !important;
-        }
+      // stylelint-disable max-nesting-depth
+      [data-part='tail'] {
+        animation: tail-wag 0.1s alternate;
+        animation-iteration-count: infinite;
+      }
+
+      // TODO: Fix legacy specificity issues
+      [data-part='eye--open'] {
+        display: none !important;
+      }
+
+      [data-part='eye--closed'] {
+        display: inline !important;
       }
     }
   }
 
   // Bird wrapper
   &__icon-wrapper {
+    @apply w-bg-white/15 w-overflow-hidden hover:w-overflow-visible;
     margin: auto;
     position: absolute;
     // Remove once we drop support for Safari 13.
@@ -80,7 +73,6 @@
     top: 0;
     width: 100px;
     height: 100px;
-    background-color: #3a3a3a;
     border-radius: 50%;
     // Remove once we drop support for Safari 13.
     // stylelint-disable-next-line property-disallowed-list
@@ -92,11 +84,11 @@
     .sidebar--slim & {
       // Remove once we drop support for Safari 13.
       // stylelint-disable-next-line property-disallowed-list
-      left: -10px;
-      inset-inline-start: -10px;
+      left: 10px;
+      inset-inline-start: 10px;
       top: 10px;
-      width: 80px;
-      height: 80px;
+      width: 40px;
+      height: 40px;
     }
 
     .page404__bg & {
@@ -108,35 +100,14 @@
 
   // Bird icons
   &__icon {
-    display: block;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    left: 0;
-    inset-inline-start: 0;
-    top: 0;
-    width: 70%;
-    height: 70%;
-    position: absolute;
-    margin: auto;
-    bottom: 0;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    right: 0;
-    inset-inline-end: 0;
-    // Remove once we drop support for Safari 13.
-    // stylelint-disable-next-line property-disallowed-list
-    transition: left $menu-transition-duration ease,
-      inset-inline-start $menu-transition-duration ease,
-      width $menu-transition-duration ease,
-      height $menu-transition-duration ease;
-
     .sidebar--slim & {
+      width: 42px;
+      height: 51px;
+      top: 10px;
       // Remove once we drop support for Safari 13.
       // stylelint-disable-next-line property-disallowed-list
-      left: -10px;
-      inset-inline-start: -10px;
-      width: 70%;
-      height: 70%;
+      left: -9px;
+      inset-inline-start: -9px;
     }
 
     // TODO: Fix legacy specificity issues

client/src/components/Sidebar/modules/WagtailBranding.tsx

@@ -1,17 +1,9 @@
 import * as React from 'react';
 import { ModuleDefinition, Strings } from '../Sidebar';
-
-export interface LogoImages {
-  mobileLogo: string;
-  desktopLogoBody: string;
-  desktopLogoTail: string;
-  desktopLogoEyeOpen: string;
-  desktopLogoEyeClosed: string;
-}
+import WagtailLogo from './WagtailLogo';
 
 interface WagtailBrandingProps {
   homeUrl: string;
-  images: LogoImages;
   strings: Strings;
   currentPath: string;
   navigate(url: string): void;
@@ -19,7 +11,6 @@ interface WagtailBrandingProps {
 
 const WagtailBranding: React.FunctionComponent<WagtailBrandingProps> = ({
   homeUrl,
-  images,
   strings,
   currentPath,
   navigate,
@@ -102,30 +93,7 @@ const WagtailBranding: React.FunctionComponent<WagtailBrandingProps> = ({
       onMouseLeave={onMouseLeave}
     >
       <div className="sidebar-wagtail-branding__icon-wrapper">
-        <img
-          className="sidebar-wagtail-branding__icon"
-          data-part="body"
-          src={images.desktopLogoBody}
-          alt=""
-        />
-        <img
-          className="sidebar-wagtail-branding__icon"
-          data-part="tail"
-          src={images.desktopLogoTail}
-          alt=""
-        />
-        <img
-          className="sidebar-wagtail-branding__icon"
-          data-part="eye--open"
-          src={images.desktopLogoEyeOpen}
-          alt=""
-        />
-        <img
-          className="sidebar-wagtail-branding__icon"
-          data-part="eye--closed"
-          src={images.desktopLogoEyeClosed}
-          alt=""
-        />
+        <WagtailLogo />
       </div>
     </a>
   );
@@ -133,11 +101,9 @@ const WagtailBranding: React.FunctionComponent<WagtailBrandingProps> = ({
 
 export class WagtailBrandingModuleDefinition implements ModuleDefinition {
   homeUrl: string;
-  images: LogoImages;
 
-  constructor(homeUrl: string, images: LogoImages) {
+  constructor(homeUrl: string) {
     this.homeUrl = homeUrl;
-    this.images = images;
   }
 
   render({ strings, key, navigate, currentPath }) {
@@ -145,7 +111,6 @@ export class WagtailBrandingModuleDefinition implements ModuleDefinition {
       <WagtailBranding
         key={key}
         homeUrl={this.homeUrl}
-        images={this.images}
         strings={strings}
         navigate={navigate}
         currentPath={currentPath}

client/src/components/Sidebar/modules/WagtailLogo.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+
+interface WagtailLogoProps {
+  className?: string;
+}
+
+const WagtailLogo = ({ className }: WagtailLogoProps) => {
+  const feathersClasses = 'group-hover:w-text-black';
+
+  return (
+    <svg
+      className={`
+        ${className || ''}
+         sidebar-wagtail-branding__icon !w-overflow-visible w-group w-text-primary w-transition w-delay-150 w-duration-150 hover:w-scale-75 hover:w-rotate-6 hover:w-translate-y-[-20px] hover:w-translate-x-[10px] w-z-10 w-absolute w-w-[100px] w-h-[125px] w-top-[25px] w-left-[-20px]
+      `}
+      width="430"
+      height="537"
+      viewBox="0 0 430 537"
+      enableBackground="new 0 0 430 537"
+      xmlSpace="preserve"
+      aria-hidden="true"
+    >
+      <g>
+        <path
+          className="wagtail-logo-face"
+          fill="#FFF"
+          d="M352.963,12.781l0.045,23.909c0,0-42.592-15.901-70.037,13.096
+		c-19.961,21.089-21.598,44.264-12.447,75.489c90.422,0,104.358,50.584,104.358,50.584l-9.314-58.195l28.391-34.591
+		C393.958,42.106,360.062,15.018,352.963,12.781"
+        />
+        <path
+          className={`w-hidden ${feathersClasses}`}
+          data-part="eye--closed"
+          d="M343 77.2c14-16 33.8-7 33.8-7"
+          fill="#261A4E"
+          stroke="#231f20"
+          strokeWidth="12"
+        />
+        <path
+          className={feathersClasses}
+          data-part="eye--open"
+          fill="currentColor"
+          d="M371.838,71.336c0,6.016-4.877,10.893-10.893,10.893
+		s-10.893-4.877-10.893-10.893c0-6.016,4.877-10.893,10.893-10.893S371.838,65.321,371.838,71.336"
+        />
+        <path
+          className={feathersClasses}
+          data-part="body"
+          fill="currentColor"
+          d="M374 176s-14-69.4-104.4-50.7C260.6 94 262 71 282 49.8c27.5-29 70-13 70-13v-24C337 6.2 322.8 5 307 5c-58 0-90.3 43.3-104 72.8L39.4 378l46.2-8.6 19.3 24.2c127.6 0 291.7-46 269-217.7"
+        />
+
+        <polygon
+          className={feathersClasses}
+          data-part="beak"
+          fill="currentColor"
+          points="429.948,117.665 393.96,83.063 365.567,117.665"
+        />
+        <path
+          data-part="feather-accent"
+          fill="#FFFFFF"
+          d="M127.182,356.69c0,0,4.245-0.923,11.672-2.539
+		c7.417-1.656,18.014-4.045,30.575-7.466c6.275-1.726,13.045-3.697,20.108-6.065c7.085-2.303,14.437-5.076,21.921-8.202
+		c7.501-3.092,15.019-6.812,22.457-10.906c7.456-4.074,14.657-8.853,21.501-14.049c1.68-1.342,3.444-2.577,5.051-3.999l4.864-4.199
+		c3.08-2.959,6.243-5.817,9.02-8.994c2.938-3.031,5.493-6.344,8.101-9.54c1.246-1.642,2.395-3.343,3.585-4.992l1.757-2.479
+		l1.582-2.568c1.044-1.707,2.08-3.399,3.106-5.076c0.919-1.737,1.827-3.459,2.728-5.162c0.449-0.851,0.895-1.697,1.338-2.539
+		c0.388-0.87,0.774-1.735,1.157-2.594c0.767-1.717,1.524-3.414,2.271-5.087c1.34-3.412,2.562-6.766,3.71-10.015
+		c0.963-3.316,1.979-6.491,2.8-9.583c0.716-3.12,1.401-6.11,2.054-8.954c0.482-2.881,0.938-5.613,1.368-8.18
+		c0.491-2.556,0.66-4.996,0.915-7.235c0.236-2.241,0.455-4.299,0.65-6.159c0.372-7.477,0.585-11.75,0.585-11.75l6.669,0.229
+		c0,0-0.324,4.398-0.894,12.094c-0.248,1.915-0.523,4.036-0.823,6.345c-0.317,2.305-0.556,4.811-1.124,7.447
+		c-0.508,2.643-1.049,5.455-1.619,8.419c-0.745,2.928-1.529,6.006-2.348,9.217c-0.927,3.182-2.057,6.452-3.137,9.856
+		c-1.271,3.341-2.62,6.786-4.095,10.284c-0.815,1.716-1.643,3.456-2.479,5.217c-0.418,0.879-0.84,1.764-1.263,2.654
+		c-0.48,0.862-0.963,1.729-1.449,2.601c-0.974,1.739-1.958,3.498-2.953,5.273c-1.103,1.71-2.216,3.436-3.339,5.176
+		c-0.564,0.867-1.131,1.738-1.7,2.613l-1.875,2.521c-1.27,1.675-2.499,3.398-3.826,5.062c-2.766,3.236-5.482,6.58-8.576,9.627
+		c-2.936,3.195-6.25,6.054-9.479,9.007l-5.081,4.178c-1.678,1.414-3.509,2.635-5.256,3.961c-7.111,5.136-14.549,9.812-22.201,13.76
+		c-7.636,3.969-15.32,7.542-22.954,10.477c-7.619,2.971-15.078,5.579-22.249,7.723c-7.15,2.207-13.986,4.021-20.315,5.599
+		c-12.667,3.126-23.322,5.26-30.779,6.738C131.448,355.869,127.182,356.69,127.182,356.69"
+        />
+      </g>
+      <path
+        className={feathersClasses}
+        data-part="tail"
+        fill="currentColor"
+        d="M109 369.7l-22.4-4.3L2 528.4 61 518l45-128.4"
+      />
+    </svg>
+  );
+};
+
+export default WagtailLogo;

client/src/components/Sidebar/modules/__snapshots__/MainMenu.test.js.snap

@@ -15,12 +15,28 @@ exports[`Menu should render with the minimum required props 1`] = `
     <button
       aria-expanded="false"
       aria-haspopup="menu"
-      className="sidebar-footer__account"
+      className="
+          sidebar-footer__account
+          w-bg-primary
+          w-text-white
+          w-flex
+          w-items-center
+          w-relative
+          w-p-0
+          w-w-full
+          w-appearance-none
+          w-border-0
+          w-overflow-hidden
+          w-px-5
+          w-py-3
+          hover:w-bg-primary-200
+          focus:w-bg-primary-200
+          w-transition"
       onClick={[Function]}
       type="button"
     >
       <div
-        className="avatar square avatar-on-dark"
+        className="avatar avatar-on-dark w-flex-shrink-0 !w-w-[28px] !w-h-[28px]"
       >
         <img
           alt=""
@@ -31,10 +47,10 @@ exports[`Menu should render with the minimum required props 1`] = `
         className="sidebar-footer__account-toggle"
       >
         <div
-          className="sidebar-footer__account-label"
+          className="sidebar-footer__account-label w-label-3"
         />
         <Icon
-          className="sidebar-footer__account-icon"
+          className="w-w-4 w-h-4 w-text-white"
           name="arrow-up"
         />
       </div>

client/src/tokens/colors.js

@@ -116,6 +116,14 @@ const colors = {
       usage: 'Wagtail branding, Panels, Headings, Buttons, Labels',
       contrastText: 'white',
     },
+    200: {
+      hex: '#261A4E',
+      bgUtility: 'w-bg-primary-200',
+      textUtility: 'w-text-primary-200',
+      usage:
+        'Accent for elements used in conjunction with primary colour in sidebar',
+      contrastText: 'white',
+    },
   },
   info: {
     100: {

client/tailwind.config.js

@@ -68,6 +68,12 @@ module.exports = {
       none: 'none',
     },
     spacing,
+    extend: {
+      opacity: {
+        15: '0.15',
+        85: '0.85',
+      },
+    },
   },
   plugins: [
     typeScale,
@@ -87,5 +93,7 @@ module.exports = {
     // Disable float and clear which have poor RTL support.
     float: false,
     clear: false,
+    // Disable text-transform so we don’t rely on uppercasing text.
+    textTransform: false,
   },
 };

tailwind.config.js

@@ -14,6 +14,5 @@ module.exports = {
   corePlugins: {
     // Risk of clashing with existing styles.
     preflight: false,
-    textTransform: false,
   },
 };

wagtail/admin/static_src/wagtailadmin/images/logo-body.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="430" height="537" viewBox="0 0 430 537"><path clip-path="url(#SVGID_2_)" fill="#FFF" d="M353 12.8v24s-42.6-16-70 13c-20 21-21.6 44.3-12.5 75.5C361 125.3 375 176 375 176l-9.4-58.3L394 83c0-41-34-68-41-70.2"/><path clip-path="url(#SVGID_2_)" d="M374 176s-14-69.4-104.4-50.7C260.6 94 262 71 282 49.8c27.5-29 70-13 70-13v-24C337 6.2 322.8 5 307 5c-58 0-90.3 43.3-104 72.8L39.4 378l46.2-8.6 19.3 24.2c127.6 0 291.7-46 269-217.7"/><path clip-path="url(#SVGID_2_)" fill="#231F20" d="M430 117.7L394 83l-28.4 34.7"/><path clip-path="url(#SVGID_2_)" fill="#FFF" d="M127.2 356.7s4.2-1 11.7-2.5c7.3-1.7 18-4 30.4-7.5 6.3-1.7 13-3.7 20-6 7.2-2.4 14.6-5.2 22-8.3 7.6-3 15-6.8 22.5-11 7.4-4 14.6-8.7 21.4-14 1.7-1.3 3.5-2.5 5-4l5-4c3-3 6.2-6 9-9 3-3.2 5.4-6.5 8-9.7 1.3-1.6 2.4-3.3 3.6-5l1.8-2.4 1.6-2.6 3-5c1-1.8 2-3.5 2.8-5.2.5-1 1-1.7 1.3-2.6l1.2-2.7 2.3-5 3.7-10 2.8-9.7 2-9 1.4-8c.4-2.7.6-5 .8-7.3l.7-6.2.6-11.6 6.7.2-1 12c0 2-.4 4-.7 6.4-.3 2.3-.5 4.8-1 7.5-.6 2.6-1.2 5.4-1.7 8.4l-2.4 9c-1 3.3-2 6.6-3.2 10l-4 10.2c-1 1.8-1.8 3.5-2.6 5.3L301 260l-1.5 2.7-3 5.3-3.3 5.2-1.7 2.6-2 2.5c-1 1.7-2.4 3.4-3.7 5-2.8 3.3-5.5 6.6-8.6 9.7-3 3.2-6.2 6-9.5 9l-5 4.2-5.3 4c-7 5-14.5 9.8-22.2 13.7-7.6 4-15.3 7.4-23 10.4-7.6 3-15 5.6-22.2 7.7-7 2.3-14 4-20.3 5.7-12.7 3-23.3 5.3-30.8 6.7l-11.8 2.3"/></svg>

wagtail/admin/static_src/wagtailadmin/images/logo-eyeclosed.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="430" height="537" viewBox="0 0 430 537"><path d="M343 77.2c14-16 33.8-7 33.8-7" fill="none" stroke="#231f20" stroke-width="12"/></svg>

wagtail/admin/static_src/wagtailadmin/images/logo-eyeopen.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="430" height="537" viewBox="0 0 430 537"><path clip-path="url(#SVGID_2_)" fill="#231F20" d="M371.8 71.3c0 6-4.8 11-11 11s-10.7-5-10.7-11 5-11 11-11 10.8 5 10.8 11"/></svg>

wagtail/admin/static_src/wagtailadmin/images/logo-tail.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="430" height="537" viewBox="0 0 430 537"><path clip-path="url(#SVGID_2_)" d="M109 369.7l-22.4-4.3L2 528.4 61 518l45-128.4"/></svg>

wagtail/admin/static_src/wagtailadmin/images/wagtail-logo.svg

@@ -1,32 +1,32 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
-	 width="430px" height="537px" viewBox="0 0 430 537" enable-background="new 0 0 430 537" xml:space="preserve">
-<g>
-	<path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M352.963,12.781l0.045,23.909c0,0-42.592-15.901-70.037,13.096
-		c-19.961,21.089-21.598,44.264-12.447,75.489c90.422,0,104.358,50.584,104.358,50.584l-9.314-58.195l28.391-34.591
-		C393.958,42.106,360.062,15.018,352.963,12.781"/>
-	<path clip-path="url(#SVGID_2_)" fill="#231F20" d="M371.838,71.336c0,6.016-4.877,10.893-10.893,10.893
-		s-10.893-4.877-10.893-10.893c0-6.016,4.877-10.893,10.893-10.893S371.838,65.321,371.838,71.336"/>
-	<path clip-path="url(#SVGID_2_)" d="M374.882,175.859c0,0-13.937-69.263-104.269-50.584c-9.15-31.225-7.514-54.4,12.447-75.489
-		c27.446-28.997,69.947-13.096,69.947-13.096l0.045-23.909c-14.938-6.55-29.306-7.793-45.234-7.793
-		c-58.05,0-90.339,43.279-104.013,72.822L40.449,378.081l46.114-8.633L1.876,532.531l59.087-10.6l44.912-128.322
-		C233.685,393.609,397.758,347.72,374.882,175.859"/>
-	<polygon clip-path="url(#SVGID_2_)" fill="#231F20" points="429.948,117.665 393.96,83.063 365.567,117.665 	"/>
-	<path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M127.182,356.69c0,0,4.245-0.923,11.672-2.539
-		c7.417-1.656,18.014-4.045,30.575-7.466c6.275-1.726,13.045-3.697,20.108-6.065c7.085-2.303,14.437-5.076,21.921-8.202
-		c7.501-3.092,15.019-6.812,22.457-10.906c7.456-4.074,14.657-8.853,21.501-14.049c1.68-1.342,3.444-2.577,5.051-3.999l4.864-4.199
-		c3.08-2.959,6.243-5.817,9.02-8.994c2.938-3.031,5.493-6.344,8.101-9.54c1.246-1.642,2.395-3.343,3.585-4.992l1.757-2.479
-		l1.582-2.568c1.044-1.707,2.08-3.399,3.106-5.076c0.919-1.737,1.827-3.459,2.728-5.162c0.449-0.851,0.895-1.697,1.338-2.539
-		c0.388-0.87,0.774-1.735,1.157-2.594c0.767-1.717,1.524-3.414,2.271-5.087c1.34-3.412,2.562-6.766,3.71-10.015
-		c0.963-3.316,1.979-6.491,2.8-9.583c0.716-3.12,1.401-6.11,2.054-8.954c0.482-2.881,0.938-5.613,1.368-8.18
-		c0.491-2.556,0.66-4.996,0.915-7.235c0.236-2.241,0.455-4.299,0.65-6.159c0.372-7.477,0.585-11.75,0.585-11.75l6.669,0.229
-		c0,0-0.324,4.398-0.894,12.094c-0.248,1.915-0.523,4.036-0.823,6.345c-0.317,2.305-0.556,4.811-1.124,7.447
-		c-0.508,2.643-1.049,5.455-1.619,8.419c-0.745,2.928-1.529,6.006-2.348,9.217c-0.927,3.182-2.057,6.452-3.137,9.856
-		c-1.271,3.341-2.62,6.786-4.095,10.284c-0.815,1.716-1.643,3.456-2.479,5.217c-0.418,0.879-0.84,1.764-1.263,2.654
-		c-0.48,0.862-0.963,1.729-1.449,2.601c-0.974,1.739-1.958,3.498-2.953,5.273c-1.103,1.71-2.216,3.436-3.339,5.176
-		c-0.564,0.867-1.131,1.738-1.7,2.613l-1.875,2.521c-1.27,1.675-2.499,3.398-3.826,5.062c-2.766,3.236-5.482,6.58-8.576,9.627
-		c-2.936,3.195-6.25,6.054-9.479,9.007l-5.081,4.178c-1.678,1.414-3.509,2.635-5.256,3.961c-7.111,5.136-14.549,9.812-22.201,13.76
-		c-7.636,3.969-15.32,7.542-22.954,10.477c-7.619,2.971-15.078,5.579-22.249,7.723c-7.15,2.207-13.986,4.021-20.315,5.599
-		c-12.667,3.126-23.322,5.26-30.779,6.738C131.448,355.869,127.182,356.69,127.182,356.69"/>
-</g>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+	 width="430px" height="537px" viewBox="0 0 430 537" enable-background="new 0 0 430 537" xml:space="preserve">
+<g>
+	<path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M352.963,12.781l0.045,23.909c0,0-42.592-15.901-70.037,13.096
+		c-19.961,21.089-21.598,44.264-12.447,75.489c90.422,0,104.358,50.584,104.358,50.584l-9.314-58.195l28.391-34.591
+		C393.958,42.106,360.062,15.018,352.963,12.781"/>
+	<path clip-path="url(#SVGID_2_)" fill="#231F20" d="M371.838,71.336c0,6.016-4.877,10.893-10.893,10.893
+		s-10.893-4.877-10.893-10.893c0-6.016,4.877-10.893,10.893-10.893S371.838,65.321,371.838,71.336"/>
+	<path clip-path="url(#SVGID_2_)" d="M374.882,175.859c0,0-13.937-69.263-104.269-50.584c-9.15-31.225-7.514-54.4,12.447-75.489
+		c27.446-28.997,69.947-13.096,69.947-13.096l0.045-23.909c-14.938-6.55-29.306-7.793-45.234-7.793
+		c-58.05,0-90.339,43.279-104.013,72.822L40.449,378.081l46.114-8.633L1.876,532.531l59.087-10.6l44.912-128.322
+		C233.685,393.609,397.758,347.72,374.882,175.859"/>
+	<polygon clip-path="url(#SVGID_2_)" fill="#231F20" points="429.948,117.665 393.96,83.063 365.567,117.665 	"/>
+	<path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M127.182,356.69c0,0,4.245-0.923,11.672-2.539
+		c7.417-1.656,18.014-4.045,30.575-7.466c6.275-1.726,13.045-3.697,20.108-6.065c7.085-2.303,14.437-5.076,21.921-8.202
+		c7.501-3.092,15.019-6.812,22.457-10.906c7.456-4.074,14.657-8.853,21.501-14.049c1.68-1.342,3.444-2.577,5.051-3.999l4.864-4.199
+		c3.08-2.959,6.243-5.817,9.02-8.994c2.938-3.031,5.493-6.344,8.101-9.54c1.246-1.642,2.395-3.343,3.585-4.992l1.757-2.479
+		l1.582-2.568c1.044-1.707,2.08-3.399,3.106-5.076c0.919-1.737,1.827-3.459,2.728-5.162c0.449-0.851,0.895-1.697,1.338-2.539
+		c0.388-0.87,0.774-1.735,1.157-2.594c0.767-1.717,1.524-3.414,2.271-5.087c1.34-3.412,2.562-6.766,3.71-10.015
+		c0.963-3.316,1.979-6.491,2.8-9.583c0.716-3.12,1.401-6.11,2.054-8.954c0.482-2.881,0.938-5.613,1.368-8.18
+		c0.491-2.556,0.66-4.996,0.915-7.235c0.236-2.241,0.455-4.299,0.65-6.159c0.372-7.477,0.585-11.75,0.585-11.75l6.669,0.229
+		c0,0-0.324,4.398-0.894,12.094c-0.248,1.915-0.523,4.036-0.823,6.345c-0.317,2.305-0.556,4.811-1.124,7.447
+		c-0.508,2.643-1.049,5.455-1.619,8.419c-0.745,2.928-1.529,6.006-2.348,9.217c-0.927,3.182-2.057,6.452-3.137,9.856
+		c-1.271,3.341-2.62,6.786-4.095,10.284c-0.815,1.716-1.643,3.456-2.479,5.217c-0.418,0.879-0.84,1.764-1.263,2.654
+		c-0.48,0.862-0.963,1.729-1.449,2.601c-0.974,1.739-1.958,3.498-2.953,5.273c-1.103,1.71-2.216,3.436-3.339,5.176
+		c-0.564,0.867-1.131,1.738-1.7,2.613l-1.875,2.521c-1.27,1.675-2.499,3.398-3.826,5.062c-2.766,3.236-5.482,6.58-8.576,9.627
+		c-2.936,3.195-6.25,6.054-9.479,9.007l-5.081,4.178c-1.678,1.414-3.509,2.635-5.256,3.961c-7.111,5.136-14.549,9.812-22.201,13.76
+		c-7.636,3.969-15.32,7.542-22.954,10.477c-7.619,2.971-15.078,5.579-22.249,7.723c-7.15,2.207-13.986,4.021-20.315,5.599
+		c-12.667,3.126-23.322,5.26-30.779,6.738C131.448,355.869,127.182,356.69,127.182,356.69"/>
+</g>
+</svg>

wagtail/admin/static_src/wagtailadmin/scss/layouts/404.scss

@@ -68,13 +68,6 @@ a.button.page404__button {
   }
 }
 
-// SMALL DESKTOP CHANGES:
-@include media-breakpoint-down(sm) {
-  .wagtail-logo-container__desktop {
-    display: none;
-  }
-}
-
 // MOBILE CHANGES:
 @include media-breakpoint-down(xs) {
   .page404__text-container {

wagtail/admin/templates/wagtailadmin/404.html

@@ -12,7 +12,7 @@
 
 {% block furniture %}
     <main class="page404__bg">
-        <div class="page404__wrapper">
+        <div class="w-w-full w-h-full w-max-w-6xl w-mx-auto w-flex w-items-center w-justify-center">
             {% block branding_logo %}
                 {% include "wagtailadmin/shared/animated_logo.html" %}
             {% endblock %}

wagtail/admin/templates/wagtailadmin/icons/expand-right.svg

@@ -0,0 +1,6 @@
+<symbol id="icon-expand-right" viewBox="0 0 15 13" >
+    <g opacity=".8" fill="currentColor">
+        <path d="M8.26953 2.81445c-.21484.21485-.19336.53711 0 .75196l2.59957 2.44921H4.70312c-.30078 0-.51562.23633-.51562.51563v.6875c0 .30078.21484.51563.51562.51563h6.16598L8.26953 10.2051c-.19336.2148-.19336.5371 0 .7519l.47266.4727c.21484.1933.53711.1933.73047 0l4.18944-4.18947c.1934-.19335.1934-.51562 0-.73046L9.47266 2.3418c-.19336-.19336-.51563-.19336-.73047 0l-.47266.47265Z"/>
+        <rect y="1" width="2" height="12" rx="1"/>
+    </g>
+</symbol>

wagtail/admin/templates/wagtailadmin/shared/animated_logo.html

@@ -1,10 +1,5 @@
 {% load wagtailadmin_tags %}
 
-<div class="wagtail-logo-container__desktop u-hidden@xs" data-animated-logo-container>
-    <div class="wagtail-logo-container-inner">
-        <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>
+<div class="wagtail-logo-container__desktop w-hidden sm:w-block">
+    <img src="{% versioned_static 'wagtailadmin/images/wagtail-logo.svg' %}" alt=""/>
 </div>

wagtail/admin/tests/ui/test_sidebar.py

@@ -10,7 +10,6 @@ from wagtail.admin.ui.sidebar import (
     PageExplorerMenuItem,
     SearchModule,
     SubMenuItem,
-    WagtailBrandingModule,
 )
 from wagtail.telepath import JSContext
 from wagtail.test.utils import WagtailTestUtils
@@ -171,25 +170,6 @@ class TestAdaptPageExplorerMenuItem(TestCase):
         )
 
 
-class TestAdaptWagtailBrandingModule(TestCase):
-    def test_adapt(self):
-        packed = JSContext().pack(WagtailBrandingModule())
-
-        self.assertEqual(packed["_type"], "wagtail.sidebar.WagtailBrandingModule")
-        self.assertEqual(len(packed["_args"]), 2)
-        self.assertEqual(packed["_args"][0], reverse("wagtailadmin_home"))
-        self.assertEqual(
-            packed["_args"][1].keys(),
-            {
-                "desktopLogoBody",
-                "desktopLogoEyeClosed",
-                "desktopLogoEyeOpen",
-                "desktopLogoTail",
-                "mobileLogo",
-            },
-        )
-
-
 class TestAdaptSearchModule(TestCase):
     def test_adapt(self):
         packed = JSContext().pack(SearchModule(SearchArea("Search", "/search/")))

wagtail/admin/ui/sidebar.py

@@ -137,21 +137,6 @@ class WagtailBrandingModule:
     def js_args(self):
         return [
             reverse("wagtailadmin_home"),
-            {
-                "mobileLogo": versioned_static("wagtailadmin/images/wagtail-logo.svg"),
-                "desktopLogoBody": versioned_static(
-                    "wagtailadmin/images/logo-body.svg"
-                ),
-                "desktopLogoTail": versioned_static(
-                    "wagtailadmin/images/logo-tail.svg"
-                ),
-                "desktopLogoEyeOpen": versioned_static(
-                    "wagtailadmin/images/logo-eyeopen.svg"
-                ),
-                "desktopLogoEyeClosed": versioned_static(
-                    "wagtailadmin/images/logo-eyeclosed.svg"
-                ),
-            },
         ]
 
 

wagtail/admin/wagtail_hooks.py

@@ -962,6 +962,7 @@ def register_icons(icons):
         "duplicate.svg",
         "edit.svg",
         "ellipsis-v.svg",
+        "expand-right.svg",
         "error.svg",
         "folder-inverse.svg",
         "folder-open-1.svg",