DEVPROD-13604 Create Holiday tree for Spruce (#547)

evergreen-ci · Dec 20, 2024 · 7eb5439 · 7eb5439
1 parent 6f86d7e
commit 7eb5439
Show file tree

Hide file tree

Showing 4 changed files with 207 additions and 108 deletions.
diff --git a/apps/spruce/src/components/Header/Navbar.tsx b/apps/spruce/src/components/Header/Navbar.tsx
@@ -9,7 +9,7 @@ import { size } from "@evg-ui/lib/constants/tokens";
 import { useNavbarAnalytics } from "analytics";
 import Icon from "components/Icon";
 import AnimatedIcon from "components/Icon/AnimatedIcon";
-import { FallTree } from "components/Icon/icons/FallTree";
+import { HolidayTree } from "components/Icon/icons/HolidayTree";
 import { CURRENT_PROJECT } from "constants/cookies";
 import { wikiUrl } from "constants/externalResources";
 import {
@@ -72,7 +72,7 @@ export const Navbar: React.FC = () => {
           onClick={() => sendEvent({ name: "Clicked logo link" })}
           to={routes.myPatches}
         >
-          <AnimatedIcon icon={FallTree} />
+          <StyledAnimatedIcon icon={HolidayTree} />
         </LogoLink>
         <PrimaryLink
           data-cy="project-health-link"
@@ -185,3 +185,7 @@ const secondaryStyle = css`
 const SecondaryLink = styled.a`
   ${secondaryStyle}
 `;
+
+const StyledAnimatedIcon = styled(AnimatedIcon)`
+  margin-bottom: ${size.xxs};
+`;
diff --git a/apps/spruce/src/components/Icon/AnimatedIcon/index.tsx b/apps/spruce/src/components/Icon/AnimatedIcon/index.tsx
@@ -20,7 +20,7 @@ interface AnimatedIconProps {
  * @param param0.icon - The SVG icon to animate.
  * @returns - A React component that wraps an SVG icon and adds mouse enter and mouse leave events to pause and unpause animations.
  */
-const AnimatedIcon: React.FC<AnimatedIconProps> = ({ icon }) => {
+const AnimatedIcon: React.FC<AnimatedIconProps> = ({ icon, ...rest }) => {
   const iconRef = useRef<SVGSVGElement>(null);
   // Animations should be paused by default on page load.
   useEffect(() => {
@@ -50,6 +50,7 @@ const AnimatedIcon: React.FC<AnimatedIconProps> = ({ icon }) => {
       ref={iconRef}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
+      {...rest}
     />
   );
 };

diff --git a/apps/spruce/src/components/Icon/icons/FallTree.tsx b/apps/spruce/src/components/Icon/icons/FallTree.tsx
diff --git a/apps/spruce/src/components/Icon/icons/HolidayTree.tsx b/apps/spruce/src/components/Icon/icons/HolidayTree.tsx
@@ -0,0 +1,199 @@
+import { forwardRef } from "react";
+
+export const HolidayTree = forwardRef<SVGSVGElement>((props, ref) => (
+  <svg
+    ref={ref}
+    shapeRendering="geometricPrecision"
+    textRendering="geometricPrecision"
+    viewBox="0 0 40 39"
+    width="46"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M7.781 32.258C2.992 32.57.105 34.3.04 35.727c-.066 1.421 3.219 1.457 6.41 1.996 3.188.543 6.832.078 9.364.078 2.527 0 4.816.398 7.43-.649 3.05-1.222 3.214-.636 6.804-.636 3.164 0 9.668-.18 9.945-1.93.102-.652-2.285-3.258-10.351-1.285-2.563.629-3.922-.633-6.246-.832-3.43-.293-3.93.781-5.625.636-5.61-.48-6.395-1.082-9.989-.847Zm0 0"
+      fill="#e3fcf7"
+    />
+    <path
+      d="M18.477 30.488h3.23c.438 0 .793.352.793.782v2.007c0 1.082-.89 1.961-1.992 1.961h-.832c-1.102 0-1.992-.879-1.992-1.96V31.27c0-.43.355-.782.793-.782Zm0 0"
+      fill="#4c2100"
+    />
+    <path
+      d="M25.309 16.738c.793 0 1.27-.875.832-1.531l-5.649-8.414a.507.507 0 0 0-.84 0l-5.629 8.418c-.437.652.04 1.527.832 1.527ZM26.54 23.887H13.718L8.195 30.18c-.441.656.035 1.527.832 1.527h22.13c.796 0 1.273-.875.835-1.527ZM27.922 23.887c.797 0 1.273-.875.836-1.528l-4.442-5.62h-8.468l-4.47 5.62c-.437.657.04 1.528.837 1.528Zm0 0"
+      fill="#00a35c"
+    />
+    <path
+      d="M25.723 18.52s-1.313 3.085-3.922.648c0 0-.531 1.082-2.465 0 0 0-1.066 2.371-2.613 0 0 0-2.465 1.754-2.54-.36l1.653-2.078h8.473ZM29.219 26.977s-1.602 3.093-5.114 0c0 0-.554 3.753-3.058 1.628 0 0-2.121 2.594-3.063-.488 0 0-1.214 1.477-2.64-.32 0 0-5.805 2.644-4.461-.684l2.836-3.226h12.82ZM22.82 10.266l-2.328-3.473a.507.507 0 0 0-.84 0l-3.093 4.625c-.516 2.242 1.43.672 1.43.672-.2 3.683 1.956-.434 1.956-.434.2 4.406 1.758.223 1.758.223 2.02 2.61 1.98-.25 1.117-1.613Zm0 0"
+      fill="#e3fcf7"
+    />
+    <path
+      d="M12.633 4.992c0 .774-.637 1.399-1.418 1.399-.785 0-1.422-.625-1.422-1.399s.637-1.398 1.422-1.398c.781 0 1.418.625 1.418 1.398Zm0 0"
+      fill="#e3fcf7"
+    >
+      <animateTransform
+        attributeName="transform"
+        dur="3s"
+        from="12.453453 -27.76152"
+        repeatCount="indefinite"
+        to="11.135362 5.703118"
+        type="translate"
+      />
+    </path>
+    <path
+      d="M31.348 17.195c0 .774-.637 1.403-1.422 1.403a1.412 1.412 0 0 1-1.418-1.403c0-.77.637-1.398 1.418-1.398.785 0 1.422.629 1.422 1.398Zm0 0"
+      fill="#e3fcf7"
+    >
+      <animateTransform
+        attributeName="transform"
+        dur="3s"
+        from="31.168297 -15.556441"
+        repeatCount="indefinite"
+        to="29.850205 17.908199"
+        type="translate"
+      />
+    </path>
+    <path
+      d="M6.828 11.035c0 .547-.45.988-1.004.988s-1.004-.441-1.004-.988.45-.988 1.004-.988 1.004.441 1.004.988Zm0 0"
+      fill="#e3fcf7"
+    >
+      <animateTransform
+        attributeName="transform"
+        dur="3s"
+        from="7.06478 -21.718551"
+        repeatCount="indefinite"
+        to="5.746688 11.746088"
+        type="translate"
+      />
+    </path>
+    <path
+      d="M32.977 37.988c0 .543-.45.989-1.004.989s-1.004-.446-1.004-.989c0-.547.449-.992 1.004-.992s1.004.445 1.004.992Zm0 0"
+      fill="#e3fcf7"
+    >
+      <animateTransform
+        attributeName="transform"
+        dur="3s"
+        from="33.21322 5.232625"
+        repeatCount="indefinite"
+        to="31.895129 38.697269"
+        type="translate"
+      />
+    </path>
+    <path
+      d="M18.559 2.441c0 .547-.45.989-1.004.989s-1.004-.442-1.004-.989.449-.988 1.004-.988 1.004.442 1.004.988Zm0 0"
+      fill="#e3fcf7"
+    >
+      <animateTransform
+        attributeName="transform"
+        dur="3s"
+        from="18.79525 -30.312302"
+        repeatCount="indefinite"
+        to="17.477158 3.152339"
+        type="translate"
+      />
+    </path>
+    <path
+      d="M5.824.52c0 .773-.636 1.398-1.418 1.398-.785 0-1.422-.625-1.422-1.398S3.621-.88 4.406-.88c.782 0 1.418.625 1.418 1.399Zm0 0"
+      fill="#e3fcf7"
+    >
+      <animateTransform
+        attributeName="transform"
+        dur="3s"
+        from="5.644859 -32.234176"
+        repeatCount="indefinite"
+        to="4.326767 1.230467"
+        type="translate"
+      />
+    </path>
+    <path
+      d="M34.809 0c0 .773-.633 1.398-1.418 1.398-.782 0-1.418-.625-1.418-1.398s.636-1.398 1.418-1.398c.785 0 1.418.625 1.418 1.398Zm0 0"
+      fill="#e3fcf7"
+    >
+      <animateTransform
+        attributeName="transform"
+        dur="3s"
+        from="34.631189 -32.753708"
+        repeatCount="indefinite"
+        to="33.313098 0.710935"
+        type="translate"
+      />
+    </path>
+    <path
+      d="M2.188 23.934a1.123 1.123 0 0 0 0 1.609c.449.445 1.18.445 1.632 0a1.13 1.13 0 0 0 0-1.61 1.165 1.165 0 0 0-1.632 0Zm0 0"
+      fill="#e3fcf7"
+    >
+      <animateTransform
+        attributeName="transform"
+        dur="3s"
+        from="4.243003 -8.015425"
+        repeatCount="indefinite"
+        to="2.924911 25.449214"
+        type="translate"
+      />
+    </path>
+    <path
+      d="M35.52 25.879c.636 0 1.156-.512 1.156-1.14s-.52-1.137-1.156-1.137-1.157.507-1.157 1.136.52 1.14 1.157 1.14Zm0 0"
+      fill="#e3fcf7"
+    >
+      <animateTransform
+        attributeName="transform"
+        dur="3s"
+        from="36.760095 -8.013472"
+        repeatCount="indefinite"
+        to="35.442004 25.451168"
+        type="translate"
+      />
+    </path>
+    <path
+      d="M34.395 10.047c0 .773-.637 1.398-1.418 1.398-.786 0-1.418-.625-1.418-1.398s.632-1.402 1.418-1.402c.78 0 1.418.628 1.418 1.402Zm0 0"
+      fill="#e3fcf7"
+    >
+      <animateTransform
+        attributeName="transform"
+        dur="3s"
+        from="34.217127 -22.708788"
+        repeatCount="indefinite"
+        to="32.899035 10.755851"
+        type="translate"
+      />
+    </path>
+    <path
+      d="M9.793 18.598c.555 0 1.004-.446 1.004-.993s-.45-.988-1.004-.988-1 .442-1 .988.445.993 1 .993Zm0 0"
+      fill="#e3fcf7"
+    >
+      <animateTransform
+        attributeName="transform"
+        dur="3s"
+        from="11.035483 -15.146285"
+        repeatCount="indefinite"
+        to="9.717392 18.318354"
+        type="translate"
+      />
+    </path>
+    <path
+      d="M29.504 5.8a1.009 1.009 0 0 1-1.399-.238c-.32-.445-.214-1.062.239-1.378s1.082-.207 1.398.238a.98.98 0 0 1-.238 1.379Zm0 0"
+      fill="#e3fcf7"
+    >
+      <animateTransform
+        attributeName="transform"
+        dur="3s"
+        from="30.164391 -27.760982"
+        repeatCount="indefinite"
+        to="28.8463 5.703657"
+        type="translate"
+      />
+    </path>
+    <path
+      d="M6.402 32.516c-.453.316-1.078.207-1.398-.239s-.211-1.062.242-1.379 1.078-.21 1.399.239a.98.98 0 0 1-.243 1.379Zm0 0"
+      fill="#e3fcf7"
+    >
+      <animateTransform
+        attributeName="transform"
+        dur="3s"
+        from="7.06478 -1.047214"
+        repeatCount="indefinite"
+        to="5.746688 32.417428"
+        type="translate"
+      />
+    </path>
+  </svg>
+));