0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00

style(console): adjust welcome page style (#1493)

* style(console): adjust welcome page style

adjust welcome page style

* style(console): img update

img update

* style(console): address cr

address cr
This commit is contained in:
simeng-li 2022-07-08 22:10:12 +08:00 committed by GitHub
parent 6e956cd66a
commit 30314cc628
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 400 additions and 370 deletions

View file

@ -1,5 +0,0 @@
<svg width="273" height="221" viewBox="0 0 273 221" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M128.015 34.1615L127.625 34.4745L128.167 35.1498L128.481 34.3426L128.015 34.1615ZM158.176 -43.447L157.71 -43.6281L158.176 -43.447ZM163.353 -45.7264L163.172 -45.2604L163.353 -45.7264ZM205.675 -29.2791L205.856 -29.7452L205.675 -29.2791ZM207.954 -24.1019L207.488 -24.283L207.954 -24.1019ZM177.793 53.5061L177.327 53.325L177.014 54.1322L177.87 54.0003L177.793 53.5061ZM260.083 40.822L260.007 40.3279L260.083 40.822ZM264.646 44.166L264.152 44.2421L264.646 44.166ZM271.563 89.0412L271.069 89.1174L271.563 89.0412ZM268.219 93.6039L268.295 94.0981L268.219 93.6039ZM185.929 106.288L185.852 105.794L184.996 105.926L185.539 106.601L185.929 106.288ZM144.286 139.725L144.676 139.412L144.134 138.737L143.82 139.544L144.286 139.725ZM114.126 217.333L114.592 217.514L114.126 217.333ZM108.949 219.612L109.13 219.146L108.949 219.612ZM66.627 203.165L66.8081 202.699L66.8081 202.699L66.627 203.165ZM64.3476 197.988L64.8137 198.169L64.8137 198.169L64.3476 197.988ZM94.5083 120.379L94.9743 120.561L95.288 119.753L94.4321 119.885L94.5083 120.379ZM12.2164 133.064L12.1403 132.57L12.1403 132.57L12.2164 133.064ZM7.65377 129.72L8.14794 129.644L8.14794 129.644L7.65377 129.72ZM0.736758 84.8447L1.23092 84.7685L0.736758 84.8447ZM4.08071 80.282L4.00454 79.7878L4.08071 80.282ZM86.3719 67.5977L86.4481 68.0919L87.304 67.9599L86.7618 67.2847L86.3719 67.5977ZM34.5426 -3.34017C32.6047 -1.78415 32.2951 1.04822 33.8512 2.98611L34.6309 2.36002C33.4207 0.852772 33.6614 -1.35018 35.1687 -2.56042L34.5426 -3.34017ZM69.9472 -31.7681L34.5426 -3.34017L35.1687 -2.56042L70.5733 -30.9884L69.9472 -31.7681ZM76.2735 -31.0767C74.7175 -33.0146 71.8851 -33.3241 69.9472 -31.7681L70.5733 -30.9884C72.0805 -32.1986 74.2835 -31.9578 75.4937 -30.4506L76.2735 -31.0767ZM128.405 33.8484L76.2735 -31.0767L75.4937 -30.4506L127.625 34.4745L128.405 33.8484ZM157.71 -43.6281L127.549 33.9804L128.481 34.3426L158.642 -43.2659L157.71 -43.6281ZM163.534 -46.1925C161.218 -47.0927 158.61 -45.9447 157.71 -43.6281L158.642 -43.2659C159.342 -45.0676 161.37 -45.9606 163.172 -45.2604L163.534 -46.1925ZM205.856 -29.7452L163.534 -46.1925L163.172 -45.2604L205.493 -28.8131L205.856 -29.7452ZM208.42 -23.9208C209.32 -26.2373 208.172 -28.8449 205.856 -29.7452L205.493 -28.8131C207.295 -28.1129 208.188 -26.0847 207.488 -24.283L208.42 -23.9208ZM178.259 53.6872L208.42 -23.9208L207.488 -24.283L177.327 53.325L178.259 53.6872ZM260.007 40.3279L177.717 53.0119L177.87 54.0003L260.16 41.3162L260.007 40.3279ZM265.14 44.0898C264.762 41.6335 262.464 39.9493 260.007 40.3279L260.16 41.3162C262.07 41.0217 263.857 42.3317 264.152 44.2421L265.14 44.0898ZM272.057 88.965L265.14 44.0898L264.152 44.2421L271.069 89.1174L272.057 88.965ZM268.295 94.0981C270.752 93.7194 272.436 91.4213 272.057 88.965L271.069 89.1174C271.363 91.0278 270.053 92.8152 268.143 93.1097L268.295 94.0981ZM186.005 106.782L268.295 94.0981L268.143 93.1097L185.852 105.794L186.005 106.782ZM238.448 170.898L186.318 105.975L185.539 106.601L237.668 171.524L238.448 170.898ZM237.757 177.224C239.695 175.668 240.004 172.836 238.448 170.898L237.668 171.524C238.879 173.032 238.638 175.234 237.131 176.445L237.757 177.224ZM202.352 205.652L237.757 177.224L237.131 176.445L201.726 204.873L202.352 205.652ZM196.026 204.961C197.582 206.899 200.414 207.208 202.352 205.652L201.726 204.873C200.219 206.083 198.016 205.842 196.806 204.335L196.026 204.961ZM143.896 140.038L196.026 204.961L196.806 204.335L144.676 139.412L143.896 140.038ZM114.592 217.514L144.752 139.906L143.82 139.544L113.66 217.152L114.592 217.514ZM108.768 220.078C111.084 220.979 113.692 219.831 114.592 217.514L113.66 217.152C112.96 218.954 110.931 219.846 109.13 219.146L108.768 220.078ZM66.4459 203.631L108.768 220.078L109.13 219.146L66.8081 202.699L66.4459 203.631ZM63.8816 197.807C62.9813 200.123 64.1294 202.731 66.4459 203.631L66.8081 202.699C65.0064 201.999 64.1135 199.971 64.8137 198.169L63.8816 197.807ZM94.0422 120.198L63.8816 197.807L64.8137 198.169L94.9743 120.561L94.0422 120.198ZM12.2926 133.558L94.5844 120.874L94.4321 119.885L12.1403 132.57L12.2926 133.558ZM7.15961 129.796C7.53822 132.252 9.83633 133.937 12.2926 133.558L12.1403 132.57C10.2298 132.864 8.44241 131.554 8.14794 129.644L7.15961 129.796ZM0.242595 84.9208L7.15961 129.796L8.14794 129.644L1.23092 84.7685L0.242595 84.9208ZM4.00454 79.7878C1.54827 80.1664 -0.136013 82.4646 0.242595 84.9208L1.23092 84.7685C0.936451 82.8581 2.24645 81.0706 4.15688 80.7761L4.00454 79.7878ZM86.2958 67.1035L4.00454 79.7878L4.15688 80.7761L86.4481 68.0919L86.2958 67.1035ZM33.8512 2.98611L85.9821 67.9108L86.7618 67.2847L34.6309 2.36002L33.8512 2.98611Z" fill="#191C1D"/>
<path d="M128.015 34.1615L127.625 34.4745L128.167 35.1498L128.481 34.3426L128.015 34.1615ZM158.176 -43.447L157.71 -43.6281L158.176 -43.447ZM163.353 -45.7264L163.172 -45.2604L163.353 -45.7264ZM205.675 -29.2791L205.856 -29.7452L205.675 -29.2791ZM207.954 -24.1019L207.488 -24.283L207.954 -24.1019ZM177.793 53.5061L177.327 53.325L177.014 54.1322L177.87 54.0003L177.793 53.5061ZM260.083 40.822L260.007 40.3279L260.083 40.822ZM264.646 44.166L264.152 44.2421L264.646 44.166ZM271.563 89.0412L271.069 89.1174L271.563 89.0412ZM268.219 93.6039L268.295 94.0981L268.219 93.6039ZM185.929 106.288L185.852 105.794L184.996 105.926L185.539 106.601L185.929 106.288ZM144.286 139.725L144.676 139.412L144.134 138.737L143.82 139.544L144.286 139.725ZM114.126 217.333L114.592 217.514L114.126 217.333ZM108.949 219.612L109.13 219.146L108.949 219.612ZM66.627 203.165L66.8081 202.699L66.8081 202.699L66.627 203.165ZM64.3476 197.988L64.8137 198.169L64.8137 198.169L64.3476 197.988ZM94.5083 120.379L94.9743 120.561L95.288 119.753L94.4321 119.885L94.5083 120.379ZM12.2164 133.064L12.1403 132.57L12.1403 132.57L12.2164 133.064ZM7.65377 129.72L8.14794 129.644L8.14794 129.644L7.65377 129.72ZM0.736758 84.8447L1.23092 84.7685L0.736758 84.8447ZM4.08071 80.282L4.00454 79.7878L4.08071 80.282ZM86.3719 67.5977L86.4481 68.0919L87.304 67.9599L86.7618 67.2847L86.3719 67.5977ZM34.5426 -3.34017C32.6047 -1.78415 32.2951 1.04822 33.8512 2.98611L34.6309 2.36002C33.4207 0.852772 33.6614 -1.35018 35.1687 -2.56042L34.5426 -3.34017ZM69.9472 -31.7681L34.5426 -3.34017L35.1687 -2.56042L70.5733 -30.9884L69.9472 -31.7681ZM76.2735 -31.0767C74.7175 -33.0146 71.8851 -33.3241 69.9472 -31.7681L70.5733 -30.9884C72.0805 -32.1986 74.2835 -31.9578 75.4937 -30.4506L76.2735 -31.0767ZM128.405 33.8484L76.2735 -31.0767L75.4937 -30.4506L127.625 34.4745L128.405 33.8484ZM157.71 -43.6281L127.549 33.9804L128.481 34.3426L158.642 -43.2659L157.71 -43.6281ZM163.534 -46.1925C161.218 -47.0927 158.61 -45.9447 157.71 -43.6281L158.642 -43.2659C159.342 -45.0676 161.37 -45.9606 163.172 -45.2604L163.534 -46.1925ZM205.856 -29.7452L163.534 -46.1925L163.172 -45.2604L205.493 -28.8131L205.856 -29.7452ZM208.42 -23.9208C209.32 -26.2373 208.172 -28.8449 205.856 -29.7452L205.493 -28.8131C207.295 -28.1129 208.188 -26.0847 207.488 -24.283L208.42 -23.9208ZM178.259 53.6872L208.42 -23.9208L207.488 -24.283L177.327 53.325L178.259 53.6872ZM260.007 40.3279L177.717 53.0119L177.87 54.0003L260.16 41.3162L260.007 40.3279ZM265.14 44.0898C264.762 41.6335 262.464 39.9493 260.007 40.3279L260.16 41.3162C262.07 41.0217 263.857 42.3317 264.152 44.2421L265.14 44.0898ZM272.057 88.965L265.14 44.0898L264.152 44.2421L271.069 89.1174L272.057 88.965ZM268.295 94.0981C270.752 93.7194 272.436 91.4213 272.057 88.965L271.069 89.1174C271.363 91.0278 270.053 92.8152 268.143 93.1097L268.295 94.0981ZM186.005 106.782L268.295 94.0981L268.143 93.1097L185.852 105.794L186.005 106.782ZM238.448 170.898L186.318 105.975L185.539 106.601L237.668 171.524L238.448 170.898ZM237.757 177.224C239.695 175.668 240.004 172.836 238.448 170.898L237.668 171.524C238.879 173.032 238.638 175.234 237.131 176.445L237.757 177.224ZM202.352 205.652L237.757 177.224L237.131 176.445L201.726 204.873L202.352 205.652ZM196.026 204.961C197.582 206.899 200.414 207.208 202.352 205.652L201.726 204.873C200.219 206.083 198.016 205.842 196.806 204.335L196.026 204.961ZM143.896 140.038L196.026 204.961L196.806 204.335L144.676 139.412L143.896 140.038ZM114.592 217.514L144.752 139.906L143.82 139.544L113.66 217.152L114.592 217.514ZM108.768 220.078C111.084 220.979 113.692 219.831 114.592 217.514L113.66 217.152C112.96 218.954 110.931 219.846 109.13 219.146L108.768 220.078ZM66.4459 203.631L108.768 220.078L109.13 219.146L66.8081 202.699L66.4459 203.631ZM63.8816 197.807C62.9813 200.123 64.1294 202.731 66.4459 203.631L66.8081 202.699C65.0064 201.999 64.1135 199.971 64.8137 198.169L63.8816 197.807ZM94.0422 120.198L63.8816 197.807L64.8137 198.169L94.9743 120.561L94.0422 120.198ZM12.2926 133.558L94.5844 120.874L94.4321 119.885L12.1403 132.57L12.2926 133.558ZM7.15961 129.796C7.53822 132.252 9.83633 133.937 12.2926 133.558L12.1403 132.57C10.2298 132.864 8.44241 131.554 8.14794 129.644L7.15961 129.796ZM0.242595 84.9208L7.15961 129.796L8.14794 129.644L1.23092 84.7685L0.242595 84.9208ZM4.00454 79.7878C1.54827 80.1664 -0.136013 82.4646 0.242595 84.9208L1.23092 84.7685C0.936451 82.8581 2.24645 81.0706 4.15688 80.7761L4.00454 79.7878ZM86.2958 67.1035L4.00454 79.7878L4.15688 80.7761L86.4481 68.0919L86.2958 67.1035ZM33.8512 2.98611L85.9821 67.9108L86.7618 67.2847L34.6309 2.36002L33.8512 2.98611Z" fill="#C4C7C7" fill-opacity="0.02"/>
<path d="M128.015 34.1615L127.625 34.4745L128.167 35.1498L128.481 34.3426L128.015 34.1615ZM158.176 -43.447L157.71 -43.6281L158.176 -43.447ZM163.353 -45.7264L163.172 -45.2604L163.353 -45.7264ZM205.675 -29.2791L205.856 -29.7452L205.675 -29.2791ZM207.954 -24.1019L207.488 -24.283L207.954 -24.1019ZM177.793 53.5061L177.327 53.325L177.014 54.1322L177.87 54.0003L177.793 53.5061ZM260.083 40.822L260.007 40.3279L260.083 40.822ZM264.646 44.166L264.152 44.2421L264.646 44.166ZM271.563 89.0412L271.069 89.1174L271.563 89.0412ZM268.219 93.6039L268.295 94.0981L268.219 93.6039ZM185.929 106.288L185.852 105.794L184.996 105.926L185.539 106.601L185.929 106.288ZM144.286 139.725L144.676 139.412L144.134 138.737L143.82 139.544L144.286 139.725ZM114.126 217.333L114.592 217.514L114.126 217.333ZM108.949 219.612L109.13 219.146L108.949 219.612ZM66.627 203.165L66.8081 202.699L66.8081 202.699L66.627 203.165ZM64.3476 197.988L64.8137 198.169L64.8137 198.169L64.3476 197.988ZM94.5083 120.379L94.9743 120.561L95.288 119.753L94.4321 119.885L94.5083 120.379ZM12.2164 133.064L12.1403 132.57L12.1403 132.57L12.2164 133.064ZM7.65377 129.72L8.14794 129.644L8.14794 129.644L7.65377 129.72ZM0.736758 84.8447L1.23092 84.7685L0.736758 84.8447ZM4.08071 80.282L4.00454 79.7878L4.08071 80.282ZM86.3719 67.5977L86.4481 68.0919L87.304 67.9599L86.7618 67.2847L86.3719 67.5977ZM34.5426 -3.34017C32.6047 -1.78415 32.2951 1.04822 33.8512 2.98611L34.6309 2.36002C33.4207 0.852772 33.6614 -1.35018 35.1687 -2.56042L34.5426 -3.34017ZM69.9472 -31.7681L34.5426 -3.34017L35.1687 -2.56042L70.5733 -30.9884L69.9472 -31.7681ZM76.2735 -31.0767C74.7175 -33.0146 71.8851 -33.3241 69.9472 -31.7681L70.5733 -30.9884C72.0805 -32.1986 74.2835 -31.9578 75.4937 -30.4506L76.2735 -31.0767ZM128.405 33.8484L76.2735 -31.0767L75.4937 -30.4506L127.625 34.4745L128.405 33.8484ZM157.71 -43.6281L127.549 33.9804L128.481 34.3426L158.642 -43.2659L157.71 -43.6281ZM163.534 -46.1925C161.218 -47.0927 158.61 -45.9447 157.71 -43.6281L158.642 -43.2659C159.342 -45.0676 161.37 -45.9606 163.172 -45.2604L163.534 -46.1925ZM205.856 -29.7452L163.534 -46.1925L163.172 -45.2604L205.493 -28.8131L205.856 -29.7452ZM208.42 -23.9208C209.32 -26.2373 208.172 -28.8449 205.856 -29.7452L205.493 -28.8131C207.295 -28.1129 208.188 -26.0847 207.488 -24.283L208.42 -23.9208ZM178.259 53.6872L208.42 -23.9208L207.488 -24.283L177.327 53.325L178.259 53.6872ZM260.007 40.3279L177.717 53.0119L177.87 54.0003L260.16 41.3162L260.007 40.3279ZM265.14 44.0898C264.762 41.6335 262.464 39.9493 260.007 40.3279L260.16 41.3162C262.07 41.0217 263.857 42.3317 264.152 44.2421L265.14 44.0898ZM272.057 88.965L265.14 44.0898L264.152 44.2421L271.069 89.1174L272.057 88.965ZM268.295 94.0981C270.752 93.7194 272.436 91.4213 272.057 88.965L271.069 89.1174C271.363 91.0278 270.053 92.8152 268.143 93.1097L268.295 94.0981ZM186.005 106.782L268.295 94.0981L268.143 93.1097L185.852 105.794L186.005 106.782ZM238.448 170.898L186.318 105.975L185.539 106.601L237.668 171.524L238.448 170.898ZM237.757 177.224C239.695 175.668 240.004 172.836 238.448 170.898L237.668 171.524C238.879 173.032 238.638 175.234 237.131 176.445L237.757 177.224ZM202.352 205.652L237.757 177.224L237.131 176.445L201.726 204.873L202.352 205.652ZM196.026 204.961C197.582 206.899 200.414 207.208 202.352 205.652L201.726 204.873C200.219 206.083 198.016 205.842 196.806 204.335L196.026 204.961ZM143.896 140.038L196.026 204.961L196.806 204.335L144.676 139.412L143.896 140.038ZM114.592 217.514L144.752 139.906L143.82 139.544L113.66 217.152L114.592 217.514ZM108.768 220.078C111.084 220.979 113.692 219.831 114.592 217.514L113.66 217.152C112.96 218.954 110.931 219.846 109.13 219.146L108.768 220.078ZM66.4459 203.631L108.768 220.078L109.13 219.146L66.8081 202.699L66.4459 203.631ZM63.8816 197.807C62.9813 200.123 64.1294 202.731 66.4459 203.631L66.8081 202.699C65.0064 201.999 64.1135 199.971 64.8137 198.169L63.8816 197.807ZM94.0422 120.198L63.8816 197.807L64.8137 198.169L94.9743 120.561L94.0422 120.198ZM12.2926 133.558L94.5844 120.874L94.4321 119.885L12.1403 132.57L12.2926 133.558ZM7.15961 129.796C7.53822 132.252 9.83633 133.937 12.2926 133.558L12.1403 132.57C10.2298 132.864 8.44241 131.554 8.14794 129.644L7.15961 129.796ZM0.242595 84.9208L7.15961 129.796L8.14794 129.644L1.23092 84.7685L0.242595 84.9208ZM4.00454 79.7878C1.54827 80.1664 -0.136013 82.4646 0.242595 84.9208L1.23092 84.7685C0.936451 82.8581 2.24645 81.0706 4.15688 80.7761L4.00454 79.7878ZM86.2958 67.1035L4.00454 79.7878L4.15688 80.7761L86.4481 68.0919L86.2958 67.1035ZM33.8512 2.98611L85.9821 67.9108L86.7618 67.2847L34.6309 2.36002L33.8512 2.98611Z" fill="#CABEFF" fill-opacity="0.16"/>
</svg>

Before

Width:  |  Height:  |  Size: 14 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 87 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 89 KiB

View file

@ -6,32 +6,25 @@
height: 100vh; height: 100vh;
flex-direction: column; flex-direction: column;
min-width: 1280px; min-width: 1280px;
min-height: 806px;
background-position: right bottom;
background-size: contain;
background-repeat: no-repeat;
&.light { &.light {
background-image: url('../../assets/icons/welcome.svg'); background-image: url('../../assets/icons/welcome.svg');
background-position: right 0 bottom 40px;
background-repeat: no-repeat;
} }
&.dark { &.dark {
background-image: url('../../assets/icons/welcome-dark.svg'); background-image: url('../../assets/icons/welcome-dark.svg');
background-position: right 0 bottom 40px;
background-repeat: no-repeat;
}
&::after {
content: '';
position: absolute;
top: 0;
right: 92px;
width: 273px;
height: 221px;
background: url('../../assets/icons/snowflake.svg') no-repeat;
background-position: center;
} }
} }
.header { .header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: _.unit(12); padding: _.unit(12);
} }
@ -43,12 +36,20 @@
main { main {
flex: 1; flex: 1;
display: flex;
flex-direction: column;
}
.placeholderTop {
flex: 1;
}
.placeholderBottom {
flex: 2;
} }
.content { .content {
position: absolute; margin-left: 98px;
top: 25%;
left: 8.333%;
width: 585px; width: 585px;
} }

View file

@ -40,6 +40,7 @@ const Welcome = () => {
<Logo className={styles.logo} /> <Logo className={styles.logo} />
</div> </div>
<main> <main>
<div className={styles.placeholderTop} />
<div className={styles.content}> <div className={styles.content}>
<div className={styles.title}>{t('welcome.title')}</div> <div className={styles.title}>{t('welcome.title')}</div>
<div className={styles.description}>{t('welcome.description')}</div> <div className={styles.description}>{t('welcome.description')}</div>
@ -53,6 +54,7 @@ const Welcome = () => {
}} }}
/> />
</div> </div>
<div className={styles.placeholderBottom} />
</main> </main>
</div> </div>
); );