🎨(frontend) update 401 and 403 access denied pages to new error UI

Apply new illustration, typography and text-link actions for access errors.
This commit is contained in:
Cyril
2026-07-17 14:33:53 +02:00
parent fe37ecaea1
commit c239548a0f
4 changed files with 245 additions and 167 deletions
@@ -0,0 +1,102 @@
<svg width="102" height="72" viewBox="0 0 102 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_12121_1716)">
<g clip-path="url(#clip0_12121_1716)">
<rect x="31.7998" y="10.3999" width="38.4" height="51.2" rx="5.68889" fill="white"/>
<path d="M31.7986 10.3999L69.7986 10.3999L69.7986 25.5999H31.7979L31.7986 10.3999Z" fill="#3677CC"/>
<path d="M31.7986 10.3999L69.7986 10.3999L69.7986 25.5999H31.7979L31.7986 10.3999Z" fill="#F6F8F9" fill-opacity="0.975"/>
<path d="M31.7986 10.3999L69.7986 10.3999L69.7986 25.5999H31.7979L31.7986 10.3999Z" fill="url(#paint0_linear_12121_1716)" fill-opacity="0.4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7598 25.5821C36.7598 24.7967 37.3965 24.1599 38.182 24.1599H50.982C51.7675 24.1599 52.4042 24.7967 52.4042 25.5821C52.4042 26.3676 51.7675 27.0043 50.982 27.0043H38.182C37.3965 27.0043 36.7598 26.3676 36.7598 25.5821Z" fill="#3677CC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7598 25.5821C36.7598 24.7967 37.3965 24.1599 38.182 24.1599H50.982C51.7675 24.1599 52.4042 24.7967 52.4042 25.5821C52.4042 26.3676 51.7675 27.0043 50.982 27.0043H38.182C37.3965 27.0043 36.7598 26.3676 36.7598 25.5821Z" fill="#F6F8F9" fill-opacity="0.15"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7778 31.662C36.7778 30.8765 37.4146 30.2397 38.2001 30.2397H63.8001C64.5855 30.2397 65.2223 30.8765 65.2223 31.662C65.2223 32.4474 64.5855 33.0842 63.8001 33.0842H38.2001C37.4146 33.0842 36.7778 32.4474 36.7778 31.662Z" fill="#3677CC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7778 31.662C36.7778 30.8765 37.4146 30.2397 38.2001 30.2397H63.8001C64.5855 30.2397 65.2223 30.8765 65.2223 31.662C65.2223 32.4474 64.5855 33.0842 63.8001 33.0842H38.2001C37.4146 33.0842 36.7778 32.4474 36.7778 31.662Z" fill="#F6F8F9" fill-opacity="0.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7778 31.662C36.7778 30.8765 37.4146 30.2397 38.2001 30.2397H63.8001C64.5855 30.2397 65.2223 30.8765 65.2223 31.662C65.2223 32.4474 64.5855 33.0842 63.8001 33.0842H38.2001C37.4146 33.0842 36.7778 32.4474 36.7778 31.662Z" fill="url(#paint1_linear_12121_1716)" fill-opacity="0.35"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7778 36.462C36.7778 35.6765 37.4146 35.0397 38.2001 35.0397H63.8001C64.5855 35.0397 65.2223 35.6765 65.2223 36.462C65.2223 37.2474 64.5855 37.8842 63.8001 37.8842H38.2001C37.4146 37.8842 36.7778 37.2474 36.7778 36.462Z" fill="#3677CC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7778 36.462C36.7778 35.6765 37.4146 35.0397 38.2001 35.0397H63.8001C64.5855 35.0397 65.2223 35.6765 65.2223 36.462C65.2223 37.2474 64.5855 37.8842 63.8001 37.8842H38.2001C37.4146 37.8842 36.7778 37.2474 36.7778 36.462Z" fill="#F6F8F9" fill-opacity="0.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7778 36.462C36.7778 35.6765 37.4146 35.0397 38.2001 35.0397H63.8001C64.5855 35.0397 65.2223 35.6765 65.2223 36.462C65.2223 37.2474 64.5855 37.8842 63.8001 37.8842H38.2001C37.4146 37.8842 36.7778 37.2474 36.7778 36.462Z" fill="url(#paint2_linear_12121_1716)" fill-opacity="0.35"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7778 41.262C36.7778 40.4765 37.4146 39.8397 38.2001 39.8397H63.8001C64.5855 39.8397 65.2223 40.4765 65.2223 41.262C65.2223 42.0474 64.5855 42.6842 63.8001 42.6842H38.2001C37.4146 42.6842 36.7778 42.0474 36.7778 41.262Z" fill="#3677CC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7778 41.262C36.7778 40.4765 37.4146 39.8397 38.2001 39.8397H63.8001C64.5855 39.8397 65.2223 40.4765 65.2223 41.262C65.2223 42.0474 64.5855 42.6842 63.8001 42.6842H38.2001C37.4146 42.6842 36.7778 42.0474 36.7778 41.262Z" fill="#F6F8F9" fill-opacity="0.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7778 41.262C36.7778 40.4765 37.4146 39.8397 38.2001 39.8397H63.8001C64.5855 39.8397 65.2223 40.4765 65.2223 41.262C65.2223 42.0474 64.5855 42.6842 63.8001 42.6842H38.2001C37.4146 42.6842 36.7778 42.0474 36.7778 41.262Z" fill="url(#paint3_linear_12121_1716)" fill-opacity="0.35"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7778 46.062C36.7778 45.2765 37.4146 44.6397 38.2001 44.6397H63.8001C64.5855 44.6397 65.2223 45.2765 65.2223 46.062C65.2223 46.8474 64.5855 47.4842 63.8001 47.4842H38.2001C37.4146 47.4842 36.7778 46.8474 36.7778 46.062Z" fill="#3677CC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7778 46.062C36.7778 45.2765 37.4146 44.6397 38.2001 44.6397H63.8001C64.5855 44.6397 65.2223 45.2765 65.2223 46.062C65.2223 46.8474 64.5855 47.4842 63.8001 47.4842H38.2001C37.4146 47.4842 36.7778 46.8474 36.7778 46.062Z" fill="#F6F8F9" fill-opacity="0.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7778 46.062C36.7778 45.2765 37.4146 44.6397 38.2001 44.6397H63.8001C64.5855 44.6397 65.2223 45.2765 65.2223 46.062C65.2223 46.8474 64.5855 47.4842 63.8001 47.4842H38.2001C37.4146 47.4842 36.7778 46.8474 36.7778 46.062Z" fill="url(#paint4_linear_12121_1716)" fill-opacity="0.35"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7778 50.862C36.7778 50.0765 37.4146 49.4397 38.2001 49.4397H63.8001C64.5855 49.4397 65.2223 50.0765 65.2223 50.862C65.2223 51.6474 64.5855 52.2842 63.8001 52.2842H38.2001C37.4146 52.2842 36.7778 51.6474 36.7778 50.862Z" fill="#3677CC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7778 50.862C36.7778 50.0765 37.4146 49.4397 38.2001 49.4397H63.8001C64.5855 49.4397 65.2223 50.0765 65.2223 50.862C65.2223 51.6474 64.5855 52.2842 63.8001 52.2842H38.2001C37.4146 52.2842 36.7778 51.6474 36.7778 50.862Z" fill="#F6F8F9" fill-opacity="0.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7778 50.862C36.7778 50.0765 37.4146 49.4397 38.2001 49.4397H63.8001C64.5855 49.4397 65.2223 50.0765 65.2223 50.862C65.2223 51.6474 64.5855 52.2842 63.8001 52.2842H38.2001C37.4146 52.2842 36.7778 51.6474 36.7778 50.862Z" fill="url(#paint5_linear_12121_1716)" fill-opacity="0.35"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7778 55.662C36.7778 54.8765 37.4146 54.2397 38.2001 54.2397H63.8001C64.5855 54.2397 65.2223 54.8765 65.2223 55.662C65.2223 56.4474 64.5855 57.0842 63.8001 57.0842H38.2001C37.4146 57.0842 36.7778 56.4474 36.7778 55.662Z" fill="#3677CC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7778 55.662C36.7778 54.8765 37.4146 54.2397 38.2001 54.2397H63.8001C64.5855 54.2397 65.2223 54.8765 65.2223 55.662C65.2223 56.4474 64.5855 57.0842 63.8001 57.0842H38.2001C37.4146 57.0842 36.7778 56.4474 36.7778 55.662Z" fill="#F6F8F9" fill-opacity="0.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.7778 55.662C36.7778 54.8765 37.4146 54.2397 38.2001 54.2397H63.8001C64.5855 54.2397 65.2223 54.8765 65.2223 55.662C65.2223 56.4474 64.5855 57.0842 63.8001 57.0842H38.2001C37.4146 57.0842 36.7778 56.4474 36.7778 55.662Z" fill="url(#paint6_linear_12121_1716)" fill-opacity="0.35"/>
</g>
<rect x="32.3598" y="10.9599" width="37.28" height="50.08" rx="5.12889" stroke="#3677CC" stroke-width="1.12"/>
<rect x="32.3598" y="10.9599" width="37.28" height="50.08" rx="5.12889" stroke="#F6F8F9" stroke-opacity="0.8" stroke-width="1.12"/>
<rect x="32.3598" y="10.9599" width="37.28" height="50.08" rx="5.12889" stroke="url(#paint7_linear_12121_1716)" stroke-opacity="0.2" stroke-width="1.12"/>
</g>
<g filter="url(#filter1_d_12121_1716)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M51 33.5C52.036 33.5 53.0035 33.7317 53.9024 34.1952C54.8015 34.6589 55.5257 35.3507 56.0743 36.2705C56.6305 37.1831 56.9087 38.3204 56.9087 39.6818V42.3008C57.5056 42.3797 57.9779 42.591 58.325 42.9375C58.7745 43.3864 59 44.0605 59 44.9583V52.784C59 53.6891 58.7745 54.3663 58.325 54.8152C57.8755 55.2713 57.2167 55.5 56.3483 55.5H45.6517C44.7832 55.5 44.1237 55.2714 43.6741 54.8152C43.2247 54.3663 43 53.6891 43 52.784V44.9583C43 44.0605 43.2246 43.3864 43.6741 42.9375C44.0214 42.5908 44.4941 42.3797 45.0913 42.3008V39.6818C45.0913 38.3204 45.3655 37.1831 45.9141 36.2705C46.4702 35.3507 47.1978 34.6589 48.0967 34.1952C48.9958 33.7316 49.9638 33.5 51 33.5ZM51 35.4759C50.3219 35.4759 49.6968 35.6303 49.1254 35.9394C48.554 36.2484 48.0967 36.701 47.7538 37.297C47.411 37.8857 47.2399 38.6108 47.2399 39.4717V42.2647H54.7709V39.4717C54.7708 38.6108 54.5958 37.8857 54.2453 37.297C53.9025 36.701 53.4451 36.2484 52.8738 35.9394C52.3025 35.6304 51.6779 35.4759 51 35.4759Z" fill="#2F6ABB"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M51 33.5C52.036 33.5 53.0035 33.7317 53.9024 34.1952C54.8015 34.6589 55.5257 35.3507 56.0743 36.2705C56.6305 37.1831 56.9087 38.3204 56.9087 39.6818V42.3008C57.5056 42.3797 57.9779 42.591 58.325 42.9375C58.7745 43.3864 59 44.0605 59 44.9583V52.784C59 53.6891 58.7745 54.3663 58.325 54.8152C57.8755 55.2713 57.2167 55.5 56.3483 55.5H45.6517C44.7832 55.5 44.1237 55.2714 43.6741 54.8152C43.2247 54.3663 43 53.6891 43 52.784V44.9583C43 44.0605 43.2246 43.3864 43.6741 42.9375C44.0214 42.5908 44.4941 42.3797 45.0913 42.3008V39.6818C45.0913 38.3204 45.3655 37.1831 45.9141 36.2705C46.4702 35.3507 47.1978 34.6589 48.0967 34.1952C48.9958 33.7316 49.9638 33.5 51 33.5ZM51 35.4759C50.3219 35.4759 49.6968 35.6303 49.1254 35.9394C48.554 36.2484 48.0967 36.701 47.7538 37.297C47.411 37.8857 47.2399 38.6108 47.2399 39.4717V42.2647H54.7709V39.4717C54.7708 38.6108 54.5958 37.8857 54.2453 37.297C53.9025 36.701 53.4451 36.2484 52.8738 35.9394C52.3025 35.6304 51.6779 35.4759 51 35.4759Z" fill="#F6F8F9" fill-opacity="0.25"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M51 33.5C52.036 33.5 53.0035 33.7317 53.9024 34.1952C54.8015 34.6589 55.5257 35.3507 56.0743 36.2705C56.6305 37.1831 56.9087 38.3204 56.9087 39.6818V42.3008C57.5056 42.3797 57.9779 42.591 58.325 42.9375C58.7745 43.3864 59 44.0605 59 44.9583V52.784C59 53.6891 58.7745 54.3663 58.325 54.8152C57.8755 55.2713 57.2167 55.5 56.3483 55.5H45.6517C44.7832 55.5 44.1237 55.2714 43.6741 54.8152C43.2247 54.3663 43 53.6891 43 52.784V44.9583C43 44.0605 43.2246 43.3864 43.6741 42.9375C44.0214 42.5908 44.4941 42.3797 45.0913 42.3008V39.6818C45.0913 38.3204 45.3655 37.1831 45.9141 36.2705C46.4702 35.3507 47.1978 34.6589 48.0967 34.1952C48.9958 33.7316 49.9638 33.5 51 33.5ZM51 35.4759C50.3219 35.4759 49.6968 35.6303 49.1254 35.9394C48.554 36.2484 48.0967 36.701 47.7538 37.297C47.411 37.8857 47.2399 38.6108 47.2399 39.4717V42.2647H54.7709V39.4717C54.7708 38.6108 54.5958 37.8857 54.2453 37.297C53.9025 36.701 53.4451 36.2484 52.8738 35.9394C52.3025 35.6304 51.6779 35.4759 51 35.4759Z" fill="url(#paint8_linear_12121_1716)" fill-opacity="0.1"/>
<path d="M51 32.6494C52.1681 32.6494 53.2695 32.9123 54.292 33.4395C55.3383 33.979 56.1762 34.7833 56.8008 35.8281L56.9199 36.0322C57.4944 37.0686 57.7597 38.2985 57.7598 39.6816V41.627C58.199 41.7748 58.5948 42.0048 58.9258 42.335V42.3359C59.5911 43.0003 59.8505 43.9285 59.8506 44.958V52.7842C59.8506 53.8165 59.5925 54.746 58.9297 55.4111L58.9307 55.4121C58.2713 56.0812 57.3619 56.3505 56.3486 56.3506H45.6514C44.6384 56.3505 43.7279 56.0815 43.0684 55.4121V55.4111C42.4056 54.7457 42.1494 53.8154 42.1494 52.7842V44.958C42.1495 43.9293 42.4076 43.0007 43.0732 42.3359C43.4045 42.0052 43.8007 41.7748 44.2402 41.627V39.6816C44.2403 38.2083 44.5371 36.909 45.1846 35.832L45.1865 35.8301C45.8186 34.7848 46.6596 33.9796 47.707 33.4395C48.7298 32.9121 49.8318 32.6494 51 32.6494ZM50.7988 36.332C50.336 36.3587 49.9164 36.4787 49.5303 36.6875C49.1059 36.9171 48.76 37.2534 48.4912 37.7207L48.4893 37.7246C48.2398 38.153 48.0908 38.7217 48.0908 39.4717V41.4141H53.9199V39.4717C53.9199 38.725 53.7688 38.1595 53.5146 37.7324L53.5078 37.7217V37.7207C53.2389 37.2535 52.893 36.917 52.4688 36.6875C52.0273 36.4489 51.5428 36.3262 51 36.3262L50.7988 36.332Z" stroke="#626A80" stroke-width="1.7014"/>
<path d="M51 32.6494C52.1681 32.6494 53.2695 32.9123 54.292 33.4395C55.3383 33.979 56.1762 34.7833 56.8008 35.8281L56.9199 36.0322C57.4944 37.0686 57.7597 38.2985 57.7598 39.6816V41.627C58.199 41.7748 58.5948 42.0048 58.9258 42.335V42.3359C59.5911 43.0003 59.8505 43.9285 59.8506 44.958V52.7842C59.8506 53.8165 59.5925 54.746 58.9297 55.4111L58.9307 55.4121C58.2713 56.0812 57.3619 56.3505 56.3486 56.3506H45.6514C44.6384 56.3505 43.7279 56.0815 43.0684 55.4121V55.4111C42.4056 54.7457 42.1494 53.8154 42.1494 52.7842V44.958C42.1495 43.9293 42.4076 43.0007 43.0732 42.3359C43.4045 42.0052 43.8007 41.7748 44.2402 41.627V39.6816C44.2403 38.2083 44.5371 36.909 45.1846 35.832L45.1865 35.8301C45.8186 34.7848 46.6596 33.9796 47.707 33.4395C48.7298 32.9121 49.8318 32.6494 51 32.6494ZM50.7988 36.332C50.336 36.3587 49.9164 36.4787 49.5303 36.6875C49.1059 36.9171 48.76 37.2534 48.4912 37.7207L48.4893 37.7246C48.2398 38.153 48.0908 38.7217 48.0908 39.4717V41.4141H53.9199V39.4717C53.9199 38.725 53.7688 38.1595 53.5146 37.7324L53.5078 37.7217V37.7207C53.2389 37.2535 52.893 36.917 52.4688 36.6875C52.0273 36.4489 51.5428 36.3262 51 36.3262L50.7988 36.332Z" stroke="#F6F8F9" stroke-opacity="0.975" stroke-width="1.7014"/>
<path d="M51 32.6494C52.1681 32.6494 53.2695 32.9123 54.292 33.4395C55.3383 33.979 56.1762 34.7833 56.8008 35.8281L56.9199 36.0322C57.4944 37.0686 57.7597 38.2985 57.7598 39.6816V41.627C58.199 41.7748 58.5948 42.0048 58.9258 42.335V42.3359C59.5911 43.0003 59.8505 43.9285 59.8506 44.958V52.7842C59.8506 53.8165 59.5925 54.746 58.9297 55.4111L58.9307 55.4121C58.2713 56.0812 57.3619 56.3505 56.3486 56.3506H45.6514C44.6384 56.3505 43.7279 56.0815 43.0684 55.4121V55.4111C42.4056 54.7457 42.1494 53.8154 42.1494 52.7842V44.958C42.1495 43.9293 42.4076 43.0007 43.0732 42.3359C43.4045 42.0052 43.8007 41.7748 44.2402 41.627V39.6816C44.2403 38.2083 44.5371 36.909 45.1846 35.832L45.1865 35.8301C45.8186 34.7848 46.6596 33.9796 47.707 33.4395C48.7298 32.9121 49.8318 32.6494 51 32.6494ZM50.7988 36.332C50.336 36.3587 49.9164 36.4787 49.5303 36.6875C49.1059 36.9171 48.76 37.2534 48.4912 37.7207L48.4893 37.7246C48.2398 38.153 48.0908 38.7217 48.0908 39.4717V41.4141H53.9199V39.4717C53.9199 38.725 53.7688 38.1595 53.5146 37.7324L53.5078 37.7217V37.7207C53.2389 37.2535 52.893 36.917 52.4688 36.6875C52.0273 36.4489 51.5428 36.3262 51 36.3262L50.7988 36.332Z" stroke="white" stroke-width="1.7014"/>
</g>
<defs>
<filter id="filter0_d_12121_1716" x="14.2" y="0.8" width="73.6" height="73.6" 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" result="hardAlpha"/>
<feOffset dy="1.6"/>
<feGaussianBlur stdDeviation="2.4"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0941176 0 0 0 0 0.105882 0 0 0 0 0.141176 0 0 0 0.05 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_12121_1716"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_12121_1716" result="shape"/>
</filter>
<filter id="filter1_d_12121_1716" x="34.0524" y="24.5522" width="33.8951" height="39.8956" 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" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="3.62319"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_12121_1716"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_12121_1716" result="shape"/>
</filter>
<linearGradient id="paint0_linear_12121_1716" x1="50.7994" y1="-6.4001" x2="50.8146" y2="26.266" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint1_linear_12121_1716" x1="50.9997" y1="39.662" x2="50.9997" y2="57.1198" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint2_linear_12121_1716" x1="50.9997" y1="39.662" x2="50.9997" y2="57.1198" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint3_linear_12121_1716" x1="50.9997" y1="39.662" x2="50.9997" y2="57.1198" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint4_linear_12121_1716" x1="50.9997" y1="39.662" x2="50.9997" y2="57.1198" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint5_linear_12121_1716" x1="50.9997" y1="39.662" x2="50.9997" y2="57.1198" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint6_linear_12121_1716" x1="50.9997" y1="39.662" x2="50.9997" y2="57.1198" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint7_linear_12121_1716" x1="50.9998" y1="35.9999" x2="50.9993" y2="61.6441" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint8_linear_12121_1716" x1="51" y1="33.5" x2="51" y2="55.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#F6F8F9" stop-opacity="0.975"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_12121_1716">
<rect x="31.7998" y="10.3999" width="38.4" height="51.2" rx="5.68889" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 17 KiB

@@ -1,102 +0,0 @@
<svg width="102" height="72" viewBox="0 0 102 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_13685_24724)">
<g clip-path="url(#clip0_13685_24724)">
<rect x="34.4922" y="14.2925" width="33.801" height="44.1844" rx="6.02377" fill="white"/>
<path d="M34.4909 14.2925L68.4911 14.2925L68.4911 30.3872H34.4902L34.4909 14.2925Z" fill="#3677CC"/>
<path d="M34.4909 14.2925L68.4911 14.2925L68.4911 30.3872H34.4902L34.4909 14.2925Z" fill="#F6F8F9" fill-opacity="0.975"/>
<path d="M34.4909 14.2925L68.4911 14.2925L68.4911 30.3872H34.4902L34.4909 14.2925Z" fill="url(#paint0_linear_13685_24724)" fill-opacity="0.4"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.8584 27.3943C38.8584 26.7165 39.4189 26.167 40.1103 26.167H51.3773C52.0687 26.167 52.6292 26.7165 52.6292 27.3943C52.6292 28.0722 52.0687 28.6217 51.3773 28.6217H40.1103C39.4189 28.6217 38.8584 28.0722 38.8584 27.3943Z" fill="#3677CC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.8584 27.3943C38.8584 26.7165 39.4189 26.167 40.1103 26.167H51.3773C52.0687 26.167 52.6292 26.7165 52.6292 27.3943C52.6292 28.0722 52.0687 28.6217 51.3773 28.6217H40.1103C39.4189 28.6217 38.8584 28.0722 38.8584 27.3943Z" fill="#F6F8F9" fill-opacity="0.15"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.874 32.6409C38.874 31.9631 39.4345 31.4136 40.1259 31.4136H62.6599C63.3513 31.4136 63.9118 31.9631 63.9118 32.6409C63.9118 33.3188 63.3513 33.8683 62.6599 33.8683H40.1259C39.4345 33.8683 38.874 33.3188 38.874 32.6409Z" fill="#3677CC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.874 32.6409C38.874 31.9631 39.4345 31.4136 40.1259 31.4136H62.6599C63.3513 31.4136 63.9118 31.9631 63.9118 32.6409C63.9118 33.3188 63.3513 33.8683 62.6599 33.8683H40.1259C39.4345 33.8683 38.874 33.3188 38.874 32.6409Z" fill="#F6F8F9" fill-opacity="0.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.874 32.6409C38.874 31.9631 39.4345 31.4136 40.1259 31.4136H62.6599C63.3513 31.4136 63.9118 31.9631 63.9118 32.6409C63.9118 33.3188 63.3513 33.8683 62.6599 33.8683H40.1259C39.4345 33.8683 38.874 33.3188 38.874 32.6409Z" fill="url(#paint1_linear_13685_24724)" fill-opacity="0.35"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.874 36.7832C38.874 36.1054 39.4345 35.5559 40.1259 35.5559H62.6599C63.3513 35.5559 63.9118 36.1054 63.9118 36.7832C63.9118 37.461 63.3513 38.0105 62.6599 38.0105H40.1259C39.4345 38.0105 38.874 37.461 38.874 36.7832Z" fill="#3677CC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.874 36.7832C38.874 36.1054 39.4345 35.5559 40.1259 35.5559H62.6599C63.3513 35.5559 63.9118 36.1054 63.9118 36.7832C63.9118 37.461 63.3513 38.0105 62.6599 38.0105H40.1259C39.4345 38.0105 38.874 37.461 38.874 36.7832Z" fill="#F6F8F9" fill-opacity="0.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.874 36.7832C38.874 36.1054 39.4345 35.5559 40.1259 35.5559H62.6599C63.3513 35.5559 63.9118 36.1054 63.9118 36.7832C63.9118 37.461 63.3513 38.0105 62.6599 38.0105H40.1259C39.4345 38.0105 38.874 37.461 38.874 36.7832Z" fill="url(#paint2_linear_13685_24724)" fill-opacity="0.35"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.874 40.9255C38.874 40.2476 39.4345 39.6981 40.1259 39.6981H62.6599C63.3513 39.6981 63.9118 40.2476 63.9118 40.9255C63.9118 41.6033 63.3513 42.1528 62.6599 42.1528H40.1259C39.4345 42.1528 38.874 41.6033 38.874 40.9255Z" fill="#3677CC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.874 40.9255C38.874 40.2476 39.4345 39.6981 40.1259 39.6981H62.6599C63.3513 39.6981 63.9118 40.2476 63.9118 40.9255C63.9118 41.6033 63.3513 42.1528 62.6599 42.1528H40.1259C39.4345 42.1528 38.874 41.6033 38.874 40.9255Z" fill="#F6F8F9" fill-opacity="0.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.874 40.9255C38.874 40.2476 39.4345 39.6981 40.1259 39.6981H62.6599C63.3513 39.6981 63.9118 40.2476 63.9118 40.9255C63.9118 41.6033 63.3513 42.1528 62.6599 42.1528H40.1259C39.4345 42.1528 38.874 41.6033 38.874 40.9255Z" fill="url(#paint3_linear_13685_24724)" fill-opacity="0.35"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.874 45.0678C38.874 44.3899 39.4345 43.8404 40.1259 43.8404H62.6599C63.3513 43.8404 63.9118 44.3899 63.9118 45.0678C63.9118 45.7456 63.3513 46.2951 62.6599 46.2951H40.1259C39.4345 46.2951 38.874 45.7456 38.874 45.0678Z" fill="#3677CC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.874 45.0678C38.874 44.3899 39.4345 43.8404 40.1259 43.8404H62.6599C63.3513 43.8404 63.9118 44.3899 63.9118 45.0678C63.9118 45.7456 63.3513 46.2951 62.6599 46.2951H40.1259C39.4345 46.2951 38.874 45.7456 38.874 45.0678Z" fill="#F6F8F9" fill-opacity="0.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.874 45.0678C38.874 44.3899 39.4345 43.8404 40.1259 43.8404H62.6599C63.3513 43.8404 63.9118 44.3899 63.9118 45.0678C63.9118 45.7456 63.3513 46.2951 62.6599 46.2951H40.1259C39.4345 46.2951 38.874 45.7456 38.874 45.0678Z" fill="url(#paint4_linear_13685_24724)" fill-opacity="0.35"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.874 49.2101C38.874 48.5322 39.4345 47.9827 40.1259 47.9827H62.6599C63.3513 47.9827 63.9118 48.5322 63.9118 49.2101C63.9118 49.8879 63.3513 50.4374 62.6599 50.4374H40.1259C39.4345 50.4374 38.874 49.8879 38.874 49.2101Z" fill="#3677CC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.874 49.2101C38.874 48.5322 39.4345 47.9827 40.1259 47.9827H62.6599C63.3513 47.9827 63.9118 48.5322 63.9118 49.2101C63.9118 49.8879 63.3513 50.4374 62.6599 50.4374H40.1259C39.4345 50.4374 38.874 49.8879 38.874 49.2101Z" fill="#F6F8F9" fill-opacity="0.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.874 49.2101C38.874 48.5322 39.4345 47.9827 40.1259 47.9827H62.6599C63.3513 47.9827 63.9118 48.5322 63.9118 49.2101C63.9118 49.8879 63.3513 50.4374 62.6599 50.4374H40.1259C39.4345 50.4374 38.874 49.8879 38.874 49.2101Z" fill="url(#paint5_linear_13685_24724)" fill-opacity="0.35"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.874 53.3523C38.874 52.6745 39.4345 52.125 40.1259 52.125H62.6599C63.3513 52.125 63.9118 52.6745 63.9118 53.3523C63.9118 54.0302 63.3513 54.5797 62.6599 54.5797H40.1259C39.4345 54.5797 38.874 54.0302 38.874 53.3523Z" fill="#3677CC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.874 53.3523C38.874 52.6745 39.4345 52.125 40.1259 52.125H62.6599C63.3513 52.125 63.9118 52.6745 63.9118 53.3523C63.9118 54.0302 63.3513 54.5797 62.6599 54.5797H40.1259C39.4345 54.5797 38.874 54.0302 38.874 53.3523Z" fill="#F6F8F9" fill-opacity="0.8"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.874 53.3523C38.874 52.6745 39.4345 52.125 40.1259 52.125H62.6599C63.3513 52.125 63.9118 52.6745 63.9118 53.3523C63.9118 54.0302 63.3513 54.5797 62.6599 54.5797H40.1259C39.4345 54.5797 38.874 54.0302 38.874 53.3523Z" fill="url(#paint6_linear_13685_24724)" fill-opacity="0.35"/>
</g>
<rect x="35.0852" y="14.8854" width="32.6151" height="42.9984" rx="5.4308" stroke="#3677CC" stroke-width="1.18593"/>
<rect x="35.0852" y="14.8854" width="32.6151" height="42.9984" rx="5.4308" stroke="#F6F8F9" stroke-opacity="0.8" stroke-width="1.18593"/>
<rect x="35.0852" y="14.8854" width="32.6151" height="42.9984" rx="5.4308" stroke="url(#paint7_linear_13685_24724)" stroke-opacity="0.2" stroke-width="1.18593"/>
</g>
<g filter="url(#filter1_d_13685_24724)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M51 33.5C52.036 33.5 53.0035 33.7317 53.9024 34.1952C54.8015 34.6589 55.5257 35.3507 56.0743 36.2705C56.6305 37.1831 56.9087 38.3204 56.9087 39.6818V42.3008C57.5056 42.3797 57.9779 42.591 58.325 42.9375C58.7745 43.3864 59 44.0605 59 44.9583V52.784C59 53.6891 58.7745 54.3663 58.325 54.8152C57.8755 55.2713 57.2167 55.5 56.3483 55.5H45.6517C44.7832 55.5 44.1237 55.2714 43.6741 54.8152C43.2247 54.3663 43 53.6891 43 52.784V44.9583C43 44.0605 43.2246 43.3864 43.6741 42.9375C44.0214 42.5908 44.4941 42.3797 45.0913 42.3008V39.6818C45.0913 38.3204 45.3655 37.1831 45.9141 36.2705C46.4702 35.3507 47.1978 34.6589 48.0967 34.1952C48.9958 33.7316 49.9638 33.5 51 33.5ZM51 35.4759C50.3219 35.4759 49.6968 35.6303 49.1254 35.9394C48.554 36.2484 48.0967 36.701 47.7538 37.297C47.411 37.8857 47.2399 38.6108 47.2399 39.4717V42.2647H54.7709V39.4717C54.7708 38.6108 54.5958 37.8857 54.2453 37.297C53.9025 36.701 53.4451 36.2484 52.8738 35.9394C52.3025 35.6304 51.6779 35.4759 51 35.4759Z" fill="#2F6ABB"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M51 33.5C52.036 33.5 53.0035 33.7317 53.9024 34.1952C54.8015 34.6589 55.5257 35.3507 56.0743 36.2705C56.6305 37.1831 56.9087 38.3204 56.9087 39.6818V42.3008C57.5056 42.3797 57.9779 42.591 58.325 42.9375C58.7745 43.3864 59 44.0605 59 44.9583V52.784C59 53.6891 58.7745 54.3663 58.325 54.8152C57.8755 55.2713 57.2167 55.5 56.3483 55.5H45.6517C44.7832 55.5 44.1237 55.2714 43.6741 54.8152C43.2247 54.3663 43 53.6891 43 52.784V44.9583C43 44.0605 43.2246 43.3864 43.6741 42.9375C44.0214 42.5908 44.4941 42.3797 45.0913 42.3008V39.6818C45.0913 38.3204 45.3655 37.1831 45.9141 36.2705C46.4702 35.3507 47.1978 34.6589 48.0967 34.1952C48.9958 33.7316 49.9638 33.5 51 33.5ZM51 35.4759C50.3219 35.4759 49.6968 35.6303 49.1254 35.9394C48.554 36.2484 48.0967 36.701 47.7538 37.297C47.411 37.8857 47.2399 38.6108 47.2399 39.4717V42.2647H54.7709V39.4717C54.7708 38.6108 54.5958 37.8857 54.2453 37.297C53.9025 36.701 53.4451 36.2484 52.8738 35.9394C52.3025 35.6304 51.6779 35.4759 51 35.4759Z" fill="#F6F8F9" fill-opacity="0.25"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M51 33.5C52.036 33.5 53.0035 33.7317 53.9024 34.1952C54.8015 34.6589 55.5257 35.3507 56.0743 36.2705C56.6305 37.1831 56.9087 38.3204 56.9087 39.6818V42.3008C57.5056 42.3797 57.9779 42.591 58.325 42.9375C58.7745 43.3864 59 44.0605 59 44.9583V52.784C59 53.6891 58.7745 54.3663 58.325 54.8152C57.8755 55.2713 57.2167 55.5 56.3483 55.5H45.6517C44.7832 55.5 44.1237 55.2714 43.6741 54.8152C43.2247 54.3663 43 53.6891 43 52.784V44.9583C43 44.0605 43.2246 43.3864 43.6741 42.9375C44.0214 42.5908 44.4941 42.3797 45.0913 42.3008V39.6818C45.0913 38.3204 45.3655 37.1831 45.9141 36.2705C46.4702 35.3507 47.1978 34.6589 48.0967 34.1952C48.9958 33.7316 49.9638 33.5 51 33.5ZM51 35.4759C50.3219 35.4759 49.6968 35.6303 49.1254 35.9394C48.554 36.2484 48.0967 36.701 47.7538 37.297C47.411 37.8857 47.2399 38.6108 47.2399 39.4717V42.2647H54.7709V39.4717C54.7708 38.6108 54.5958 37.8857 54.2453 37.297C53.9025 36.701 53.4451 36.2484 52.8738 35.9394C52.3025 35.6304 51.6779 35.4759 51 35.4759Z" fill="url(#paint8_linear_13685_24724)" fill-opacity="0.1"/>
<path d="M51 32.6494C52.1681 32.6494 53.2695 32.9123 54.292 33.4395C55.3383 33.979 56.1762 34.7833 56.8008 35.8281L56.9199 36.0322C57.4944 37.0686 57.7597 38.2985 57.7598 39.6816V41.627C58.199 41.7748 58.5948 42.0048 58.9258 42.335V42.3359C59.5911 43.0003 59.8505 43.9285 59.8506 44.958V52.7842C59.8506 53.8165 59.5925 54.746 58.9297 55.4111L58.9307 55.4121C58.2713 56.0812 57.3619 56.3505 56.3486 56.3506H45.6514C44.6384 56.3505 43.7279 56.0815 43.0684 55.4121V55.4111C42.4056 54.7457 42.1494 53.8154 42.1494 52.7842V44.958C42.1495 43.9293 42.4076 43.0007 43.0732 42.3359C43.4045 42.0052 43.8007 41.7748 44.2402 41.627V39.6816C44.2403 38.2083 44.5371 36.909 45.1846 35.832L45.1865 35.8301C45.8186 34.7848 46.6596 33.9796 47.707 33.4395C48.7298 32.9121 49.8318 32.6494 51 32.6494ZM50.7988 36.332C50.336 36.3587 49.9164 36.4787 49.5303 36.6875C49.1059 36.9171 48.76 37.2534 48.4912 37.7207L48.4893 37.7246C48.2398 38.153 48.0908 38.7217 48.0908 39.4717V41.4141H53.9199V39.4717C53.9199 38.725 53.7688 38.1595 53.5146 37.7324L53.5078 37.7217V37.7207C53.2389 37.2535 52.893 36.917 52.4688 36.6875C52.0273 36.4489 51.5428 36.3262 51 36.3262L50.7988 36.332Z" stroke="#626A80" stroke-width="1.7014"/>
<path d="M51 32.6494C52.1681 32.6494 53.2695 32.9123 54.292 33.4395C55.3383 33.979 56.1762 34.7833 56.8008 35.8281L56.9199 36.0322C57.4944 37.0686 57.7597 38.2985 57.7598 39.6816V41.627C58.199 41.7748 58.5948 42.0048 58.9258 42.335V42.3359C59.5911 43.0003 59.8505 43.9285 59.8506 44.958V52.7842C59.8506 53.8165 59.5925 54.746 58.9297 55.4111L58.9307 55.4121C58.2713 56.0812 57.3619 56.3505 56.3486 56.3506H45.6514C44.6384 56.3505 43.7279 56.0815 43.0684 55.4121V55.4111C42.4056 54.7457 42.1494 53.8154 42.1494 52.7842V44.958C42.1495 43.9293 42.4076 43.0007 43.0732 42.3359C43.4045 42.0052 43.8007 41.7748 44.2402 41.627V39.6816C44.2403 38.2083 44.5371 36.909 45.1846 35.832L45.1865 35.8301C45.8186 34.7848 46.6596 33.9796 47.707 33.4395C48.7298 32.9121 49.8318 32.6494 51 32.6494ZM50.7988 36.332C50.336 36.3587 49.9164 36.4787 49.5303 36.6875C49.1059 36.9171 48.76 37.2534 48.4912 37.7207L48.4893 37.7246C48.2398 38.153 48.0908 38.7217 48.0908 39.4717V41.4141H53.9199V39.4717C53.9199 38.725 53.7688 38.1595 53.5146 37.7324L53.5078 37.7217V37.7207C53.2389 37.2535 52.893 36.917 52.4688 36.6875C52.0273 36.4489 51.5428 36.3262 51 36.3262L50.7988 36.332Z" stroke="#F6F8F9" stroke-opacity="0.975" stroke-width="1.7014"/>
<path d="M51 32.6494C52.1681 32.6494 53.2695 32.9123 54.292 33.4395C55.3383 33.979 56.1762 34.7833 56.8008 35.8281L56.9199 36.0322C57.4944 37.0686 57.7597 38.2985 57.7598 39.6816V41.627C58.199 41.7748 58.5948 42.0048 58.9258 42.335V42.3359C59.5911 43.0003 59.8505 43.9285 59.8506 44.958V52.7842C59.8506 53.8165 59.5925 54.746 58.9297 55.4111L58.9307 55.4121C58.2713 56.0812 57.3619 56.3505 56.3486 56.3506H45.6514C44.6384 56.3505 43.7279 56.0815 43.0684 55.4121V55.4111C42.4056 54.7457 42.1494 53.8154 42.1494 52.7842V44.958C42.1495 43.9293 42.4076 43.0007 43.0732 42.3359C43.4045 42.0052 43.8007 41.7748 44.2402 41.627V39.6816C44.2403 38.2083 44.5371 36.909 45.1846 35.832L45.1865 35.8301C45.8186 34.7848 46.6596 33.9796 47.707 33.4395C48.7298 32.9121 49.8318 32.6494 51 32.6494ZM50.7988 36.332C50.336 36.3587 49.9164 36.4787 49.5303 36.6875C49.1059 36.9171 48.76 37.2534 48.4912 37.7207L48.4893 37.7246C48.2398 38.153 48.0908 38.7217 48.0908 39.4717V41.4141H53.9199V39.4717C53.9199 38.725 53.7688 38.1595 53.5146 37.7324L53.5078 37.7217V37.7207C53.2389 37.2535 52.893 36.917 52.4688 36.6875C52.0273 36.4489 51.5428 36.3262 51 36.3262L50.7988 36.332Z" stroke="white" stroke-width="1.7014"/>
</g>
<defs>
<filter id="filter0_d_13685_24724" x="16.4484" y="5.38116" width="69.8884" height="68.7839" 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" result="hardAlpha"/>
<feOffset dy="3.38837"/>
<feGaussianBlur stdDeviation="3.38837"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.0941176 0 0 0 0 0.105882 0 0 0 0 0.141176 0 0 0 0.05 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_13685_24724"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_13685_24724" result="shape"/>
</filter>
<filter id="filter1_d_13685_24724" x="34.0524" y="24.5524" width="33.8951" height="39.8951" 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" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="3.62319"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.3 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_13685_24724"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_13685_24724" result="shape"/>
</filter>
<linearGradient id="paint0_linear_13685_24724" x1="51.4917" y1="-3.49645" x2="51.5107" y2="31.0926" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint1_linear_13685_24724" x1="51.3926" y1="39.5448" x2="51.3926" y2="54.6104" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint2_linear_13685_24724" x1="51.3926" y1="39.5448" x2="51.3926" y2="54.6104" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint3_linear_13685_24724" x1="51.3926" y1="39.5448" x2="51.3926" y2="54.6104" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint4_linear_13685_24724" x1="51.3926" y1="39.5448" x2="51.3926" y2="54.6104" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint5_linear_13685_24724" x1="51.3926" y1="39.5448" x2="51.3926" y2="54.6104" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint6_linear_13685_24724" x1="51.3926" y1="39.5448" x2="51.3926" y2="54.6104" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint7_linear_13685_24724" x1="51.3927" y1="36.3847" x2="51.3923" y2="58.515" gradientUnits="userSpaceOnUse">
<stop stop-color="white" stop-opacity="0"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint8_linear_13685_24724" x1="51" y1="33.5" x2="51" y2="55.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#F6F8F9" stop-opacity="0.975"/>
<stop offset="1" stop-color="white" stop-opacity="0"/>
</linearGradient>
<clipPath id="clip0_13685_24724">
<rect x="34.4922" y="14.2925" width="33.801" height="44.1844" rx="6.02377" fill="white"/>
</clipPath>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 17 KiB

@@ -1,18 +1,61 @@
import { Button } from '@gouvfr-lasuite/cunningham-react';
import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
import img403 from '@/assets/icons/icon-403.png';
import { Box, Icon, Loading, StyledLink, Text } from '@/components';
import { ButtonAccessRequest } from '@/docs/doc-share';
import { useDocAccessRequests } from '@/docs/doc-share/api/useDocAccessRequest';
import ErrorAccessDeniedSvg from '@/assets/icons/Docs Locked.svg';
import BubbleTextSvg from '@/icons/bubble-text.svg';
import { Box, Loading, Text } from '@/components';
import { Role } from '@/docs/doc-management';
import {
useCreateDocAccessRequest,
useDocAccessRequests,
} from '@/docs/doc-share/api/useDocAccessRequest';
import HomeSvg from '@/icons/house-rounded.svg';
import { useSkeletonStore } from '@/features/skeletons';
const StyledButton = styled(Button)`
width: fit-content;
const errorActionStyles = `
display: flex;
height: var(--md, 24px);
padding: 0 var(--xxxs, 4px);
justify-content: center;
align-items: center;
gap: var(--xxxs, 4px);
color: var(--c--contextuals--content--semantic--neutral--tertiary);
background: none;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 12px;
font-weight: 500;
line-height: var(--line-height-xs, 16px);
text-decoration: none;
svg {
text-decoration: none;
}
.--docs--error-action-label {
text-decoration: none;
}
&:hover:not(:disabled) .--docs--error-action-label {
text-decoration: underline;
}
`;
const ErrorActionLinkStyled = styled(Link)`
${errorActionStyles}
`;
const RequestAccessButton = styled.button`
${errorActionStyles}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
`;
interface DocProps {
@@ -24,7 +67,6 @@ export const DocPage403 = ({ id }: DocProps) => {
const { setIsSkeletonVisible } = useSkeletonStore();
useEffect(() => {
// Ensure the skeleton overlay is hidden on 403 page
setIsSkeletonVisible(false);
}, [setIsSkeletonVisible]);
@@ -37,6 +79,8 @@ export const DocPage403 = ({ id }: DocProps) => {
page: 1,
});
const { mutate: createRequest } = useCreateDocAccessRequest();
const hasRequested = !!requests?.results.find(
(request) => request.document === id,
);
@@ -50,33 +94,41 @@ export const DocPage403 = ({ id }: DocProps) => {
<Head>
<meta name="robots" content="noindex" />
<title>
{t('Access Denied - Error 403')} - {t('Docs')}
{t('Access denied')} - {t('Docs')}
</title>
<meta
property="og:title"
content={`${t('Access Denied - Error 403')} - ${t('Docs')}`}
content={`${t('Access denied')} - ${t('Docs')}`}
key="title"
/>
</Head>
<Box
$align="center"
$margin="auto"
$gap="1rem"
$justify="center"
$flex="1"
$gap="var(--xxxs, 4px)"
$padding={{ bottom: '2rem' }}
>
<Image
src={img403}
alt={t('Image 403')}
width={300}
height={300}
style={{
maxWidth: '100%',
height: 'auto',
}}
/>
<ErrorAccessDeniedSvg width={102} height={72} aria-hidden="true" />
<Box $align="center" $gap="0.8rem">
<Text as="p" $textAlign="center" $maxWidth="350px" $theme="brand">
<Box $align="center" $gap="0">
<Text as="p" $weight="bold" $textAlign="center" $margin="0">
{t('Access denied')}
</Text>
<Text
as="p"
$textAlign="center"
$maxWidth="350px"
$margin="0"
$css="
color: var(--c--contextuals--content--semantic--neutral--secondary);
font-size: 12px;
font-weight: 400;
line-height: var(--line-height-xs, 16px);
margin-top: 4px;
"
>
{hasRequested
? t('Your access request for this document is pending.')
: t('Insufficient access rights to view the document.')}
@@ -85,31 +137,45 @@ export const DocPage403 = ({ id }: DocProps) => {
{docAccessError?.status === 404 && (
<Text
as="p"
$maxWidth="320px"
$textAlign="center"
$size="sm"
$margin={{ top: '0' }}
$maxWidth="320px"
$margin="0"
$css="
color: var(--c--contextuals--content--semantic--neutral--secondary);
font-size: 12px;
font-weight: 400;
line-height: var(--line-height-xs, 16px);
margin-top: 4px;
"
>
{t(
"You're currently viewing a sub-document. To gain access, please request permission from the main document.",
)}
</Text>
)}
</Box>
<Box $direction="row" $gap="0.7rem">
<StyledLink href="/">
<StyledButton
icon={<Icon iconName="house" $withThemeInherited />}
color="brand"
variant="secondary"
>
{t('Home')}
</StyledButton>
</StyledLink>
{docAccessError?.status !== 404 && (
<ButtonAccessRequest docId={id} />
)}
</Box>
<Box
$direction="row"
$align="flex-start"
$gap="0.5rem"
$css="margin-top: var(--base, 16px);"
>
<ErrorActionLinkStyled href="/">
<HomeSvg width={16} height={16} aria-hidden="true" />
<span className="--docs--error-action-label">{t('Home')}</span>
</ErrorActionLinkStyled>
{docAccessError?.status !== 404 && (
<RequestAccessButton
onClick={() => createRequest({ docId: id, role: Role.EDITOR })}
disabled={hasRequested}
>
<BubbleTextSvg width={16} height={16} aria-hidden="true" />
<span className="--docs--error-action-label">
{t('Request access')}
</span>
</RequestAccessButton>
)}
</Box>
</Box>
</>
+35 -23
View File
@@ -1,11 +1,10 @@
import { Button } from '@gouvfr-lasuite/cunningham-react';
import { Button } from '@openfun/cunningham-react';
import Head from 'next/head';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { ReactElement, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import img401 from '@/assets/icons/icon-401.png';
import ErrorAccessDeniedSvg from '@/assets/icons/Docs Locked.svg';
import { Box, Text } from '@/components';
import { gotoLogin, useAuth } from '@/features/auth';
import { PageLayout } from '@/layouts';
@@ -26,40 +25,53 @@ const Page: NextPageWithLayout = () => {
<>
<Head>
<meta name="robots" content="noindex" />
<title>{`${t('401 Unauthorized')} - ${t('Docs')}`}</title>
<title>{`${t('Access denied')} - ${t('Docs')}`}</title>
<meta
property="og:title"
content={`${t('401 Unauthorized')} - ${t('Docs')}`}
content={`${t('Access denied')} - ${t('Docs')}`}
key="title"
/>
</Head>
<Box
$align="center"
$margin="auto"
$gap="1rem"
$justify="center"
$flex="1"
$gap="var(--xxxs, 4px)"
$padding={{ bottom: '2rem' }}
>
<Text as="h1" $textAlign="center" className="sr-only">
{t('401 Unauthorized')} - {t('Docs')}
{t('Access denied')} - {t('Docs')}
</Text>
<Image
src={img401}
alt=""
width={300}
height={300}
style={{
maxWidth: '100%',
height: 'auto',
}}
/>
<ErrorAccessDeniedSvg width={102} height={72} aria-hidden="true" />
<Box $align="center" $gap="0.8rem">
<Text as="p" $textAlign="center" $maxWidth="350px" $theme="brand">
{t('Log in to access the document.')}
<Box $align="center" $gap="0">
<Text as="p" $weight="bold" $textAlign="center" $margin="0">
{t('Access denied')}
</Text>
<Button onClick={() => gotoLogin(false)} aria-label={t('Login')}>
{t('Login')}
<Text
as="p"
$textAlign="center"
$maxWidth="350px"
$margin="0"
$css="
color: var(--c--contextuals--content--semantic--neutral--secondary);
font-size: 12px;
font-weight: 400;
line-height: var(--line-height-xs, 16px);
margin-top: 4px;
"
>
{t('Sign in to access the document.')}
</Text>
</Box>
<Box $css="margin-top: var(--base, 16px);">
<Button
onClick={() => gotoLogin(false)}
aria-label={t('Sign in')}
>
{t('Sign in')}
</Button>
</Box>
</Box>