diff --git a/client/src/components/Sidebar/modules/WagtailBranding.scss b/client/src/components/Sidebar/modules/WagtailBranding.scss
index 091f5bf6bb59..b2f94d76bb16 100644
--- a/client/src/components/Sidebar/modules/WagtailBranding.scss
+++ b/client/src/components/Sidebar/modules/WagtailBranding.scss
@@ -8,7 +8,7 @@ $logo-size: 110px;
}
to {
- transform: rotate(7deg);
+ transform: rotate(20deg) translate(30%, -25%) scale(1.1);
}
}
@@ -59,6 +59,8 @@ $logo-size: 110px;
}
[data-part='eye--closed'] {
+ // Compensate viewbox width difference
+ transform: translateX(-18px);
display: inline !important;
}
}
diff --git a/client/src/components/Sidebar/modules/WagtailLogo.tsx b/client/src/components/Sidebar/modules/WagtailLogo.tsx
index 4b6646e7610c..14636ab19808 100644
--- a/client/src/components/Sidebar/modules/WagtailLogo.tsx
+++ b/client/src/components/Sidebar/modules/WagtailLogo.tsx
@@ -28,14 +28,14 @@ const WagtailLogo = ({ className, slim }: WagtailLogoProps) => {
${className || ''}
${
slim
- ? 'w-w-[58px] w-h-[57px] w-top-2 hover:-w-translate-y-1'
+ ? 'w-w-[58px] w-h-[57px] w-top-2 hover:w-translate-x-1 hover:-w-translate-y-1'
: 'w-w-[120px] w-h-[200px] -w-top-1 hover:w-translate-x-2 hover:-w-translate-y-3'
}
`}
- width="430"
- height="537"
- viewBox="0 0 430 537"
- enableBackground="new 0 0 430 537"
+ width="225"
+ height="274"
+ viewBox="0 0 225 274"
+ enableBackground="new 0 0 225 274"
xmlSpace="preserve"
aria-hidden="true"
>
@@ -43,64 +43,57 @@ const WagtailLogo = ({ className, slim }: WagtailLogoProps) => {
-
-
+
);