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) => { - - + );