diff --git a/client/scss/components/_logo.scss b/client/scss/components/_logo.scss
index a56c1eed29..ea6ee1f969 100644
--- a/client/scss/components/_logo.scss
+++ b/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;
diff --git a/client/scss/components/_main-nav.scss b/client/scss/components/_main-nav.scss
index b766ee33f8..316c45fb15 100644
--- a/client/scss/components/_main-nav.scss
+++ b/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;
}
diff --git a/client/scss/settings/_variables.scss b/client/scss/settings/_variables.scss
index 201a9ca509..be632f8471 100644
--- a/client/scss/settings/_variables.scss
+++ b/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
diff --git a/client/src/components/PageExplorer/PageExplorer.scss b/client/src/components/PageExplorer/PageExplorer.scss
index 191faeb976..ba7baa23cb 100644
--- a/client/src/components/PageExplorer/PageExplorer.scss
+++ b/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 {
diff --git a/client/src/components/PageExplorer/PageExplorerItem.scss b/client/src/components/PageExplorer/PageExplorerItem.scss
index 3506ed4709..55c1cd6e36 100644
--- a/client/src/components/PageExplorer/PageExplorerItem.scss
+++ b/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;
}
diff --git a/client/src/components/PageExplorer/PageExplorerItem.tsx b/client/src/components/PageExplorer/PageExplorerItem.tsx
index e0a33c0941..1618234bc4 100644
--- a/client/src/components/PageExplorer/PageExplorerItem.tsx
+++ b/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) && (
diff --git a/client/src/components/PublicationStatus/PublicationStatus.scss b/client/src/components/PublicationStatus/PublicationStatus.scss
index 4d13c0afee..f6b3732e00 100644
--- a/client/src/components/PublicationStatus/PublicationStatus.scss
+++ b/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;
}
diff --git a/client/src/components/Sidebar/Sidebar.scss b/client/src/components/Sidebar/Sidebar.scss
index 7870f1a548..8a0e7e4cc9 100644
--- a/client/src/components/Sidebar/Sidebar.scss
+++ b/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;
}
}
diff --git a/client/src/components/Sidebar/Sidebar.stories.tsx b/client/src/components/Sidebar/Sidebar.stories.tsx
index 7e33db1d8e..48c828941b 100644
--- a/client/src/components/Sidebar/Sidebar.stories.tsx
+++ b/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,
+ });
}
diff --git a/client/src/components/Sidebar/Sidebar.tsx b/client/src/components/Sidebar/Sidebar.tsx
index db114d92dc..81ee1d741b 100644
--- a/client/src/components/Sidebar/Sidebar.tsx
+++ b/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
diff --git a/client/src/components/Sidebar/__snapshots__/Sidebar.test.js.snap b/client/src/components/Sidebar/__snapshots__/Sidebar.test.js.snap
index 2889aa448c..e7f599580c 100644
--- a/client/src/components/Sidebar/__snapshots__/Sidebar.test.js.snap
+++ b/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
diff --git a/client/src/components/Sidebar/menu/MenuItem.scss b/client/src/components/Sidebar/menu/MenuItem.scss
index 81e2da6bff..e8cc4dfd2d 100644
--- a/client/src/components/Sidebar/menu/MenuItem.scss
+++ b/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 {
diff --git a/client/src/components/Sidebar/menu/SubMenuItem.scss b/client/src/components/Sidebar/menu/SubMenuItem.scss
index 7174ea56ed..a73c461cf8 100644
--- a/client/src/components/Sidebar/menu/SubMenuItem.scss
+++ b/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;
diff --git a/client/src/components/Sidebar/menu/SubMenuItem.tsx b/client/src/components/Sidebar/menu/SubMenuItem.tsx
index 45d04efea9..d455881a77 100644
--- a/client/src/components/Sidebar/menu/SubMenuItem.tsx
+++ b/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" />
diff --git a/client/src/components/Sidebar/menu/__snapshots__/SubMenuItem.test.js.snap b/client/src/components/Sidebar/menu/__snapshots__/SubMenuItem.test.js.snap
index 31af2f2bb3..def27518d8 100644
--- a/client/src/components/Sidebar/menu/__snapshots__/SubMenuItem.test.js.snap
+++ b/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
diff --git a/client/src/components/Sidebar/modules/MainMenu.scss b/client/src/components/Sidebar/modules/MainMenu.scss
index c919f45165..6b967cff57 100644
--- a/client/src/components/Sidebar/modules/MainMenu.scss
+++ b/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;
- }
}
diff --git a/client/src/components/Sidebar/modules/MainMenu.tsx b/client/src/components/Sidebar/modules/MainMenu.tsx
index 3309c5fa1e..9f2638f7ae 100644
--- a/client/src/components/Sidebar/modules/MainMenu.tsx
+++ b/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>
diff --git a/client/src/components/Sidebar/modules/Search.scss b/client/src/components/Sidebar/modules/Search.scss
index 2bd187ba64..3ff0a7704c 100644
--- a/client/src/components/Sidebar/modules/Search.scss
+++ b/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;
}
diff --git a/client/src/components/Sidebar/modules/Search.tsx b/client/src/components/Sidebar/modules/Search.tsx
index d91e3b0006..b5f29dfd79 100644
--- a/client/src/components/Sidebar/modules/Search.tsx
+++ b/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>
);
};
diff --git a/client/src/components/Sidebar/modules/WagtailBranding.scss b/client/src/components/Sidebar/modules/WagtailBranding.scss
index c9a0a79b94..df1eab9860 100644
--- a/client/src/components/Sidebar/modules/WagtailBranding.scss
+++ b/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;
- }
+ // 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;
- }
+ // TODO: Fix legacy specificity issues
+ [data-part='eye--open'] {
+ display: none !important;
+ }
- &[data-part='eye--closed'] {
- display: inline !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
diff --git a/client/src/components/Sidebar/modules/WagtailBranding.tsx b/client/src/components/Sidebar/modules/WagtailBranding.tsx
index 3815acd34a..762840ce7c 100644
--- a/client/src/components/Sidebar/modules/WagtailBranding.tsx
+++ b/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}
diff --git a/client/src/components/Sidebar/modules/WagtailLogo.tsx b/client/src/components/Sidebar/modules/WagtailLogo.tsx
new file mode 100644
index 0000000000..5cc0acf880
--- /dev/null
+++ b/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;
diff --git a/client/src/components/Sidebar/modules/__snapshots__/MainMenu.test.js.snap b/client/src/components/Sidebar/modules/__snapshots__/MainMenu.test.js.snap
index cfaad0e459..1296cb0c70 100644
--- a/client/src/components/Sidebar/modules/__snapshots__/MainMenu.test.js.snap
+++ b/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>
diff --git a/client/src/tokens/colors.js b/client/src/tokens/colors.js
index b1fdbe076c..33f871525a 100644
--- a/client/src/tokens/colors.js
+++ b/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: {
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 15e46ca26f..e80340454a 100644
--- a/client/tailwind.config.js
+++ b/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,
},
};
diff --git a/tailwind.config.js b/tailwind.config.js
index 0b23940838..ce93c9d105 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,6 +14,5 @@ module.exports = {
corePlugins: {
// Risk of clashing with existing styles.
preflight: false,
- textTransform: false,
},
};
diff --git a/wagtail/admin/static_src/wagtailadmin/images/logo-body.svg b/wagtail/admin/static_src/wagtailadmin/images/logo-body.svg
deleted file mode 100644
index 69bdbb9db6..0000000000
--- a/wagtail/admin/static_src/wagtailadmin/images/logo-body.svg
+++ /dev/null
@@ -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>
diff --git a/wagtail/admin/static_src/wagtailadmin/images/logo-eyeclosed.svg b/wagtail/admin/static_src/wagtailadmin/images/logo-eyeclosed.svg
deleted file mode 100644
index bc5168c3ae..0000000000
--- a/wagtail/admin/static_src/wagtailadmin/images/logo-eyeclosed.svg
+++ /dev/null
@@ -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>
diff --git a/wagtail/admin/static_src/wagtailadmin/images/logo-eyeopen.svg b/wagtail/admin/static_src/wagtailadmin/images/logo-eyeopen.svg
deleted file mode 100644
index 155a7bdf4e..0000000000
--- a/wagtail/admin/static_src/wagtailadmin/images/logo-eyeopen.svg
+++ /dev/null
@@ -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>
diff --git a/wagtail/admin/static_src/wagtailadmin/images/logo-tail.svg b/wagtail/admin/static_src/wagtailadmin/images/logo-tail.svg
deleted file mode 100644
index f6715a00f8..0000000000
--- a/wagtail/admin/static_src/wagtailadmin/images/logo-tail.svg
+++ /dev/null
@@ -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>
diff --git a/wagtail/admin/static_src/wagtailadmin/images/wagtail-logo.svg b/wagtail/admin/static_src/wagtailadmin/images/wagtail-logo.svg
index 9203715575..7fda0655c3 100644
--- a/wagtail/admin/static_src/wagtailadmin/images/wagtail-logo.svg
+++ b/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>
diff --git a/wagtail/admin/static_src/wagtailadmin/scss/layouts/404.scss b/wagtail/admin/static_src/wagtailadmin/scss/layouts/404.scss
index 0bfe696b10..496af7e084 100644
--- a/wagtail/admin/static_src/wagtailadmin/scss/layouts/404.scss
+++ b/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 {
diff --git a/wagtail/admin/templates/wagtailadmin/404.html b/wagtail/admin/templates/wagtailadmin/404.html
index 5cf309c718..2cef48eafb 100644
--- a/wagtail/admin/templates/wagtailadmin/404.html
+++ b/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 %}
diff --git a/wagtail/admin/templates/wagtailadmin/icons/expand-right.svg b/wagtail/admin/templates/wagtailadmin/icons/expand-right.svg
new file mode 100644
index 0000000000..8952fc7d86
--- /dev/null
+++ b/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>
diff --git a/wagtail/admin/templates/wagtailadmin/shared/animated_logo.html b/wagtail/admin/templates/wagtailadmin/shared/animated_logo.html
index 7dfaf7c5a2..771a8dd4c2 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/animated_logo.html
+++ b/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>
diff --git a/wagtail/admin/tests/ui/test_sidebar.py b/wagtail/admin/tests/ui/test_sidebar.py
index 21a290f9d8..a3b6b81605 100644
--- a/wagtail/admin/tests/ui/test_sidebar.py
+++ b/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/")))
diff --git a/wagtail/admin/ui/sidebar.py b/wagtail/admin/ui/sidebar.py
index 0d8668037b..0cc0bb292a 100644
--- a/wagtail/admin/ui/sidebar.py
+++ b/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"
- ),
- },
]
diff --git a/wagtail/admin/wagtail_hooks.py b/wagtail/admin/wagtail_hooks.py
index 0f2b7adb96..106f231dff 100644
--- a/wagtail/admin/wagtail_hooks.py
+++ b/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",