Change logo to SVG

Shrinks99 · Shrinks99 · commit ab73cf4cc63e · 2025-05-30T16:16:02.000-04:00
diff --git a/src/assets/brand/packrat-lockup-white.svg b/src/assets/brand/packrat-lockup-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 3682 1027"><path d="m3681.85 947.899-44.99-1.069-44.98 1.069v-16.783h24.64v-96.404c0-27.138-7.5-34.634-19.63-34.634-22.5 0-53.2 17.498-53.2 56.413v74.625h24.64v16.783l-44.98-1.069-44.99 1.069v-16.783H3503V820.789c0-13.923-2.5-13.923-24.64-13.923v-16.782l61.4-2.86v38.562c9.28-18.212 28.21-38.562 62.48-38.562 34.28 0 54.98 13.923 54.98 51.416v92.476h24.64v16.783zM3484.17 729.19c0-16.928-16.93-28.46-40.7-28.46-44.67 0-55.12 39.269-58.35 57.643l-6.49 35.356h-43.89l-3.54 18.681h43.86l-24.88 135.459c-3.6 19.097-4.32 23.056-9.01 41.068-1.08 5.405-6.13 24.493-18.01 24.493 0 0-5.76 0-10.81-2.88 11.89-6.13 14.77-17.292 14.77-23.058 0-9.725-7.2-16.567-18.01-16.567-12.97 0-25.57 11.17-25.57 27.015 0 17.65 18.01 28.46 39.26 28.46 13.33 0 43.22-7.56 60.16-60.88 4.68-15.491 6.48-22.333 9.36-38.185l21.28-114.925h50.51l3.75-18.681h-50.71s11.55-65.976 14.07-71.027c1.8-4.682 7.2-9.003 12.25-9.003 1.43 0 6.48.362 11.52 2.883-7.93 4.321-14.41 12.97-14.41 23.056s7.21 16.567 18.01 16.567c12.61 0 25.58-10.809 25.58-27.022M3085.15 866.118c0-17.136 0-36.778-7.5-48.917-7.85-12.501-22.84-18.212-37.84-18.212-17.49 0-32.48 7.495-39.27 20.71-6.07 12.139-6.07 30.352-6.07 46.419 0 31.066 0 69.628 45.33 69.628 45.34 0 45.34-38.562 45.34-69.628m45.71 3.929c0 43.92-31.07 79.983-91.04 79.983s-91.03-35.702-91.03-79.983c0-47.488 32.48-83.905 91.03-83.905s91.04 36.064 91.04 83.905" style="fill:#fff"/><path d="M3285.38 868.509c0-44.989-19.99-66.769-43.91-66.769-7.86 0-26.42 2.145-40.71 16.783-4.99 4.997-5.35 5.358-5.35 12.139v75.694c0 6.78 0 7.142 3.93 11.785 16.06 19.281 32.84 19.281 37.84 19.281 23.2 0 48.19-18.566 48.19-68.913m45.71 0c0 49.632-36.41 81.767-89.97 81.767-14.63 0-30.35-3.567-45.7-16.067v66.411h24.64v16.79l-44.98-1.07-44.98 1.07v-16.79h24.62V820.668c0-13.569-2.49-13.569-24.62-13.569v-16.782l63.19-2.86v17.497c8.21-6.427 27.13-17.497 53.9-17.497 51.41 0 83.9 33.564 83.9 81.052" style="fill:#fff"/><path d="M2797.03 898.676c0-27.826-19.17-41.467-40.29-41.467-9.29 0-16.85 2.728-23.43 7.639v-52.016l-34.28 1.455v8.548c12 0 13.36 0 13.36 7.093v109.124h9.3l9.29-8.548c4.26 4.365 12.01 9.64 23.44 9.64 23.44 0 42.61-14.732 42.61-41.468m-24.79-.182c0 8.73 0 17.642-2.91 24.553-2.9 6.184-9.29 10.549-16.46 10.549s-13.36-3.637-18.4-10.73v-48.743c6.39-7.82 13.95-10.366 20.34-10.366 6.97 0 12.78 4.365 15.1 11.276 2.33 6.002 2.33 16.186 2.33 23.461M2892.12 866.848V858.3c-4.84.364-10.45.546-15.3.546-6.19 0-15.1-.364-17.62-.546v8.548s10.07 0 10.07 2.183l-.97 2.364-16.46 40.376-18.6-44.923h10.85V858.3l-23.82.546-21.69-.546v8.548h12l29.83 72.204c-1.55 4.002-6.2 15.823-8.52 19.643-5.42 8.73-12.4 10.185-15.69 10.185-1.94 0-2.32-.182-3.1-.364 2.91-1.091 7.17-3.82 7.17-10.003 0-6.002-4.65-10.367-11.24-10.367-5.42 0-11.04 3.456-11.04 10.549 0 8.548 7.36 16.732 18.02 16.732 14.72 0 24.4-12.549 27.89-21.097l34.28-83.117c1.35-3.091 1.74-4.365 13.94-4.365M1235.08 406.672c0-126.923-85.52-195.997-188.5-195.997-41.38 0-79.997 12.088-114.019 37.127v-37.127l-162.751 6.907v40.581c17.471 0 35.861 0 45.975 1.727 17.471 2.59 17.471 9.498 17.471 26.766v439.482H769.81v40.581l115.857-2.59 115.853 2.59v-40.581h-63.442V573.312c27.585 20.722 59.768 31.084 94.712 31.084 108.5 0 202.29-67.347 202.29-197.724m-117.7 0c0 120.879-47.81 166.64-92.87 166.64-40.457 0-68.961-25.039-86.432-50.942V293.564c22.988-26.767 54.251-48.352 95.632-48.352 46.89 0 83.67 55.259 83.67 161.46M1698.5 578.493c0-17.269-9.19-18.995-19.31-19.859-43.21-2.59-43.21-13.815-43.21-31.946v-186.5c0-82.025-68.05-132.103-181.14-132.103-30.35 0-150.8 1.727-150.8 79.435 0 37.99 32.18 54.395 57.01 54.395 28.5 0 57.93-18.132 57.93-54.395 0-27.63-21.15-43.172-21.15-43.172 19.31-3.453 26.66-5.18 54.25-5.18 55.17 0 79.07 41.444 79.07 100.157v31.083c-132.4 2.59-252.86 44.035-252.86 134.694 0 71.664 86.43 99.294 155.4 99.294 56.09 0 93.79-30.22 113.1-69.074 0 18.132 0 63.893 83.67 63.893h38.62c18.39 0 29.42 0 29.42-20.722m-167.35-98.43c0 74.254-59.76 93.249-86.43 93.249-37.7 0-58.85-35.4-58.85-68.21 0-94.976 121.38-105.338 145.28-107.064zM2067.22 498.195c0-12.088-12.87-12.088-22.07-12.088-13.79 0-17.47.863-21.15 11.224-6.43 17.269-26.66 72.528-94.7 72.528-33.11 0-61.61-18.996-78.16-52.669s-17.47-72.528-17.47-113.972c0-53.532 0-160.596 85.51-160.596 16.55 0 26.67 1.726 41.38 4.317-8.28 6.907-18.39 20.722-18.39 40.581 0 37.99 32.18 54.395 57.01 54.395 28.5 0 57.93-18.132 57.93-54.395 0-56.986-68.05-79.435-140.69-79.435-121.37 0-200.45 78.571-200.45 199.45 0 127.787 89.19 196.861 197.69 196.861 125.06 0 153.56-96.704 153.56-106.201M2538 599.215v-40.581c-16.55 0-30.34 0-40.46-.863-13.79-1.727-15.63-4.317-23.9-15.542L2340.31 358.32l98.39-85.479c11.95-10.361 19.31-16.405 78.15-16.405v-40.58c-21.15 2.59-48.73 2.59-70.8 2.59-34.94 0-92.87-1.727-104.82-2.59v40.58c16.55 0 39.54 3.454 39.54 9.498 0 2.59-5.52 7.771-7.36 8.634L2245.6 385.086V0l-162.75 6.907v40.581c57.01 0 63.45 0 63.45 33.674v477.472h-63.45v40.581l110.34-2.59 111.26 2.59v-40.581H2241V444.662l33.11-28.493c11.95 15.542 94.7 128.65 94.7 133.831 0 8.634-21.14 8.634-34.02 8.634v40.581l110.34-2.59c36.78 0 72.64 1.727 92.87 2.59M2921.43 281.476c0-48.352-54.25-70.801-98.38-70.801-42.3 0-80.92 20.722-101.15 78.571h-.92v-78.571l-152.63 6.907v40.581c57 0 63.44 0 63.44 33.674v266.797h-63.44v40.581l115.85-2.59c34.94 0 93.79 0 126.89 2.59v-40.581h-79.99V404.082c0-64.757 13.79-162.324 95.62-162.324 0 0-17.47 14.678-17.47 39.718 0 35.4 29.43 52.668 56.09 52.668 26.67 0 56.09-18.131 56.09-52.668M3370.15 578.493c0-17.269-9.2-18.995-19.31-19.859-43.22-2.59-43.22-13.815-43.22-31.946v-186.5c0-82.025-68.04-132.103-181.14-132.103-30.34 0-150.8 1.727-150.8 79.435 0 37.99 32.18 54.395 57.01 54.395 28.51 0 57.93-18.132 57.93-54.395 0-27.63-21.15-43.172-21.15-43.172 19.31-3.453 26.67-5.18 54.25-5.18 55.17 0 79.08 41.444 79.08 100.157v31.083c-132.41 2.59-252.86 44.035-252.86 134.694 0 71.664 86.43 99.294 155.39 99.294 56.09 0 93.79-30.22 113.1-69.074 0 18.132 0 63.893 83.67 63.893h38.62c18.39 0 29.43 0 29.43-20.722m-167.35-98.43c0 74.254-59.77 93.249-86.43 93.249-37.71 0-58.85-35.4-58.85-68.21 0-94.976 121.37-105.338 145.28-107.064zM3681.86 493.877v-47.488h-43.22v46.625c0 46.625-14.71 76.845-41.38 76.845-41.38 0-41.38-56.123-41.38-72.528V256.436h111.26v-40.58h-111.26V50.942h-43.21c-.92 72.527-26.67 170.958-119.54 174.411v31.083h57.93v236.578c0 93.25 74.48 111.382 134.25 111.382 69.88 0 96.55-58.713 96.55-110.519" style="fill:#fff"/><path d="M.037 116H590v588.253H.037z" style="fill:#dc6503"/><path d="M124.409 553.876c-48.597 0-88.051-39.454-88.051-88.051s39.454-88.052 88.051-88.052h46.308v-49.275c0-48.597 39.455-88.052 88.052-88.052s88.051 39.455 88.051 88.052v50.064l205.329 175.314z" style="fill:#fff"/><circle cx="314.011" cy="442.5" r="32.5" style="fill:#dc6503"/></svg>
diff --git a/src/assets/brand/packrat_by_opfn_logo.png b/src/assets/brand/packrat_by_opfn_logo.png
diff --git a/src/onboarding.ts b/src/onboarding.ts
@@ -1,4 +1,6 @@
 import { LitElement, html, css, unsafeCSS, CSSResultGroup } from "lit";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+
 import { customElement, property, state } from "lit/decorators.js";
 import { styles as typescaleStyles } from "@material/web/typography/md-typescale-styles.js";
 
@@ -9,8 +11,8 @@ import "@material/web/divider/divider.js";
 import "@material/web/icon/icon.js";
 
 // Import assets
-import packratLogo from "./assets/brand/packrat_by_opfn_logo.png";
 import forestImg from "./assets/images/forest.avif";
+import packratLogo from "./assets/brand/packrat-lockup-white.svg";
 import collageImg from "./assets/onboarding/collage.png";
 
 @customElement("wr-onboarding")
@@ -97,12 +99,12 @@ export class OnboardingView extends LitElement {
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        gap: 2rem;
+        gap: 3rem;
       }
 
-      .first-content img.logo {
-        width: 50%;
-        max-width: 300px;
+      .first-content .logo {
+        width: 100%;
+        max-width: 256px;
         height: auto;
       }
 
@@ -239,11 +241,7 @@ export class OnboardingView extends LitElement {
               ${i === 0
                 ? html`
                     <div class="first-content">
-                      <img
-                        class="logo"
-                        src="${packratLogo}"
-                        alt="Packrat Logo"
-                      />
+                      <span class="logo">${unsafeSVG(packratLogo)}</span>
                       <md-filled-button @click=${this._next}>
                         Get Started
                       </md-filled-button>
