Skip to content

Improve illustrations and migration steps UI #3249

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Aug 11, 2025
+98 −90
Merged

Improve illustrations and migration steps UI #3249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
dbb1987
Improve illustrations and migration steps UI
lmuntaner Aug 8, 2025
3d4eaea
Update src/frontend/src/lib/components/wizards/migration/views/Create…
lmuntaner Aug 8, 2025
e401a24
Fix formatting
lmuntaner Aug 8, 2025
1dac82a
CR changes
lmuntaner Aug 11, 2025
536eb02
Filter in binding
lmuntaner Aug 11, 2025
f229115
Remove autofocus
lmuntaner Aug 11, 2025
8d78e17
CR changes
lmuntaner Aug 11, 2025
2fdba83
CR changes
lmuntaner Aug 11, 2025
ecb8468
Clean up logo legacy SVG
lmuntaner Aug 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions src/frontend/src/lib/components/illustrations/LogoLegacy.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<script lang="ts">
import type { SVGAttributes } from "svelte/elements";

type Props = SVGAttributes<SVGSVGElement>;

const { class: className, ...props }: Props = $props();
</script>

<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 60 28"
{...props}
class={[className]}
>
<g fill="#00ACE5">
<path
d="M48.691 23.265c-4.047 0-8.322-2.646-10.42-4.567-2.293-2.1-8.596-8.936-8.624-8.967C25.514 5.118 19.957 0 14.412 0 7.734 0 1.91 4.624.395 10.751c.117-.403 2.238-6.016 10.208-6.016 4.048 0 8.322 2.646 10.42 4.567 2.293 2.1 8.596 8.936 8.624 8.967 4.133 4.612 9.69 9.73 15.235 9.73 6.678 0 12.502-4.624 14.017-10.751-.117.403-2.238 6.016-10.208 6.016Z"
/>
<path
fill="url(#logo-loop-bottom)"
d="M29.647 18.27c-.014-.017-1.83-1.985-3.864-4.132-1.1 1.305-2.685 3.084-4.507 4.68-3.395 2.977-5.602 3.6-6.864 3.6-4.762 0-8.646-3.776-8.646-8.418 0-4.642 3.88-8.39 8.646-8.419.173 0 .382.018.636.063-1.432-.55-2.953-.909-4.445-.909-7.967 0-10.09 5.61-10.207 6.015A13.507 13.507 0 0 0 .001 14c0 7.72 6.368 14 14.309 14 3.31 0 7.018-1.697 10.838-5.044 1.805-1.582 3.37-3.275 4.546-4.636a2.261 2.261 0 0 1-.045-.05l-.002.001Z"
/>
<path
fill="url(#logo-loop-top)"
d="M29.647 9.73c.015.016 1.83 1.985 3.864 4.132 1.1-1.305 2.685-3.084 4.507-4.68 3.395-2.977 5.602-3.6 6.864-3.6 4.762 0 8.646 3.776 8.646 8.418 0 4.616-3.88 8.39-8.646 8.419a3.67 3.67 0 0 1-.636-.063c1.432.55 2.954.909 4.445.909 7.967 0 10.09-5.61 10.207-6.015.258-1.044.395-2.132.395-3.249C59.294 6.281 52.823 0 44.883 0c-3.311 0-6.916 1.698-10.735 5.044C32.342 6.626 30.776 8.32 29.6 9.68l.045.05h.001Z"
/>
</g>
<defs>
<linearGradient
id="logo-loop-bottom"
x1="21.883"
x2="2.381"
y1="26.169"
y2="5.974"
gradientUnits="userSpaceOnUse"
>
<stop offset=".22" stop-color="#FF0079" />
<stop offset=".89" stop-color="#592489" />
</linearGradient>
<linearGradient
id="logo-loop-top"
x1="37.398"
x2="56.9"
y1="1.844"
y2="22.039"
gradientUnits="userSpaceOnUse"
>
<stop offset=".21" stop-color="#FF4B00" />
<stop offset=".68" stop-color="#FFAB00" />
</linearGradient>
</defs>
</svg>
76 changes: 8 additions & 68 deletions src/frontend/src/lib/components/illustrations/MigrationIllustration.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,76 +1,16 @@
<script lang="ts">
import type { SVGAttributes } from "svelte/elements";
import LogoLegacy from "./LogoLegacy.svelte";
import { ArrowRightIcon } from "@lucide/svelte";
import Logo from "../ui/Logo.svelte";

type Props = SVGAttributes<SVGSVGElement>;

const { class: className, ...props }: Props = $props();
</script>

<svg viewBox="0 0 352 128" {...props} class={[className]}>
<g clip-path="url(#clip0_99_6378)">
<path
vector-effect="non-scaling-stroke"
d="M135.84 74.5882C131.198 74.5882 126.296 71.5647 123.89 69.3694C121.26 66.9682 114.032 59.1565 114 59.1212C109.26 53.8494 102.886 48 96.5276 48C88.8693 48 82.1909 53.2847 80.4531 60.2871C80.5865 59.8259 83.0197 53.4118 92.1595 53.4118C96.8015 53.4118 101.703 56.4353 104.109 58.6306C106.739 61.0318 113.968 68.8435 114 68.8788C118.74 74.1494 125.114 79.9988 131.472 79.9988C139.13 79.9988 145.809 74.7141 147.546 67.7118C147.413 68.1729 144.98 74.5871 135.84 74.5871V74.5882Z"
fill="#29ABE2"
/>
<path
vector-effect="non-scaling-stroke"
d="M114 68.8799C113.983 68.861 111.902 66.6116 109.568 64.1575C108.307 65.6493 106.489 67.6822 104.4 69.5069C100.506 72.9081 97.9749 73.621 96.5276 73.621C91.0663 73.621 86.6121 69.3046 86.6121 63.9999C86.6121 58.6952 91.0616 54.4116 96.5276 54.3787C96.7259 54.3787 96.9656 54.3987 97.2572 54.4504C95.615 53.8222 93.8701 53.4116 92.1595 53.4116C83.0232 53.4116 80.5877 59.8222 80.4543 60.2857C80.158 61.4787 80.001 62.7222 80.001 63.9987C80.001 72.821 87.3039 79.9987 96.4107 79.9987C100.207 79.9987 104.46 78.0587 108.84 74.234C110.91 72.4257 112.706 70.4916 114.054 68.9363C114.036 68.9175 114.019 68.8975 114.002 68.8787L114 68.8799Z"
fill="url(#paint0_linear_99_6378)"
/>
<path
vector-effect="non-scaling-stroke"
d="M114 59.12C114.016 59.1388 116.098 61.3882 118.432 63.8424C119.693 62.3506 121.511 60.3176 123.6 58.4929C127.494 55.0918 130.025 54.3788 131.472 54.3788C136.933 54.3788 141.388 58.6953 141.388 64C141.388 69.2753 136.938 73.5882 131.472 73.6212C131.274 73.6212 131.034 73.6012 130.743 73.5494C132.385 74.1776 134.13 74.5882 135.84 74.5882C144.976 74.5882 147.412 68.1776 147.545 67.7141C147.842 66.5212 147.999 65.2776 147.999 64.0012C148 55.1776 140.579 48 131.472 48C127.675 48 123.541 49.94 119.161 53.7647C117.091 55.5729 115.295 57.5071 113.947 59.0624C113.964 59.0812 113.982 59.1012 113.999 59.12H114Z"
fill="url(#paint1_linear_99_6378)"
/>
</g>
<path
vector-effect="non-scaling-stroke"
d="M169 64H183M183 64L176 57M183 64L176 71"
stroke="#909091"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
vector-effect="non-scaling-stroke"
class="fill-current"
d="M271.999 64C271.999 55.1776 264.578 48 255.471 48C251.675 48 247.54 49.94 243.161 53.7647C241.09 55.5729 239.294 57.5071 237.946 59.0624C233.212 53.8071 226.863 48 220.527 48C212.869 48 206.191 53.2847 204.453 60.2871C204.456 60.2812 204.458 60.2729 204.46 60.2647C204.458 60.2729 204.456 60.28 204.453 60.2871C204.157 61.48 204 62.7235 204 64C204 72.8224 211.303 80 220.409 80C224.206 80 228.458 78.06 232.838 74.2353C234.909 72.4271 236.704 70.4929 238.053 68.9376C242.786 74.1929 249.137 80 255.473 80C263.131 80 269.809 74.7153 271.547 67.7141C271.843 66.5212 272 65.2776 272 64.0012L271.999 64ZM239.217 59.0459C240.764 57.3059 242.299 55.7694 243.784 54.4729C247.987 50.8024 251.919 48.9412 255.471 48.9412C264.064 48.9412 271.054 55.6965 271.054 64C271.054 65.1647 270.914 66.3282 270.635 67.46C270.59 67.5906 270.018 69.1529 268.386 70.6718C266.267 72.6447 263.395 73.6459 259.849 73.6471C263.663 71.9953 266.331 68.2847 266.331 64C266.331 58.1753 261.459 53.4376 255.471 53.4376C253.137 53.4376 250.281 54.9 246.976 57.7859C245.49 59.0847 243.985 60.6118 242.396 62.4365L241.772 63.1494L238.579 59.7459L239.217 59.0471V59.0459ZM233.568 64.1576C232.307 65.6494 230.489 67.6824 228.399 69.5071C224.506 72.9082 221.975 73.6212 220.527 73.6212C215.066 73.6212 210.612 69.3047 210.612 64C210.612 58.6953 215.062 54.4118 220.527 54.3788C220.726 54.3788 220.965 54.3988 221.256 54.4506C224.073 55.5271 226.588 57.2447 228.108 58.6306C229.33 59.7459 231.543 62.0282 233.566 64.1565L233.568 64.1576ZM236.782 68.9541C235.233 70.6941 233.7 72.2306 232.215 73.5271C228.071 77.1459 223.989 79.0588 220.409 79.0588C216.26 79.0588 212.369 77.4882 209.451 74.6365C206.544 71.7965 204.944 68.0188 204.944 64C204.944 62.8353 205.086 61.6706 205.364 60.54C205.411 60.4047 205.983 58.8447 207.612 57.3282C209.731 55.3553 212.604 54.3541 216.15 54.3529C212.336 56.0047 209.668 59.7153 209.668 64C209.668 69.8247 214.54 74.5624 220.527 74.5624C222.861 74.5624 225.718 73.1 229.023 70.2141C230.509 68.9153 232.014 67.3882 233.603 65.5635L234.225 64.8494C234.225 64.8494 237.371 68.2024 237.406 68.24L236.781 68.9541H236.782ZM242.431 63.8424C243.692 62.3506 245.51 60.3176 247.6 58.4929C251.493 55.0918 254.024 54.3788 255.471 54.3788C260.932 54.3788 265.387 58.6953 265.387 64C265.387 69.3047 260.937 73.5882 255.471 73.6212C255.273 73.6212 255.033 73.6012 254.742 73.5494C254.744 73.5494 254.745 73.5506 254.748 73.5518C251.929 72.4753 249.41 70.7565 247.89 69.3694C246.668 68.2541 244.455 65.9718 242.43 63.8435L242.431 63.8424ZM271.54 67.7306C271.542 67.7247 271.543 67.7176 271.545 67.7129C271.544 67.7176 271.542 67.7247 271.54 67.7306Z"
fill="#1D1D1F"
/>
<defs>
<linearGradient
vector-effect="non-scaling-stroke"
id="paint0_linear_99_6378"
x1="105.096"
y1="77.9069"
x2="82.8106"
y2="54.7497"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.22" stop-color="#ED1E79" />
<stop offset="0.89" stop-color="#522785" />
</linearGradient>
<linearGradient
vector-effect="non-scaling-stroke"
id="paint1_linear_99_6378"
x1="122.889"
y1="50.1059"
x2="145.175"
y2="73.2631"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.21" stop-color="#F15A24" />
<stop offset="0.68" stop-color="#FBB03B" />
</linearGradient>
<clipPath id="clip0_99_6378">
<rect
vector-effect="non-scaling-stroke"
width="68"
height="32"
fill="white"
transform="translate(80 48)"
/>
</clipPath>
</defs>
</svg>
<div class="flex items-center justify-center gap-4 py-3.5">
<LogoLegacy class="h-8" />
<ArrowRightIcon class="size-6" />
<Logo class="h-8" />
</div>
21 changes: 9 additions & 12 deletions src/frontend/src/lib/components/illustrations/SmileyWritingIllustration.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,25 @@
</script>

<svg
viewBox="0 0 352 128"
{...props}
class={["fill-none stroke-current", className]}
viewBox="0 0 93 93"
>
<path
vector-effect="non-scaling-stroke"
d="M129.268 61.6816C129.268 37.9567 148.501 18.7236 172.226 18.7236C193.674 18.7237 211.45 34.4417 214.665 54.9873C214.708 55.2601 214.521 55.5159 214.248 55.5586C213.975 55.6013 213.719 55.4144 213.677 55.1416C210.536 35.0752 193.173 19.7237 172.226 19.7236C149.053 19.7236 130.268 38.509 130.268 61.6816C130.268 83.3818 146.742 101.235 167.865 103.416C168.14 103.444 168.34 103.689 168.312 103.964C168.283 104.239 168.037 104.439 167.763 104.41C146.135 102.177 129.268 83.8997 129.268 61.6816Z"
stroke-linecap="round"
d="M85.14 37.5A42.5 42.5 0 0 0 .51 42.98a42.5 42.5 0 0 0 39.02 42.25"
/>
<circle cx="29" cy="33" r="4.5" vector-effect="non-scaling-stroke" />
<circle cx="54" cy="33" r="4.5" vector-effect="non-scaling-stroke" />
<path
vector-effect="non-scaling-stroke"
d="M162.954 50.6538C162.954 48.4654 161.181 46.6911 158.992 46.6909C156.804 46.6909 155.029 48.4653 155.029 50.6538C155.029 52.8422 156.804 54.6157 158.992 54.6157V55.6157L158.736 55.6099C156.199 55.4811 154.165 53.4462 154.036 50.9087L154.029 50.6538C154.029 47.913 156.251 45.6909 158.992 45.6909L159.247 45.6978C161.869 45.8306 163.954 47.9986 163.954 50.6538L163.948 50.9087C163.815 53.5308 161.647 55.6156 158.992 55.6157V54.6157C161.18 54.6156 162.954 52.8421 162.954 50.6538Z"
stroke-linecap="round"
d="M57.8 51.43c-2.01 6.09-8.31 10.53-15.77 10.53-7.47 0-13.77-4.44-15.78-10.53"
/>
<path
vector-effect="non-scaling-stroke"
d="M189.421 50.6538C189.421 48.4654 187.648 46.6911 185.459 46.6909C183.271 46.6909 181.497 48.4653 181.497 50.6538C181.497 52.8422 183.271 54.6157 185.459 54.6157V55.6157L185.204 55.6099C182.666 55.4811 180.632 53.4462 180.503 50.9087L180.497 50.6538C180.497 47.913 182.719 45.6909 185.459 45.6909L185.714 45.6978C188.337 45.8306 190.421 47.9986 190.421 50.6538L190.416 50.9087C190.283 53.5308 188.115 55.6156 185.459 55.6157V54.6157C187.648 54.6156 189.421 52.8421 189.421 50.6538Z"
/>
<path
vector-effect="non-scaling-stroke"
d="M188.282 69.5171C187.398 71.6516 186.101 73.5914 184.467 75.2251C182.834 76.8586 180.895 78.1545 178.76 79.0386C176.626 79.9227 174.337 80.3774 172.027 80.3774C169.717 80.3774 167.429 79.9227 165.294 79.0386C163.16 78.1544 161.22 76.8588 159.586 75.2251C157.953 73.5914 156.657 71.6516 155.773 69.5171L156.697 69.1343C157.531 71.1475 158.753 72.9772 160.293 74.5181C161.834 76.0589 163.664 77.2809 165.677 78.1147C167.69 78.9486 169.848 79.3774 172.027 79.3774C174.206 79.3774 176.364 78.9486 178.377 78.1147C180.39 77.2809 182.22 76.0587 183.76 74.5181C185.301 72.9772 186.524 71.1475 187.358 69.1343L188.282 69.5171Z"
/>
<path
vector-effect="non-scaling-stroke"
d="M219.563 76.0891C222.457 73.1952 222.457 68.5034 219.563 65.6096C216.669 62.7158 211.977 62.7158 209.083 65.6096L177.04 97.6524C176.948 97.7447 176.896 97.8705 176.896 98.0011V108.276L187.172 108.277C187.302 108.277 187.428 108.224 187.52 108.132L219.563 76.0891ZM188.227 108.839C187.947 109.119 187.568 109.277 187.172 109.277L175.896 109.276V98.0011C175.896 97.6053 176.053 97.2252 176.333 96.9453L208.376 64.9024C211.661 61.6182 216.985 61.6182 220.27 64.9024C223.554 68.1868 223.554 73.5117 220.27 76.7962L188.227 108.839Z"
shape-rendering="crispEdges"
d="M77.6 47.4 45.5 79.5v11h11l32.76-32.76.6-.63a7.8 7.8 0 0 0-.28-10.7 7.8 7.8 0 0 0-10.73-.24c-.43.39-1.24 1.22-1.24 1.22z"
/>
</svg>
15 changes: 11 additions & 4 deletions src/frontend/src/lib/components/wizards/migration/views/CreatePasskeyMigration.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<script lang="ts">
import MigrationIllustration from "$lib/components/illustrations/MigrationIllustration.svelte";
import SmileyWritingIllustration from "$lib/components/illustrations/SmileyWritingIllustration.svelte";
import Badge from "$lib/components/ui/Badge.svelte";
import Button from "$lib/components/ui/Button.svelte";
import Input from "$lib/components/ui/Input.svelte";
import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
import { nonNullish } from "@dfinity/utils";
import { onMount } from "svelte";

interface Props {
onSubmit: (passkeyName: string) => void;
Expand All @@ -16,6 +16,11 @@
let { onSubmit, isAuthenticating, identityNumber }: Props = $props();

let passkeyName = $state<string | undefined>(undefined);
let inputElement = $state<HTMLInputElement>();

onMount(() => {
inputElement?.focus();
});

const handleSubmit = async () => {
// Button is disabled if identityNumber is null or undefined so no need to manage that case.
Expand All @@ -26,10 +31,10 @@
</script>

<form class="flex flex-1 flex-col">
<div class="mb-8 flex flex-col">
<SmileyWritingIllustration class="text-text-primary h-32" />
<div class="text-text-primary mb-8 flex flex-col items-center justify-center">
<SmileyWritingIllustration class="my-5 h-32" />
<div>
<h1 class="text-text-primary mb-3 text-2xl font-medium sm:text-center">
<h1 class="mb-3 text-2xl font-medium sm:text-center">
Name your identity
</h1>
<p
Expand All @@ -44,8 +49,10 @@
bind:value={passkeyName}
inputmode="text"
placeholder="Identity name"
hint="Pick something recognizable, like your name."
type="text"
size="md"
bind:element={inputElement}
autocomplete="off"
autocorrect="off"
spellcheck="false"
Expand Down
24 changes: 18 additions & 6 deletions src/frontend/src/lib/components/wizards/migration/views/EnterIdentityNumber.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
import Button from "$lib/components/ui/Button.svelte";
import Input from "$lib/components/ui/Input.svelte";
import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
import { SUPPORT_URL } from "$lib/config";
import { nonNullish } from "@dfinity/utils";
import { onMount } from "svelte";

interface Props {
onSubmit: (identityNumber: bigint) => void;
Expand All @@ -12,7 +14,12 @@

let { onSubmit, isAuthenticating }: Props = $props();

let identityNumber = $state<string | undefined>(undefined);
let identityNumber = $state<string>("");
let inputElement = $state<HTMLInputElement>();

onMount(() => {
inputElement?.focus();
});

const handleSubmit = async () => {
// Button is disabled if identityNumber is null or undefined so no need to manage that case.
Expand All @@ -24,7 +31,9 @@

<form class="flex flex-1 flex-col">
<div class="mb-8 flex flex-col">
<MigrationIllustration class="text-fg-primary h-32" />
<div class="text-text-primary flex h-32 items-center justify-center py-5">
<MigrationIllustration />
</div>
<div>
<h1 class="text-text-primary mb-3 text-2xl font-medium sm:text-center">
Let's get started
Expand All @@ -38,11 +47,14 @@
</div>
<div class="flex flex-col items-stretch gap-4">
<Input
bind:value={identityNumber}
bind:value={
() => identityNumber ?? "",
(value) => (identityNumber = value.replace(/\D/g, ""))
}
inputmode="numeric"
placeholder="Internet Identity number"
type="number"
size="md"
bind:element={inputElement}
autocomplete="off"
autocorrect="off"
spellcheck="false"
Expand All @@ -53,7 +65,7 @@
variant="primary"
size="lg"
type="submit"
disabled={isAuthenticating}
disabled={isAuthenticating || identityNumber.length === 0}
>
{#if isAuthenticating}
<ProgressRing />
Expand All @@ -63,7 +75,7 @@
{/if}
</Button>
<Button
href="https://identitysupport.dfinity.org/hc/en-us"
href={SUPPORT_URL}
target="_blank"
rel="noopener noreferrer"
variant="tertiary"
Expand Down
Loading