refactor: global styles

This commit is contained in:
fbwoolf
2021-12-22 17:19:02 -06:00
committed by Fara Woolf
parent 57c16a734d
commit 812799246c
40 changed files with 161 additions and 213 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -1,7 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="#7452FF"/>
<rect x="8" y="8" width="7" height="7" rx="1" fill="white"/>
<rect opacity="0.8" x="17" y="8" width="7" height="7" rx="1" fill="white"/>
<rect opacity="0.64" x="8" y="17" width="7" height="7" rx="1" fill="white"/>
<rect opacity="0.4" x="17" y="17" width="7" height="7" rx="1" fill="white"/>
</svg>

Before

Width:  |  Height:  |  Size: 447 B

View File

@@ -1,4 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="#00A3FF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.13 9.23432C21.2688 9.09025 21.4578 9.00633 21.657 9.00034C21.8114 8.99572 21.9636 9.03824 22.0937 9.12234C22.2237 9.20644 22.3255 9.32819 22.3857 9.47163C22.446 9.61507 22.4618 9.77351 22.4312 9.92618C22.4005 10.0788 22.3249 10.2186 22.2141 10.3272L10.8699 21.7646C10.7991 21.8383 10.7145 21.8971 10.621 21.9375C10.5275 21.9779 10.427 21.9991 10.3252 22C10.2235 22.0008 10.1226 21.9812 10.0285 21.9423C9.9343 21.9035 9.84877 21.8461 9.77684 21.7736C9.7049 21.701 9.64801 21.6148 9.60947 21.5199C9.57093 21.4249 9.55152 21.3232 9.55236 21.2207C9.5532 21.1181 9.57429 21.0167 9.61438 20.9224C9.65448 20.8282 9.71278 20.7429 9.7859 20.6716L21.13 9.23432ZM8.1291 14.9692C9.6529 12.0082 12.6902 10.1442 15.9988 10.1442C17.0095 10.144 17.9946 10.3182 18.9192 10.6434L17.8389 11.7327C17.2842 11.4569 16.6603 11.3013 16 11.3013C13.7003 11.3013 11.836 13.1808 11.836 15.4994C11.836 16.1651 11.9904 16.7942 12.2639 17.3534L10.6145 19.0164C9.59676 18.2327 8.74172 17.2239 8.12987 16.038C7.95695 15.7032 7.95673 15.3044 8.1291 14.9692ZM19.7361 13.6453L21.3854 11.9825C22.4031 12.7662 23.2583 13.775 23.8701 14.961C24.0431 15.2959 24.0433 15.6947 23.8709 16.0299C22.347 18.9909 19.3098 20.8545 16.0012 20.8545C14.9905 20.8547 14.0054 20.6806 13.0808 20.3553L14.161 19.2662C14.7157 19.542 15.3397 19.6976 16 19.6976C18.2997 19.6976 20.164 17.818 20.164 15.4994C20.164 14.8337 20.0097 14.2046 19.7361 13.6453ZM14.1619 13.6461C14.6694 13.1344 15.3348 12.8788 16 12.8788C16.2103 12.8788 16.4205 12.9046 16.6258 12.9557L13.4769 16.1304C13.2657 15.2686 13.4939 14.3196 14.1619 13.6461ZM15.3742 18.0431L18.5231 14.8683C18.7342 15.7301 18.5059 16.679 17.838 17.3524C17.17 18.0259 16.2289 18.2559 15.3742 18.0431Z" fill="white"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.9 KiB

View File

@@ -1,25 +0,0 @@
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd)">
<rect x="12" y="10" width="96" height="96" rx="24" fill="white"/>
</g>
<path d="M40 42.7383C40 41.0814 41.3431 39.7383 43 39.7383H53.7391C55.396 39.7383 56.7391 41.0814 56.7391 42.7383V53.4774C56.7391 55.1343 55.396 56.4774 53.7391 56.4774H43C41.3431 56.4774 40 55.1343 40 53.4774V42.7383Z" fill="#5548FF"/>
<path opacity="0.8" d="M62.7348 56.4784H77.048C78.3773 56.4784 79.2212 55.0547 78.5832 53.8885L71.4267 40.8066C70.7628 39.5931 69.0199 39.5931 68.3561 40.8066L61.1995 53.8885C60.5615 55.0547 61.4055 56.4784 62.7348 56.4784Z" fill="#5548FF"/>
<path opacity="0.64" d="M40 69.9574C40 65.1549 43.8932 61.2617 48.6957 61.2617C53.4981 61.2617 57.3913 65.1549 57.3913 69.9574C57.3913 74.7598 53.4981 78.653 48.6957 78.653C43.8932 78.653 40 74.7598 40 69.9574Z" fill="#5548FF"/>
<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M64.4534 61.7735C64.1305 61.4616 63.698 61.289 63.249 61.2929C62.8001 61.2968 62.3706 61.4769 62.0532 61.7944C61.7357 62.1118 61.5556 62.5413 61.5517 62.9902C61.5478 63.4392 61.7204 63.8717 62.0323 64.1946L67.4824 69.6447L62.0323 75.0947C61.711 75.4158 61.5304 75.8513 61.5303 76.3055C61.5302 76.5304 61.5744 76.7531 61.6604 76.9609C61.7464 77.1687 61.8725 77.3576 62.0314 77.5167C62.1904 77.6758 62.3792 77.802 62.5869 77.8881C62.7947 77.9743 63.0174 78.0186 63.2423 78.0187C63.6965 78.0189 64.1321 77.8386 64.4534 77.5175L69.9035 72.0675L75.3535 77.5175C75.6748 77.8388 76.1105 78.0193 76.5649 78.0193C77.0193 78.0193 77.455 77.8388 77.7763 77.5175C78.0976 77.1962 78.2781 76.7605 78.2781 76.3061C78.2781 75.8518 78.0976 75.416 77.7763 75.0947L72.3263 69.6447L77.7763 64.1946C77.9353 64.0355 78.0614 63.8467 78.1474 63.6389C78.2334 63.4311 78.2776 63.2084 78.2775 62.9835C78.2774 62.7586 78.233 62.5359 78.1469 62.3281C78.0608 62.1204 77.9345 61.9316 77.7755 61.7727C77.6164 61.6137 77.4275 61.4876 77.2197 61.4016C77.0119 61.3156 76.7892 61.2714 76.5643 61.2715C76.3394 61.2716 76.1167 61.3159 75.909 61.4021C75.7012 61.4882 75.5125 61.6144 75.3535 61.7735L69.9035 67.2236L64.4534 61.7735Z" fill="#5548FF"/>
<defs>
<filter id="filter0_dd" x="0" y="0" width="120" height="120" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="6"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 3.0 KiB

View File

@@ -1,22 +0,0 @@
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd)">
<rect x="12" y="10" width="96" height="96" rx="24" fill="white"/>
</g>
<path d="M59.6182 43.2097C56.5232 46.3596 55.7022 50.9559 57.1631 54.8663L42.6597 69.6268L42 76L50.2737 74.558L50.6198 70.6835L54.4268 70.3313L54.7729 66.4568L58.5799 66.1046L63.3927 61.2063C67.235 62.6932 71.7512 61.8576 74.8462 58.7078C79.0513 54.4281 79.0513 47.4894 74.8462 43.2097C70.6411 38.9301 63.8232 38.9301 59.6182 43.2097ZM67.5783 46.3798C68.7251 45.2126 70.5845 45.2126 71.7314 46.3798C72.8782 47.547 72.8782 49.4394 71.7314 50.6065C70.5845 51.7737 68.7251 51.7737 67.5783 50.6065C66.4314 49.4393 66.4314 47.5469 67.5783 46.3798Z" fill="#5548FF"/>
<defs>
<filter id="filter0_dd" x="0" y="0" width="120" height="120" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="6"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

View File

@@ -1,22 +0,0 @@
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd)">
<rect x="12" y="10" width="96" height="96" rx="24" fill="white"/>
</g>
<path d="M71.6364 52.2857H70.1818V48C70.1818 45.3478 69.1091 42.8043 67.1996 40.9289C65.2902 39.0536 62.7004 38 60 38C57.2996 38 54.7098 39.0536 52.8004 40.9289C50.8909 42.8043 49.8182 45.3478 49.8182 48V52.2857H48.3636C47.2067 52.287 46.0975 52.7389 45.2795 53.5423C44.4614 54.3458 44.0013 55.4352 44 56.5714V73.7143C44.0013 74.8505 44.4614 75.9399 45.2795 76.7434C46.0975 77.5468 47.2067 77.9988 48.3636 78H71.6364C72.7933 77.9988 73.9025 77.5468 74.7205 76.7434C75.5386 75.9399 75.9987 74.8505 76 73.7143V56.5714C75.9987 55.4352 75.5386 54.3458 74.7205 53.5423C73.9025 52.7389 72.7933 52.287 71.6364 52.2857ZM52.7273 48C52.7273 46.1056 53.4935 44.2888 54.8574 42.9492C56.2213 41.6097 58.0712 40.8571 60 40.8571C61.9288 40.8571 63.7787 41.6097 65.1426 42.9492C66.5065 44.2888 67.2727 46.1056 67.2727 48V52.2857H52.7273V48Z" fill="#5548FF"/>
<defs>
<filter id="filter0_dd" x="0" y="0" width="120" height="120" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="6"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 1.9 KiB

View File

@@ -1,23 +0,0 @@
<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd)">
<rect x="12" y="10" width="96" height="96" rx="24" fill="white"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M72.825 42.5858C73.1721 42.2256 73.6446 42.0158 74.1425 42.0009C74.5286 41.9893 74.9091 42.0956 75.2342 42.3059C75.5593 42.5161 75.8138 42.8205 75.9644 43.1791C76.1149 43.5377 76.1545 43.9338 76.0779 44.3154C76.0014 44.6971 75.8122 45.0465 75.5353 45.318L47.1747 73.9115C46.9978 74.0957 46.7863 74.2427 46.5525 74.3437C46.3188 74.4447 46.0674 74.4978 45.813 74.4999C45.5587 74.502 45.3065 74.453 45.0711 74.3559C44.8358 74.2587 44.6219 74.1152 44.4421 73.9339C44.2623 73.7526 44.12 73.537 44.0237 73.2997C43.9273 73.0624 43.8788 72.8081 43.8809 72.5517C43.883 72.2952 43.9357 72.0418 44.036 71.8061C44.1362 71.5704 44.282 71.3572 44.4647 71.1789L72.825 42.5858ZM40.3228 56.9229C44.1323 49.5205 51.7254 44.8606 59.997 44.8606C62.5238 44.86 64.9865 45.2954 67.2981 46.1085L64.5972 48.8317C63.2106 48.1423 61.6506 47.7531 60 47.7531C54.2507 47.7531 49.59 52.452 49.5901 58.2486C49.5901 59.9127 49.976 61.4856 50.6598 62.8835L46.5362 67.041C43.9919 65.0818 41.8543 62.5598 40.3247 59.5951C39.8924 58.7579 39.8918 57.7609 40.3228 56.9229ZM69.3402 53.6134L73.4635 49.4562C76.0079 51.4155 78.1457 53.9375 79.6753 56.9026C80.1076 57.7398 80.1082 58.7367 79.6772 59.5747C75.8676 66.9772 68.2745 71.6363 60.003 71.6363C57.4762 71.6369 55.0136 71.2014 52.7019 70.3883L55.4025 67.6656C56.7892 68.3551 58.3493 68.7441 60 68.7441C65.7493 68.7441 70.41 64.0451 70.41 58.2486C70.41 56.5843 70.0241 55.0115 69.3402 53.6134ZM55.4047 53.6152C56.6736 52.3361 58.337 51.6971 60 51.6971C60.5258 51.6971 61.0513 51.7614 61.5646 51.8891L53.6923 59.8261C53.1643 57.6714 53.7347 55.2991 55.4047 53.6152ZM58.4354 64.6078L66.3077 56.6708C66.8355 58.8254 66.2648 61.1974 64.5949 62.8809C62.925 64.5647 60.5723 65.1399 58.4354 64.6078Z" fill="#5548FF"/>
<path d="M74.1201 41.2512L74.12 41.2512C73.4273 41.272 72.771 41.5632 72.289 42.0612L43.9363 70.6468C43.6845 70.8936 43.4839 71.1879 43.3458 71.5126C43.2069 71.8393 43.1339 72.1904 43.131 72.5455C43.128 72.9006 43.1952 73.2528 43.3288 73.5818C43.4624 73.9108 43.6597 74.2101 43.9096 74.462L43.9096 74.462C44.1595 74.714 44.457 74.9137 44.785 75.0491C45.1129 75.1845 45.4645 75.2528 45.8192 75.2499C46.1739 75.247 46.5244 75.1729 46.8501 75.0322C47.1737 74.8923 47.4662 74.6895 47.7111 74.4357L76.0644 45.8495C76.447 45.4729 76.7077 44.9897 76.8133 44.463C76.9194 43.9344 76.8646 43.3857 76.6559 42.8887C76.4472 42.3916 76.094 41.9687 75.6415 41.6761C75.189 41.3834 74.6586 41.2351 74.1201 41.2512Z" fill="#5548FF" stroke="white" stroke-width="1.5"/>
<defs>
<filter id="filter0_dd" x="0" y="0" width="120" height="120" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="6"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
</filter>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 3.6 KiB

View File

@@ -1,5 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="#3700FF"/>
<path d="M20.3636 13.3571H19.8182V11.75C19.8182 10.7554 19.4159 9.80161 18.6999 9.09835C17.9838 8.39509 17.0126 8 16 8C14.9874 8 14.0162 8.39509 13.3001 9.09835C12.5841 9.80161 12.1818 10.7554 12.1818 11.75V13.3571H11.6364C11.2025 13.3576 10.7866 13.5271 10.4798 13.8284C10.173 14.1297 10.0005 14.5382 10 14.9643V21.3929C10.0005 21.819 10.173 22.2275 10.4798 22.5288C10.7866 22.8301 11.2025 22.9995 11.6364 23H20.3636C20.7975 22.9995 21.2134 22.8301 21.5202 22.5288C21.827 22.2275 21.9995 21.819 22 21.3929V14.9643C21.9995 14.5382 21.827 14.1297 21.5202 13.8284C21.2134 13.5271 20.7975 13.3576 20.3636 13.3571ZM13.2727 11.75C13.2727 11.0396 13.5601 10.3583 14.0715 9.85596C14.583 9.35363 15.2767 9.07143 16 9.07143C16.7233 9.07143 17.417 9.35363 17.9285 9.85596C18.4399 10.3583 18.7273 11.0396 18.7273 11.75V13.3571H13.2727V11.75ZM16.5455 18.2974V19.5179C16.5455 19.6599 16.488 19.7962 16.3857 19.8967C16.2834 19.9971 16.1447 20.0536 16 20.0536C15.8553 20.0536 15.7166 19.9971 15.6143 19.8967C15.512 19.7962 15.4545 19.6599 15.4545 19.5179V18.2974C15.2466 18.1795 15.084 17.9975 14.9921 17.7796C14.9002 17.5617 14.8841 17.3201 14.9463 17.0922C15.0084 16.8644 15.1454 16.6631 15.3359 16.5195C15.5264 16.3759 15.7599 16.2981 16 16.2981C16.2401 16.2981 16.4736 16.3759 16.6641 16.5195C16.8546 16.6631 16.9916 16.8644 17.0537 17.0922C17.1159 17.3201 17.0998 17.5617 17.0079 17.7796C16.916 17.9975 16.7534 18.1795 16.5455 18.2974Z" fill="white"/>
<rect x="14" y="15" width="4" height="7" fill="white"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

View File

@@ -1,7 +0,0 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="32" height="32" rx="8" fill="#AAB3FF"/>
<rect x="8" y="8" width="7" height="7" rx="1" fill="white"/>
<rect x="8" y="17" width="7" height="7" rx="3.5" fill="white"/>
<path d="M17.7232 15H22.2768C23.0446 15 23.526 14.1705 23.145 13.5039L20.4341 8.75974C20.2422 8.42384 19.7578 8.42384 19.5659 8.75974L16.8549 13.5039C16.474 14.1705 16.9553 15 17.7232 15Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5284 17.3284C21.9614 16.8905 22.6633 16.8905 23.0963 17.3284C23.5292 17.7663 23.5292 18.4763 23.0963 18.9142L21.568 20.46L23.1754 22.0858C23.6084 22.5237 23.6084 23.2337 23.1754 23.6716C22.7425 24.1095 22.0405 24.1095 21.6076 23.6716L20.0001 22.0458L18.3926 23.6716C17.9597 24.1095 17.2577 24.1095 16.8247 23.6716C16.3918 23.2337 16.3918 22.5237 16.8247 22.0858L18.4322 20.46L16.9039 18.9142C16.4709 18.4763 16.4709 17.7663 16.9039 17.3284C17.3368 16.8905 18.0388 16.8905 18.4718 17.3284L20.0001 18.8742L21.5284 17.3284Z" fill="white"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -1,5 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" rx="12" fill="#E3E5FF"/>
<path d="M15.2727 10.0179H14.8636V8.8125C14.8636 8.06658 14.5619 7.35121 14.0249 6.82376C13.4879 6.29632 12.7595 6 12 6C11.2405 6 10.5121 6.29632 9.9751 6.82376C9.43807 7.35121 9.13636 8.06658 9.13636 8.8125V10.0179H8.72727C8.40189 10.0182 8.08994 10.1453 7.85985 10.3713C7.62977 10.5973 7.50036 10.9036 7.5 11.2232V16.0446C7.50036 16.3642 7.62977 16.6706 7.85985 16.8966C8.08994 17.1225 8.40189 17.2497 8.72727 17.25H15.2727C15.5981 17.2497 15.9101 17.1225 16.1401 16.8966C16.3702 16.6706 16.4996 16.3642 16.5 16.0446V11.2232C16.4996 10.9036 16.3702 10.5973 16.1401 10.3713C15.9101 10.1453 15.5981 10.0182 15.2727 10.0179ZM9.95455 8.8125C9.95455 8.2797 10.17 7.76872 10.5536 7.39197C10.9372 7.01523 11.4575 6.80357 12 6.80357C12.5425 6.80357 13.0628 7.01523 13.4464 7.39197C13.83 7.76872 14.0455 8.2797 14.0455 8.8125V10.0179H9.95455V8.8125ZM12.4091 13.7231V14.6384C12.4091 14.745 12.366 14.8471 12.2893 14.9225C12.2126 14.9978 12.1085 15.0402 12 15.0402C11.8915 15.0402 11.7874 14.9978 11.7107 14.9225C11.634 14.8471 11.5909 14.745 11.5909 14.6384V13.7231C11.4349 13.6346 11.313 13.4981 11.2441 13.3347C11.1752 13.1712 11.1631 12.99 11.2097 12.8192C11.2563 12.6483 11.359 12.4973 11.5019 12.3896C11.6448 12.282 11.8199 12.2236 12 12.2236C12.1801 12.2236 12.3552 12.282 12.4981 12.3896C12.641 12.4973 12.7437 12.6483 12.7903 12.8192C12.8369 12.99 12.8248 13.1712 12.7559 13.3347C12.687 13.4981 12.5651 13.6346 12.4091 13.7231Z" fill="#3700FF"/>
<rect x="10.5" y="11.25" width="3" height="5.25" fill="#3700FF"/>
</svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 53 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 53 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 242 KiB

View File

Before

Width:  |  Height:  |  Size: 905 KiB

After

Width:  |  Height:  |  Size: 905 KiB

View File

Before

Width:  |  Height:  |  Size: 905 KiB

After

Width:  |  Height:  |  Size: 905 KiB

View File

@@ -270,8 +270,12 @@ export function isEmpty(value: Object) {
return Object.keys(value).length === 0;
}
type ViewMode = 'full' | 'popup';
type ViewMode = 'full' | 'popup' | 'popup-center';
export function getViewMode(): ViewMode {
return document.location.pathname.startsWith('/index.html') ? 'full' : 'popup';
return document.location.pathname.startsWith('/index.html')
? 'full'
: document.location.pathname.startsWith('/popup.html')
? 'popup'
: 'popup-center';
}

View File

@@ -17,29 +17,6 @@ export const fullPageStyles = css`
.temp {
max-width: 440px;
}
.welcome-page {
.content-image {
order: 2;
height: calc(100vh - 102px);
.image-small {
display: none;
}
}
.content-text {
order: 1;
margin-left: 168px;
.title {
max-width: 500px;
font-size: 64px;
margin-bottom: 24px;
}
.text {
max-width: 440px;
font-size: 16px;
margin-bottom: 24px;
}
}
}
.onboarding-text {
text-align: center;
}

View File

@@ -1,6 +1,6 @@
import { memo } from 'react';
import { CSSReset } from '@stacks/ui';
import { Global, css } from '@emotion/react';
import { CSSReset } from '@stacks/ui';
import { extensionStyles } from './popup-styles';
import { fullPageStyles } from './full-page-styles';

View File

@@ -9,21 +9,5 @@ export const popupCenterStyles = css`
min-width: 440px !important;
overflow-x: hidden;
}
.welcome-page {
.content-image .image-large {
display: none;
}
.content-text {
.title {
width: 264px;
font-size: 32px;
line-height: 44px;
margin-top: 24px;
}
.text {
margin-bottom: 16px;
}
}
}
}
`;

View File

@@ -1,7 +1,7 @@
import { css } from '@emotion/react';
export const extensionStyles = css`
.mode__extension {
.mode__popup {
&,
body {
min-height: 600px !important;
@@ -12,21 +12,5 @@ export const extensionStyles = css`
max-width: 392px;
}
}
.welcome-page {
.content-image .image-large {
display: none;
}
.content-text {
.title {
width: 264px;
font-size: 32px;
line-height: 44px;
margin-top: 24px;
}
.text {
margin-bottom: 16px;
}
}
}
}
`;

View File

@@ -0,0 +1,46 @@
import { Button, Stack } from '@stacks/ui';
import { Text, Title } from '@app/components/typography';
import { Link } from '@app/components/link';
import { getViewMode } from '@app/common/utils';
interface BackUpSecretKeyLayoutProps {}
export function BackUpSecretKeyLayout(props: BackUpSecretKeyLayoutProps): JSX.Element {
const mode = getViewMode();
return (
<>Placeholder</>
// <Stack className="welcome-page" isInline={mode === 'full'} width="100%">
// <Stack className="content-image" flexGrow={1}>
// <img src={ExploreStacksLarge} className="image-large" />
// <img src={ExploreStacksSmall} className="image-small" />
// </Stack>
// <Stack className="content-text" flexGrow={1} justifyContent="center">
// <Stack width="100%" textAlign="left" alignItems="start">
// <Title className="title" fontWeight={500}>
// Explore the world of Stacks
// </Title>
// <Text className="text">
// Hiro Wallet connects you to Stacks apps while keeping your account, data, and crypto
// secure. Create your Stacks account to get started.
// </Text>
// </Stack>
// <Stack spacing="loose" textAlign="left" {...props}>
// <Button
// borderRadius="10px"
// data-testid={InitialPageSelectors.SignUp}
// height="48px"
// isLoading={isGeneratingWallet}
// onClick={onStartOnboarding}
// width="198px"
// >
// Create Stacks Account
// </Button>
// <Link data-testid={InitialPageSelectors.SignIn} fontSize="14px" onClick={onRestoreWallet}>
// I already have an account
// </Link>
// </Stack>
// </Stack>
// </Stack>
);
}

View File

@@ -0,0 +1,7 @@
import { memo } from 'react';
import { BackUpSecretKeyLayout } from './back-up-secret-key.layout';
export const BackUpSecretKeyPage = memo(() => {
return <BackUpSecretKeyLayout />;
});

View File

@@ -1,12 +1,19 @@
import { css, cx } from '@emotion/css';
import { Button, Stack } from '@stacks/ui';
import { Text, Title } from '@app/components/typography';
import { Link } from '@app/components/link';
import ExploreStacksLarge from '@assets/images/explore-stacks-lg.svg';
import ExploreStacksSmall from '@assets/images/explore-stacks-sm.svg';
import WelcomeStacksFull from '@assets/images/onboarding/welcome-full.svg';
import WelcomeStacksPopup from '@assets/images/onboarding/welcome-popup.svg';
import { InitialPageSelectors } from '@tests/integration/initial-page.selectors';
import { getViewMode } from '@app/common/utils';
import {
fullPageContentImage,
fullPageContentText,
fullPageTitle,
popupTitle,
} from './welcome.styles';
interface WelcomeLayoutProps {
isGeneratingWallet: boolean;
onStartOnboarding(): void;
@@ -15,16 +22,24 @@ interface WelcomeLayoutProps {
export function WelcomeLayout(props: WelcomeLayoutProps): JSX.Element {
const { isGeneratingWallet, onStartOnboarding, onRestoreWallet } = props;
const mode = getViewMode();
const isFullPage = mode === 'full';
const isPopup = mode === 'popup';
return (
<Stack className="welcome-page" isInline={mode === 'full'} width="100%">
<Stack className="content-image" flexGrow={1}>
<img src={ExploreStacksLarge} className="image-large" />
<img src={ExploreStacksSmall} className="image-small" />
<Stack isInline={isFullPage} width="100%">
<Stack className={cx({ [fullPageContentImage]: isFullPage })} flexGrow={1}>
{isFullPage ? <img src={WelcomeStacksFull} /> : <img src={WelcomeStacksPopup} />}
</Stack>
<Stack className="content-text" flexGrow={1} justifyContent="center">
<Stack
className={cx({ [fullPageContentText]: isFullPage })}
flexGrow={1}
justifyContent="center"
>
<Stack width="100%" textAlign="left" alignItems="start">
<Title className="title" fontWeight={500}>
<Title
className={cx({ [fullPageTitle]: isFullPage }, { [popupTitle]: isPopup })}
fontWeight={500}
>
Explore the world of Stacks
</Title>
<Text className="text">

View File

@@ -0,0 +1,45 @@
import { css } from '@emotion/css';
export const fullPageContentImage = css`
order: 2;
height: calc(100vh - 102px);
`;
export const fullPageContentText = css`
order: 1;
margin-left: 168px;
`;
export const fullPageTitle = css`
max-width: 500px;
font-size: 64px;
margin-bottom: 24px;
`;
export const fullPageText = css`
max-width: 440px;
font-size: 16px;
margin-bottom: 24px;
`;
export const popupTitle = css`
width: 264px;
font-size: 32px;
line-height: 44px;
margin-top: 24px;
`;
export const popupText = css`
margin-bottom: 16px;
`;
export const popupCenterTitle = css`
width: 264px;
font-size: 32px;
line-height: 44px;
margin-top: 24px;
`;
export const popupCenterText = css`
margin-bottom: 16px;
`;

View File

@@ -31,7 +31,7 @@ export const WelcomePage = memo(() => {
if (decodedAuthRequest) {
navigate(RouteUrls.SetPassword);
}
navigate(RouteUrls.SaveSecretKey);
navigate(RouteUrls.BackUpSecretKey);
}, [makeWallet, analytics, decodedAuthRequest, navigate]);
useEffect(() => {

View File

@@ -22,8 +22,9 @@ import { Home } from '@app/pages/home/home';
import { SignOutConfirmDrawer } from '@app/pages/sign-out-confirm/sign-out-confirm';
import { AllowDiagnosticsPage } from '@app/pages/allow-diagnostics/allow-diagnostics';
import { BuyPage } from '@app/pages/buy/buy';
import { RouteUrls } from '@shared/route-urls';
import { WelcomePage } from '@app/pages/onboarding/welcome/welcome';
import { BackUpSecretKeyPage } from '@app/pages/onboarding/back-up-secret-key/back-up-secret-key';
import { RouteUrls } from '@shared/route-urls';
export function AppRoutes(): JSX.Element | null {
const { hasRehydratedVault } = useWallet();
@@ -59,6 +60,7 @@ export function AppRoutes(): JSX.Element | null {
<Route path={RouteUrls.SignOutConfirm} element={<SignOutConfirmDrawer />} />
</Route>
<Route path={RouteUrls.Onboarding} element={<WelcomePage />} />
<Route path={RouteUrls.BackUpSecretKey} element={<BackUpSecretKeyPage />} />
<Route path={RouteUrls.RequestDiagnostics} element={<AllowDiagnosticsPage />} />
<Route path={RouteUrls.SaveSecretKey} element={<SaveSecretKey />} />
<Route path={RouteUrls.SetPassword} element={<SetPasswordPage />} />

View File

@@ -10,6 +10,7 @@ export enum RouteUrls {
// Active wallet routes
Home = '/',
AddNetwork = '/add-network',
BackUpSecretKey = '/back-up-secret-key',
Buy = '/buy',
ChooseAccount = '/choose-account',
Receive = '/receive',

Binary file not shown.

Before

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

View File

@@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M84.8744224,53.677315 C79.0467901,53.677315 74.3224596,49.05577 74.3224596,43.354619 C74.3224596,37.6537154 79.0467901,33.0321704 84.8744224,33.0321704 C90.7020548,33.0321704 95.4263852,37.6537154 95.4263852,43.354619 C95.4263852,49.05577 90.7020548,53.677315 84.8744224,53.677315 M84.8744224,94.9676042 C79.0467901,94.9676042 74.3224596,90.3460592 74.3224596,84.6449082 C74.3224596,78.9440046 79.0467901,74.3224596 84.8744224,74.3224596 C90.7020548,74.3224596 95.4263852,78.9440046 95.4263852,84.6449082 C95.4263852,90.3460592 90.7020548,94.9676042 84.8744224,94.9676042 M43.1254783,53.677315 C37.2975242,53.677315 32.5733894,49.05577 32.5733894,43.354619 C32.5733894,37.6537154 37.2975242,33.0321704 43.1254783,33.0321704 C48.9531802,33.0321704 53.677315,37.6537154 53.677315,43.354619 C53.677315,49.05577 48.9531802,53.677315 43.1254783,53.677315 M43.1254783,94.9676042 C37.2975242,94.9676042 32.5733894,90.3460592 32.5733894,84.6449082 C32.5733894,78.9440046 37.2975242,74.3224596 43.1254783,74.3224596 C48.9531802,74.3224596 53.677315,78.9440046 53.677315,84.6449082 C53.677315,90.3460592 48.9531802,94.9676042 43.1254783,94.9676042 M127.999836,87.633099 L127.999836,40.3874255 C127.999836,40.3874255 128.024284,27.3826966 126.618286,21.3889563 C125.211788,15.395716 122.512543,11.4637224 119.543797,8.4954772 C116.588302,5.54023199 112.556309,2.87348631 106.773068,1.42123866 C100.990077,-0.0310089887 87.646849,-6.10085093e-05 87.646849,-6.10085093e-05 L40.3936756,0.0204909279 C40.3936756,0.0204909279 27.3869466,-0.00425903205 21.3924563,1.40198869 C15.397966,2.80798641 11.4654724,5.50698204 8.49672721,8.47497723 C5.54098199,11.4302224 2.87398631,15.4614659 1.42148866,21.2437066 C-0.0310089858,27.0261972 -6.09884668e-05,40.3669256 -6.09884668e-05,40.3669256 L-6.09884668e-05,87.612599 C-6.09884668e-05,87.612599 -0.024758996,100.617328 1.38148873,106.610818 C2.78798645,112.604059 5.48723208,116.536302 8.45572727,119.504547 C11.4112225,122.459543 15.443466,125.126288 21.2267066,126.578786 C27.0096972,128.030784 40.3529256,127.999836 40.3529256,127.999836 L87.6060991,127.979284 C87.6060991,127.979284 100.612828,128.004284 106.607318,126.598036 C112.601559,125.192038 116.534552,122.493043 119.503047,119.525047 C122.458543,116.570052 125.125788,112.538559 126.578036,106.756318 C128.030784,100.973827 127.999836,87.633099 127.999836,87.633099" id="logo-128" fill="#270F34"></path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

View File

@@ -1,9 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>logo-128@1x</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M84.8744224,53.677315 C79.0467901,53.677315 74.3224596,49.05577 74.3224596,43.354619 C74.3224596,37.6537154 79.0467901,33.0321704 84.8744224,33.0321704 C90.7020548,33.0321704 95.4263852,37.6537154 95.4263852,43.354619 C95.4263852,49.05577 90.7020548,53.677315 84.8744224,53.677315 M84.8744224,94.9676042 C79.0467901,94.9676042 74.3224596,90.3460592 74.3224596,84.6449082 C74.3224596,78.9440046 79.0467901,74.3224596 84.8744224,74.3224596 C90.7020548,74.3224596 95.4263852,78.9440046 95.4263852,84.6449082 C95.4263852,90.3460592 90.7020548,94.9676042 84.8744224,94.9676042 M43.1254783,53.677315 C37.2975242,53.677315 32.5733894,49.05577 32.5733894,43.354619 C32.5733894,37.6537154 37.2975242,33.0321704 43.1254783,33.0321704 C48.9531802,33.0321704 53.677315,37.6537154 53.677315,43.354619 C53.677315,49.05577 48.9531802,53.677315 43.1254783,53.677315 M43.1254783,94.9676042 C37.2975242,94.9676042 32.5733894,90.3460592 32.5733894,84.6449082 C32.5733894,78.9440046 37.2975242,74.3224596 43.1254783,74.3224596 C48.9531802,74.3224596 53.677315,78.9440046 53.677315,84.6449082 C53.677315,90.3460592 48.9531802,94.9676042 43.1254783,94.9676042 M127.999836,87.633099 L127.999836,40.3874255 C127.999836,40.3874255 128.024284,27.3826966 126.618286,21.3889563 C125.211788,15.395716 122.512543,11.4637224 119.543797,8.4954772 C116.588302,5.54023199 112.556309,2.87348631 106.773068,1.42123866 C100.990077,-0.0310089887 87.646849,-6.10085093e-05 87.646849,-6.10085093e-05 L40.3936756,0.0204909279 C40.3936756,0.0204909279 27.3869466,-0.00425903205 21.3924563,1.40198869 C15.397966,2.80798641 11.4654724,5.50698204 8.49672721,8.47497723 C5.54098199,11.4302224 2.87398631,15.4614659 1.42148866,21.2437066 C-0.0310089858,27.0261972 -6.09884668e-05,40.3669256 -6.09884668e-05,40.3669256 L-6.09884668e-05,87.612599 C-6.09884668e-05,87.612599 -0.024758996,100.617328 1.38148873,106.610818 C2.78798645,112.604059 5.48723208,116.536302 8.45572727,119.504547 C11.4112225,122.459543 15.443466,125.126288 21.2267066,126.578786 C27.0096972,128.030784 40.3529256,127.999836 40.3529256,127.999836 L87.6060991,127.979284 C87.6060991,127.979284 100.612828,128.004284 106.607318,126.598036 C112.601559,125.192038 116.534552,122.493043 119.503047,119.525047 C122.458543,116.570052 125.125788,112.538559 126.578036,106.756318 C128.030784,100.973827 127.999836,87.633099 127.999836,87.633099" id="logo-128" fill="#270F34"></path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 895 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 441 B

View File

@@ -1,9 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
<title>logo-16@1x</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M10.6093169,6.70967846 C9.88086285,6.70967846 9.29032154,6.13198534 9.29032154,5.41934146 C9.29032154,4.70672852 9.88086285,4.12903539 10.6093169,4.12903539 C11.3377709,4.12903539 11.9283122,4.70672852 11.9283122,5.41934146 C11.9283122,6.13198534 11.3377709,6.70967846 10.6093169,6.70967846 M10.6093169,11.8709646 C9.88086285,11.8709646 9.29032154,11.2932715 9.29032154,10.5806276 C9.29032154,9.86801467 9.88086285,9.29032154 10.6093169,9.29032154 C11.3377709,9.29032154 11.9283122,9.86801467 11.9283122,10.5806276 C11.9283122,11.2932715 11.3377709,11.8709646 10.6093169,11.8709646 M5.39069887,6.70967846 C4.66220461,6.70967846 4.07168776,6.13198534 4.07168776,5.41934146 C4.07168776,4.70672852 4.66220461,4.12903539 5.39069887,4.12903539 C6.11916161,4.12903539 6.70967846,4.70672852 6.70967846,5.41934146 C6.70967846,6.13198534 6.11916161,6.70967846 5.39069887,6.70967846 M5.39069887,11.8709646 C4.66220461,11.8709646 4.07168776,11.2932715 4.07168776,10.5806276 C4.07168776,9.86801467 4.66220461,9.29032154 5.39069887,9.29032154 C6.11916161,9.29032154 6.70967846,9.86801467 6.70967846,10.5806276 C6.70967846,11.2932715 6.11916161,11.8709646 5.39069887,11.8709646 M15.9999935,10.9541515 L15.9999935,5.04844228 C15.9999935,5.04844228 16.0030495,3.42285117 15.8272998,2.67363363 C15.6514876,1.92447859 15.3140819,1.43297939 14.9429888,1.06194874 C14.5735519,0.692543089 14.0695527,0.359199879 13.3466476,0.177668923 C12.6237738,-0.00386203306 10.9558702,6.46446816e-06 10.9558702,6.46446816e-06 L5.04922353,0.00257545651 C5.04922353,0.00257545651 3.42338241,-0.000518288474 2.67407113,0.175262677 C1.92475984,0.351012392 1.43319814,0.688386846 1.06210499,1.05938624 C0.692636835,1.4287919 0.359262375,1.93269733 0.177700169,2.65547741 C-0.00386203733,3.37828874 6.46234445e-06,5.04587979 6.46234445e-06,5.04587979 L6.46234445e-06,10.951589 C6.46234445e-06,10.951589 -0.00308078859,12.5771801 0.172700177,13.3263664 C0.348512392,14.0755214 0.685918096,14.5670519 1.05697999,14.9380825 C1.4264169,15.3074569 1.93044733,15.6408001 2.65335241,15.8223623 C3.37622624,16.003862 5.04412979,15.9999935 5.04412979,15.9999935 L10.9507765,15.9974245 C10.9507765,15.9974245 12.5766176,16.0005495 13.3259289,15.8247686 C14.0752089,15.6490189 14.5668331,15.3116444 14.937895,14.940645 C15.3073319,14.5712706 15.6407376,14.0673339 15.8222686,13.3445538 C16.003862,12.6217425 15.9999935,10.9541515 15.9999935,10.9541515" id="logo-16" fill="#270F34"></path>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 KiB