Updated dynamic sidebar Wagtail logo

- Relates to #10404
- See original PR #10659

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

@@ -9,7 +9,7 @@ $logo-size: 110px;
   }
 
   to {
-    transform: rotate(7deg);
+    transform: rotate(20deg) translate(30%, -25%) scale(1.1);
   }
 }
 
@@ -56,7 +56,6 @@ $logo-size: 110px;
         animation-iteration-count: infinite;
       }
 
-      // TODO: Fix legacy specificity issues
       [data-part='eye--open'] {
         display: none !important;
       }

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,58 @@ const WagtailLogo = ({ className, slim }: WagtailLogoProps) => {
         <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"
+          d="M194.897 79.492c-8.392-12.793-22.602-21.27-38.773-21.27-5.322 0-10.496.915-15.32 2.62a30.755 30.755 0 0 1-4.039-15.3c0-17.078
+          13.325-30.792 29.918-30.792 4.274 0 8.046.776 11.565 2.328 1.746-2.566 3.491-5.64 5.236-9.476 7.108 4.095 19.786 14.99 21.26
+          33.397L190.72 61.88l4.177 17.612Z"
         />
         <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"
+          d="M183.083 36.4189C181.131 37.0166 179.364 38.6306 178.317 40.5186C178.048 41.0035 177.464 41.2495 176.954 41.0359L173.968
+          39.7874C173.46 39.5751 173.217 38.9905 173.464 38.498C175.023 35.3889 177.903 32.5075 181.558 31.388C185.602 30.1494 190.075
+          31.2163 194.019 35.3681C194.398 35.7669 194.352 36.3991 193.936 36.7609L191.492 38.8897C191.073 39.2538 190.441 39.2043 190.053
+          38.8094C187.354 36.0624 184.921 35.8559 183.083 36.4189Z"
+          fill="currentColor"
         />
         <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"
+          d="M185.54 42.697c3.332 0 6.034-2.781 6.034-6.211s-2.702-6.21-6.034-6.21c-3.333 0-6.034 2.78-6.034 6.21s2.701 6.21 6.034 6.21Z"
         />
         <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"
+          d="m21.867 193.558 92.839-164.565C122.124 11.853 138.827 0 158.135 0c9.302 0 18.102 2.588 25.393 7.504-1.76 3.882-3.52 6.987-5.28
+          9.575-3.52-1.553-7.291-2.33-11.565-2.33-16.594 0-29.919 13.716-29.919 30.794 0 5.646 1.496 10.83 4.04 15.3a45.95 45.95 0 0 1
+          15.319-2.62c25.896 0 46.764 21.736 46.764 48.131 0 1.104-.183 2.209-.394 3.475l-.109.665h.252c-.126.906-.315 1.811-.503
+          2.717-.189.906-.377 1.811-.503 2.717v.259c-17.487 91.789-126.812 89.821-143.747 89.031l.112-.386-1.743-30.679-6.872 12.197-27.513 7.208Z"
         />
 
-        <polygon
+        <path
+          className={feathersClasses}
+          data-part="body-tail-connector"
+          fill="currentColor"
+          d="m49.277 186.425 8.718 18.407-1.743-30.679-6.975 12.272Z"
+        />
+        <path
           className={feathersClasses}
           data-part="beak"
           fill="currentColor"
-          points="429.948,117.665 393.96,83.063 365.567,117.665"
+          d="m204.648 41.144-11.817 18.114h31.93l-20.113-18.114Z"
         />
         <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"
+          fill="#FFF"
+          d="m99.304 170.528-2.012 1.552s66.877-11.127 77.437-67.797l-10.56 3.623s-2.765 43.99-64.865 62.622Z"
         />
       </g>
       <path
         className={feathersClasses}
         data-part="tail"
         fill="currentColor"
-        d="M109 369.7l-22.4-4.3L2 528.4 61 518l45-128.4"
+        d="M56.252 174.153.456 273.202l41.847-14.025 15.692-54.345-1.743-30.679Z"
       />
     </svg>
   );