commit: 79b34a0fa2e993967f22892b857dcf601c07bd88
parent: 872a0d5bd801c998d911f7da582a60d2f714a710
Author: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 20 Jan 2018 01:32:37 +0100
Restore onboarding modal (#6303)
* Restore onboarding modal
Revert 5ba8b3a396895ecec083c5258aaf9084d584a7c4
* Change greeting elephant graphic, fix up some design issues
* Fix wrong link color in onboarding modal
Diffstat:
8 files changed, 680 insertions(+), 4 deletions(-)
diff --git a/app/javascript/images/elephant_ui_greeting.svg b/app/javascript/images/elephant_ui_greeting.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="266.89999" width="463.97818" viewBox="0 0 463.97818 266.89999"><g transform="translate(-184 -205.1)"><defs><path id="a" d="M184 151h494.79999v321H184z"/></defs><clipPath id="b"><use height="100%" width="100%" xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" d="M525.7 478c-.5 0-.9-.2-1.2-.6-.3-.4-.4-.9-.2-1.3.2-.6 20-65 22-72 .2-.7.5-1.4.9-2.1.1-.4.3-.8.6-1.1l.3-.3c8.2-11.9 29.8-12.9 36.2-12.9 2.4 0 5 .1 7.6.3 13.6.9 25.2 3.7 33.6 8 6.4 3.3 10.7 7.4 12.2 11.8.1.2.2.4.2.6.2.6.3 1.3.4 1.9.6 5.4-1 13.6-2 18.5-1 5-11.9 47.7-12 48.1-.2.7-.8 1.1-1.5 1.1h-97.1z"/></g><g transform="translate(-184 -205.1)"><defs><path id="c" d="M184 151h494.79999v321H184z"/></defs><clipPath id="d"><use height="100%" width="100%" xlink:href="#c" overflow="visible"/></clipPath><path clip-path="url(#d)" d="M414.9 482.9c-.6 0-1.2-.4-1.4-.9H295.2l-81.3.8c-.6 0-1.1-.3-1.3-.8h-33.9c-.8 0-1.5-.7-1.5-1.5v-168c0-.3.1-.7.3-.9l2.9-3.8c-1.4-3-5.5-12.9-2.1-21.9-.2-.4-.3-.8-.5-1.2-1.9-5-2.6-10.8-2.3-17.1 0-1.1.1-2.2.3-3.3l.4-3.1.4-2.1c.5-3.2 1.3-6 2.2-8.4 2-5.4 5.5-10.4 10-14.3 4.1-3.6 9.1-6.5 15-8.6 7.6-2.7 16.2-4.1 25.5-4.1 2.4 0 5 .1 7.5.3 2.1-3.2 4.6-5.8 7.3-7.8 1.6-1.3 3.3-2.3 4.9-3.1 1.6-.8 3.5-1.7 5.4-2.2 2.9-.9 6.2-1.4 9.6-1.4.6 0 1.3 0 1.9.1 3.6.2 7.1 1 10.5 2.4 4.4-3.1 9.4-5.2 14.6-6.2 2.3-.4 4.7-.7 7.1-.7 3.3 0 6.5.4 9.6 1.3 2.8.8 5.5 1.8 7.8 3 2.5 1.3 4.8 2.9 6.9 4.7 3.9 3.3 7.2 7.6 9.5 12.5 7.9.2 15.5 3.2 21.7 8.3 3.2 2.7 5.9 5.9 7.9 9.4 2.1 3.6 3.5 7.5 4.2 11.5.7 3.7.7 7.8.2 12.2-.6 5-1.5 8.6-3 11.9-.8 1.8-1.9 3.5-3.3 5.3-1.4 1.6-2.6 2.9-3.9 4 25.8 10.3 47.4 26.8 62.7 48 8.3 11.3 16 24.7 22.9 39.7 7.1-5.1 14.6-12.5 23.2-23.3 22.7-28.1 60.2-50.7 89-53.6 4.5-.4 9-.7 13.3-.7 18.2 0 30.4 3.9 34.1 5.3 1.8-3.1 7.3-11.3 15.7-11.3 1.5 0 3 .3 4.5.8 4.6 1.5 7.8 4.3 9.4 8.2 1.5 3.5 1.3 7.4.7 10.5 1-.3 2.1-.5 3.4-.5 3.3 0 6.4 1.4 9.2 4.2 3.8 3.8 5.2 10.5 3.4 16.5-1.5 4.9-6.3 13.7-22.2 17-5.9 1.2-11.5 1.8-16.7 1.8-11.1 0-17.2-2.8-18.9-3.8-3.9.6-37.3 6.7-56.4 42.2-3.7 6.9-8.6 15.8-14 24.3 2.8 6.9 3.5 16 2.2 26.3-2.5 18.9-10 40-10.1 40.2-.2.6-.8 1-1.4 1l-94.8.9z"/></g><g transform="translate(-184 -205.1)"><defs><path id="e" d="M184 151h494.79999v321H184z"/></defs><clipPath id="f"><use height="100%" width="100%" xlink:href="#e" overflow="visible"/></clipPath><g clip-path="url(#f)"><path d="M414.9 481.4c-8.2-22.8-2.2-33.8 10.8-38.8s27 0 40 24c0 0 7-5 11-25s10-38 27-38c11 0 19 14 16 37-2.5 18.9-10 39.9-10 39.9l-94.8.9z" fill="#ebded8" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M415.1 480.7c-6.4-18.1-4.1-29.8 7-35.9 6.6 4 12.9 11.4 18.7 22.1l.3.5.5-.3c.2-.2 5.6-4.2 9.7-18.8 4.9 4.2 9.6 10.5 14 18.6l-3.7-3.4-.8-1.9c.3-.2 12.4.2 16.4-19.8 2.4-11.8 5.7-24.7 12.7-31.8 4.9 6.5 6.7 17.6 5 30.7-2.3 17.4-8.9 36.7-9.9 39.4l-69.9.6z" class="st4" fill="#fff"/><path d="M469.8 480.5H178.7v-168l3.5-4.5c61-42 180-46.3 235 30" class="st5" fill="#fccf84" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M417.2 338c-55.6-75.9-174-72-235-30l-3.5 4.5v168h291.1S458.9 395 417.2 338z" class="st6" fill="#fccf84"/><path d="M416.8 338.3c-6.4-8.7-13.8-16.6-22-23.5-8.2-6.9-17.3-12.8-26.9-17.7-19.2-9.8-40.4-15.4-61.8-17.4-21.4-2-43.2-.7-64.3 4-10.5 2.3-20.9 5.5-30.8 9.6-10 4.1-19.6 9.1-28.5 15.1l.1-.1-3.5 4.5.1-.3v168l-.5-.5h291.1l-.5.6c-1.8-12.6-4.4-25.1-7.4-37.5-3.1-12.4-6.6-24.6-10.9-36.7-4.2-12-9-23.9-14.7-35.3-2.8-5.7-5.9-11.3-9.1-16.8-3.2-5.5-6.7-10.8-10.4-16zm.8-.6c3.8 5.2 7.3 10.5 10.6 16 3.2 5.5 6.4 11.1 9.2 16.9 5.7 11.5 10.6 23.3 14.9 35.4 4.3 12.1 7.9 24.3 11 36.8 3.1 12.4 5.8 24.9 7.7 37.6.1.7-.4 1.3-1.1 1.4h-.2l-291-.8c-.3 0-.5-.2-.5-.5v-168c0-.1 0-.2.1-.3l3.5-4.5.1-.1c9-6.1 18.6-11.1 28.6-15.2s20.4-7.3 31-9.6c21.1-4.7 43-6.1 64.6-4 21.5 2.1 42.8 7.7 62.2 17.5 9.7 4.9 18.8 10.9 27.1 17.8s15.8 14.9 22.2 23.6z"/><path d="M182.3 479.7V323.5s42.9-30 87.3 15.6 79.6 126 148 110.2c56.4-13-17 21.8-17 21.8l-218.3 8.6z" class="st7" fill="#b88671"/><path d="M179.2 312.7l3.3-4.3c16.5-11.3 37.2-19.9 60.1-24.9l79.2.8c1 .5 9.3 4.6 9 10.1-.2 3.6-4.5 9.2-23.3 15-40.8 12.5-119.2 21.1-126.2 21.8l-2.1-18.5z" class="st7" fill="#b88671"/><path d="M181.1 283.7c-6.4 10.6 1.1 24.3 1.1 24.3l11.7-7.5-12.8-16.8z" fill="#a6725c" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M646.4 325.7c-.2.2-.4.5-.6.8-4.6 8.1-16.2 13.7-32.9 13.7s-25.8-8.1-25.8-8.1c-65.8 3.5-80.5 51.6-124.5 93.1-44 41.5-131.1 34.9-220.8 17l-7.5 8.8 4.5 29.4s221.6-.5 230.5-.5c-1.6-12.3-2.6-16.4-2.6-16.4 31.7-17.9 49.4-44.9 65.1-74.1 21-39 58-43 58-43s11 7 35 2c17.1-3.5 22.5-14.3 21.6-22.7z" class="st7" fill="#b88671"/><path d="M241.8 392.5c-3.8 0-7-3.1-7.1-6.9l-.2-28c0-3.8 3.1-7 6.9-7.1 3.8 0 7 3.1 7.1 6.9l.2 28c.1 3.9-3 7.1-6.9 7.1zm157.5 0c-3.8.1-7.1-3-7.2-6.8l-.7-28c-.1-3.8 3-7.1 6.8-7.2 3.8-.1 7.1 3 7.2 6.8l.7 28c.1 3.9-2.9 7.1-6.8 7.2z"/><path d="M213.9 482.3c-.4 0-.8-.3-.9-.7-7.6-21.1-3.9-34.2 11.4-40.1 3.1-1.2 6.3-1.8 9.3-1.8 11.5 0 22 8.5 31.3 25.1 1.9-2 6.7-8.4 9.8-23.6 4-20.2 10.2-38.8 28-38.8 4.1 0 7.8 1.8 10.8 5.1 5.8 6.6 8.1 18.7 6.2 33-2.5 18.8-10 39.9-10.1 40.1-.1.4-.5.7-.9.7-.1.1-94.9 1-94.9 1z" class="st4" fill="#fff"/><path d="M302.7 403.5c11 0 19 14 16 37-2.5 18.9-10 39.9-10 39.9l-94.8.9c-8.2-22.8-2.2-33.8 10.8-38.8 2.9-1.1 5.9-1.8 9-1.8 10.3 0 21 7.2 31 25.8 0 0 7-5 11-25s10-38 27-38m0-2c-18.5 0-24.8 19-29 39.6-2.6 12.9-6.4 19.3-8.6 22.1-9.3-16.2-19.9-24.4-31.5-24.4-3.2 0-6.4.6-9.7 1.9-7.5 2.9-12.4 7.6-14.5 14-2.4 7-1.5 16 2.6 27.4.3.8 1 1.3 1.9 1.3l94.8-.9c.8 0 1.6-.5 1.9-1.3.1-.2 7.6-21.3 10.1-40.3 1.9-14.6-.5-26.9-6.5-33.8-3.2-3.7-7.1-5.6-11.5-5.6z"/><path d="M282.8 480.7c7.3-7 11.4-16.5 13.5-23.5 2.1-6.9 6.8-29.2 7.8-36.6.4-3.1 1.9-10.4 6.8-10.4 1 0 2.7.5 3.9 1.1 4.2 6.7 5.4 17 3.7 29.7-2.3 17.4-8.9 36.7-9.9 39.4l-25.8.3zm-69.3.1c-7.1-20-3.6-32.6 10.6-38.1.5-.2.9-.3 1.3-.5-1.5 1.3-2.6 3.2-3.4 5.3-2.4 6.3-.9 15.2 4 24.3 2 3.6 4 6.6 6.1 8.9l-18.6.1z" class="st9" fill="#ebded8"/><path d="M264.8 465.8c-4 4-7 5-7 5" class="st10" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M525.7 476.5s20-65 22-72 15-17 44-15 44 12 45 21c.6 5.1-1 13-2 18s-12 48-12 48h-97z" class="st5" fill="#fccf84" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M550.8 475.7l18-59.1c2.3.6 13.2 3.2 27.4 3.2 5.1 0 10.1-.3 14.9-1 16.8-2.2 21.9-3.9 25.1-8.9v.3c.6 5.1-1 13.1-2 17.8-.9 4.7-10.8 43.3-11.9 47.6h-71.5v.1z" class="st7" fill="#b88671"/><path d="M548.9 401.8c-2.2 2.7 4.8 11.7 23.8 15.7s44 1 53-1 10.6-7.9 10.6-7.9m-49 11.1c-.6 10.8 3.4 14.8 7.4 14.8s8.5-6.6 8.3-15.1m-2.4 10.6c1.1 5.5 6.1 5.5 9.1 4.5s6-5 5-16m-.7 10.9c1.6 4.1 5.9 4.1 8.7 3.2 3-1 6-5 5-16" class="st10" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M364.5 264.6c1.4-18.7-12.6-35.1-31.3-36.5-.7-.1-1.5-.1-2.2-.1-5.2-11.8-16.5-20.4-30.2-21.4-9-.7-17.5 2-24.2 7-3.2-1.4-6.6-2.3-10.3-2.6-11.9-.9-22.8 5.1-28.7 14.6-25.3-2.1-53.4 5.5-59 30.9-6.1 27.6 5.1 42.5 25 49.4 18.5 6.5 41.1 8.4 52.7 8.8 13.2.4 41.2-1.7 62.2-8.5 13-4.2 24.7-10.8 26-11.3 14.6-8.7 18.8-14.4 20-30.3z" class="st11" fill="#e0b37d"/><path d="M364.5 264.6c1.4-18.7-12.6-35.1-31.3-36.5-.7-.1-1.5-.1-2.2-.1-5.2-11.8-16.5-20.4-30.2-21.4-9-.7-17.5 2-24.2 7-3.2-1.4-6.6-2.3-10.3-2.6-11.9-.9-22.8 5.1-28.7 14.6-25.3-2.1-53.4 5.5-59 30.9-6.1 27.6 5.1 42.5 25 49.4 18.5 6.5 41.1 8.4 52.7 8.8 13.2.4 41.2-1.7 62.2-8.5 13-4.2 24.7-10.8 26-11.3 14.6-8.7 18.8-14.4 20-30.3z" class="st11" fill="#e0b37d"/><path d="M355.3 266.5c-2.1-17.9-8.8-23.1-21.6-26.6.5 5.9-.4 9.5-.7 10.7-.6 2.4-1.6 4.2-3.1 4.2-1 0-1.9-.7-2.2-1.8-.2-.7-.4-1.6-.6-2.8-.4-2.1-1-5.3-2.5-10.3-3.6-12.7-15.3-18.4-25.3-18.4-3.7 0-7.5 1.1-10.4 2.5 12.1 15.4 3.5 31.3 1.6 34.5-3.1 5.3-8.9 6-9.1 6l-.8.1c-1.2.1-1.7-.6-.9-1.2.8-.6 1.9-1.6 2.3-2.9.9-4 1.5-11.4-1.7-21.6-3.2-10-14.4-17.3-26.6-17.3-5.5 0-11 1.5-15.7 4.4l-.1.1h-.2c-2.6-.2-5.3-.3-7.9-.3-27.4 0-46.3 11.5-50.5 30.8-5.5 24.8 2.8 41.9 24.7 49.5 20.8 7.3 45.4 8.4 52.5 8.6h3.4c15.5 0 40.5-3.2 58.7-9 10.6-3.4 20.5-8.5 24.2-10.4.9-.5 1.5-.8 1.6-.8 2.6-1.5 2.3-1.3 4.1-2.6 4.3-4.7 8-15.2 6.8-25.4z" class="st12" fill="#a6725c"/><path d="M288.7 261c3.5-4.6 5.7-10.2 6.1-16.3 1-13.4-6.7-26-18.3-31.1" class="st10" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M331.4 227.9c2.5 5.9 3.3 12.4 2.5 18.7 0 .1-.1.1-.1.1-.1 0-.1-.1-.1-.1.6-6.3-.5-12.6-3.2-18.3-.1-.3 0-.5.2-.7.3-.1.6 0 .7.3z"/><path d="M237.9 226.2c-4.1 7.2-3.8 14.9-5 20.8-.8 3.7-5.7 14.4-12.7 19.3" class="st10" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"/><path d="M367.7 358.5c0 16 18 30 40 30s37-8 58-34 58-50 88-53 48 5 48 5 7-15 19-11 10 16 8 20c0 0 7-5 14 2s6 26-18 31-35-2-35-2-37 4-58 43-42 72-101 88" class="st6" fill="#fccf84"/><path d="M368.2 358.5c.1 2.8.7 5.6 1.8 8.2.3.6.6 1.3 1 1.9l.5.9.6.9c.4.6.8 1.2 1.2 1.7l1.4 1.6c.4.6 1 1 1.5 1.5l1.5 1.5c1.1.9 2.1 1.8 3.4 2.6l1.8 1.2 1.9 1c1.2.7 2.5 1.3 3.8 1.9 5.2 2.3 10.9 3.4 16.5 3.7 5.7.2 11.4-.2 17-1.4 5.5-1.2 10.8-3.4 15.6-6.4 4.9-3 9.3-6.6 13.4-10.5 1-1 2.1-2 3.1-3l3-3.1c1.9-2.2 3.9-4.3 5.7-6.5 1.8-2.2 3.8-4.4 5.7-6.7.9-1.1 2-2.1 3-3.2s2-2.2 3.1-3.2c8.3-8.2 17.4-15.7 27.3-22 9.8-6.3 20.2-11.9 31.3-15.7 2.7-1 5.6-1.8 8.4-2.6 1.4-.4 2.9-.6 4.3-1l2.2-.5 2.2-.3c1.5-.2 2.9-.5 4.4-.6l4.4-.3c2.9-.1 5.8-.2 8.8-.2 5.8.1 11.7.5 17.5 1.5 2.9.5 5.8 1 8.6 1.8 2.8.7 5.6 1.6 8.4 2.7l-.7.2c1.9-3.7 4.4-7 7.9-9.5 1.7-1.2 3.7-2.1 5.8-2.4 2.1-.3 4.3 0 6.2.7 2 .7 3.8 1.7 5.4 3.1 1.6 1.4 2.7 3.3 3.4 5.2.7 2 .9 4.1.7 6.2-.1 2.1-.6 4.1-1.5 6.1l-.7-.6c1.8-1.1 3.8-1.7 5.9-1.8 2.1 0 4.2.5 5.9 1.6 1.8 1.1 3.3 2.5 4.4 4.2l.8 1.3.6 1.4c.2.5.3 1 .4 1.5.1.5.3 1 .3 1.5.6 4-.2 8.2-2.2 11.8-2 3.5-5.1 6.3-8.6 8.3-3.5 2-7.4 3.2-11.2 4.1-3.9.8-7.8 1.4-11.8 1.6-4 .2-8 .2-11.9-.3-2-.3-3.9-.6-5.9-1.2-1.9-.6-3.8-1.2-5.6-2.2l.3.1c-4.3.6-8.6 1.9-12.8 3.4-4.1 1.5-8.2 3.4-12 5.6-7.7 4.3-14.6 10-20.5 16.6-2.9 3.3-5.6 6.8-8 10.5-2.4 3.7-4.4 7.6-6.6 11.5-4.3 7.8-8.7 15.6-13.5 23.1-4.9 7.5-10.3 14.6-16.4 21.2l-2.3 2.4c-.8.8-1.5 1.6-2.4 2.4l-4.9 4.6c-3.5 2.9-6.9 5.8-10.6 8.3l-2.7 2c-.9.6-1.9 1.2-2.9 1.8-1.9 1.2-3.8 2.4-5.8 3.5-4 2.1-7.9 4.3-12.1 6l-3.1 1.4-1.5.7c-.5.2-1 .4-1.6.6l-6.3 2.3c-2.1.8-4.2 1.4-6.4 2.1l-6.4 2c-.5.1-1-.1-1.1-.6-.1-.5.1-1 .6-1.1l6.4-1.9c2.1-.7 4.3-1.2 6.3-2l6.2-2.3c.5-.2 1-.4 1.6-.6l1.5-.7 3-1.3c4.1-1.7 8-3.8 11.9-5.8 1.9-1.1 3.8-2.3 5.7-3.4.9-.6 1.9-1.1 2.8-1.8l2.7-1.9c3.7-2.5 7.1-5.3 10.5-8.1l4.9-4.5c.8-.7 1.6-1.6 2.3-2.4l2.3-2.4c6-6.5 11.4-13.6 16.3-21s9.3-15.1 13.6-22.9c2.1-3.9 4.2-7.9 6.7-11.6 2.5-3.7 5.2-7.3 8.2-10.6 6-6.6 13.1-12.3 20.9-16.7 3.9-2.2 8-4.1 12.2-5.6 4.2-1.5 8.5-2.8 13-3.4.1 0 .2 0 .3.1 1.6.9 3.5 1.6 5.4 2.1 1.9.5 3.8.9 5.7 1.1 3.9.5 7.8.6 11.7.3 7.8-.7 15.8-1.8 22.6-5.6 3.3-2 6.3-4.6 8.2-8 2-3.3 2.7-7.3 2.1-11.1 0-.5-.2-.9-.3-1.4-.1-.5-.2-.9-.4-1.4l-.5-1.3-.7-1.2c-1-1.6-2.5-2.9-4.1-3.9-1.6-1-3.5-1.5-5.4-1.5-1.9 0-3.8.6-5.3 1.6-.2.2-.5.1-.7-.2-.1-.1-.1-.3 0-.5.8-1.7 1.3-3.7 1.4-5.7.1-2-.1-4-.7-5.8-.6-1.8-1.7-3.5-3.1-4.8-1.5-1.3-3.2-2.2-5.1-2.9-.9-.3-1.9-.6-2.8-.7-1-.1-1.9-.1-2.9 0-1.9.3-3.7 1.1-5.4 2.2-3.2 2.3-5.7 5.6-7.5 9.1-.1.2-.4.4-.6.2-2.6-1.1-5.4-1.9-8.2-2.6-2.8-.7-5.6-1.3-8.5-1.7-5.7-.9-11.5-1.3-17.3-1.3-5.8 0-11.6.2-17.3 1.1l-2.1.3-2.1.5c-1.4.3-2.8.6-4.2 1-2.8.8-5.6 1.5-8.3 2.6-10.9 3.8-21.2 9.3-30.9 15.6-9.7 6.3-18.7 13.7-26.9 21.9-1.1 1-2 2.1-3 3.1-1 1.1-2 2.1-2.9 3.2-1.9 2.2-3.8 4.4-5.6 6.7-1.8 2.3-3.8 4.4-5.7 6.6l-3 3.2c-1 1.1-2.1 2.1-3.1 3.1-4.2 4-8.7 7.8-13.7 10.8-5 3.1-10.5 5.4-16.2 6.6-5.7 1.2-11.6 1.6-17.5 1.4-5.8-.3-11.7-1.6-17-4-1.3-.6-2.7-1.2-3.9-2l-1.9-1.1-1.8-1.3-.9-.6c-.3-.2-.6-.5-.9-.7l-1.7-1.4-1.6-1.6c-.5-.5-1-1-1.5-1.6l-1.4-1.7c-.4-.6-.8-1.2-1.2-1.9l-.6-.9-.5-1c-.3-.7-.7-1.3-1-2-1.1-2.8-1.7-5.7-1.8-8.7 0-.3.2-.5.5-.5-.4 0-.1.2-.1.5z"/><linearGradient gradientTransform="matrix(1 0 0 -1 0 1080)" y2="628.47382" x2="501.4595" y1="761.37598" x1="522.04169" gradientUnits="userSpaceOnUse" id="g"><stop offset="0" stop-color="#e5b77e"/><stop offset="1" stop-color="#b88671"/></linearGradient><path d="M408.5 480c-13.2-1.7-24.4-9.7-33.3-23.7 39.6-3.4 68.1-12.2 87.7-30.7 12.5-11.8 22.6-24 32.3-35.8 24.1-29.3 45-54.6 91.7-57.2 1.3 1.1 10.5 8.1 26 8.1 15.7 0 28-5 33.1-13.5v.8c0 .3 0 .6-.1 1v.2c0 .3-.1.5-.1.8l-.1.3c0 .3-.1.6-.2.9v.1c-.1.4-.2.7-.3 1l-.1.2c-.1.3-.2.6-.3.8l-.1.3c-.1.3-.3.7-.4 1l-.1.1c-.2.4-.3.6-.5.9l-.2.3c-.2.3-.3.6-.5.8l-.1.2c-.2.3-.4.6-.7 1l-.1.2c-.2.3-.4.6-.6.8l-.2.3-.9.9-.1.1-.8.8-.3.3c-.3.2-.6.5-.9.7l-.2.2c-.4.3-.7.6-1.1.8l-.3.2c-.3.2-.6.4-1 .6l-.4.2c-.4.3-.9.5-1.4.7l-.1.1c-.4.2-.9.4-1.4.6l-.4.2c-.4.2-.8.3-1.3.5l-.3.1c-.5.2-1.1.4-1.7.6l-.4.1c-.5.1-.9.3-1.4.4l-.5.1c-.6.2-1.3.3-1.9.5-5.7 1.2-11.1 1.8-16.2 1.8-12.4 0-18.4-3.7-18.4-3.7l-.1-.1h-.2c-.4 0-37.5 4.5-58.4 43.3-.6 1.1-1.2 2.2-1.7 3.2l-2.4 4.3c-.6 1.1-1.2 2.1-1.8 3.2l-.1.1c-.6 1.1-1.2 2-1.7 3l-.6 1c-.4.7-1.9 3.2-1.9 3.2-.6 1-1.1 1.9-1.7 2.9l-.4.6c-.5.9-1.1 1.7-1.6 2.6l-.7 1.1c-.4.7-.9 1.3-1.3 2l-.7 1.1c-.6.9-1.2 1.8-1.8 2.6l-.5.8c-.5.8-1.1 1.5-1.6 2.3-.2.3-.8 1.1-.8 1.1-.4.6-.9 1.2-1.3 1.8l-.8 1.1c-.6.8-1.2 1.6-1.9 2.4l-.7.9c-.5.7-1.1 1.4-1.7 2-.3.3-.9 1.1-.9 1.1-.5.6-1 1.1-1.4 1.7 0 0-.7.8-.9 1.1-.7.7-1.4 1.5-2 2.2l-.9.9-1.8 1.8-.9.9-.2.2c-.5.5-1 1-1.6 1.5l-.1.1c-.3.3-.6.6-1 .9-.8.7-1.5 1.4-2.3 2.1-.3.3-.6.5-.9.8l-.2.2c-.6.5-1.3 1.1-1.9 1.6-.4.3-.8.6-1.2 1-.6.5-1.2.9-1.8 1.4l-.2.2c-.3.3-.6.5-1 .7-.9.7-1.8 1.3-2.7 2-.3.2-.5.4-.8.5l-.4.3c-.7.5-1.4 1-2.2 1.5-.4.3-.8.5-1.2.8-.7.4-1.3.9-2 1.3l-.3.2c-.4.2-.7.5-1.1.7-1.1.6-2.1 1.3-3.2 1.9-11.1 6.3-23.5 11.2-37.8 15.1-.1.1-4.5 2.1-11.1 3h-11v-.2z" fill="url(#g)"/><path d="M570 334.7c4.9-.8 6.4-3.3 9.2-3.8 3.2-.6 5.4 0 7.7 1.8 2.3 1.7 2.2 4.4 2.2 4.4l-7 2.8-12.1-5.2z" class="st11" fill="#e0b37d"/><path d="M236.6 421c-.6 7.7-9.4 8.9-21.8 8.9s-20.8-.8-21.4-8.5c-.6-7.7 8-11.2 21.4-11.2 13.3-.1 22.4 3.1 21.8 10.8z" class="st12" fill="#a6725c"/><path d="M590.4 423.3c-.5 2.8 3.2 3.7 5.6 3.7 2.4 0 3.9-1.3 4-3 .2-1.7-1.2-2.7-3.6-2.7-2.4 0-5.6-.3-6 2zm18.7-2.3c-1.4.1-3.2.1-4.4.6 0 1.4-.1 2.8-.4 4.2 1.2.9 3.2 1.1 4.7 1 2.4-.1 3.8-1.5 3.8-3.3.1-1.8-1.3-2.7-3.7-2.5zm12.8-1.3c-1.4.2-3.1.3-4.3.8.1 1.4 0 2.8-.2 4.2 1.3.8 3.3.9 4.8.7 2.4-.3 3.7-1.8 3.6-3.5-.1-1.7-1.5-2.5-3.9-2.2z" class="st6" fill="#fccf84"/><path d="M269.2 314.5c6.5-1 13-1.5 19.5-2.4 6.5-.9 12.9-2 19.2-3.5 6.3-1.5 12.6-3.4 18.6-5.9 3-1.2 6-2.5 8.9-3.9 1.5-.7 2.9-1.4 4.4-2.2 1.5-.7 2.8-1.5 4.4-2.2h-.1c3.3-2 6.6-4.1 9.6-6.6 1.5-1.2 2.8-2.6 4.1-4.1 1.2-1.5 2.2-3.1 3-4.8 1.6-3.5 2.3-7.3 2.8-11.2.5-3.9.5-7.7-.1-11.5-.7-3.8-2-7.5-3.9-10.8-1.9-3.3-4.4-6.3-7.4-8.8-5.9-5-13.5-7.9-21.2-8h-.3l-.1-.3c-2.2-4.8-5.4-9.2-9.4-12.7-2-1.7-4.2-3.2-6.6-4.5-2.3-1.2-4.8-2.2-7.4-2.9-5.1-1.4-10.6-1.6-15.8-.6-5.2 1-10.2 3.2-14.5 6.4l-.2.2-.3-.1c-3.3-1.5-6.9-2.4-10.6-2.6-3.6-.2-7.3.2-10.8 1.3-1.8.5-3.4 1.3-5.1 2.1-1.6.9-3.2 1.8-4.6 3-2.9 2.2-5.3 5-7.3 8.1l-.2.3h-.3c-11.1-.9-22.5 0-33 3.7-5.2 1.9-10.2 4.5-14.4 8.1-4.2 3.6-7.5 8.3-9.4 13.4-1 2.6-1.6 5.3-2.1 8l-.4 2.1-.3 2.1c-.2 1.4-.4 2.8-.4 4.2-.3 5.5.2 11.2 2.1 16.4.9 2.6 2.3 5 3.8 7.4.4.6.9 1.1 1.3 1.6s.8 1.1 1.4 1.6c1 1 1.9 2 3 2.9 4.2 3.6 9.2 6.2 14.4 8.4-5.4-1.6-10.6-4.1-15-7.7-1.1-.9-2.1-1.9-3.1-2.9-.5-.5-.9-1.1-1.4-1.6-.4-.6-.9-1.1-1.3-1.7-1.6-2.4-3-4.8-3.9-7.6-2-5.4-2.6-11.1-2.3-16.8 0-1.4.2-2.8.4-4.2l.2-2.1.4-2.1c.5-2.8 1.1-5.6 2.1-8.2 2-5.3 5.4-10.1 9.7-13.9 4.3-3.8 9.4-6.5 14.7-8.4 10.7-3.8 22.3-4.6 33.5-3.6l-.5.2c2-3.2 4.5-6.1 7.5-8.3 1.5-1.2 3.1-2.1 4.7-3.1 1.7-.8 3.4-1.6 5.2-2.1 3.6-1.2 7.4-1.5 11.2-1.3 3.8.2 7.5 1.1 10.9 2.6l-.5.1c4.4-3.2 9.5-5.5 14.9-6.5s11-.9 16.2.6c2.6.7 5.2 1.7 7.6 3 2.4 1.3 4.7 2.8 6.8 4.6 4.2 3.5 7.4 8.1 9.7 13l-.5-.3c8 0 15.9 3 22 8.1 3 2.6 5.7 5.6 7.7 9.1s3.4 7.3 4.1 11.2c.7 3.9.7 8 .2 11.9-.5 3.9-1.2 7.9-2.9 11.6-.8 1.8-1.9 3.5-3.2 5.1-1.3 1.5-2.7 3-4.2 4.2-3 2.6-6.4 4.7-9.8 6.7h-.1c-1.4.7-2.9 1.5-4.3 2.2-1.5.7-2.9 1.5-4.4 2.2-3 1.4-6 2.7-9 3.9-6.1 2.5-12.4 4.4-18.8 5.9s-12.9 2.6-19.4 3.5c-6.3.5-12.9 1.2-19.4 1zm341.8-5.8c2.4.4 4.8.9 7.1 1.7 2.3.7 4.6 1.8 6.7 2.9 2.2 1.1 4.2 2.5 6.1 4.1 1.9 1.5 3.7 3.3 5.1 5.2v.2h-.1c-1.9-1.6-3.7-3.2-5.6-4.6-1.9-1.5-4-2.7-6-3.9-2.1-1.2-4.3-2.2-6.5-3-2.2-.9-4.5-1.6-6.9-2.3-.1 0-.1-.1-.1-.1l.2-.2z"/></g></g><g transform="translate(-184 -205.1)"><defs><path id="h" d="M184 151h494.79999v321H184z"/></defs><clipPath id="i"><use height="100%" width="100%" xlink:href="#h" overflow="visible"/></clipPath><g clip-path="url(#i)"><path d="M270.6 223.8c1-.7 2.1-1.3 3.2-1.7 1.1-.4 2.3-.8 3.5-1 1.2-.2 2.4-.4 3.6-.4 1.2 0 2.4 0 3.6.2-2.4.3-4.7.6-7.1 1.1-1.2.2-2.3.5-3.5.8-1 .3-2.1.7-3.3 1z" class="st15" fill="#fce79c"/></g></g><g transform="translate(-184 -205.1)"><defs><path id="j" d="M184 151h494.79999v321H184z"/></defs><clipPath id="k"><use height="100%" width="100%" xlink:href="#j" overflow="visible"/></clipPath><g clip-path="url(#k)"><path d="M317 225.4c1.7-.9 3.6-1.4 5.5-1.4 1 0 1.9.1 2.8.3.9.2 1.8.5 2.6 1.1-1.9-.2-3.7-.3-5.5-.3-.9 0-1.8 0-2.7.1l-2.7.2z" class="st15" fill="#fce79c"/></g></g></svg>+
\ No newline at end of file
diff --git a/app/javascript/mastodon/actions/onboarding.js b/app/javascript/mastodon/actions/onboarding.js
@@ -0,0 +1,14 @@
+import { openModal } from './modal';
+import { changeSetting, saveSettings } from './settings';
+
+export function showOnboardingOnce() {
+ return (dispatch, getState) => {
+ const alreadySeen = getState().getIn(['settings', 'onboarded']);
+
+ if (!alreadySeen) {
+ dispatch(openModal('ONBOARDING'));
+ dispatch(changeSetting(['onboarded'], true));
+ dispatch(saveSettings());
+ }
+ };
+};
diff --git a/app/javascript/mastodon/containers/mastodon.js b/app/javascript/mastodon/containers/mastodon.js
@@ -2,6 +2,7 @@ import React from 'react';
import { Provider } from 'react-redux';
import PropTypes from 'prop-types';
import configureStore from '../store/configureStore';
+import { showOnboardingOnce } from '../actions/onboarding';
import { BrowserRouter, Route } from 'react-router-dom';
import { ScrollContext } from 'react-router-scroll-4';
import UI from '../features/ui';
@@ -39,6 +40,8 @@ export default class Mastodon extends React.PureComponent {
const handlerUrl = window.location.protocol + '//' + window.location.host + '/intent?uri=%s';
window.setTimeout(() => navigator.registerProtocolHandler('web+mastodon', handlerUrl, 'Mastodon'), 5 * 60 * 1000);
}
+
+ store.dispatch(showOnboardingOnce());
}
componentWillUnmount () {
diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js
@@ -9,6 +9,7 @@ import VideoModal from './video_modal';
import BoostModal from './boost_modal';
import ConfirmationModal from './confirmation_modal';
import {
+ OnboardingModal,
MuteModal,
ReportModal,
EmbedModal,
@@ -17,6 +18,7 @@ import {
const MODAL_COMPONENTS = {
'MEDIA': () => Promise.resolve({ default: MediaModal }),
+ 'ONBOARDING': OnboardingModal,
'VIDEO': () => Promise.resolve({ default: VideoModal }),
'BOOST': () => Promise.resolve({ default: BoostModal }),
'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
diff --git a/app/javascript/mastodon/features/ui/components/onboarding_modal.js b/app/javascript/mastodon/features/ui/components/onboarding_modal.js
@@ -0,0 +1,324 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import ReactSwipeableViews from 'react-swipeable-views';
+import classNames from 'classnames';
+import Permalink from '../../../components/permalink';
+import ComposeForm from '../../compose/components/compose_form';
+import Search from '../../compose/components/search';
+import NavigationBar from '../../compose/components/navigation_bar';
+import ColumnHeader from './column_header';
+import { List as ImmutableList } from 'immutable';
+import { me } from '../../../initial_state';
+
+const noop = () => { };
+
+const messages = defineMessages({
+ home_title: { id: 'column.home', defaultMessage: 'Home' },
+ notifications_title: { id: 'column.notifications', defaultMessage: 'Notifications' },
+ local_title: { id: 'column.community', defaultMessage: 'Local timeline' },
+ federated_title: { id: 'column.public', defaultMessage: 'Federated timeline' },
+});
+
+const PageOne = ({ acct, domain }) => (
+ <div className='onboarding-modal__page onboarding-modal__page-one'>
+ <div className='onboarding-modal__page-one__lead'>
+ <h1><FormattedMessage id='onboarding.page_one.welcome' defaultMessage='Welcome to Mastodon!' /></h1>
+ <p><FormattedMessage id='onboarding.page_one.federation' defaultMessage='Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.' /></p>
+ </div>
+
+ <div className='onboarding-modal__page-one__extra'>
+ <div className='display-case'>
+ <div className='display-case__label'>
+ <FormattedMessage id='onboarding.page_one.full_handle' defaultMessage='Your full handle' />
+ </div>
+
+ <div className='display-case__case'>
+ @{acct}@{domain}
+ </div>
+ </div>
+
+ <p><FormattedMessage id='onboarding.page_one.handle_hint' defaultMessage='This is what you would tell your friends to search for.' /></p>
+ </div>
+ </div>
+);
+
+PageOne.propTypes = {
+ acct: PropTypes.string.isRequired,
+ domain: PropTypes.string.isRequired,
+};
+
+const PageTwo = ({ myAccount }) => (
+ <div className='onboarding-modal__page onboarding-modal__page-two'>
+ <div className='figure non-interactive'>
+ <div className='pseudo-drawer'>
+ <NavigationBar account={myAccount} />
+
+ <ComposeForm
+ text='Awoo! #introductions'
+ suggestions={ImmutableList()}
+ mentionedDomains={[]}
+ spoiler={false}
+ onChange={noop}
+ onSubmit={noop}
+ onPaste={noop}
+ onPickEmoji={noop}
+ onChangeSpoilerText={noop}
+ onClearSuggestions={noop}
+ onFetchSuggestions={noop}
+ onSuggestionSelected={noop}
+ showSearch
+ />
+ </div>
+ </div>
+
+ <p><FormattedMessage id='onboarding.page_two.compose' defaultMessage='Write posts from the compose column. You can upload images, change privacy settings, and add content warnings with the icons below.' /></p>
+ </div>
+);
+
+PageTwo.propTypes = {
+ myAccount: ImmutablePropTypes.map.isRequired,
+};
+
+const PageThree = ({ myAccount }) => (
+ <div className='onboarding-modal__page onboarding-modal__page-three'>
+ <div className='figure non-interactive'>
+ <Search
+ value=''
+ onChange={noop}
+ onSubmit={noop}
+ onClear={noop}
+ onShow={noop}
+ />
+
+ <div className='pseudo-drawer'>
+ <NavigationBar account={myAccount} />
+ </div>
+ </div>
+
+ <p><FormattedMessage id='onboarding.page_three.search' defaultMessage='Use the search bar to find people and look at hashtags, such as {illustration} and {introductions}. To look for a person who is not on this instance, use their full handle.' values={{ illustration: <Permalink to='/timelines/tag/illustration' href='/tags/illustration'>#illustration</Permalink>, introductions: <Permalink to='/timelines/tag/introductions' href='/tags/introductions'>#introductions</Permalink> }} /></p>
+ <p><FormattedMessage id='onboarding.page_three.profile' defaultMessage='Edit your profile to change your avatar, bio, and display name. There, you will also find other preferences.' /></p>
+ </div>
+);
+
+PageThree.propTypes = {
+ myAccount: ImmutablePropTypes.map.isRequired,
+};
+
+const PageFour = ({ domain, intl }) => (
+ <div className='onboarding-modal__page onboarding-modal__page-four'>
+ <div className='onboarding-modal__page-four__columns'>
+ <div className='row'>
+ <div>
+ <div className='figure non-interactive'><ColumnHeader icon='home' type={intl.formatMessage(messages.home_title)} /></div>
+ <p><FormattedMessage id='onboarding.page_four.home' defaultMessage='The home timeline shows posts from people you follow.' /></p>
+ </div>
+
+ <div>
+ <div className='figure non-interactive'><ColumnHeader icon='bell' type={intl.formatMessage(messages.notifications_title)} /></div>
+ <p><FormattedMessage id='onboarding.page_four.notifications' defaultMessage='The notifications column shows when someone interacts with you.' /></p>
+ </div>
+ </div>
+
+ <div className='row'>
+ <div>
+ <div className='figure non-interactive' style={{ marginBottom: 0 }}><ColumnHeader icon='users' type={intl.formatMessage(messages.local_title)} /></div>
+ </div>
+
+ <div>
+ <div className='figure non-interactive' style={{ marginBottom: 0 }}><ColumnHeader icon='globe' type={intl.formatMessage(messages.federated_title)} /></div>
+ </div>
+ </div>
+
+ <p><FormattedMessage id='onboarding.page_five.public_timelines' defaultMessage='The local timeline shows public posts from everyone on {domain}. The federated timeline shows public posts from everyone who people on {domain} follow. These are the Public Timelines, a great way to discover new people.' values={{ domain }} /></p>
+ </div>
+ </div>
+);
+
+PageFour.propTypes = {
+ domain: PropTypes.string.isRequired,
+ intl: PropTypes.object.isRequired,
+};
+
+const PageSix = ({ admin, domain }) => {
+ let adminSection = '';
+
+ if (admin) {
+ adminSection = (
+ <p>
+ <FormattedMessage id='onboarding.page_six.admin' defaultMessage="Your instance's admin is {admin}." values={{ admin: <Permalink href={admin.get('url')} to={`/accounts/${admin.get('id')}`}>@{admin.get('acct')}</Permalink> }} />
+ <br />
+ <FormattedMessage id='onboarding.page_six.read_guidelines' defaultMessage="Please read {domain}'s {guidelines}!" values={{ domain, guidelines: <a href='/about/more' target='_blank'><FormattedMessage id='onboarding.page_six.guidelines' defaultMessage='community guidelines' /></a> }} />
+ </p>
+ );
+ }
+
+ return (
+ <div className='onboarding-modal__page onboarding-modal__page-six'>
+ <h1><FormattedMessage id='onboarding.page_six.almost_done' defaultMessage='Almost done...' /></h1>
+ {adminSection}
+ <p><FormattedMessage id='onboarding.page_six.github' defaultMessage='Mastodon is free open-source software. You can report bugs, request features, or contribute to the code on {github}.' values={{ github: <a href='https://github.com/tootsuite/mastodon' target='_blank' rel='noopener'>GitHub</a> }} /></p>
+ <p><FormattedMessage id='onboarding.page_six.apps_available' defaultMessage='There are {apps} available for iOS, Android and other platforms.' values={{ apps: <a href='https://github.com/tootsuite/documentation/blob/master/Using-Mastodon/Apps.md' target='_blank' rel='noopener'><FormattedMessage id='onboarding.page_six.various_app' defaultMessage='mobile apps' /></a> }} /></p>
+ <p><em><FormattedMessage id='onboarding.page_six.appetoot' defaultMessage='Bon Appetoot!' /></em></p>
+ </div>
+ );
+};
+
+PageSix.propTypes = {
+ admin: ImmutablePropTypes.map,
+ domain: PropTypes.string.isRequired,
+};
+
+const mapStateToProps = state => ({
+ myAccount: state.getIn(['accounts', me]),
+ admin: state.getIn(['accounts', state.getIn(['meta', 'admin'])]),
+ domain: state.getIn(['meta', 'domain']),
+});
+
+@connect(mapStateToProps)
+@injectIntl
+export default class OnboardingModal extends React.PureComponent {
+
+ static propTypes = {
+ onClose: PropTypes.func.isRequired,
+ intl: PropTypes.object.isRequired,
+ myAccount: ImmutablePropTypes.map.isRequired,
+ domain: PropTypes.string.isRequired,
+ admin: ImmutablePropTypes.map,
+ };
+
+ state = {
+ currentIndex: 0,
+ };
+
+ componentWillMount() {
+ const { myAccount, admin, domain, intl } = this.props;
+ this.pages = [
+ <PageOne acct={myAccount.get('acct')} domain={domain} />,
+ <PageTwo myAccount={myAccount} />,
+ <PageThree myAccount={myAccount} />,
+ <PageFour domain={domain} intl={intl} />,
+ <PageSix admin={admin} domain={domain} />,
+ ];
+ };
+
+ componentDidMount() {
+ window.addEventListener('keyup', this.handleKeyUp);
+ }
+
+ componentWillUnmount() {
+ window.addEventListener('keyup', this.handleKeyUp);
+ }
+
+ handleSkip = (e) => {
+ e.preventDefault();
+ this.props.onClose();
+ }
+
+ handleDot = (e) => {
+ const i = Number(e.currentTarget.getAttribute('data-index'));
+ e.preventDefault();
+ this.setState({ currentIndex: i });
+ }
+
+ handlePrev = () => {
+ this.setState(({ currentIndex }) => ({
+ currentIndex: Math.max(0, currentIndex - 1),
+ }));
+ }
+
+ handleNext = () => {
+ const { pages } = this;
+ this.setState(({ currentIndex }) => ({
+ currentIndex: Math.min(currentIndex + 1, pages.length - 1),
+ }));
+ }
+
+ handleSwipe = (index) => {
+ this.setState({ currentIndex: index });
+ }
+
+ handleKeyUp = ({ key }) => {
+ switch (key) {
+ case 'ArrowLeft':
+ this.handlePrev();
+ break;
+ case 'ArrowRight':
+ this.handleNext();
+ break;
+ }
+ }
+
+ handleClose = () => {
+ this.props.onClose();
+ }
+
+ render () {
+ const { pages } = this;
+ const { currentIndex } = this.state;
+ const hasMore = currentIndex < pages.length - 1;
+
+ const nextOrDoneBtn = hasMore ? (
+ <button onClick={this.handleNext} className='onboarding-modal__nav onboarding-modal__next shake-bottom'>
+ <FormattedMessage id='onboarding.next' defaultMessage='Next' /> <i className='fa fa-fw fa-chevron-right' />
+ </button>
+ ) : (
+ <button onClick={this.handleClose} className='onboarding-modal__nav onboarding-modal__done shake-bottom'>
+ <FormattedMessage id='onboarding.done' defaultMessage='Done' /> <i className='fa fa-fw fa-check' />
+ </button>
+ );
+
+ return (
+ <div className='modal-root__modal onboarding-modal'>
+ <ReactSwipeableViews index={currentIndex} onChangeIndex={this.handleSwipe} className='onboarding-modal__pager'>
+ {pages.map((page, i) => {
+ const className = classNames('onboarding-modal__page__wrapper', `onboarding-modal__page__wrapper-${i}`, {
+ 'onboarding-modal__page__wrapper--active': i === currentIndex,
+ });
+
+ return (
+ <div key={i} className={className}>{page}</div>
+ );
+ })}
+ </ReactSwipeableViews>
+
+ <div className='onboarding-modal__paginator'>
+ <div>
+ <button
+ onClick={this.handleSkip}
+ className='onboarding-modal__nav onboarding-modal__skip'
+ >
+ <FormattedMessage id='onboarding.skip' defaultMessage='Skip' />
+ </button>
+ </div>
+
+ <div className='onboarding-modal__dots'>
+ {pages.map((_, i) => {
+ const className = classNames('onboarding-modal__dot', {
+ active: i === currentIndex,
+ });
+
+ return (
+ <div
+ key={`dot-${i}`}
+ role='button'
+ tabIndex='0'
+ data-index={i}
+ onClick={this.handleDot}
+ className={className}
+ />
+ );
+ })}
+ </div>
+
+ <div>
+ {nextOrDoneBtn}
+ </div>
+ </div>
+ </div>
+ );
+ }
+
+}
diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js
@@ -94,6 +94,10 @@ export function Mutes () {
return import(/* webpackChunkName: "features/mutes" */'../../mutes');
}
+export function OnboardingModal () {
+ return import(/* webpackChunkName: "modals/onboarding_modal" */'../components/onboarding_modal');
+}
+
export function MuteModal () {
return import(/* webpackChunkName: "modals/mute_modal" */'../components/mute_modal');
}
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
@@ -174,7 +174,7 @@
"onboarding.page_four.home": "The home timeline shows posts from people you follow.",
"onboarding.page_four.notifications": "The notifications column shows when someone interacts with you.",
"onboarding.page_one.federation": "Mastodon is a network of independent servers joining up to make one larger social network. We call these servers instances.",
- "onboarding.page_one.handle": "You are on {domain}, so your full handle is {handle}",
+ "onboarding.page_one.handle": "Your full handle is {handle}. This is what you would tell your friends to search for.",
"onboarding.page_one.welcome": "Welcome to Mastodon!",
"onboarding.page_six.admin": "Your instance's admin is {admin}.",
"onboarding.page_six.almost_done": "Almost done...",
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
@@ -1419,6 +1419,10 @@
color: $primary-text-color;
}
+ a {
+ color: inherit;
+ }
+
.permalink {
text-decoration: none;
}
@@ -2760,6 +2764,7 @@
flex: 1 1 auto;
align-items: center;
justify-content: center;
+
@supports(display: grid) { // hack to fix Chrome <57
contain: strict;
}
@@ -2805,11 +2810,48 @@
}
}
-.pulse-loading {
+.no-reduce-motion .pulse-loading {
transform-origin: center center;
animation: heartbeat 1.5s ease-in-out infinite both;
}
+@keyframes shake-bottom {
+ 0%,
+ 100% {
+ transform: rotate(0deg);
+ transform-origin: 50% 100%;
+ }
+
+ 10% {
+ transform: rotate(2deg);
+ }
+
+ 20%,
+ 40%,
+ 60% {
+ transform: rotate(-4deg);
+ }
+
+ 30%,
+ 50%,
+ 70% {
+ transform: rotate(4deg);
+ }
+
+ 80% {
+ transform: rotate(-2deg);
+ }
+
+ 90% {
+ transform: rotate(2deg);
+ }
+}
+
+.no-reduce-motion .shake-bottom {
+ transform-origin: 50% 100%;
+ animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s 2 both;
+}
+
.emoji-picker-dropdown__menu {
background: $simple-background-color;
position: absolute;
@@ -3300,6 +3342,7 @@
z-index: 100;
}
+.onboarding-modal,
.error-modal,
.embed-modal {
background: $ui-secondary-color;
@@ -3310,6 +3353,25 @@
flex-direction: column;
}
+.onboarding-modal__pager {
+ height: 80vh;
+ width: 80vw;
+ max-width: 520px;
+ max-height: 470px;
+
+ .react-swipeable-view-container > div {
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ display: none;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ user-select: text;
+ }
+}
+
.error-modal__body {
height: 80vh;
width: 80vw;
@@ -3343,6 +3405,23 @@
text-align: center;
}
+@media screen and (max-width: 550px) {
+ .onboarding-modal {
+ width: 100%;
+ height: 100%;
+ border-radius: 0;
+ }
+
+ .onboarding-modal__pager {
+ width: 100%;
+ height: auto;
+ max-width: none;
+ max-height: none;
+ flex: 1 1 auto;
+ }
+}
+
+.onboarding-modal__paginator,
.error-modal__footer {
flex: 0 0 auto;
background: darken($ui-secondary-color, 8%);
@@ -3353,20 +3432,35 @@
min-width: 33px;
}
+ .onboarding-modal__nav,
.error-modal__nav {
color: darken($ui-secondary-color, 34%);
- background-color: transparent;
border: 0;
font-size: 14px;
font-weight: 500;
- padding: 0;
+ padding: 10px 25px;
line-height: inherit;
height: auto;
+ margin: -10px;
+ border-radius: 4px;
+ background-color: transparent;
&:hover,
&:focus,
&:active {
color: darken($ui-secondary-color, 38%);
+ background-color: darken($ui-secondary-color, 16%);
+ }
+
+ &.onboarding-modal__done,
+ &.onboarding-modal__next {
+ color: $ui-base-color;
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: darken($ui-base-color, 4%);
+ }
}
}
}
@@ -3375,6 +3469,239 @@
justify-content: center;
}
+.onboarding-modal__dots {
+ flex: 1 1 auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.onboarding-modal__dot {
+ width: 14px;
+ height: 14px;
+ border-radius: 14px;
+ background: darken($ui-secondary-color, 16%);
+ margin: 0 3px;
+ cursor: pointer;
+
+ &:hover {
+ background: darken($ui-secondary-color, 18%);
+ }
+
+ &.active {
+ cursor: default;
+ background: darken($ui-secondary-color, 24%);
+ }
+}
+
+.onboarding-modal__page__wrapper {
+ pointer-events: none;
+ padding: 25px;
+ padding-bottom: 0;
+
+ &.onboarding-modal__page__wrapper--active {
+ pointer-events: auto;
+ }
+}
+
+.onboarding-modal__page {
+ cursor: default;
+ line-height: 21px;
+
+ h1 {
+ font-size: 18px;
+ font-weight: 500;
+ color: $ui-base-color;
+ margin-bottom: 20px;
+ }
+
+ a {
+ color: $ui-highlight-color;
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: lighten($ui-highlight-color, 4%);
+ }
+ }
+
+ .navigation-bar a {
+ color: inherit;
+ }
+
+ p {
+ font-size: 16px;
+ color: lighten($ui-base-color, 8%);
+ margin-top: 10px;
+ margin-bottom: 10px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ strong {
+ font-weight: 500;
+ background: $ui-base-color;
+ color: $ui-secondary-color;
+ border-radius: 4px;
+ font-size: 14px;
+ padding: 3px 6px;
+
+ @each $lang in $cjk-langs {
+ &:lang(#{$lang}) {
+ font-weight: 700;
+ }
+ }
+ }
+ }
+}
+
+.onboarding-modal__page__wrapper-0 {
+ background: url('../images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px;
+ height: 100%;
+ padding: 0;
+}
+
+.onboarding-modal__page-one {
+ &__lead {
+ padding: 65px;
+ padding-top: 45px;
+ padding-bottom: 0;
+ margin-bottom: 10px;
+
+ h1 {
+ font-size: 26px;
+ line-height: 36px;
+ margin-bottom: 8px;
+ }
+
+ p {
+ margin-bottom: 0;
+ }
+ }
+
+ &__extra {
+ padding-right: 65px;
+ padding-left: 185px;
+ text-align: center;
+ }
+}
+
+.display-case {
+ text-align: center;
+ font-size: 15px;
+ margin-bottom: 15px;
+
+ &__label {
+ font-weight: 500;
+ color: $ui-base-color;
+ margin-bottom: 5px;
+ text-transform: uppercase;
+ font-size: 12px;
+ }
+
+ &__case {
+ background: $ui-base-color;
+ color: $ui-secondary-color;
+ font-weight: 500;
+ padding: 10px;
+ border-radius: 4px;
+ }
+}
+
+.onboarding-modal__page-two,
+.onboarding-modal__page-three,
+.onboarding-modal__page-four,
+.onboarding-modal__page-five {
+ p {
+ text-align: left;
+ }
+
+ .figure {
+ background: darken($ui-base-color, 8%);
+ color: $ui-secondary-color;
+ margin-bottom: 20px;
+ border-radius: 4px;
+ padding: 10px;
+ text-align: center;
+ font-size: 14px;
+ box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.3);
+
+ .onboarding-modal__image {
+ border-radius: 4px;
+ margin-bottom: 10px;
+ }
+
+ &.non-interactive {
+ pointer-events: none;
+ text-align: left;
+ }
+ }
+}
+
+.onboarding-modal__page-four__columns {
+ .row {
+ display: flex;
+ margin-bottom: 20px;
+
+ & > div {
+ flex: 1 1 0;
+ margin: 0 10px;
+
+ &:first-child {
+ margin-left: 0;
+ }
+
+ &:last-child {
+ margin-right: 0;
+ }
+
+ p {
+ text-align: center;
+ }
+ }
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .column-header {
+ color: $primary-text-color;
+ }
+}
+
+@media screen and (max-width: 320px) and (max-height: 600px) {
+ .onboarding-modal__page p {
+ font-size: 14px;
+ line-height: 20px;
+ }
+
+ .onboarding-modal__page-two .figure,
+ .onboarding-modal__page-three .figure,
+ .onboarding-modal__page-four .figure,
+ .onboarding-modal__page-five .figure {
+ font-size: 12px;
+ margin-bottom: 10px;
+ }
+
+ .onboarding-modal__page-four__columns .row {
+ margin-bottom: 10px;
+ }
+
+ .onboarding-modal__page-four__columns .column-header {
+ padding: 5px;
+ font-size: 12px;
+ }
+}
+
+.onboard-sliders {
+ display: inline-block;
+ max-width: 30px;
+ max-height: auto;
+ margin-left: 10px;
+}
+
.boost-modal,
.confirmation-modal,
.report-modal,
