💄(frontend) redesign 403 access denied page

Align the 403 page with the new Figma error pages, keeping access request.
This commit is contained in:
Ovgodd
2026-09-25 12:37:02 +02:00
parent 141da6f938
commit 420d56e3ce
4 changed files with 181 additions and 43 deletions
+1
View File
@@ -9,6 +9,7 @@ and this project adheres to
### Added
- 💄(frontend) redesign 404 error standalone page #2696
- 💄(frontend) redesign 403 access denied page #2720
- ✨(frontend) duplicate with subdocuments #2584
- ✨(helm) allow disallowing search engine indexing per instance #2694
- 🐛(frontend) reduce PostHog volume from web vitals and opt_in spam #2701
@@ -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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 267 KiB

@@ -1,19 +1,15 @@
import { Button } from '@gouvfr-lasuite/ui-components';
import Head from 'next/head';
import Image from 'next/image';
import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
import { css } from 'styled-components';
import img403 from '@/assets/icons/icon-403.png';
import Error403Svg from '@/assets/icons/error-403.svg';
import BubbleTextSvg from '@/assets/icons/ui-kit/bubble-text.svg';
import { Box, Icon, Loading, StyledLink, Text } from '@/components';
import { ButtonAccessRequest } from '@/docs/doc-share';
import { useDocAccessRequests } from '@/docs/doc-share/api/useDocAccessRequest';
import { useSkeletonStore } from '@/features/skeletons';
const StyledButton = styled(Button)`
width: fit-content;
`;
import HomeSvg from '@/icons/house-rounded.svg';
interface DocProps {
id: string;
@@ -40,6 +36,7 @@ export const DocPage403 = ({ id }: DocProps) => {
const hasRequested = !!requests?.results.find(
(request) => request.document === id,
);
const isSubDocument = docAccessError?.status === 404;
if (isLoadingRequest) {
return <Loading />;
@@ -61,55 +58,93 @@ export const DocPage403 = ({ id }: DocProps) => {
<Box
$align="center"
$margin="auto"
$gap="1rem"
$padding={{ bottom: '2rem' }}
$gap="base"
$padding={{ horizontal: 'base', bottom: 'lg' }}
className="--docs--error-403"
>
<Image
src={img403}
alt={t('Image 403')}
width={300}
height={300}
style={{
maxWidth: '100%',
height: 'auto',
}}
/>
<Box $align="center" $gap="0.8rem">
<Text as="p" $textAlign="center" $maxWidth="350px" $theme="brand">
<Box $align="center" $gap="xxxs">
<Error403Svg aria-hidden="true" />
<Text
as="h1"
$size="md"
$weight="bold"
$textAlign="center"
$margin="0"
$theme="neutral"
$variation="primary"
>
{t('Access denied')}
</Text>
<Text
as="p"
$textAlign="center"
$maxWidth="228px"
$theme="neutral"
$variation="secondary"
$margin="0"
$size="xs"
>
{hasRequested
? t('Your access request for this document is pending.')
: t('Insufficient access rights to view the document.')}
</Text>
{docAccessError?.status === 404 && (
{isSubDocument && (
<Text
as="p"
$maxWidth="320px"
$textAlign="center"
$size="sm"
$margin={{ top: '0' }}
$maxWidth="228px"
$theme="neutral"
$variation="secondary"
$margin="0"
$size="xs"
>
{t(
"You're currently viewing a sub-document. To gain access, please request permission from the main document.",
)}
</Text>
)}
<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>
<Box $direction="row" $align="center" $gap="base">
<StyledLink
href="/"
$css={css`
display: flex;
align-items: center;
flex-direction: row;
gap: var(--c--globals--spacings--3xs);
outline: none;
&:focus-visible {
outline: 2px solid
var(--c--contextuals--content--semantic--neutral--tertiary);
border-radius: 1px;
outline-offset: var(--c--globals--spacings--st);
}
`}
>
<Icon
icon={<HomeSvg width={16} height={16} />}
$theme="neutral"
$variation="tertiary"
/>
<Text
$size="sm"
$weight={500}
$theme="neutral"
$variation="tertiary"
$margin="0"
>
{t('Home')}
</Text>
</StyledLink>
{!isSubDocument && (
<ButtonAccessRequest
docId={id}
color="brand"
variant="tertiary"
size="small"
icon={<BubbleTextSvg width={16} height={16} aria-hidden="true" />}
/>
)}
</Box>
</Box>
</>