Skip to content

Commit

Permalink
UX: switch wizard SVG colors for dark mode (discourse#18109)
Browse files Browse the repository at this point in the history
  • Loading branch information
@awesomerobot
awesomerobot authored Sep 12, 2022
1 parent b0ac98b commit 3f2c3d5
Show file tree
Hide file tree
Showing 9 changed files with 145 additions and 12 deletions.
7 changes: 3 additions & 4 deletions app/assets/javascripts/wizard/addon/components/wizard-step.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import discourseComputed, { observes } from "discourse-common/utils/decorators";
import Component from "@ember/component";
import I18n from "I18n";
import getUrl from "discourse-common/lib/get-url";
import { htmlSafe } from "@ember/template";
import { schedule } from "@ember/runloop";
import { action } from "@ember/object";
Expand Down Expand Up @@ -65,11 +64,11 @@ export default Component.extend({
},

@discourseComputed("step.banner")
bannerImage(src) {
if (!src) {
bannerImage(bannerName) {
if (!bannerName) {
return;
}
return getUrl(`/images/wizard/${src}`);
return bannerName;
},

@discourseComputed()
Expand Down
43 changes: 43 additions & 0 deletions app/assets/javascripts/wizard/addon/templates/components/illustration-finished.hbs
View file

Large diffs are not rendered by default.

55 changes: 55 additions & 0 deletions app/assets/javascripts/wizard/addon/templates/components/illustration-members.hbs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<svg xmlns="http://www.w3.org/2000/svg" id="wizard-members-illustration" viewBox="0 0 891.79 761.94">
<defs>
<pattern id="Unnamed_Pattern_2" x="0" y="0" width="144" height="144" patternTransform="matrix(1.3 0 0 -.96 405.71 -15766.98)" patternUnits="userSpaceOnUse">
<path class="cls-1" d="M0 0h144v144H0z"/>
<path class="cls-1" d="M0 0h144v144H0z"/>
<path fill="#fef7b8" d="M0 0h144v144H0z"/>
</pattern>
{{! template-lint-disable no-forbidden-elements }}
<style>.cls-1,.cls-2{fill:none}.cls-3{fill:#00ac43}.cls-4{fill:#f9000a}.cls-7{fill:#ff5d10}.cls-10{fill:#00aff4}.cls-2{stroke:var(--primary);stroke-linecap:round;stroke-linejoin:round;stroke-width:8.75px}</style>
</defs>
<rect class="cls-3" x="565.81" y="229.93" width="194.54" height="46.05" rx="23.02" ry="23.02"/>
<path class="cls-2" d="M271.42 434.36c4.99-12.76 20.17-26.82 38.23-35.03"/>
<path class="cls-3" d="M538.32 438.29s21.75-37.26 45.83-39.8 31-7.82 51 17.86 27.92 85.85 27.92 85.85l-102 9.77-22.75-73.68Z"/>
<path class="cls-2" d="M628.29 725.31 607.34 587.6M272.43 731.77l15.88-146.71"/>
<path class="cls-1" d="m175.12 663.62-50.93 10.4v21.5c0 5.85 4.75 10.59 10.6 10.6h56c6.43.01 11.66-5.19 11.67-11.63 0-3.22-1.32-6.31-3.67-8.51l-23.67-22.36Z"/>
<path class="cls-3" d="m175.12 663.67-.65-.64-1.62-57.41c2.53-24.51-4.9-32.88-27.35-43.05l-47.63-21.54-1.39-2.36c-7.51 8.9-14.2 15.56-21.32 22.41-4.41 8.73-7.46 16.91-16.84 26.3-9.82 9.85-24.05 14.7-38.59 16.06-.53.07-1.06.14-1.59.18a58.373 58.373 0 0 0 44.71 20.8h61.34v49.61l50.93-10.36Z"/>
<path class="cls-2" d="M43.49 460.07h0c-37.14 0-35.45 50.43-39.12 71.6v34.22c0 32.3 26.18 58.48 58.48 58.48h61.34v71.11c0 5.85 4.75 10.59 10.6 10.6h56c6.44.01 11.67-5.2 11.68-11.64v-.02h0c0-3.21-1.33-6.28-3.67-8.48l-24.32-22.92"/>
<path class="cls-10" d="M803.42 464.11c-8.3 14.93-16.49 34.58-16.49 54.06 0 2.82-.3 5.45-.85 7.91-1.77 7.9 40.33-6.96 34.71-2.34 8.78 5 13 3.6 15.94 6.23 2.18 1.95 2.41 8.69 9.77 8.37 17.91-.78 28.31.99 36.36 17.17 1.38 2.77-13.15 18.25-13.73 26.04-.38 5.13 12.66 3.49 14.16 4.81 1.01.95 2.1 1.82 3.25 2.6.6-2.94.9-5.94.9-8.94l-.02-68.77c-12.56-48.81-28.25-57.05-28.25-57.05l-11.12 17.67-18.24 2.87-20.46-7.09-5.93-3.54Zm-90.23 207.58-19.27 20.62c-3.93 4.19-3.72 10.78.47 14.71a10.45 10.45 0 0 0 7.14 2.82h53.35c8.13 0 14.72-6.58 14.73-14.71v-20.68l-50.54-11.19a36.243 36.243 0 0 1-5.88 8.43Z"/>
<path class="cls-10" d="M883.26 586.37c-10.21-9.01-36.42-9.73-48.22-15.56-7.85-3.88-.6-14.84-9.78-14.44-17.28.75-35.69-3-51-11.72-17.1 14.07-45.49 15-45.49 15l-6 89.8c-.32 4.8-1.6 9.5-3.76 13.8l50.55 11.19v-50.06h73.51c21.05 0 39.2-14.79 43.45-35.41-1.16-.78-2.25-1.64-3.26-2.6Zm-35.22-85.51v25.86c12.73 6.76 26.91 13.89 36 24.59.91-3.74 1.54-7.55 1.9-11.38l-.03-25.9"/>
<circle class="cls-4" cx="44.74" cy="445.2" r="33.11"/>
<circle cx="44.74" cy="445.2" r="33.11" stroke="var(--primary)" stroke-miterlimit="10" stroke-width="8" fill="#f9000a"/>
<path class="cls-2" d="M63.07 472.79c-15.23 10.13-35.79 5.98-45.92-9.25a33.16 33.16 0 0 1-5.18-13.51"/>
<path d="m796.69 523.98-12.61 3.87-5.3 8.18 1.02 9.93 13.17 3.75 18.8-1.04 12.51 3.77c-16.56 35.23-138.77 63.72-297.1 70.43-3.44.15.41-16.02-3.8-27.6-7.73-21.27-23.96-44.3-30.44-44.14s-17.59-10.14-29.4-11.27c-13.46-1.28-27.72 6.59-35.33 6.59-17.05 0-40.34 30.58-44.33 45.2-2.29 8.41 3.82 31.41-4.69 31.03-168.32-7.59-294.76-39.82-294.76-78.44s118.85-68.88 279.48-77.68l4.61 18.51 5.27-.88 24.76-19.14c18.5-.61 37.46-.93 56.76-.93 168.4 0 310.59 24.25 355.84 57.47" fill="url(#Unnamed_Pattern_2)"/>
<path class="cls-2" d="M375.99 622.54c-117.18-5.52-213.67-23-260.67-46.23m691.44-6.39c-41.86 26.76-147.39 47.19-277.65 52.87M262.8 329.99h-53.99l-98.31 97.68a1.64 1.64 0 0 1-2.04 1.1 1.65 1.65 0 0 1-1.17-1.55l40-97.23h-13.7c-13.93 0-25.22-11.29-25.22-25.22h0v-36c0-13.93 11.29-25.22 25.22-25.22h98.54m45.56 0h97.74c13.93 0 25.22 11.29 25.22 25.22h0v36c0 13.93-11.29 25.22-25.22 25.22h-90.04"/>
<path class="cls-4" d="M278.44 265.92h47.42c10.61 0 19.22 8.61 19.22 19.22s-8.61 19.22-19.22 19.22h-43.24m-30.39 0h-89.88c-10.61 0-19.22-8.61-19.22-19.22s8.61-19.22 19.22-19.22h73.64"/>
<path class="cls-2" d="M510.58 245.83h-59.9c-9.69 0-39.83 0-39.83 54.09 0 40.45 50.23 66.71 75.59 77.39 1.44.6 2.12 2.26 1.52 3.7a2.84 2.84 0 0 1-2.62 1.74h-9.27c-41.74 0-78.62-20.82-100.81-52.65m76.66-257.08h240.16c16.97 0 30.73 13.75 30.74 30.72h0v77.49"/>
<path class="cls-7" d="M448.88 104.11h217.34c12.71 0 23.02 10.31 23.02 23.02 0 12.72-10.31 23.03-23.02 23.03H448.88"/>
<path class="cls-2" d="M278.4 232.73c-4.53 58.89 3.81 90.65 12.24 113 .87 2.32-.3 4.91-2.62 5.78-1.68.63-3.58.2-4.83-1.1-40.93-43.2-49.64-90.68-52.44-118.11-.93-9.29-8.75-16.36-18.08-16.36h-48c-24.89 0-45.06-20.18-45.06-45.07V49.43c0-24.88 20.18-45.05 45.06-45.06h237.55c24.88 0 45.05 20.18 45.06 45.06v121.43c0 24.89-20.17 45.06-45.06 45.07h-105.7c-9.5 0-17.39 7.33-18.12 16.8Zm533.38-30.61V307.3c0 11.54-9.35 20.89-20.89 20.89h-85.17c-23 0 40.45 59.24 47 79.77.69 2.13-.49 4.42-2.62 5.11-1.04.34-2.18.24-3.15-.28-30.43-15.72-104.35-84.6-111.69-84.6H531.49c-11.54 0-20.89-9.34-20.9-20.88h0V202.12c0-11.54 9.35-20.89 20.89-20.89h259.4c11.54 0 20.89 9.34 20.9 20.88h0Z"/>
<circle class="cls-7" cx="456.74" cy="485.07" r="33.11"/>
<circle cx="456.74" cy="485.07" r="33.11" fill="#00ad43" stroke="var(--primary)" stroke-linecap="round" stroke-linejoin="round" stroke-width="8.75"/>
<path d="M452.95 539.86c-57.21 0-70.44 50.56-70.44 50.56l-1-.98c0-19.55-2.76-84.5 75.23-84.5 0 0 72.79-4.18 70.38 92.4 0 0-11.55-53.06-73.21-57.48" stroke="var(--primary)" stroke-linecap="round" stroke-linejoin="round" stroke-width="8.75" fill="#ff5d10"/>
<path class="cls-2" d="M4.38 482.14v221.93m170.11-41.06-50.3 11.85m256.52 10.88v-72.67c0-40.43 32.78-73.21 73.21-73.21h0c40.43 0 73.21 32.78 73.21 73.21h0v70s-38.8 24.22-72.31 24.22-74.11-21.55-74.11-21.55Zm0 71.82v-81.82m146.41 81.82v-84.51m360.29-207.97v244.77m-168.22-46.84 50.42 11.85"/>
<path class="cls-10" d="M400.67 88.91c0 12.7-10.3 23-23 23h-48.11c-12.7 0-23 10.3-23 23s-10.3 23-23 23H183.41c-12.7 0-23-10.3-23-23v-46c0-12.7 10.3-23 23-23h194.24c12.7-.01 23.01 10.28 23.02 22.98v.02Z"/>
<path class="cls-2" d="M4.38 624.37h119.81v79.7m763.22-79.7H772.19v85.49"/>
<path class="cls-10" d="M359.84 458.42a91.653 91.653 0 0 0-18.19 6.75c-10.91 5.47-17.74 16.9-16.58 29.05 1.42 14.92 13.28 15.75 13.28 15.75 15-2.88 19.1-22 19.1-22 4.89-.65 9.74-1.63 14.5-2.93-.41-9.77-4.56-19.96-12.11-26.62Zm-86.87-15.63c-.94-4.95-1.93-10.39-2.93-16.24-4.75-27.63-27.11-23.44-27.11-23.44-20.07 3.37-22.94 13.39-22.88 18.13.14 12 9.81 11.08 9.81 11.08l6.73-1.09c4.2-.67 8.15 2.2 8.81 6.4.04.23.06.46.08.69l.87 13.15c9.37 2.04 20.41-1.77 26.62-8.68Z"/>
<path class="cls-1" d="M279.25 472.75s-2.78-11.55-6.28-30c-6.21 6.91-17.25 10.72-26.62 8.68l1.92 29 30.98-7.68Z"/>
<path class="cls-2" d="M340.6 393.1s23.39 1.7 44.77 21.66 17.19 48.42 17.19 48.42-4.57 19.26-45.12 24.84c0 0-4.06 19.07-19.1 22 0 0-11.86-.83-13.28-15.75-1.16-12.15 5.68-23.58 16.58-29.05a97.563 97.563 0 0 1 34.68-9.63m-128.04 24.85-2.79-42.13c-.28-4.24-3.95-7.45-8.2-7.17a8.1 8.1 0 0 0-.69.08l-6.73 1.09s-9.67.94-9.81-11.08c-.06-4.74 2.81-14.76 22.88-18.13 0 0 22.36-4.19 27.11 23.44 4.75 27.63 9.21 46.21 9.21 46.21"/>
<path class="cls-3" d="M658.29 426.76c-15.92-25.12-52.56-32.38-52.56-32.38l32.18 51.91c1.26 2.53 2.27 5.18 3 7.91 8.38-4.88 18.21-8.89 27.59-9-3-6.36-6.41-12.52-10.21-18.44Z"/>
<path class="cls-7" d="M668.54 445.17c-9.38.15-19.21 4.16-27.59 9 5.1 19.55-16.38 18.53-16.38 18.53-14.66 1.7-24.71 5.32-24.79 10.74s5.95 5.25 5.95 5.25c6.33 6.14 20.59 5.33 20.59 5.33 12 1.83 19.81-4 19.81-4 13.76.2 21.35-3.28 25.43-6.59 2.95-2.45 4.56-6.17 4.31-10-.48-8.19-1.9-16.57-7.33-28.26Z"/>
<path class="cls-2" d="M658.29 426.76c14.19 22.4 16.89 34.73 17.58 46.64.25 3.83-1.35 7.55-4.3 10-4.09 3.3-33.22 10.46-45.25 8.63 0 0-14.26 5.81-20.59-.33 0 0-8-3.82-7.95-9.25.06-4.46 6.86-9.72 17.4-12.4 3.6-.87 7.3-1.21 11-1 7.28.35 22.3-1.31 11.77-22.8"/>
<path class="cls-7" d="M618.28 488.89c-1.44-6.13-10.18-16-21-16.16l-29.87-4.53a6.416 6.416 0 0 1-3.57-4.58 61.77 61.77 0 0 1-1.22-12.13c-8.83-3.68-19.47-6.31-27.75-2.2-2.1 22.23.28 30.12.28 30.12s1.81 12.2 21.38 17.77c2.86.8 5.82 1.13 8.78 1 7.32-.31 23.64-.84 33.18 0 1.58.16 3.16.24 4.75.24 5.42.06 16.26-4.3 15.04-9.53Z"/>
<path class="cls-3" d="M562.67 451.49c0-2.75.28-5.49.84-8.18l-6.43-36.79s-19.31 15.57-21.89 40c-.11 1-.2 1.89-.28 2.81 8.29-4.15 18.93-1.52 27.76 2.16Z"/>
<path class="cls-2" d="M535.19 446.48c-2.59 24.38 0 32.93 0 32.93s1.19 8 12 14c6.53 3.52 13.96 5 21.34 4.24 8.73-.83 23.61-2 32.11-1.19 1.61.15 3 .23 4.31.24 8.18.07 17.49-4.89 13.28-11.91-2.58-4.3-7.55-11.82-21-12.07l-29.87-4.53a6.416 6.416 0 0 1-3.57-4.58c-.89-4.45-2-12.75-.38-20.31"/>
<path class="cls-4" d="M149.5 496.49c-23.63-10.36-39.28 2.79-39.28 2.79l-28.48 22.87 4.15 11.17 4.51-1.3c4.65-5.58 11.72-19.72 31.16-13.84 13.49 4.08 32.11-3 36.86-6.93s-8.92-14.76-8.92-14.76Z"/>
<path class="cls-2" d="m80.71 520.49 29.5-21.21s15.65-13.15 39.28-2.79c0 0 13.66 10.82 8.92 14.76s-23.47 11.33-36.86 6.93"/>
<path class="cls-4" d="M107.07 532.9s-10.79-2.35-32.6 5.75c-1.68 8.85 0 18.8 4.56 26.11 4.46-1.77 8.59-4.27 12.23-7.4 0 0 20.74 4 36.53.72 0 0 7.28-5.36 8-11.62.06 0-9.24-12.86-28.72-13.56Z"/>
<path class="cls-2" d="M20.88 501.27s2.55 36.37 20.6 62.15a16.939 16.939 0 0 0 16.39 7c9.74-1.49 24.44-5 33.41-13 0 0 20.74 4 36.53.72 0 0 7.28-5.36 8-11.62 0 0-9.3-12.86-28.77-13.56 0 0-11.46-2.5-34.63 6.52a8.003 8.003 0 0 1-10.36-4.55l-.12-.33"/>
<path d="M292.15 402.63c-4.26-17.78 6.7-35.65 24.48-39.92 17.78-4.26 35.65 6.7 39.92 24.48 4.26 17.78-6.7 35.65-24.48 39.92-2.53.61-5.12.91-7.73.91-15.3 0-28.6-10.47-32.19-25.34" stroke-miterlimit="10" stroke-width="8" stroke="var(--primary)" fill="#00aff4"/>
<path class="cls-2" d="M324.34 361.76c18.29 0 33.11 14.83 33.11 33.11 0 18.29-14.83 33.11-33.11 33.11-15.3 0-28.6-10.48-32.19-25.35"/>
<path d="M292.15 402.63c-.61-2.54-.91-5.15-.91-7.76 0-2.09.19-4.17.58-6.22" stroke="var(--primary)" stroke-linecap="round" stroke-linejoin="round" stroke-width="8.75" fill="#00aff4"/>
<circle cx="576.03" cy="390.79" r="33.11" stroke="#ff5d10" stroke-miterlimit="10" stroke-width="8" fill="#ff5d10"/>
<path class="cls-2" d="M608.9 386.8c2.15 18.16-10.83 34.62-28.99 36.77a33.102 33.102 0 0 1-30.83-13.63m311.4 44.17s25.43 28.24 25.43 59.87v25.86s-2.94 39.87-27 39.87c-15 0-28.72-10-33.21-21.32a15.538 15.538 0 0 0-16.89-9.53c-7.6 1.17-17.33 1.71-25.8-.86a7.075 7.075 0 0 1-5-7.57c.5-4.6 2-10.72 6.07-12.58 8.18-3.69 16.38-5 26.79-4.8 14.45-.6 28.3 5.81 37.2 17.2v-39.48"/>
<circle class="cls-2" cx="829.8" cy="441.63" r="33.11"/>
<path class="cls-2" d="M363.91 434.36s3.77 15.61 0 22.35M71.22 503.56l10.79 30.5"/>
</svg>
Loading

0 comments on commit 3f2c3d5

Please sign in to comment.