SVGs for onboarding

coggen · Oct 3, 2023 · 1203799 · 1203799
1 parent 5b42c33
commit 1203799
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/src/prototypes/onboarding-v3/2_placement_intro.html b/src/prototypes/onboarding-v3/2_placement_intro.html
@@ -21,6 +21,12 @@
         color: var(--color-pine);
       }
 
+      .getting-started-step svg {
+        height: 36pt;
+        width: 36pt;
+        fill: var(--color-pine);
+      }
+
       hr {
         margin: 1em 0 2em;
         background-color: var(--color-mint);
@@ -45,15 +51,15 @@ <h1 class="sharpen-heading-2xl sharpen-text--center sharpen-mb-sm">Let's get sta
       <div class="row sharpen-mb-lg">
         <div class="col-lg-4">
           <sharpen-card class="getting-started-step sharpen-mb-md" border="none" padding="large">
-            <i class="sharpen-icon">diversity_1</i>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M38-428q-18-36-28-73T0-576q0-112 76-188t188-76q63 0 120 26.5t96 73.5q39-47 96-73.5T696-840q112 0 188 76t76 188q0 38-10 75t-28 73q-11-19-26-34t-35-24q9-23 14-45t5-45q0-78-53-131t-131-53q-81 0-124.5 44.5T480-616q-48-56-91.5-100T264-760q-78 0-131 53T80-576q0 23 5 45t14 45q-20 9-35 24t-26 34ZM0-80v-63q0-44 44.5-70.5T160-240q13 0 25 .5t23 2.5q-14 20-21 43t-7 49v65H0Zm240 0v-65q0-65 66.5-105T480-290q108 0 174 40t66 105v65H240Zm540 0v-65q0-26-6.5-49T754-237q11-2 22.5-2.5t23.5-.5q72 0 116 26.5t44 70.5v63H780ZM480-210q-57 0-102 15t-53 35h311q-9-20-53.5-35T480-210Zm-320-70q-33 0-56.5-23.5T80-360q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T160-280Zm640 0q-33 0-56.5-23.5T720-360q0-34 23.5-57t56.5-23q34 0 57 23t23 57q0 33-23 56.5T800-280Zm-320-40q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T600-440q0 50-34.5 85T480-320Zm0-160q-17 0-28.5 11.5T440-440q0 17 11.5 28.5T480-400q17 0 28.5-11.5T520-440q0-17-11.5-28.5T480-480Zm0 40Zm1 280Z"/></svg>
             <div class="sharpen-text--body sharpen-text-lg">
               Tell us about you &amp; your learner
             </div>
           </sharpen-card>
         </div>
         <div class="col-lg-4">
           <sharpen-card class="getting-started-step sharpen-mb-md" border="none" padding="large">
-            <i class="sharpen-icon">school</i>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-120 200-272v-240L40-600l440-240 440 240v320h-80v-276l-80 44v240L480-120Zm0-332 274-148-274-148-274 148 274 148Zm0 241 200-108v-151L480-360 280-470v151l200 108Zm0-241Zm0 90Zm0 0Z"/></svg>
             <div class="sharpen-text--body sharpen-text-lg">
               Find your learner's starting level
             </div>
@@ -71,7 +77,7 @@ <h1 class="sharpen-heading-2xl sharpen-text--center sharpen-mb-sm">Let's get sta
         </div>
         <div class="col-lg-4">
           <sharpen-card class="getting-started-step sharpen-mb-md" border="none" padding="large">
-            <i class="sharpen-icon">menu_book</i>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M560-564v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-600q-38 0-73 9.5T560-564Zm0 220v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-380q-38 0-73 9t-67 27Zm0-110v-68q33-14 67.5-21t72.5-7q26 0 51 4t49 10v64q-24-9-48.5-13.5T700-490q-38 0-73 9.5T560-454ZM260-320q47 0 91.5 10.5T440-278v-394q-41-24-87-36t-93-12q-36 0-71.5 7T120-692v396q35-12 69.5-18t70.5-6Zm260 42q44-21 88.5-31.5T700-320q36 0 70.5 6t69.5 18v-396q-33-14-68.5-21t-71.5-7q-47 0-93 12t-87 36v394Zm-40 118q-48-38-104-59t-116-21q-42 0-82.5 11T100-198q-21 11-40.5-1T40-234v-482q0-11 5.5-21T62-752q46-24 96-36t102-12q58 0 113.5 15T480-740q51-30 106.5-45T700-800q52 0 102 12t96 36q11 5 16.5 15t5.5 21v482q0 23-19.5 35t-40.5 1q-37-20-77.5-31T700-240q-60 0-116 21t-104 59ZM280-494Z"/></svg>
             <div class="sharpen-text--body sharpen-text-lg">
               Start your first reading lesson
             </div>