feat: update support page design (#2579)
Konstantin Ullrich committed
Oct 13, 2025 at 17:09 UTC
8ebfafba383928fc210a00253f5789a6759d88f5
8 files changed
+242
-44
assets/images/support_chat.svg
new
+31
@@ -0,0 +1,31 @@
1
+<svg width="51" height="45" viewBox="0 0 51 45" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+<path d="M35.7734 10.0928C44.3288 10.9797 51 18.2101 51 27C51 30.3127 50.052 33.4038 48.4131 36.0176C48.0976 36.5207 47.9823 37.1295 48.1357 37.7031L49.6016 43.1758C49.8008 43.9193 49.1205 44.5996 48.377 44.4004L41.7959 42.6367C41.3452 42.5161 40.8683 42.5615 40.4365 42.7383C38.4512 43.5513 36.278 44 34 44C28.2445 44 23.1576 41.1393 20.082 36.7627C29.6643 35.2804 37 26.9975 37 17C37 14.5721 36.5658 12.2457 35.7734 10.0928Z" fill="#B34A4A"/>
3
+<path d="M35.7734 10.0928C44.3288 10.9797 51 18.2101 51 27C51 30.3127 50.052 33.4038 48.4131 36.0176C48.0976 36.5207 47.9823 37.1295 48.1357 37.7031L49.6016 43.1758C49.8008 43.9193 49.1205 44.5996 48.377 44.4004L41.7959 42.6367C41.3452 42.5161 40.8683 42.5615 40.4365 42.7383C38.4512 43.5513 36.278 44 34 44C28.2445 44 23.1576 41.1393 20.082 36.7627C29.6643 35.2804 37 26.9975 37 17C37 14.5721 36.5658 12.2457 35.7734 10.0928Z" fill="url(#paint0_linear_8339_13846)"/>
4
+<path d="M17 0C26.3888 0 34 7.61116 34 17C34 26.3888 26.3888 34 17 34C14.722 34 12.549 33.5511 10.5637 32.7381C10.1318 32.5612 9.65457 32.5163 9.20372 32.6371L2.62305 34.4004C1.87948 34.5996 1.1992 33.9193 1.39844 33.1758L2.86391 27.7035C3.01758 27.1297 2.90234 26.5209 2.58677 26.0176C0.947895 23.4038 0 20.3127 0 17C0 7.61116 7.61116 0 17 0Z" fill="#D9D9D9"/>
5
+<path d="M17 0C26.3888 0 34 7.61116 34 17C34 26.3888 26.3888 34 17 34C14.722 34 12.549 33.5511 10.5637 32.7381C10.1318 32.5612 9.65457 32.5163 9.20372 32.6371L2.62305 34.4004C1.87948 34.5996 1.1992 33.9193 1.39844 33.1758L2.86391 27.7035C3.01758 27.1297 2.90234 26.5209 2.58677 26.0176C0.947895 23.4038 0 20.3127 0 17C0 7.61116 7.61116 0 17 0Z" fill="url(#paint1_linear_8339_13846)"/>
6
+<path d="M17 0C26.3888 0 34 7.61116 34 17C34 26.3888 26.3888 34 17 34C14.722 34 12.549 33.5511 10.5637 32.7381C10.1318 32.5612 9.65457 32.5163 9.20372 32.6371L2.62305 34.4004C1.87948 34.5996 1.1992 33.9193 1.39844 33.1758L2.86391 27.7035C3.01758 27.1297 2.90234 26.5209 2.58677 26.0176C0.947895 23.4038 0 20.3127 0 17C0 7.61116 7.61116 0 17 0Z" fill="url(#paint2_linear_8339_13846)"/>
7
+<path d="M17 16C15.7625 16 14.7031 15.5594 13.8219 14.6781C12.9406 13.7969 12.5 12.7375 12.5 11.5C12.5 10.2625 12.9406 9.20312 13.8219 8.32188C14.7031 7.44063 15.7625 7 17 7C18.2375 7 19.2969 7.44063 20.1781 8.32188C21.0594 9.20312 21.5 10.2625 21.5 11.5C21.5 12.7375 21.0594 13.7969 20.1781 14.6781C19.2969 15.5594 18.2375 16 17 16ZM9 25C8.44772 25 8 24.5523 8 24V21.85C8 21.2125 8.16406 20.6266 8.49219 20.0922C8.82031 19.5578 9.25625 19.15 9.8 18.8688C10.9625 18.2875 12.1438 17.8516 13.3438 17.5609C14.5437 17.2703 15.7625 17.125 17 17.125C18.2375 17.125 19.4563 17.2703 20.6562 17.5609C21.8562 17.8516 23.0375 18.2875 24.2 18.8688C24.7438 19.15 25.1797 19.5578 25.5078 20.0922C25.8359 20.6266 26 21.2125 26 21.85V24C26 24.5523 25.5523 25 25 25H9Z" fill="url(#paint3_linear_8339_13846)"/>
8
+<path d="M17 16C15.7625 16 14.7031 15.5594 13.8219 14.6781C12.9406 13.7969 12.5 12.7375 12.5 11.5C12.5 10.2625 12.9406 9.20312 13.8219 8.32188C14.7031 7.44063 15.7625 7 17 7C18.2375 7 19.2969 7.44063 20.1781 8.32188C21.0594 9.20312 21.5 10.2625 21.5 11.5C21.5 12.7375 21.0594 13.7969 20.1781 14.6781C19.2969 15.5594 18.2375 16 17 16ZM9 25C8.44772 25 8 24.5523 8 24V21.85C8 21.2125 8.16406 20.6266 8.49219 20.0922C8.82031 19.5578 9.25625 19.15 9.8 18.8688C10.9625 18.2875 12.1438 17.8516 13.3438 17.5609C14.5437 17.2703 15.7625 17.125 17 17.125C18.2375 17.125 19.4563 17.2703 20.6562 17.5609C21.8562 17.8516 23.0375 18.2875 24.2 18.8688C24.7438 19.15 25.1797 19.5578 25.5078 20.0922C25.8359 20.6266 26 21.2125 26 21.85V24C26 24.5523 25.5523 25 25 25H9Z" fill="url(#paint4_linear_8339_13846)"/>
9
+<defs>
10
+<linearGradient id="paint0_linear_8339_13846" x1="35.541" y1="10.0928" x2="35.541" y2="44.4355" gradientUnits="userSpaceOnUse">
11
+<stop stop-color="#4EBEFF"/>
12
+<stop offset="1" stop-color="#4A74FF"/>
13
+</linearGradient>
14
+<linearGradient id="paint1_linear_8339_13846" x1="17" y1="0" x2="17" y2="34.4355" gradientUnits="userSpaceOnUse">
15
+<stop stop-color="#EFEFF8"/>
16
+<stop offset="1" stop-color="#A2A2CC"/>
17
+</linearGradient>
18
+<linearGradient id="paint2_linear_8339_13846" x1="17" y1="0" x2="17" y2="34.4355" gradientUnits="userSpaceOnUse">
19
+<stop stop-color="#594E63"/>
20
+<stop offset="1" stop-color="#312938"/>
21
+</linearGradient>
22
+<linearGradient id="paint3_linear_8339_13846" x1="17" y1="7" x2="17" y2="25" gradientUnits="userSpaceOnUse">
23
+<stop stop-color="#594E63"/>
24
+<stop offset="1" stop-color="#312938"/>
25
+</linearGradient>
26
+<linearGradient id="paint4_linear_8339_13846" x1="17" y1="7" x2="17" y2="25" gradientUnits="userSpaceOnUse">
27
+<stop stop-color="#EFEFF8"/>
28
+<stop offset="1" stop-color="#A2A2CC"/>
29
+</linearGradient>
30
+</defs>
31
+</svg>
assets/images/support_chat_dark.svg
new
+21
@@ -0,0 +1,21 @@
1
+<svg width="51" height="45" viewBox="0 0 51 45" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+<path d="M35.7734 10.0928C44.3288 10.9797 51 18.2101 51 27C51 30.3127 50.052 33.4038 48.4131 36.0176C48.0976 36.5207 47.9823 37.1295 48.1357 37.7031L49.6016 43.1758C49.8008 43.9193 49.1205 44.5996 48.377 44.4004L41.7959 42.6367C41.3452 42.5161 40.8683 42.5615 40.4365 42.7383C38.4512 43.5513 36.278 44 34 44C28.2445 44 23.1576 41.1393 20.082 36.7627C29.6643 35.2804 37 26.9975 37 17C37 14.5721 36.5658 12.2457 35.7734 10.0928Z" fill="#B34A4A"/>
3
+<path d="M35.7734 10.0928C44.3288 10.9797 51 18.2101 51 27C51 30.3127 50.052 33.4038 48.4131 36.0176C48.0976 36.5207 47.9823 37.1295 48.1357 37.7031L49.6016 43.1758C49.8008 43.9193 49.1205 44.5996 48.377 44.4004L41.7959 42.6367C41.3452 42.5161 40.8683 42.5615 40.4365 42.7383C38.4512 43.5513 36.278 44 34 44C28.2445 44 23.1576 41.1393 20.082 36.7627C29.6643 35.2804 37 26.9975 37 17C37 14.5721 36.5658 12.2457 35.7734 10.0928Z" fill="url(#paint0_linear_8339_13820)"/>
4
+<path d="M17 0C26.3888 0 34 7.61116 34 17C34 26.3888 26.3888 34 17 34C14.722 34 12.549 33.5511 10.5637 32.7381C10.1318 32.5612 9.65457 32.5163 9.20372 32.6371L2.62305 34.4004C1.87948 34.5996 1.1992 33.9193 1.39844 33.1758L2.86391 27.7035C3.01758 27.1297 2.90234 26.5209 2.58677 26.0176C0.947895 23.4038 0 20.3127 0 17C0 7.61116 7.61116 0 17 0Z" fill="#D9D9D9"/>
5
+<path d="M17 0C26.3888 0 34 7.61116 34 17C34 26.3888 26.3888 34 17 34C14.722 34 12.549 33.5511 10.5637 32.7381C10.1318 32.5612 9.65457 32.5163 9.20372 32.6371L2.62305 34.4004C1.87948 34.5996 1.1992 33.9193 1.39844 33.1758L2.86391 27.7035C3.01758 27.1297 2.90234 26.5209 2.58677 26.0176C0.947895 23.4038 0 20.3127 0 17C0 7.61116 7.61116 0 17 0Z" fill="url(#paint1_linear_8339_13820)"/>
6
+<path d="M17 16C15.7625 16 14.7031 15.5594 13.8219 14.6781C12.9406 13.7969 12.5 12.7375 12.5 11.5C12.5 10.2625 12.9406 9.20312 13.8219 8.32188C14.7031 7.44063 15.7625 7 17 7C18.2375 7 19.2969 7.44063 20.1781 8.32188C21.0594 9.20312 21.5 10.2625 21.5 11.5C21.5 12.7375 21.0594 13.7969 20.1781 14.6781C19.2969 15.5594 18.2375 16 17 16ZM9 25C8.44772 25 8 24.5523 8 24V21.85C8 21.2125 8.16406 20.6266 8.49219 20.0922C8.82031 19.5578 9.25625 19.15 9.8 18.8688C10.9625 18.2875 12.1437 17.8516 13.3438 17.5609C14.5438 17.2703 15.7625 17.125 17 17.125C18.2375 17.125 19.4563 17.2703 20.6562 17.5609C21.8562 17.8516 23.0375 18.2875 24.2 18.8688C24.7438 19.15 25.1797 19.5578 25.5078 20.0922C25.8359 20.6266 26 21.2125 26 21.85V24C26 24.5523 25.5523 25 25 25H9Z" fill="url(#paint2_linear_8339_13820)"/>
7
+<defs>
8
+<linearGradient id="paint0_linear_8339_13820" x1="35.541" y1="10.0928" x2="35.541" y2="44.4355" gradientUnits="userSpaceOnUse">
9
+<stop stop-color="#4EBEFF"/>
10
+<stop offset="1" stop-color="#4A74FF"/>
11
+</linearGradient>
12
+<linearGradient id="paint1_linear_8339_13820" x1="17" y1="0" x2="17" y2="34.4355" gradientUnits="userSpaceOnUse">
13
+<stop stop-color="#EFEFF8"/>
14
+<stop offset="1" stop-color="#A2A2CC"/>
15
+</linearGradient>
16
+<linearGradient id="paint2_linear_8339_13820" x1="17" y1="7" x2="17" y2="25" gradientUnits="userSpaceOnUse">
17
+<stop stop-color="#594E63"/>
18
+<stop offset="1" stop-color="#312938"/>
19
+</linearGradient>
20
+</defs>
21
+</svg>
assets/images/support_docs.svg
new
+38
@@ -0,0 +1,38 @@
1
+<svg width="44" height="54" viewBox="0 0 44 54" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+<mask id="mask0_8339_13859" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="37" height="46">
3
+<path d="M20.0293 0C21.2956 2.84666e-05 22.5146 0.480729 23.4404 1.34473L35.4111 12.5176C36.4243 13.4632 37 14.7869 37 16.1729V29.5635C34.6209 27.1993 31.6869 26 28.3125 26C24.9235 26 21.9783 27.2092 19.5938 29.5938C17.2092 31.9783 16 34.9235 16 38.3125C16 41.229 16.8975 43.8153 18.667 46H5C2.23858 46 0 43.7614 0 41V5C0 2.23858 2.23858 2.57711e-07 5 0H20.0293Z" fill="url(#paint0_linear_8339_13859)"/>
4
+</mask>
5
+<g mask="url(#mask0_8339_13859)">
6
+<path d="M0 46V0H22L37 14V46H0Z" fill="url(#paint1_linear_8339_13859)"/>
7
+<path d="M0 46V0H22L37 14V46H0Z" fill="url(#paint2_linear_8339_13859)"/>
8
+<path d="M0 46V0H22L37 14V46H0Z" fill="url(#paint3_linear_8339_13859)"/>
9
+<path d="M21 12V-1L38 15H24C22.3431 15 21 13.6569 21 12Z" fill="url(#paint4_linear_8339_13859)"/>
10
+</g>
11
+<path d="M28.3125 44.0417C29.9167 44.0417 31.2726 43.4878 32.3802 42.3802C33.4878 41.2726 34.0417 39.9167 34.0417 38.3125C34.0417 36.7083 33.4878 35.3524 32.3802 34.2448C31.2726 33.1372 29.9167 32.5833 28.3125 32.5833C26.7083 32.5833 25.3524 33.1372 24.2448 34.2448C23.1372 35.3524 22.5833 36.7083 22.5833 38.3125C22.5833 39.9167 23.1372 41.2726 24.2448 42.3802C25.3524 43.4878 26.7083 44.0417 28.3125 44.0417ZM41.5967 51.6116C40.7137 52.4947 39.283 52.498 38.3959 51.6191L33.8125 47.0781C33.0104 47.5747 32.1415 47.9566 31.2057 48.224C30.27 48.4913 29.3056 48.625 28.3125 48.625C25.4479 48.625 23.013 47.6224 21.0078 45.6172C19.0026 43.612 18 41.1771 18 38.3125C18 35.4479 19.0026 33.013 21.0078 31.0078C23.013 29.0026 25.4479 28 28.3125 28C31.1771 28 33.612 29.0026 35.6172 31.0078C37.6224 33.013 38.625 35.4479 38.625 38.3125C38.625 39.3438 38.4818 40.3273 38.1953 41.263C37.9089 42.1988 37.5174 43.0677 37.0208 43.8698L41.5892 48.3959C42.4822 49.2806 42.4856 50.7228 41.5967 51.6116Z" fill="url(#paint5_linear_8339_13859)"/>
12
+<defs>
13
+<linearGradient id="paint0_linear_8339_13859" x1="18.5" y1="0" x2="18.5" y2="46" gradientUnits="userSpaceOnUse">
14
+<stop stop-color="#EFEFF8"/>
15
+<stop offset="1" stop-color="#CECEE2"/>
16
+</linearGradient>
17
+<linearGradient id="paint1_linear_8339_13859" x1="18.5" y1="0" x2="18.5" y2="46" gradientUnits="userSpaceOnUse">
18
+<stop stop-color="#EFEFF8"/>
19
+<stop offset="1" stop-color="#CECEE2"/>
20
+</linearGradient>
21
+<linearGradient id="paint2_linear_8339_13859" x1="18.5" y1="0" x2="18.5" y2="46" gradientUnits="userSpaceOnUse">
22
+<stop stop-color="#EFEFF8"/>
23
+<stop offset="1" stop-color="#A2A2CC"/>
24
+</linearGradient>
25
+<linearGradient id="paint3_linear_8339_13859" x1="18.5" y1="0" x2="18.5" y2="46" gradientUnits="userSpaceOnUse">
26
+<stop stop-color="#594E63"/>
27
+<stop offset="1" stop-color="#312938"/>
28
+</linearGradient>
29
+<linearGradient id="paint4_linear_8339_13859" x1="30.0667" y1="5.28571" x2="21.4955" y2="13.7854" gradientUnits="userSpaceOnUse">
30
+<stop stop-color="#A397AE"/>
31
+<stop offset="1" stop-color="#6B5A7B"/>
32
+</linearGradient>
33
+<linearGradient id="paint5_linear_8339_13859" x1="30.6042" y1="28" x2="30.6042" y2="53.2083" gradientUnits="userSpaceOnUse">
34
+<stop stop-color="#4EBEFF"/>
35
+<stop offset="1" stop-color="#4A74FF"/>
36
+</linearGradient>
37
+</defs>
38
+</svg>
assets/images/support_docs_dark.svg
new
+33
@@ -0,0 +1,33 @@
1
+<svg width="44" height="54" viewBox="0 0 44 54" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+<mask id="mask0_8339_13833" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="37" height="46">
3
+<path d="M20.0293 0C21.2956 2.84666e-05 22.5146 0.480729 23.4404 1.34473L35.4111 12.5176C36.4243 13.4632 37 14.7869 37 16.1729V29.5635C34.6209 27.1993 31.6869 26 28.3125 26C24.9235 26 21.9783 27.2092 19.5938 29.5938C17.2092 31.9783 16 34.9235 16 38.3125C16 41.229 16.8975 43.8153 18.667 46H5C2.23858 46 0 43.7614 0 41V5C0 2.23858 2.23858 2.57711e-07 5 0H20.0293Z" fill="url(#paint0_linear_8339_13833)"/>
4
+</mask>
5
+<g mask="url(#mask0_8339_13833)">
6
+<path d="M0 46V0H22L37 14V46H0Z" fill="url(#paint1_linear_8339_13833)"/>
7
+<path d="M0 46V0H22L37 14V46H0Z" fill="url(#paint2_linear_8339_13833)"/>
8
+<path d="M21 12V-1L38 15H24C22.3431 15 21 13.6569 21 12Z" fill="url(#paint3_linear_8339_13833)"/>
9
+</g>
10
+<path d="M28.3125 44.0417C29.9167 44.0417 31.2726 43.4878 32.3802 42.3802C33.4878 41.2726 34.0417 39.9167 34.0417 38.3125C34.0417 36.7083 33.4878 35.3524 32.3802 34.2448C31.2726 33.1372 29.9167 32.5833 28.3125 32.5833C26.7083 32.5833 25.3524 33.1372 24.2448 34.2448C23.1372 35.3524 22.5833 36.7083 22.5833 38.3125C22.5833 39.9167 23.1372 41.2726 24.2448 42.3802C25.3524 43.4878 26.7083 44.0417 28.3125 44.0417ZM41.5967 51.6116C40.7137 52.4947 39.283 52.498 38.3959 51.6191L33.8125 47.0781C33.0104 47.5747 32.1415 47.9566 31.2057 48.224C30.27 48.4913 29.3056 48.625 28.3125 48.625C25.4479 48.625 23.013 47.6224 21.0078 45.6172C19.0026 43.612 18 41.1771 18 38.3125C18 35.4479 19.0026 33.013 21.0078 31.0078C23.013 29.0026 25.4479 28 28.3125 28C31.1771 28 33.612 29.0026 35.6172 31.0078C37.6224 33.013 38.625 35.4479 38.625 38.3125C38.625 39.3438 38.4818 40.3273 38.1953 41.263C37.9089 42.1988 37.5174 43.0677 37.0208 43.8698L41.5892 48.3959C42.4822 49.2806 42.4856 50.7228 41.5967 51.6116Z" fill="url(#paint4_linear_8339_13833)"/>
11
+<defs>
12
+<linearGradient id="paint0_linear_8339_13833" x1="18.5" y1="0" x2="18.5" y2="46" gradientUnits="userSpaceOnUse">
13
+<stop stop-color="#EFEFF8"/>
14
+<stop offset="1" stop-color="#CECEE2"/>
15
+</linearGradient>
16
+<linearGradient id="paint1_linear_8339_13833" x1="18.5" y1="0" x2="18.5" y2="46" gradientUnits="userSpaceOnUse">
17
+<stop stop-color="#EFEFF8"/>
18
+<stop offset="1" stop-color="#CECEE2"/>
19
+</linearGradient>
20
+<linearGradient id="paint2_linear_8339_13833" x1="18.5" y1="0" x2="18.5" y2="46" gradientUnits="userSpaceOnUse">
21
+<stop stop-color="#EFEFF8"/>
22
+<stop offset="1" stop-color="#A2A2CC"/>
23
+</linearGradient>
24
+<linearGradient id="paint3_linear_8339_13833" x1="30.0667" y1="5.28571" x2="21.4955" y2="13.7854" gradientUnits="userSpaceOnUse">
25
+<stop stop-color="#CECEE2"/>
26
+<stop offset="1" stop-color="#ACACD9"/>
27
+</linearGradient>
28
+<linearGradient id="paint4_linear_8339_13833" x1="30.6042" y1="28" x2="30.6042" y2="53.2083" gradientUnits="userSpaceOnUse">
29
+<stop stop-color="#4EBEFF"/>
30
+<stop offset="1" stop-color="#4A74FF"/>
31
+</linearGradient>
32
+</defs>
33
+</svg>
assets/images/support_links.svg
new
+39
@@ -0,0 +1,39 @@
1
+<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+<path d="M32.3613 35.6025C33.2562 36.4975 33.2562 37.9485 32.3613 38.8434L27.4999 43.7048C25.2583 45.9464 22.5575 47.0672 19.3976 47.0672C16.2378 47.0672 13.537 45.9464 11.2954 43.7048C9.05375 41.4632 7.93294 38.7624 7.93294 35.6025C7.93294 32.4427 9.05375 29.7419 11.2954 27.5003L16.1567 22.6389C17.0517 21.744 18.5027 21.744 19.3976 22.6389C20.2926 23.5339 20.2926 24.9849 19.3976 25.8798L14.5363 30.7412C13.1859 32.0916 12.5107 33.712 12.5107 35.6025C12.5107 37.4931 13.1859 39.1135 14.5363 40.4639C15.8867 41.8143 17.5071 42.4895 19.3976 42.4895C21.2882 42.4895 22.9086 41.8143 24.259 40.4639L29.1204 35.6025C30.0153 34.7076 31.4663 34.7076 32.3613 35.6025ZM38.8431 32.3616C37.9481 33.2566 36.4971 33.2566 35.6022 32.3616C34.7072 31.4667 34.7072 30.0157 35.6022 29.1207L40.4635 24.2594C41.8139 22.909 42.4891 21.2885 42.4891 19.398C42.4891 17.5075 41.8139 15.887 40.4635 14.5366C39.1132 13.1863 37.4927 12.5111 35.6022 12.5111C33.7116 12.5111 32.0912 13.1863 30.7408 14.5366L25.8795 19.398C24.9845 20.293 23.5335 20.293 22.6386 19.398C21.7436 18.5031 21.7436 17.0521 22.6386 16.1571L27.4999 11.2957C29.7415 9.05412 32.4423 7.9333 35.6022 7.9333C38.7621 7.9333 41.4628 9.05412 43.7044 11.2957C45.9461 13.5374 47.0669 16.2381 47.0669 19.398C47.0669 22.5579 45.9461 25.2586 43.7044 27.5003L38.8431 32.3616Z" fill="url(#paint0_linear_8339_13877)"/>
3
+<path d="M32.3613 35.6025C33.2562 36.4975 33.2562 37.9485 32.3613 38.8434L27.4999 43.7048C25.2583 45.9464 22.5575 47.0672 19.3976 47.0672C16.2378 47.0672 13.537 45.9464 11.2954 43.7048C9.05375 41.4632 7.93294 38.7624 7.93294 35.6025C7.93294 32.4427 9.05375 29.7419 11.2954 27.5003L16.1567 22.6389C17.0517 21.744 18.5027 21.744 19.3976 22.6389C20.2926 23.5339 20.2926 24.9849 19.3976 25.8798L14.5363 30.7412C13.1859 32.0916 12.5107 33.712 12.5107 35.6025C12.5107 37.4931 13.1859 39.1135 14.5363 40.4639C15.8867 41.8143 17.5071 42.4895 19.3976 42.4895C21.2882 42.4895 22.9086 41.8143 24.259 40.4639L29.1204 35.6025C30.0153 34.7076 31.4663 34.7076 32.3613 35.6025ZM38.8431 32.3616C37.9481 33.2566 36.4971 33.2566 35.6022 32.3616C34.7072 31.4667 34.7072 30.0157 35.6022 29.1207L40.4635 24.2594C41.8139 22.909 42.4891 21.2885 42.4891 19.398C42.4891 17.5075 41.8139 15.887 40.4635 14.5366C39.1132 13.1863 37.4927 12.5111 35.6022 12.5111C33.7116 12.5111 32.0912 13.1863 30.7408 14.5366L25.8795 19.398C24.9845 20.293 23.5335 20.293 22.6386 19.398C21.7436 18.5031 21.7436 17.0521 22.6386 16.1571L27.4999 11.2957C29.7415 9.05412 32.4423 7.9333 35.6022 7.9333C38.7621 7.9333 41.4628 9.05412 43.7044 11.2957C45.9461 13.5374 47.0669 16.2381 47.0669 19.398C47.0669 22.5579 45.9461 25.2586 43.7044 27.5003L38.8431 32.3616Z" fill="url(#paint1_linear_8339_13877)"/>
4
+<path d="M32.3613 35.6025C33.2562 36.4975 33.2562 37.9485 32.3613 38.8434L27.4999 43.7048C25.2583 45.9464 22.5575 47.0672 19.3976 47.0672C16.2378 47.0672 13.537 45.9464 11.2954 43.7048C9.05375 41.4632 7.93294 38.7624 7.93294 35.6025C7.93294 32.4427 9.05375 29.7419 11.2954 27.5003L16.1567 22.6389C17.0517 21.744 18.5027 21.744 19.3976 22.6389C20.2926 23.5339 20.2926 24.9849 19.3976 25.8798L14.5363 30.7412C13.1859 32.0916 12.5107 33.712 12.5107 35.6025C12.5107 37.4931 13.1859 39.1135 14.5363 40.4639C15.8867 41.8143 17.5071 42.4895 19.3976 42.4895C21.2882 42.4895 22.9086 41.8143 24.259 40.4639L29.1204 35.6025C30.0153 34.7076 31.4663 34.7076 32.3613 35.6025ZM38.8431 32.3616C37.9481 33.2566 36.4971 33.2566 35.6022 32.3616C34.7072 31.4667 34.7072 30.0157 35.6022 29.1207L40.4635 24.2594C41.8139 22.909 42.4891 21.2885 42.4891 19.398C42.4891 17.5075 41.8139 15.887 40.4635 14.5366C39.1132 13.1863 37.4927 12.5111 35.6022 12.5111C33.7116 12.5111 32.0912 13.1863 30.7408 14.5366L25.8795 19.398C24.9845 20.293 23.5335 20.293 22.6386 19.398C21.7436 18.5031 21.7436 17.0521 22.6386 16.1571L27.4999 11.2957C29.7415 9.05412 32.4423 7.9333 35.6022 7.9333C38.7621 7.9333 41.4628 9.05412 43.7044 11.2957C45.9461 13.5374 47.0669 16.2381 47.0669 19.398C47.0669 22.5579 45.9461 25.2586 43.7044 27.5003L38.8431 32.3616Z" fill="url(#paint2_linear_8339_13877)"/>
5
+<path d="M30.7406 21.0182L21.0179 30.7409C20.123 31.6358 20.123 33.0868 21.0179 33.9818C21.9129 34.8767 23.3639 34.8767 24.2588 33.9818L33.9815 24.2591C34.8765 23.3641 34.8765 21.9131 33.9815 21.0182C33.0866 20.1232 31.6356 20.1232 30.7406 21.0182Z" fill="url(#paint3_linear_8339_13877)"/>
6
+<path d="M30.7406 21.0182L21.0179 30.7409C20.123 31.6358 20.123 33.0868 21.0179 33.9818C21.9129 34.8767 23.3639 34.8767 24.2588 33.9818L33.9815 24.2591C34.8765 23.3641 34.8765 21.9131 33.9815 21.0182C33.0866 20.1232 31.6356 20.1232 30.7406 21.0182Z" fill="url(#paint4_linear_8339_13877)"/>
7
+<path d="M30.7406 21.0182L21.0179 30.7409C20.123 31.6358 20.123 33.0868 21.0179 33.9818C21.9129 34.8767 23.3639 34.8767 24.2588 33.9818L33.9815 24.2591C34.8765 23.3641 34.8765 21.9131 33.9815 21.0182C33.0866 20.1232 31.6356 20.1232 30.7406 21.0182Z" fill="url(#paint5_linear_8339_13877)"/>
8
+<path d="M30.7406 21.0182L21.0179 30.7409C20.123 31.6358 20.123 33.0868 21.0179 33.9818C21.9129 34.8767 23.3639 34.8767 24.2588 33.9818L33.9815 24.2591C34.8765 23.3641 34.8765 21.9131 33.9815 21.0182C33.0866 20.1232 31.6356 20.1232 30.7406 21.0182Z" fill="url(#paint6_linear_8339_13877)"/>
9
+<defs>
10
+<linearGradient id="paint0_linear_8339_13877" x1="45.0001" y1="9.5" x2="10.5001" y2="44" gradientUnits="userSpaceOnUse">
11
+<stop stop-color="#E3E3E3"/>
12
+<stop offset="1" stop-color="#7D7D7D"/>
13
+</linearGradient>
14
+<linearGradient id="paint1_linear_8339_13877" x1="46.5001" y1="8.5" x2="13.5001" y2="43.5" gradientUnits="userSpaceOnUse">
15
+<stop stop-color="#EFEFF8"/>
16
+<stop offset="1" stop-color="#A2A2CC"/>
17
+</linearGradient>
18
+<linearGradient id="paint2_linear_8339_13877" x1="46.2507" y1="8.75065" x2="10.9301" y2="44.6964" gradientUnits="userSpaceOnUse">
19
+<stop stop-color="#4EBEFF"/>
20
+<stop offset="1" stop-color="#4A74FF"/>
21
+</linearGradient>
22
+<linearGradient id="paint3_linear_8339_13877" x1="44.9999" y1="9.5" x2="10.4999" y2="44" gradientUnits="userSpaceOnUse">
23
+<stop stop-color="#E3E3E3"/>
24
+<stop offset="1" stop-color="#7D7D7D"/>
25
+</linearGradient>
26
+<linearGradient id="paint4_linear_8339_13877" x1="34.9999" y1="20" x2="20.9999" y2="34.5" gradientUnits="userSpaceOnUse">
27
+<stop stop-color="#4EBEFF"/>
28
+<stop offset="1" stop-color="#4A74FF"/>
29
+</linearGradient>
30
+<linearGradient id="paint5_linear_8339_13877" x1="35.0998" y1="19.8999" x2="22.3329" y2="34.2626" gradientUnits="userSpaceOnUse">
31
+<stop stop-color="#EFEFF8"/>
32
+<stop offset="1" stop-color="#A2A2CC"/>
33
+</linearGradient>
34
+<linearGradient id="paint6_linear_8339_13877" x1="32.4999" y1="21" x2="19.9999" y2="33.5" gradientUnits="userSpaceOnUse">
35
+<stop stop-color="#594E63"/>
36
+<stop offset="1" stop-color="#312938"/>
37
+</linearGradient>
38
+</defs>
39
+</svg>
assets/images/support_links_dark.svg
new
+34
@@ -0,0 +1,34 @@
1
+<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+<path d="M32.3613 35.6025C33.2562 36.4975 33.2562 37.9485 32.3613 38.8434L27.4999 43.7048C25.2583 45.9464 22.5575 47.0672 19.3976 47.0672C16.2378 47.0672 13.537 45.9464 11.2954 43.7048C9.05375 41.4632 7.93294 38.7624 7.93294 35.6025C7.93294 32.4427 9.05375 29.7419 11.2954 27.5003L16.1567 22.6389C17.0517 21.744 18.5027 21.744 19.3976 22.6389C20.2926 23.5339 20.2926 24.9849 19.3976 25.8798L14.5363 30.7412C13.1859 32.0916 12.5107 33.712 12.5107 35.6025C12.5107 37.4931 13.1859 39.1135 14.5363 40.4639C15.8867 41.8143 17.5071 42.4895 19.3976 42.4895C21.2882 42.4895 22.9086 41.8143 24.259 40.4639L29.1204 35.6025C30.0153 34.7076 31.4663 34.7076 32.3613 35.6025ZM38.8431 32.3616C37.9481 33.2566 36.4971 33.2566 35.6022 32.3616C34.7072 31.4667 34.7072 30.0157 35.6022 29.1207L40.4635 24.2594C41.8139 22.909 42.4891 21.2885 42.4891 19.398C42.4891 17.5075 41.8139 15.887 40.4635 14.5366C39.1132 13.1863 37.4927 12.5111 35.6022 12.5111C33.7116 12.5111 32.0912 13.1863 30.7408 14.5366L25.8795 19.398C24.9845 20.293 23.5335 20.293 22.6386 19.398C21.7436 18.5031 21.7436 17.0521 22.6386 16.1571L27.4999 11.2957C29.7415 9.05412 32.4423 7.9333 35.6022 7.9333C38.7621 7.9333 41.4628 9.05412 43.7044 11.2957C45.9461 13.5374 47.0669 16.2381 47.0669 19.398C47.0669 22.5579 45.9461 25.2586 43.7044 27.5003L38.8431 32.3616Z" fill="url(#paint0_linear_8339_13876)"/>
3
+<path d="M32.3613 35.6025C33.2562 36.4975 33.2562 37.9485 32.3613 38.8434L27.4999 43.7048C25.2583 45.9464 22.5575 47.0672 19.3976 47.0672C16.2378 47.0672 13.537 45.9464 11.2954 43.7048C9.05375 41.4632 7.93294 38.7624 7.93294 35.6025C7.93294 32.4427 9.05375 29.7419 11.2954 27.5003L16.1567 22.6389C17.0517 21.744 18.5027 21.744 19.3976 22.6389C20.2926 23.5339 20.2926 24.9849 19.3976 25.8798L14.5363 30.7412C13.1859 32.0916 12.5107 33.712 12.5107 35.6025C12.5107 37.4931 13.1859 39.1135 14.5363 40.4639C15.8867 41.8143 17.5071 42.4895 19.3976 42.4895C21.2882 42.4895 22.9086 41.8143 24.259 40.4639L29.1204 35.6025C30.0153 34.7076 31.4663 34.7076 32.3613 35.6025ZM38.8431 32.3616C37.9481 33.2566 36.4971 33.2566 35.6022 32.3616C34.7072 31.4667 34.7072 30.0157 35.6022 29.1207L40.4635 24.2594C41.8139 22.909 42.4891 21.2885 42.4891 19.398C42.4891 17.5075 41.8139 15.887 40.4635 14.5366C39.1132 13.1863 37.4927 12.5111 35.6022 12.5111C33.7116 12.5111 32.0912 13.1863 30.7408 14.5366L25.8795 19.398C24.9845 20.293 23.5335 20.293 22.6386 19.398C21.7436 18.5031 21.7436 17.0521 22.6386 16.1571L27.4999 11.2957C29.7415 9.05412 32.4423 7.9333 35.6022 7.9333C38.7621 7.9333 41.4628 9.05412 43.7044 11.2957C45.9461 13.5374 47.0669 16.2381 47.0669 19.398C47.0669 22.5579 45.9461 25.2586 43.7044 27.5003L38.8431 32.3616Z" fill="url(#paint1_linear_8339_13876)"/>
4
+<path d="M32.3613 35.6025C33.2562 36.4975 33.2562 37.9485 32.3613 38.8434L27.4999 43.7048C25.2583 45.9464 22.5575 47.0672 19.3976 47.0672C16.2378 47.0672 13.537 45.9464 11.2954 43.7048C9.05375 41.4632 7.93294 38.7624 7.93294 35.6025C7.93294 32.4427 9.05375 29.7419 11.2954 27.5003L16.1567 22.6389C17.0517 21.744 18.5027 21.744 19.3976 22.6389C20.2926 23.5339 20.2926 24.9849 19.3976 25.8798L14.5363 30.7412C13.1859 32.0916 12.5107 33.712 12.5107 35.6025C12.5107 37.4931 13.1859 39.1135 14.5363 40.4639C15.8867 41.8143 17.5071 42.4895 19.3976 42.4895C21.2882 42.4895 22.9086 41.8143 24.259 40.4639L29.1204 35.6025C30.0153 34.7076 31.4663 34.7076 32.3613 35.6025ZM38.8431 32.3616C37.9481 33.2566 36.4971 33.2566 35.6022 32.3616C34.7072 31.4667 34.7072 30.0157 35.6022 29.1207L40.4635 24.2594C41.8139 22.909 42.4891 21.2885 42.4891 19.398C42.4891 17.5075 41.8139 15.887 40.4635 14.5366C39.1132 13.1863 37.4927 12.5111 35.6022 12.5111C33.7116 12.5111 32.0912 13.1863 30.7408 14.5366L25.8795 19.398C24.9845 20.293 23.5335 20.293 22.6386 19.398C21.7436 18.5031 21.7436 17.0521 22.6386 16.1571L27.4999 11.2957C29.7415 9.05412 32.4423 7.9333 35.6022 7.9333C38.7621 7.9333 41.4628 9.05412 43.7044 11.2957C45.9461 13.5374 47.0669 16.2381 47.0669 19.398C47.0669 22.5579 45.9461 25.2586 43.7044 27.5003L38.8431 32.3616Z" fill="url(#paint2_linear_8339_13876)"/>
5
+<path d="M30.7406 21.0182L21.0179 30.7409C20.123 31.6358 20.123 33.0868 21.0179 33.9818C21.9129 34.8767 23.3639 34.8767 24.2588 33.9818L33.9815 24.2591C34.8765 23.3641 34.8765 21.9131 33.9815 21.0182C33.0866 20.1232 31.6356 20.1232 30.7406 21.0182Z" fill="url(#paint3_linear_8339_13876)"/>
6
+<path d="M30.7406 21.0182L21.0179 30.7409C20.123 31.6358 20.123 33.0868 21.0179 33.9818C21.9129 34.8767 23.3639 34.8767 24.2588 33.9818L33.9815 24.2591C34.8765 23.3641 34.8765 21.9131 33.9815 21.0182C33.0866 20.1232 31.6356 20.1232 30.7406 21.0182Z" fill="url(#paint4_linear_8339_13876)"/>
7
+<path d="M30.7406 21.0182L21.0179 30.7409C20.123 31.6358 20.123 33.0868 21.0179 33.9818C21.9129 34.8767 23.3639 34.8767 24.2588 33.9818L33.9815 24.2591C34.8765 23.3641 34.8765 21.9131 33.9815 21.0182C33.0866 20.1232 31.6356 20.1232 30.7406 21.0182Z" fill="url(#paint5_linear_8339_13876)"/>
8
+<defs>
9
+<linearGradient id="paint0_linear_8339_13876" x1="45.0001" y1="9.5" x2="10.5001" y2="44" gradientUnits="userSpaceOnUse">
10
+<stop stop-color="#E3E3E3"/>
11
+<stop offset="1" stop-color="#7D7D7D"/>
12
+</linearGradient>
13
+<linearGradient id="paint1_linear_8339_13876" x1="46.5001" y1="8.5" x2="13.5001" y2="43.5" gradientUnits="userSpaceOnUse">
14
+<stop stop-color="#EFEFF8"/>
15
+<stop offset="1" stop-color="#A2A2CC"/>
16
+</linearGradient>
17
+<linearGradient id="paint2_linear_8339_13876" x1="46.2507" y1="8.75065" x2="10.9301" y2="44.6964" gradientUnits="userSpaceOnUse">
18
+<stop stop-color="#4EBEFF"/>
19
+<stop offset="1" stop-color="#4A74FF"/>
20
+</linearGradient>
21
+<linearGradient id="paint3_linear_8339_13876" x1="44.9999" y1="9.5" x2="10.4999" y2="44" gradientUnits="userSpaceOnUse">
22
+<stop stop-color="#E3E3E3"/>
23
+<stop offset="1" stop-color="#7D7D7D"/>
24
+</linearGradient>
25
+<linearGradient id="paint4_linear_8339_13876" x1="34.9999" y1="20" x2="20.9999" y2="34.5" gradientUnits="userSpaceOnUse">
26
+<stop stop-color="#4EBEFF"/>
27
+<stop offset="1" stop-color="#4A74FF"/>
28
+</linearGradient>
29
+<linearGradient id="paint5_linear_8339_13876" x1="35.0998" y1="19.8999" x2="22.3329" y2="34.2626" gradientUnits="userSpaceOnUse">
30
+<stop stop-color="#EFEFF8"/>
31
+<stop offset="1" stop-color="#A2A2CC"/>
32
+</linearGradient>
33
+</defs>
34
+</svg>
lib/src/screens/support/support_page.dart
+32
-35
@@ -2,10 +2,11 @@ import 'package:cake_wallet/generated/i18n.dart';
2
import 'package:cake_wallet/routes.dart';
3
import 'package:cake_wallet/src/screens/base_page.dart';
4
import 'package:cake_wallet/src/widgets/option_tile.dart';
5
-import 'package:flutter/material.dart';
6
-import 'package:url_launcher/url_launcher.dart';
5
import 'package:cake_wallet/utils/device_info.dart';
6
import 'package:cake_wallet/view_model/support_view_model.dart';
7
+import 'package:flutter/material.dart';
8
+import 'package:flutter_svg/svg.dart';
9
+import 'package:url_launcher/url_launcher.dart';
10
11
class SupportPage extends BasePage {
12
SupportPage(this.supportViewModel);
@@ -18,56 +19,46 @@ class SupportPage extends BasePage {
19
@override
20
AppBarStyle get appBarStyle => AppBarStyle.regular;
21
21
- @override
22
- Widget body(BuildContext context) {
23
- final iconColor = Theme.of(context).colorScheme.primary;
22
+ String get _imageSupportChat => currentTheme.isDark
23
+ ? 'assets/images/support_chat_dark.svg'
24
+ : 'assets/images/support_chat.svg';
25
25
- return Container(
26
- child: Center(
26
+ String get _imageSupportDocs => currentTheme.isDark
27
+ ? 'assets/images/support_docs_dark.svg'
28
+ : 'assets/images/support_docs.svg';
29
+
30
+ String get _imageSupportLinks => currentTheme.isDark
31
+ ? 'assets/images/support_links_dark.svg'
32
+ : 'assets/images/support_links.svg';
33
+
34
+ @override
35
+ Widget body(BuildContext context) => Center(
36
child: Container(
28
- padding: EdgeInsets.only(left: 24, right: 24),
37
+ padding: const EdgeInsets.only(left: 24, right: 24),
38
child: Column(
39
children: [
40
Padding(
32
- padding: EdgeInsets.only(top: 20),
41
+ padding: const EdgeInsets.only(top: 20),
42
child: OptionTile(
34
- icon: Icon(
35
- Icons.support_agent,
36
- color: iconColor,
37
- size: 50,
38
- ),
43
+ image: SvgPicture.asset(_imageSupportChat, width: 55, height: 55),
44
title: S.of(context).support_title_live_chat,
45
description: S.of(context).support_description_live_chat,
41
- onPressed: () {
42
- if (DeviceInfo.instance.isDesktop) {
43
- _launchUrl(supportViewModel.fetchUrl());
44
- } else {
45
- Navigator.pushNamed(context, Routes.supportLiveChat);
46
- }
47
- },
46
+ onPressed: () => _onPressedSupportChat(context),
47
),
48
),
49
Padding(
51
- padding: EdgeInsets.only(top: 20),
50
+ padding: const EdgeInsets.only(top: 20),
51
child: OptionTile(
53
- icon: Icon(
54
- Icons.find_in_page,
55
- color: iconColor,
56
- size: 50,
57
- ),
52
+ image: SvgPicture.asset(_imageSupportDocs, width: 55, height: 55),
53
title: S.of(context).support_title_guides,
54
description: S.of(context).support_description_guides,
55
onPressed: () => _launchUrl(supportViewModel.docsUrl),
56
),
57
),
58
Padding(
64
- padding: EdgeInsets.only(top: 20),
59
+ padding: const EdgeInsets.only(top: 20),
60
child: OptionTile(
66
- icon: Icon(
67
- Icons.contact_support,
68
- color: iconColor,
69
- size: 50,
70
- ),
61
+ image: SvgPicture.asset(_imageSupportLinks, width: 55, height: 55),
62
title: S.of(context).support_title_other_links,
63
description: S.of(context).support_description_other_links,
64
onPressed: () => Navigator.pushNamed(context, Routes.supportOtherLinks),
@@ -76,8 +67,14 @@ class SupportPage extends BasePage {
67
],
68
),
69
),
79
- ),
80
- );
70
+ );
71
+
72
+ void _onPressedSupportChat(BuildContext context) {
73
+ if (DeviceInfo.instance.isDesktop) {
74
+ _launchUrl(supportViewModel.fetchUrl());
75
+ } else {
76
+ Navigator.pushNamed(context, Routes.supportLiveChat);
77
+ }
78
}
79
80
void _launchUrl(String url) async {
lib/src/widgets/option_tile.dart
+14
-9
@@ -1,5 +1,5 @@
1
-import 'package:flutter/material.dart';
1
import 'package:cake_wallet/themes/core/theme_extension.dart';
2
+import 'package:flutter/material.dart';
3
4
class OptionTile extends StatelessWidget {
5
const OptionTile({
@@ -13,7 +13,7 @@ class OptionTile extends StatelessWidget {
13
}) : assert(image != null || icon != null);
14
15
final VoidCallback onPressed;
16
- final Image? image;
16
+ final Widget? image;
17
final Icon? icon;
18
final String title;
19
final String description;
@@ -65,13 +65,18 @@ class OptionTile extends StatelessWidget {
65
),
66
if (tag != null)
67
Container(
68
- decoration: BoxDecoration(
69
- border: Border.all(),
70
- borderRadius: BorderRadius.circular(20),
71
- color: Theme.of(context).colorScheme.onSurfaceVariant),
72
- padding: EdgeInsets.symmetric(horizontal: 5),
73
- margin: EdgeInsets.only(left: 5),
74
- child: Text(tag!))
68
+ decoration: BoxDecoration(
69
+ border: Border.all(style: BorderStyle.none),
70
+ borderRadius: BorderRadius.circular(20),
71
+ color: Theme.of(context).colorScheme.onSurfaceVariant,
72
+ ),
73
+ padding: EdgeInsets.symmetric(horizontal: 5),
74
+ margin: EdgeInsets.only(left: 5),
75
+ child: Text(
76
+ tag!,
77
+ style: TextStyle(color: Theme.of(context).colorScheme.onPrimary),
78
+ ),
79
+ )
80
],
81
),
82
Padding(