diff --git a/src/assets/icons/ico/accessibility.svg b/src/assets/icons/ico/accessibility.svg
index fcfad1c0f34298927a69ce53b37a76e5294cf9d9..97f8c9039dc7668c144bd809dd3e5d02b2f7d898 100644
--- a/src/assets/icons/ico/accessibility.svg
+++ b/src/assets/icons/ico/accessibility.svg
@@ -1,4 +1,6 @@
-<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.0002 10.5883C20.2672 10.5883 21.2943 9.56118 21.2943 8.29418C21.2943 7.02717 20.2672 6.00006 19.0002 6.00006C17.7332 6.00006 16.7061 7.02717 16.7061 8.29418C16.7061 9.56118 17.7332 10.5883 19.0002 10.5883ZM10.0465 10.8921L17.0043 13.0329C18.3047 13.433 19.6953 13.433 20.9957 13.0329L27.9535 10.8921C28.4443 10.741 28.9412 11.108 28.9412 11.6215C28.9412 11.9232 28.7636 12.1965 28.4879 12.319L22.7143 14.8851C22.3157 15.0622 22.0588 15.4575 22.0588 15.8937V19.4508C22.0588 20.6781 22.1459 21.9038 22.3195 23.1187L23.4575 31.0846C23.5265 31.5677 23.1517 31.9999 22.6637 31.9999C22.3057 31.9999 21.991 31.7626 21.8927 31.4183L19.4956 23.0285C19.3532 22.5301 18.6468 22.5301 18.5044 23.0285L16.1074 31.4183C16.009 31.7626 15.6944 31.9999 15.3363 31.9999C14.8484 31.9999 14.4735 31.5677 14.5425 31.0846L15.6805 23.1187C15.8541 21.9038 15.9412 20.6781 15.9412 19.4508V15.8937C15.9412 15.4575 15.6843 15.0622 15.2857 14.8851L9.5121 12.319C9.23647 12.1965 9.05884 11.9232 9.05884 11.6215C9.05884 11.108 9.55573 10.741 10.0465 10.8921Z" fill="white"/>
-<rect x="0.5" y="0.811462" width="37" height="36.377" rx="18.1885" stroke="white"/>
-</svg>
+<svg width="38" height="39" viewBox="0 0 38 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect y="0.931152" width="38" height="37.377" rx="8" fill="white" fill-opacity="0.1" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M19.0002 11.208C20.2672 11.208 21.2943 10.1809 21.2943 8.91387C21.2943 7.64686 20.2672 6.61975 19.0002 6.61975C17.7332 6.61975 16.7061 7.64686 16.7061 8.91387C16.7061 10.1809 17.7332 11.208 19.0002 11.208ZM10.0465 11.5117L17.0043 13.6526C18.3047 14.0527 19.6953 14.0527 20.9957 13.6526L27.9535 11.5117C28.4443 11.3607 28.9412 11.7277 28.9412 12.2412C28.9412 12.5429 28.7635 12.8162 28.4879 12.9387L22.7143 15.5048C22.3157 15.6819 22.0588 16.0772 22.0588 16.5134V20.0705C22.0588 21.2978 22.1459 22.5235 22.3195 23.7384L23.4575 31.7043C23.5265 32.1874 23.1516 32.6196 22.6637 32.6196C22.3057 32.6196 21.991 32.3823 21.8927 32.038L19.4956 23.6482C19.3532 23.1498 18.6468 23.1498 18.5044 23.6482L16.1073 32.038C16.009 32.3823 15.6943 32.6196 15.3363 32.6196C14.8483 32.6196 14.4735 32.1874 14.5425 31.7043L15.6805 23.7384C15.8541 22.5235 15.9412 21.2978 15.9412 20.0705V16.5134C15.9412 16.0772 15.6843 15.6819 15.2857 15.5048L9.51208 12.9387C9.23646 12.8162 9.05882 12.5429 9.05882 12.2412C9.05882 11.7277 9.55572 11.3607 10.0465 11.5117Z"
+ fill="white" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/ico/export.svg b/src/assets/icons/ico/export.svg
index 36d80fec554362ed245149e9d40e7b5983f80152..6f075fd105b6c63718e264075d67b7cf4438d090 100644
--- a/src/assets/icons/ico/export.svg
+++ b/src/assets/icons/ico/export.svg
@@ -1,6 +1,12 @@
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="18.5" cy="18.5" r="18" stroke="white"/>
-<path d="M16.5 26L16.5 27.5L19.5 27.5L19.5 26L16.5 26ZM19.5 10C19.5 9.17157 18.8284 8.5 18 8.5C17.1716 8.5 16.5 9.17157 16.5 10L19.5 10ZM19.5 26L19.5 10L16.5 10L16.5 26L19.5 26Z" fill="white"/>
-<path d="M10.5 26L10.5 27.5L13.5 27.5L13.5 26L10.5 26ZM13.5 18C13.5 17.1716 12.8284 16.5 12 16.5C11.1716 16.5 10.5 17.1716 10.5 18L13.5 18ZM13.5 26L13.5 18L10.5 18L10.5 26L13.5 26Z" fill="white"/>
-<path d="M22.5 26L22.5 27.5L25.5 27.5L25.5 26L22.5 26ZM25.5 14C25.5 13.1716 24.8284 12.5 24 12.5C23.1716 12.5 22.5 13.1716 22.5 14L25.5 14ZM25.5 26L25.5 14L22.5 14L22.5 26L25.5 26Z" fill="white"/>
-</svg>
+ <rect y="0.376953" width="38" height="37.377" rx="8" fill="white" fill-opacity="0.1" />
+ <path
+ d="M17.5 27.0654L17.5 28.5654L20.5 28.5654L20.5 27.0654L17.5 27.0654ZM20.5 11.0654C20.5 10.237 19.8284 9.56543 19 9.56543C18.1716 9.56543 17.5 10.237 17.5 11.0654L20.5 11.0654ZM20.5 27.0654L20.5 11.0654L17.5 11.0654L17.5 27.0654L20.5 27.0654Z"
+ fill="white" />
+ <path
+ d="M11.5 27.0654L11.5 28.5654L14.5 28.5654L14.5 27.0654L11.5 27.0654ZM14.5 19.0654C14.5 18.237 13.8284 17.5654 13 17.5654C12.1716 17.5654 11.5 18.237 11.5 19.0654L14.5 19.0654ZM14.5 27.0654L14.5 19.0654L11.5 19.0654L11.5 27.0654L14.5 27.0654Z"
+ fill="white" />
+ <path
+ d="M23.5 27.0654L23.5 28.5654L26.5 28.5654L26.5 27.0654L23.5 27.0654ZM26.5 15.0654C26.5 14.237 25.8284 13.5654 25 13.5654C24.1716 13.5654 23.5 14.237 23.5 15.0654L26.5 15.0654ZM26.5 27.0654L26.5 15.0654L23.5 15.0654L23.5 27.0654L26.5 27.0654Z"
+ fill="white" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/ico/feedback.svg b/src/assets/icons/ico/feedback.svg
index 0f29f2d778e5b4a6b64d8ec24f0d5e2584a948b7..fbb893d8aef74a5239d0576ee15cbf905768109b 100644
--- a/src/assets/icons/ico/feedback.svg
+++ b/src/assets/icons/ico/feedback.svg
@@ -1,4 +1,7 @@
-<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="18.5" cy="18.5" r="18" stroke="white"/>
-<path d="M14.4691 13.1925C14.7071 12.9825 14.9661 12.783 15.2461 12.594C15.5331 12.405 15.8411 12.2405 16.1701 12.1005C16.4991 11.9605 16.8561 11.852 17.2411 11.775C17.6261 11.691 18.0426 11.649 18.4906 11.649C19.0996 11.649 19.6526 11.733 20.1496 11.901C20.6536 12.069 21.0841 12.3105 21.4411 12.6255C21.7981 12.9335 22.0746 13.308 22.2706 13.749C22.4666 14.19 22.5646 14.6835 22.5646 15.2295C22.5646 15.7615 22.4876 16.2235 22.3336 16.6155C22.1796 17.0005 21.9836 17.3365 21.7456 17.6235C21.5146 17.9105 21.2626 18.159 20.9896 18.369C20.7166 18.579 20.4576 18.7785 20.2126 18.9675C19.9676 19.1495 19.7541 19.3315 19.5721 19.5135C19.3971 19.6885 19.2921 19.888 19.2571 20.112L19.0156 21.645H17.2411L17.0626 19.9335C17.0556 19.8985 17.0521 19.8705 17.0521 19.8495C17.0521 19.8215 17.0521 19.79 17.0521 19.755C17.0521 19.447 17.1291 19.181 17.2831 18.957C17.4371 18.726 17.6296 18.5125 17.8606 18.3165C18.0916 18.1135 18.3401 17.9175 18.6061 17.7285C18.8721 17.5395 19.1206 17.3365 19.3516 17.1195C19.5826 16.8955 19.7751 16.6435 19.9291 16.3635C20.0831 16.0835 20.1601 15.7545 20.1601 15.3765C20.1601 15.1245 20.1111 14.9005 20.0131 14.7045C19.9221 14.5015 19.7926 14.33 19.6246 14.19C19.4566 14.043 19.2536 13.931 19.0156 13.854C18.7846 13.777 18.5326 13.7385 18.2596 13.7385C17.8606 13.7385 17.5211 13.784 17.2411 13.875C16.9681 13.959 16.7336 14.057 16.5376 14.169C16.3486 14.274 16.1876 14.372 16.0546 14.463C15.9216 14.547 15.8026 14.589 15.6976 14.589C15.4456 14.589 15.2636 14.484 15.1516 14.274L14.4691 13.1925ZM16.4536 25.572C16.4536 25.355 16.4921 25.1485 16.5691 24.9525C16.6531 24.7565 16.7651 24.5885 16.9051 24.4485C17.0521 24.3085 17.2236 24.1965 17.4196 24.1125C17.6156 24.0285 17.8256 23.9865 18.0496 23.9865C18.2666 23.9865 18.4731 24.0285 18.6691 24.1125C18.8651 24.1965 19.0331 24.3085 19.1731 24.4485C19.3131 24.5885 19.4251 24.7565 19.5091 24.9525C19.5931 25.1485 19.6351 25.355 19.6351 25.572C19.6351 25.796 19.5931 26.006 19.5091 26.202C19.4251 26.391 19.3131 26.5555 19.1731 26.6955C19.0331 26.8355 18.8651 26.944 18.6691 27.021C18.4731 27.105 18.2666 27.147 18.0496 27.147C17.8256 27.147 17.6156 27.105 17.4196 27.021C17.2236 26.944 17.0521 26.8355 16.9051 26.6955C16.7651 26.5555 16.6531 26.391 16.5691 26.202C16.4921 26.006 16.4536 25.796 16.4536 25.572Z" fill="white"/>
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <rect width="20" height="20" rx="4" fill="#2F3139" />
+ <rect x="0.5" y="0.5" width="19" height="19" rx="3.5" stroke="white" stroke-opacity="0.35" />
+ <path
+ d="M7.59323 6.31033C7.73474 6.18547 7.88874 6.06685 8.05523 5.95447C8.22588 5.84209 8.40902 5.74428 8.60464 5.66104C8.80026 5.57779 9.01253 5.51328 9.24145 5.4675C9.47037 5.41755 9.71801 5.39258 9.98439 5.39258C10.3465 5.39258 10.6753 5.44252 10.9708 5.54242C11.2705 5.64231 11.5265 5.7859 11.7387 5.9732C11.951 6.15633 12.1154 6.37901 12.232 6.64123C12.3485 6.90344 12.4068 7.19688 12.4068 7.52152C12.4068 7.83785 12.361 8.11255 12.2694 8.34563C12.1779 8.57455 12.0613 8.77433 11.9198 8.94498C11.7824 9.11563 11.6326 9.26339 11.4703 9.38825C11.308 9.51312 11.154 9.63174 11.0083 9.74412C10.8626 9.85233 10.7357 9.96055 10.6274 10.0688C10.5234 10.1728 10.461 10.2914 10.4402 10.4246L10.2966 11.3361H9.24145L9.13531 10.3185C9.13115 10.2977 9.12907 10.281 9.12907 10.2686C9.12907 10.2519 9.12907 10.2332 9.12907 10.2124C9.12907 10.0292 9.17485 9.87106 9.26642 9.73787C9.35799 9.60052 9.47245 9.47358 9.6098 9.35704C9.74715 9.23633 9.89491 9.11979 10.0531 9.00742C10.2112 8.89504 10.359 8.77433 10.4963 8.64531C10.6337 8.51212 10.7482 8.36228 10.8397 8.19579C10.9313 8.02931 10.9771 7.83369 10.9771 7.60893C10.9771 7.45909 10.9479 7.3259 10.8897 7.20936C10.8356 7.08866 10.7586 6.98669 10.6587 6.90344C10.5588 6.81604 10.4381 6.74944 10.2966 6.70366C10.1592 6.65787 10.0094 6.63498 9.84704 6.63498C9.6098 6.63498 9.40793 6.66204 9.24145 6.71615C9.07912 6.76609 8.93969 6.82436 8.82315 6.89096C8.71077 6.95339 8.61504 7.01166 8.53596 7.06577C8.45688 7.11571 8.38612 7.14069 8.32369 7.14069C8.17385 7.14069 8.06564 7.07825 7.99904 6.95339L7.59323 6.31033ZM8.7732 13.6711C8.7732 13.5421 8.7961 13.4193 8.84188 13.3028C8.89183 13.1862 8.95842 13.0863 9.04166 13.0031C9.12907 12.9198 9.23104 12.8533 9.34758 12.8033C9.46412 12.7534 9.58899 12.7284 9.72218 12.7284C9.8512 12.7284 9.97399 12.7534 10.0905 12.8033C10.2071 12.8533 10.307 12.9198 10.3902 13.0031C10.4734 13.0863 10.54 13.1862 10.59 13.3028C10.6399 13.4193 10.6649 13.5421 10.6649 13.6711C10.6649 13.8043 10.6399 13.9292 10.59 14.0457C10.54 14.1581 10.4734 14.2559 10.3902 14.3391C10.307 14.4224 10.2071 14.4869 10.0905 14.5327C9.97399 14.5826 9.8512 14.6076 9.72218 14.6076C9.58899 14.6076 9.46412 14.5826 9.34758 14.5327C9.23104 14.4869 9.12907 14.4224 9.04166 14.3391C8.95842 14.2559 8.89183 14.1581 8.84188 14.0457C8.7961 13.9292 8.7732 13.8043 8.7732 13.6711Z"
+ fill="white" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/ico/gcu.svg b/src/assets/icons/ico/gcu.svg
index 677a646549e170eed799df0b52bdd52ca1410a7d..5f6a4c6a7ed7c2a1b364470c8b6dd108225f16be 100644
--- a/src/assets/icons/ico/gcu.svg
+++ b/src/assets/icons/ico/gcu.svg
@@ -1,12 +1,12 @@
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.431 31.5V6.5H26.569V25.9276L21.2079 31.5H11.431Z" stroke="white"/>
-<path d="M25.9227 26.5L21.9998 30.7264V26.5H25.9227Z" stroke="white"/>
-<line x1="13.6207" y1="9.08621" x2="24.3793" y2="9.08621" stroke="white"/>
-<line x1="13.6207" y1="11.7759" x2="24.3793" y2="11.7759" stroke="white"/>
-<line x1="13.6207" y1="14.4655" x2="24.3793" y2="14.4655" stroke="white"/>
-<line x1="13.6207" y1="17.1552" x2="24.3793" y2="17.1552" stroke="white"/>
-<line x1="13.6207" y1="19.8448" x2="24.3793" y2="19.8448" stroke="white"/>
-<line x1="13.6207" y1="22.5345" x2="19.8966" y2="22.5345" stroke="white"/>
-<path d="M13.6207 26.6207L15.4138 28.4138L19 24.8276" stroke="white"/>
-<rect x="0.5" y="0.811478" width="37" height="36.377" rx="18.1885" stroke="white"/>
-</svg>
+ <rect y="0.0426331" width="38" height="37.377" rx="8" fill="white" fill-opacity="0.1" />
+ <path d="M11.431 31.2312V6.23117H26.569V25.6587L21.2079 31.2312H11.431Z" stroke="white" />
+ <path d="M25.9227 26.2312L21.9997 30.4576V26.2312H25.9227Z" stroke="white" />
+ <line x1="13.6207" y1="8.81738" x2="24.3793" y2="8.81738" stroke="white" />
+ <line x1="13.6207" y1="11.507" x2="24.3793" y2="11.507" stroke="white" />
+ <line x1="13.6207" y1="14.1967" x2="24.3793" y2="14.1967" stroke="white" />
+ <line x1="13.6207" y1="16.8864" x2="24.3793" y2="16.8864" stroke="white" />
+ <line x1="13.6207" y1="19.576" x2="24.3793" y2="19.576" stroke="white" />
+ <line x1="13.6207" y1="22.2657" x2="19.8965" y2="22.2657" stroke="white" />
+ <path d="M13.6207 26.3518L15.4138 28.145L19 24.5587" stroke="white" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/ico/legal-notice.svg b/src/assets/icons/ico/legal-notice.svg
index 5b13582b87211ed4cf6e0c5732911d6e1a5e25f6..d7a2b2a4b8207af4773cb09b4ffa5aca35f97a7c 100644
--- a/src/assets/icons/ico/legal-notice.svg
+++ b/src/assets/icons/ico/legal-notice.svg
@@ -1,5 +1,9 @@
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="18.5" cy="18.5" r="18" stroke="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.6007 8.4054C18.9665 7.86487 18.0335 7.86486 17.3993 8.4054L16.459 9.20672C16.1872 9.43835 15.8492 9.57834 15.4932 9.60674L14.2617 9.70502C13.431 9.77131 12.7713 10.431 12.705 11.2617L12.6067 12.4932C12.5783 12.8492 12.4384 13.1872 12.2067 13.459L11.4054 14.3993C10.8649 15.0335 10.8649 15.9665 11.4054 16.6007L12.2067 17.541C12.4384 17.8128 12.5783 18.1508 12.6067 18.5068L12.705 19.7383C12.7713 20.569 13.431 21.2287 14.2617 21.295L15.4932 21.3933C15.8492 21.4217 16.1872 21.5616 16.459 21.7933L17.3993 22.5946C18.0335 23.1351 18.9665 23.1351 19.6007 22.5946L20.541 21.7933C20.8128 21.5617 21.1508 21.4217 21.5068 21.3933L22.7383 21.295C23.569 21.2287 24.2287 20.569 24.295 19.7383L24.3933 18.5068C24.4217 18.1508 24.5616 17.8129 24.7933 17.541L25.5946 16.6007C26.1351 15.9665 26.1351 15.0335 25.5946 14.3993L24.7933 13.459C24.5617 13.1872 24.4217 12.8492 24.3933 12.4932L24.295 11.2617C24.2287 10.431 23.569 9.77131 22.7383 9.70502L21.5068 9.60674C21.1508 9.57834 20.8129 9.43835 20.541 9.20672L19.6007 8.4054ZM18.5 19.5163C20.7182 19.5163 22.5163 17.7182 22.5163 15.5C22.5163 13.2818 20.7182 11.4837 18.5 11.4837C16.2818 11.4837 14.4837 13.2818 14.4837 15.5C14.4837 17.7182 16.2818 19.5163 18.5 19.5163Z" fill="white"/>
-<path d="M15 23L15.1384 23.0113C15.5055 23.0412 15.854 23.1887 16.1343 23.4328L17.4371 24.5673C18.0912 25.1369 19.0532 25.1369 19.7072 24.5673L21.01 23.4328C21.2888 23.19 21.6351 23.0428 22 23.0118V30.5L18.5 28.2647L15 30.5V23Z" fill="white"/>
-</svg>
+ <rect y="0.154114" width="38" height="37.377" rx="8" fill="white" fill-opacity="0.1" />
+ <path fill-rule="evenodd" clip-rule="evenodd"
+ d="M20.1007 7.99806C19.4665 7.45752 18.5335 7.45752 17.8993 7.99805L16.959 8.79937C16.6872 9.031 16.3492 9.17099 15.9932 9.1994L14.7617 9.29767C13.931 9.36396 13.2713 10.0236 13.205 10.8544L13.1067 12.0859C13.0783 12.4418 12.9384 12.7798 12.7067 13.0516L11.9054 13.9919C11.3649 14.6262 11.3649 15.5591 11.9054 16.1934L12.7067 17.1337C12.9384 17.4055 13.0783 17.7435 13.1067 18.0994L13.205 19.3309C13.2713 20.1617 13.931 20.8213 14.7617 20.8876L15.9932 20.9859C16.3492 21.0143 16.6872 21.1543 16.959 21.3859L17.8993 22.1872C18.5335 22.7278 19.4665 22.7278 20.1007 22.1872L21.041 21.3859C21.3128 21.1543 21.6508 21.0143 22.0068 20.9859L23.2383 20.8876C24.069 20.8213 24.7287 20.1617 24.795 19.3309L24.8933 18.0994C24.9217 17.7435 25.0616 17.4055 25.2933 17.1337L26.0946 16.1934C26.6351 15.5591 26.6351 14.6262 26.0946 13.9919L25.2933 13.0516C25.0617 12.7798 24.9217 12.4418 24.8933 12.0859L24.795 10.8544C24.7287 10.0236 24.069 9.36396 23.2383 9.29767L22.0068 9.1994C21.6508 9.17099 21.3128 9.031 21.041 8.79937L20.1007 7.99806ZM19 19.109C21.2182 19.109 23.0163 17.3108 23.0163 15.0927C23.0163 12.8745 21.2182 11.0763 19 11.0763C16.7818 11.0763 14.9837 12.8745 14.9837 15.0927C14.9837 17.3108 16.7818 19.109 19 19.109Z"
+ fill="white" />
+ <path
+ d="M15.5 22.5927L15.6384 22.6039C16.0055 22.6339 16.354 22.7814 16.6343 23.0255L17.9371 24.1599C18.5912 24.7295 19.5532 24.7295 20.2072 24.1599L21.51 23.0255C21.7888 22.7827 22.1351 22.6355 22.5 22.6044V30.0927L19 27.8573L15.5 30.0927V22.5927Z"
+ fill="white" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/ico/profile.svg b/src/assets/icons/ico/profile.svg
index a61d6c5778b01e1eca1dbf6fd1bfadf4c4c15199..c44b04a210a8d976f18591fa6ea257f5087c4f41 100644
--- a/src/assets/icons/ico/profile.svg
+++ b/src/assets/icons/ico/profile.svg
@@ -1,5 +1,7 @@
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="18.5" cy="18.5" r="18" stroke="white"/>
-<circle cx="18.5" cy="13.5" r="5.5" fill="white"/>
-<path d="M8 26C8 22.4735 9.60771 19.4852 13 19C14.3163 20.1296 16.5 21 18.5 21C22 21 22.5 20 24 19C27.3923 19.4852 29 22.4735 29 26V27C29 27 25 28 18.5 28C12 28 8 27 8 27V26Z" fill="white"/>
-</svg>
+ <rect width="38" height="38" rx="8" fill="white" fill-opacity="0.1" />
+ <circle cx="19" cy="14.5" r="5.5" fill="white" />
+ <path
+ d="M8.5 27C8.5 23.4735 10.1077 20.4852 13.5 20C14.8163 21.1296 17 22 19 22C22.5 22 23 21 24.5 20C27.8923 20.4852 29.5 23.4735 29.5 27V28C29.5 28 25.5 29 19 29C12.5 29 8.5 28 8.5 28V27Z"
+ fill="white" />
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/ico/questionMark.svg b/src/assets/icons/ico/questionMark.svg
index 0f29f2d778e5b4a6b64d8ec24f0d5e2584a948b7..d18f62f85d126da0aabd442659547d1286caea9f 100644
--- a/src/assets/icons/ico/questionMark.svg
+++ b/src/assets/icons/ico/questionMark.svg
@@ -1,4 +1,6 @@
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="18.5" cy="18.5" r="18" stroke="white"/>
-<path d="M14.4691 13.1925C14.7071 12.9825 14.9661 12.783 15.2461 12.594C15.5331 12.405 15.8411 12.2405 16.1701 12.1005C16.4991 11.9605 16.8561 11.852 17.2411 11.775C17.6261 11.691 18.0426 11.649 18.4906 11.649C19.0996 11.649 19.6526 11.733 20.1496 11.901C20.6536 12.069 21.0841 12.3105 21.4411 12.6255C21.7981 12.9335 22.0746 13.308 22.2706 13.749C22.4666 14.19 22.5646 14.6835 22.5646 15.2295C22.5646 15.7615 22.4876 16.2235 22.3336 16.6155C22.1796 17.0005 21.9836 17.3365 21.7456 17.6235C21.5146 17.9105 21.2626 18.159 20.9896 18.369C20.7166 18.579 20.4576 18.7785 20.2126 18.9675C19.9676 19.1495 19.7541 19.3315 19.5721 19.5135C19.3971 19.6885 19.2921 19.888 19.2571 20.112L19.0156 21.645H17.2411L17.0626 19.9335C17.0556 19.8985 17.0521 19.8705 17.0521 19.8495C17.0521 19.8215 17.0521 19.79 17.0521 19.755C17.0521 19.447 17.1291 19.181 17.2831 18.957C17.4371 18.726 17.6296 18.5125 17.8606 18.3165C18.0916 18.1135 18.3401 17.9175 18.6061 17.7285C18.8721 17.5395 19.1206 17.3365 19.3516 17.1195C19.5826 16.8955 19.7751 16.6435 19.9291 16.3635C20.0831 16.0835 20.1601 15.7545 20.1601 15.3765C20.1601 15.1245 20.1111 14.9005 20.0131 14.7045C19.9221 14.5015 19.7926 14.33 19.6246 14.19C19.4566 14.043 19.2536 13.931 19.0156 13.854C18.7846 13.777 18.5326 13.7385 18.2596 13.7385C17.8606 13.7385 17.5211 13.784 17.2411 13.875C16.9681 13.959 16.7336 14.057 16.5376 14.169C16.3486 14.274 16.1876 14.372 16.0546 14.463C15.9216 14.547 15.8026 14.589 15.6976 14.589C15.4456 14.589 15.2636 14.484 15.1516 14.274L14.4691 13.1925ZM16.4536 25.572C16.4536 25.355 16.4921 25.1485 16.5691 24.9525C16.6531 24.7565 16.7651 24.5885 16.9051 24.4485C17.0521 24.3085 17.2236 24.1965 17.4196 24.1125C17.6156 24.0285 17.8256 23.9865 18.0496 23.9865C18.2666 23.9865 18.4731 24.0285 18.6691 24.1125C18.8651 24.1965 19.0331 24.3085 19.1731 24.4485C19.3131 24.5885 19.4251 24.7565 19.5091 24.9525C19.5931 25.1485 19.6351 25.355 19.6351 25.572C19.6351 25.796 19.5931 26.006 19.5091 26.202C19.4251 26.391 19.3131 26.5555 19.1731 26.6955C19.0331 26.8355 18.8651 26.944 18.6691 27.021C18.4731 27.105 18.2666 27.147 18.0496 27.147C17.8256 27.147 17.6156 27.105 17.4196 27.021C17.2236 26.944 17.0521 26.8355 16.9051 26.6955C16.7651 26.5555 16.6531 26.391 16.5691 26.202C16.4921 26.006 16.4536 25.796 16.4536 25.572Z" fill="white"/>
-</svg>
+ <rect y="0.265564" width="38" height="37.377" rx="8" fill="white" fill-opacity="0.1" />
+ <path
+ d="M13.537 10.5788C13.8582 10.2954 14.2077 10.0262 14.5856 9.77107C14.973 9.51599 15.3887 9.29397 15.8327 9.10502C16.2767 8.91607 16.7586 8.76963 17.2782 8.66571C17.7978 8.55234 18.3599 8.49565 18.9646 8.49565C19.7865 8.49565 20.5329 8.60902 21.2036 8.83576C21.8839 9.0625 22.4649 9.38844 22.9467 9.81358C23.4285 10.2293 23.8017 10.7347 24.0662 11.3299C24.3308 11.9251 24.463 12.5912 24.463 13.3281C24.463 14.0461 24.3591 14.6696 24.1513 15.1987C23.9434 15.7183 23.6789 16.1718 23.3577 16.5591C23.0459 16.9465 22.7058 17.2819 22.3373 17.5653C21.9689 17.8487 21.6193 18.118 21.2887 18.3731C20.958 18.6187 20.6699 18.8643 20.4242 19.11C20.188 19.3462 20.0463 19.6154 19.9991 19.9177L19.6731 21.9867H17.2782L17.0373 19.6768C17.0278 19.6296 17.0231 19.5918 17.0231 19.5634C17.0231 19.5257 17.0231 19.4831 17.0231 19.4359C17.0231 19.0202 17.127 18.6612 17.3349 18.3589C17.5427 18.0471 17.8025 17.759 18.1143 17.4944C18.4261 17.2205 18.7614 16.9559 19.1205 16.7008C19.4795 16.4458 19.8148 16.1718 20.1266 15.8789C20.4384 15.5766 20.6982 15.2365 20.906 14.8586C21.1139 14.4807 21.2178 14.0366 21.2178 13.5265C21.2178 13.1864 21.1517 12.884 21.0194 12.6195C20.8966 12.3455 20.7218 12.1141 20.4951 11.9251C20.2683 11.7267 19.9944 11.5755 19.6731 11.4716C19.3614 11.3677 19.0213 11.3157 18.6528 11.3157C18.1143 11.3157 17.6561 11.3772 17.2782 11.5C16.9097 11.6133 16.5932 11.7456 16.3287 11.8968C16.0736 12.0385 15.8563 12.1707 15.6768 12.2936C15.4973 12.4069 15.3367 12.4636 15.195 12.4636C14.8549 12.4636 14.6093 12.3219 14.4581 12.0385L13.537 10.5788ZM16.2153 27.2868C16.2153 26.9939 16.2673 26.7152 16.3712 26.4507C16.4846 26.1862 16.6358 25.9594 16.8247 25.7705C17.0231 25.5815 17.2546 25.4304 17.5191 25.317C17.7836 25.2036 18.0671 25.1469 18.3694 25.1469C18.6622 25.1469 18.941 25.2036 19.2055 25.317C19.47 25.4304 19.6968 25.5815 19.8857 25.7705C20.0747 25.9594 20.2258 26.1862 20.3392 26.4507C20.4526 26.7152 20.5092 26.9939 20.5092 27.2868C20.5092 27.5891 20.4526 27.8726 20.3392 28.1371C20.2258 28.3922 20.0747 28.6142 19.8857 28.8031C19.6968 28.9921 19.47 29.1385 19.2055 29.2425C18.941 29.3558 18.6622 29.4125 18.3694 29.4125C18.0671 29.4125 17.7836 29.3558 17.5191 29.2425C17.2546 29.1385 17.0231 28.9921 16.8247 28.8031C16.6358 28.6142 16.4846 28.3922 16.3712 28.1371C16.2673 27.8726 16.2153 27.5891 16.2153 27.2868Z"
+ fill="white" />
+</svg>
\ No newline at end of file
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index 8da493fcfe8326d458b5eb7102d8ce1b1c1187a2..a5d29b004b6c1a3dafb5c34a07a3d1f3db7e0a7a 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -35,8 +35,8 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
<svg
aria-hidden="true"
class="styles__icon___23x3R"
- height="40"
- width="40"
+ height="30"
+ width="30"
>
<use
xlink:href="#test-file-stub"
diff --git a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx
index 06d623df2a8b9be3921a3c2c67399b1c93e91056..d6dfea72614271be2bbe5a8c360602c2d1789954 100644
--- a/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx
+++ b/src/components/Ecogesture/EcogestureEmptyList/EcogestureEmptyList.tsx
@@ -27,9 +27,11 @@ const EcogestureEmptyList = ({
<div className="ec-empty-container">
<div className="ec-empty-content">
<StyledIcon
- className="icon-big"
+ className={`icon-big ${
+ isObjective ? 'icon-objective' : 'icon-doing'
+ }`}
icon={isObjective ? objectiveIcon : doingIcon}
- size={150}
+ size={68}
/>
<div className="text-16-normal">
{t(`ecogesture.emptyList.${objOrDoing}1${isDone}`)}
diff --git a/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap b/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap
index e3f1bf13dff495bdea274da2fa76b1bd01728d3c..09bd3d9aa79e990b4a206ba4ca4461653cf51816 100644
--- a/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap
+++ b/src/components/Ecogesture/EcogestureEmptyList/__snapshots__/EcogestureEmptyList.spec.tsx.snap
@@ -10,9 +10,9 @@ exports[`EcogestureEmptyList component should be rendered correctly 1`] = `
>
<svg
aria-hidden="true"
- class="icon-big styles__icon___23x3R"
- height="150"
- width="150"
+ class="icon-big icon-objective styles__icon___23x3R"
+ height="68"
+ width="68"
>
<use
xlink:href="#test-file-stub"
diff --git a/src/components/Ecogesture/EcogestureEmptyList/ecogestureEmptyList.scss b/src/components/Ecogesture/EcogestureEmptyList/ecogestureEmptyList.scss
index f15fb9b7f8448154e14d2891bf9ab31b97c79f27..760ffd51a3f7176de284bac2715b547abca2d500 100644
--- a/src/components/Ecogesture/EcogestureEmptyList/ecogestureEmptyList.scss
+++ b/src/components/Ecogesture/EcogestureEmptyList/ecogestureEmptyList.scss
@@ -14,6 +14,20 @@
align-items: center;
margin: 0 auto;
+ svg {
+ border-radius: 8px;
+ height: 100px;
+ width: 100px;
+ }
+ svg.icon-objective {
+ color: $objectiveForeground;
+ background-color: $objectiveBackground;
+ }
+ svg.icon-doing {
+ color: $doingForeground;
+ background-color: $doingBackground;
+ }
+
@media (min-width: $width-phone) {
max-width: 45%;
}
diff --git a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
index 01ecbe09af631ddbbcb29c5028c1653fb32f201e..340b91862c004b545911971759c9396016a07c59 100644
--- a/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
+++ b/src/components/Ecogesture/__snapshots__/EcogestureTabsView.spec.tsx.snap
@@ -72,9 +72,9 @@ exports[`EcogestureView component should be rendered correctly with 3 clickable
>
<svg
aria-hidden="true"
- class="icon-big styles__icon___23x3R"
- height="150"
- width="150"
+ class="icon-big icon-objective styles__icon___23x3R"
+ height="68"
+ width="68"
>
<use
xlink:href="#test-file-stub"
@@ -133,9 +133,9 @@ exports[`EcogestureView component should be rendered correctly with 3 clickable
>
<svg
aria-hidden="true"
- class="icon-big styles__icon___23x3R"
- height="150"
- width="150"
+ class="icon-big icon-doing styles__icon___23x3R"
+ height="68"
+ width="68"
>
<use
xlink:href="#test-file-stub"
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx
index b1db42feb0ea402b60d3b8eb5f319d385464fb32..f62e0a3d4df9edf3b9abb65d891f978016ac3994 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/EcogestureFormSingleChoice.tsx
@@ -1,3 +1,4 @@
+import { FormControlLabel, Radio } from '@material-ui/core'
import classNames from 'classnames'
import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
import 'components/ProfileType/profileTypeForm.scss'
@@ -42,40 +43,33 @@ const EcogestureFormSingleChoice = ({
setNextStep({ ...currentProfileEcogesture, [answerType.attribute]: answer })
}, [currentProfileEcogesture, setNextStep, answer, answerType.attribute])
+ const stepLabel = EcogestureStepForm[step].toLowerCase()
+
return (
<div className="ecogesture-profile-container">
<div className="profile-form-container ecogesture-form-single">
<div className="profile-question-label">
- {t(
- `ecogesture_form.${EcogestureStepForm[step].toLowerCase()}.question`
- )}
+ {t(`ecogesture_form.${stepLabel}.question`)}
</div>
- {answerType.choices.map((value, index) => {
+ {answerType.choices.map(value => {
if (value === null) return null
return (
- <label
- htmlFor={`answer-${index}`}
+ <FormControlLabel
key={value.toString()}
className={classNames({
['radio_short']: answerType.choices.length < 5,
['radio_long']: answerType.choices.length > 4,
['answer-checked']: answer === value,
})}
- >
- <input
- id={`answer-${index}`}
- type="radio"
- value={value}
- onChange={() => setAnswer(value)}
- checked={answer === value}
- className={answer === value ? 'checked-input' : ''}
- />
- {t(
- `ecogesture_form.${EcogestureStepForm[
- step
- ].toLowerCase()}.${value}`
- )}
- </label>
+ control={
+ <Radio
+ value={value.toString()}
+ checked={answer === value ? true : false}
+ onChange={() => setAnswer(value)}
+ />
+ }
+ label={t(`ecogesture_form.${stepLabel}.${value}`)}
+ />
)
})}
</div>
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap b/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
index ec3bc7d2a14a67a8cf17ce3f3d48449d466b2b6d..da26925e2158eae33093cb0c1bf446cb1c7014f3 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/__snapshots__/EcogestureFormSingleChoice.spec.tsx.snap
@@ -14,29 +14,105 @@ exports[`EcogestureFormSingleChoice component should be rendered correctly 1`] =
ecogesture_form.heating_type.question
</div>
<label
- class="radio_short answer-checked"
- for="answer-0"
+ class="MuiFormControlLabel-root radio_short answer-checked"
>
- <input
- checked=""
- class="checked-input"
- id="answer-0"
- type="radio"
- value="individual"
- />
- ecogesture_form.heating_type.individual
+ <span
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorSecondary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorSecondary"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <input
+ checked=""
+ class="PrivateSwitchBase-input-4"
+ type="radio"
+ value="individual"
+ />
+ <div
+ class="PrivateRadioButtonIcon-root-5 PrivateRadioButtonIcon-checked-7"
+ >
+ <svg
+ aria-hidden="true"
+ class="MuiSvgIcon-root"
+ focusable="false"
+ viewBox="0 0 24 24"
+ >
+ <path
+ d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-6"
+ focusable="false"
+ viewBox="0 0 24 24"
+ >
+ <path
+ d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+ />
+ </svg>
+ </div>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </span>
+ <span
+ class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+ >
+ ecogesture_form.heating_type.individual
+ </span>
</label>
<label
- class="radio_short"
- for="answer-1"
+ class="MuiFormControlLabel-root radio_short"
>
- <input
- class=""
- id="answer-1"
- type="radio"
- value="collective"
- />
- ecogesture_form.heating_type.collective
+ <span
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <input
+ class="PrivateSwitchBase-input-4"
+ type="radio"
+ value="collective"
+ />
+ <div
+ class="PrivateRadioButtonIcon-root-5"
+ >
+ <svg
+ aria-hidden="true"
+ class="MuiSvgIcon-root"
+ focusable="false"
+ viewBox="0 0 24 24"
+ >
+ <path
+ d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-6"
+ focusable="false"
+ viewBox="0 0 24 24"
+ >
+ <path
+ d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+ />
+ </svg>
+ </div>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </span>
+ <span
+ class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+ >
+ ecogesture_form.heating_type.collective
+ </span>
</label>
</div>
<div
diff --git a/src/components/EcogestureForm/EcogestureFormSingleChoice/ecogestureFormSingleChoice.scss b/src/components/EcogestureForm/EcogestureFormSingleChoice/ecogestureFormSingleChoice.scss
index a8181829fad052cd50e12727aaac40431323ba3f..f8e4d60556433be723e5dffb82e262b0a87c6880 100644
--- a/src/components/EcogestureForm/EcogestureFormSingleChoice/ecogestureFormSingleChoice.scss
+++ b/src/components/EcogestureForm/EcogestureFormSingleChoice/ecogestureFormSingleChoice.scss
@@ -20,8 +20,5 @@
@media (min-width: $width-tablet) {
margin: 1rem 1rem 0;
}
- label {
- cursor: pointer;
- }
}
}
diff --git a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
index 6cdf7d888e238978521d8866bff70a2f6883e4bf..9d8532dbe6476792901a54c0b79a3e1fa0c17849 100644
--- a/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
+++ b/src/components/EcogestureForm/__snapshots__/EcogestureFormView.spec.tsx.snap
@@ -21,28 +21,104 @@ exports[`EcogestureFormView component should be rendered correctly 1`] = `
ecogesture_form.heating_type.question
</div>
<label
- class="radio_short"
- for="answer-0"
+ class="MuiFormControlLabel-root radio_short"
>
- <input
- class=""
- id="answer-0"
- type="radio"
- value="individual"
- />
- ecogesture_form.heating_type.individual
+ <span
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <input
+ class="PrivateSwitchBase-input-4"
+ type="radio"
+ value="individual"
+ />
+ <div
+ class="PrivateRadioButtonIcon-root-5"
+ >
+ <svg
+ aria-hidden="true"
+ class="MuiSvgIcon-root"
+ focusable="false"
+ viewBox="0 0 24 24"
+ >
+ <path
+ d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-6"
+ focusable="false"
+ viewBox="0 0 24 24"
+ >
+ <path
+ d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+ />
+ </svg>
+ </div>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </span>
+ <span
+ class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+ >
+ ecogesture_form.heating_type.individual
+ </span>
</label>
<label
- class="radio_short"
- for="answer-1"
+ class="MuiFormControlLabel-root radio_short"
>
- <input
- class=""
- id="answer-1"
- type="radio"
- value="collective"
- />
- ecogesture_form.heating_type.collective
+ <span
+ aria-disabled="false"
+ class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorSecondary MuiIconButton-colorSecondary"
+ >
+ <span
+ class="MuiIconButton-label"
+ >
+ <input
+ class="PrivateSwitchBase-input-4"
+ type="radio"
+ value="collective"
+ />
+ <div
+ class="PrivateRadioButtonIcon-root-5"
+ >
+ <svg
+ aria-hidden="true"
+ class="MuiSvgIcon-root"
+ focusable="false"
+ viewBox="0 0 24 24"
+ >
+ <path
+ d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+ />
+ </svg>
+ <svg
+ aria-hidden="true"
+ class="MuiSvgIcon-root PrivateRadioButtonIcon-layer-6"
+ focusable="false"
+ viewBox="0 0 24 24"
+ >
+ <path
+ d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
+ />
+ </svg>
+ </div>
+ </span>
+ <span
+ class="MuiTouchRipple-root"
+ />
+ </span>
+ <span
+ class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+ >
+ ecogesture_form.heating_type.collective
+ </span>
</label>
</div>
<div
diff --git a/src/components/Feedback/FeedbackModal.tsx b/src/components/Feedback/FeedbackModal.tsx
index 5f2cf3d0292689daf354d2d7758ffeadcd7de6a7..1c634eaec92aab4ce11fc67798f2797e23e0062a 100644
--- a/src/components/Feedback/FeedbackModal.tsx
+++ b/src/components/Feedback/FeedbackModal.tsx
@@ -38,7 +38,7 @@ const FeedbackModal = () => {
aria-labelledby="accessibility-title"
classes={{
root: 'modal-root',
- paper: 'modal-paper yellow-border',
+ paper: 'modal-paper',
}}
>
<div id="accessibility-title">
diff --git a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
index 905bfadd3e8f5df8cac1745a9f6b23aa10b459e3..b882e033d6b542eecf28bcbc7603b9bdbde45dbf 100644
--- a/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
+++ b/src/components/Feedback/__snapshots__/FeedbackModal.spec.tsx.snap
@@ -29,7 +29,7 @@ exports[`FeedbackModal component should render the component 1`] = `
>
<div
aria-labelledby="accessibility-title"
- class="MuiPaper-root MuiDialog-paper modal-paper yellow-border MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+ class="MuiPaper-root MuiDialog-paper modal-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
role="dialog"
>
<div
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 83585f85c1fe55dff6a262230ca2e8801055e821..893b2255fdfb45bdebd54a47a0baf9d38836efea 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -85,7 +85,7 @@ const Header = ({
)}
<StyledIconButton
icon={FeedbackIcon}
- sized={40}
+ sized={30}
onClick={handleClickFeedbacks}
aria-label={t('header.accessibility.button_open_feedbacks')}
className="header-feedbacks-button"
diff --git a/src/components/Header/__snapshots__/Header.spec.tsx.snap b/src/components/Header/__snapshots__/Header.spec.tsx.snap
index 2b060bac40e27596a9dae81d405bc37b8b3cf350..9e33d0ea7c041aa9e7705a7247a951b5766163d1 100644
--- a/src/components/Header/__snapshots__/Header.spec.tsx.snap
+++ b/src/components/Header/__snapshots__/Header.spec.tsx.snap
@@ -31,8 +31,8 @@ exports[`Header component should be rendered correctly on desktop 1`] = `
<svg
aria-hidden="true"
class="styles__icon___23x3R"
- height="40"
- width="40"
+ height="30"
+ width="30"
>
<use
xlink:href="#test-file-stub"
@@ -84,8 +84,8 @@ exports[`Header component should be rendered correctly on mobile 1`] = `
<svg
aria-hidden="true"
class="styles__icon___23x3R"
- height="40"
- width="40"
+ height="30"
+ width="30"
>
<use
xlink:href="#test-file-stub"
diff --git a/src/components/Options/ReportOptions/reportOptions.scss b/src/components/Options/ReportOptions/reportOptions.scss
index aa8cd00d10027bffb40b33e6732bc73486101dcd..2e7456e02bff4d9a059bc59e9b829ed2507d52ff 100644
--- a/src/components/Options/ReportOptions/reportOptions.scss
+++ b/src/components/Options/ReportOptions/reportOptions.scss
@@ -20,7 +20,8 @@
}
.reportCard {
- border: 1px solid #383941;
+ background-color: $grey-1;
+ border: 1px solid $grey-2;
border-radius: 4px;
padding: 12px 16px;
display: flex;
diff --git a/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.tsx b/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.tsx
index 34cd7b29d36fbb35a2b6d38bf14fa8a63c9bfebd..f3ad5a4ac5f5f39e59a0437a8412d6fad78a6668 100644
--- a/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.tsx
+++ b/src/components/ProfileType/ProfileTypeFinished/ProfileTypeFinished.tsx
@@ -122,7 +122,7 @@ const ProfileTypeFinished = ({ profileType }: { profileType: ProfileType }) => {
return (
<div className="profile-type-finished-card">
<StyledIcon className="profile-type-icon" icon={finishIcon} size={120} />
- <div className="profile-type-finished-label text-28-normal-uppercase">
+ <div className="profile-type-finished-label text-28-bold">
{t('profile_type.finished.title')}
</div>
<div>
diff --git a/src/components/ProfileType/ProfileTypeFinished/profileTypeFinished.scss b/src/components/ProfileType/ProfileTypeFinished/profileTypeFinished.scss
index fd71b6fb3103d3d3c582c09ef7a77f998342c782..b23391b02631423be8c4194855e5a743b3898d66 100644
--- a/src/components/ProfileType/ProfileTypeFinished/profileTypeFinished.scss
+++ b/src/components/ProfileType/ProfileTypeFinished/profileTypeFinished.scss
@@ -3,11 +3,9 @@
.profile-type-finished-card {
margin: auto;
- box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
transition: all 300ms ease;
color: $white;
- background: $grey-linear-gradient-background;
width: 80%;
text-align: center;
padding: 1rem;
diff --git a/src/components/ProfileType/ProfileTypeFormDateSelection/ProfileTypeFormDateSelection.tsx b/src/components/ProfileType/ProfileTypeFormDateSelection/ProfileTypeFormDateSelection.tsx
index 20eacbf8817c589113da15c9166d469722e6971b..38c295bf7cf58d0fd8f5278267dc2a13a58a73d8 100644
--- a/src/components/ProfileType/ProfileTypeFormDateSelection/ProfileTypeFormDateSelection.tsx
+++ b/src/components/ProfileType/ProfileTypeFormDateSelection/ProfileTypeFormDateSelection.tsx
@@ -142,11 +142,7 @@ const ProfileTypeFormDateSelection = ({
onChange={e => handleSelectMonth(e.target.value as string)}
>
{renderMonths.map(month => (
- <MenuItem
- value={month.value}
- key={month.value}
- className="date-option"
- >
+ <MenuItem value={month.value} key={month.value}>
{month.label}
</MenuItem>
))}
@@ -161,7 +157,7 @@ const ProfileTypeFormDateSelection = ({
onChange={e => handleSelectYear(e.target.value as string)}
>
{selectYears.map(year => (
- <MenuItem value={year} key={year} className="date-option">
+ <MenuItem value={year} key={year}>
{year}
</MenuItem>
))}
diff --git a/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx b/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx
index b57b25091f5074867e54023b5a0881aaed028fdc..e33361ad0c4fecb75f2e3e169ae3c420859ffe00 100644
--- a/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx
+++ b/src/components/ProfileType/ProfileTypeFormMultiChoice/ProfileTypeFormMultiChoice.tsx
@@ -1,3 +1,4 @@
+import { Checkbox, FormControlLabel } from '@material-ui/core'
import classNames from 'classnames'
import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
import 'components/ProfileType/profileTypeForm.scss'
@@ -66,13 +67,13 @@ const ProfileTypeFormMultiChoice = ({
}
}, [step, viewedStep, currentProfileType, answerType, isProfileTypeCompleted])
+ const stepLabel = ProfileTypeStepForm[step].toLowerCase()
+
return (
<>
<div className="profile-form-container">
<div className="profile-question-label">
- {t(
- `profile_type.${ProfileTypeStepForm[step].toLowerCase()}.question`
- )}
+ {t(`profile_type.${stepLabel}.question`)}
</div>
<span className="profile-question-hint">
{t('profile_type.multi_choices')}
@@ -81,26 +82,20 @@ const ProfileTypeFormMultiChoice = ({
if (!value) return null
const stringValue = value.toString()
return (
- <label
- htmlFor={`answer${index}`}
+ <FormControlLabel
key={index}
className={classNames('checkbox', {
['answer-checked']: answer.includes(stringValue),
})}
- >
- <input
- id={`answer${index}`}
- type="checkbox"
- value={stringValue}
- onChange={() => handleChange(stringValue)}
- checked={isChecked(stringValue)}
- />
- {t(
- `profile_type.${ProfileTypeStepForm[
- step
- ].toLowerCase()}.${value}`
- )}
- </label>
+ control={
+ <Checkbox
+ value={stringValue}
+ checked={isChecked(stringValue)}
+ onChange={() => handleChange(stringValue)}
+ />
+ }
+ label={t(`profile_type.${stepLabel}.${value}`)}
+ />
)
})}
</div>
diff --git a/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx b/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
index 41078fc40a4f17722caee3993d2c60f24ba4a345..47c2d7652124edde830010b5557e417b8632372a 100644
--- a/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
+++ b/src/components/ProfileType/ProfileTypeFormNumber/ProfileTypeFormNumber.tsx
@@ -50,7 +50,7 @@ const ProfileTypeFormNumber = ({
)}
</div>
{answer != null && (
- <label className="text">
+ <label>
<OutlinedInput
endAdornment={<InputAdornment position="end">m²</InputAdornment>}
type="number"
@@ -59,7 +59,6 @@ const ProfileTypeFormNumber = ({
name={answerType.attribute}
onChange={e => setAnswer(e.target.value)}
autoFocus
- style={{ marginRight: '0.5rem' }}
/>
</label>
)}
diff --git a/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx b/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx
index 8f67be5c254206c4239a190f956d0d423f33c65c..c0a0477087ce5882a7939ff1ca32f8e1fc57d20b 100644
--- a/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx
+++ b/src/components/ProfileType/ProfileTypeFormSingleChoice/ProfileTypeFormSingleChoice.tsx
@@ -1,3 +1,4 @@
+import { FormControlLabel, Radio } from '@material-ui/core'
import classNames from 'classnames'
import FormNavigation from 'components/CommonKit/FormNavigation/FormNavigation'
import 'components/ProfileType/profileTypeForm.scss'
@@ -63,40 +64,33 @@ const ProfileTypeFormSingleChoice = ({
profileEcogesture,
])
+ const stepLabel = ProfileTypeStepForm[step].toLowerCase()
+
return (
<>
<div className="profile-form-container">
<div className="profile-question-label">
- {t(
- `profile_type.${ProfileTypeStepForm[step].toLowerCase()}.question`
- )}
+ {t(`profile_type.${stepLabel}.question`)}
</div>
{answerType.choices.map((value, index) => {
if (value === null) return null
-
return (
- <label
- htmlFor={`answer-${index}`}
+ <FormControlLabel
key={index}
className={classNames({
['radio_short']: answerType.choices.length < 5,
['radio_long']: answerType.choices.length > 4,
['answer-checked']: answer === value,
})}
- >
- <input
- id={`answer-${index}`}
- type="radio"
- value={value.toString()}
- onChange={() => setAnswer(value)}
- checked={answer === value ? true : false}
- />
- {t(
- `profile_type.${ProfileTypeStepForm[
- step
- ].toLowerCase()}.${value}`
- )}
- </label>
+ control={
+ <Radio
+ value={value.toString()}
+ checked={answer === value ? true : false}
+ onChange={() => setAnswer(value)}
+ />
+ }
+ label={t(`profile_type.${stepLabel}.${value}`)}
+ />
)
})}
</div>
diff --git a/src/components/ProfileType/profileTypeForm.scss b/src/components/ProfileType/profileTypeForm.scss
index e2cd232b02acf1a17b4eaa4ab1ade48a63fd1825..83530256bf5a34cb319ff8305b9f36fb1fda5d92 100644
--- a/src/components/ProfileType/profileTypeForm.scss
+++ b/src/components/ProfileType/profileTypeForm.scss
@@ -6,6 +6,9 @@
color: $white;
margin: 0 1rem 1rem;
max-width: 53rem;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
.text {
font-size: 1.25rem;
}
@@ -13,13 +16,9 @@
font-weight: bold;
font-size: 1.375rem;
line-height: 150%;
- padding: 1rem 0;
}
.profile-question-hint {
- font-size: 1rem;
color: $grey-bright;
- display: block;
- margin-bottom: 1rem;
font-style: italic;
}
.profile-question-answers {
@@ -35,28 +34,11 @@
.radio_short,
.radio_long,
.checkbox {
- background: $grey-linear-gradient-background;
- box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
- margin: 0.5rem 0;
- display: flex;
- align-items: center;
- font-weight: bold;
- input {
- margin: 0.5rem 1rem 0.5rem 0.5rem;
- appearance: none;
- -moz-appearance: none;
- -webkit-appearance: none;
- width: 1.2rem;
- height: 1.2rem;
- border-radius: 50%;
- background: $dark-background;
- position: relative;
- }
+ border: 1px solid transparent;
+ background: $grey-2;
}
.checkbox {
- input {
- border-radius: 1px;
- }
+ gap: 16px;
}
.radio_short,
.checkbox {
@@ -66,39 +48,11 @@
.radio_long {
padding: 0.5rem 1rem;
border-radius: 4px;
- text-align: center;
}
.answer-checked {
- background: radial-gradient(
- 105.25% 64.58% at 49.68% 70.83%,
- rgba(226, 137, 4, 0.5) 0%,
- rgba(255, 255, 255, 0) 100%
- ),
- #f1c017;
- color: $dark-light-2;
- input {
- &:before,
- &:after {
- content: '';
- position: absolute;
- display: inline-block;
- background: $gold-shadow;
- border-radius: 0.5rem;
- }
- &:before {
- width: 3px;
- height: 12px;
- left: 10px;
- top: 4px;
- transform: rotate(41deg);
- }
- &:after {
- width: 3px;
- height: 6px;
- left: 5px;
- top: 8px;
- transform: rotate(133deg);
- }
+ border: 1px solid $multi-color;
+ .MuiFormControlLabel-label {
+ font-weight: 700;
}
}
.number-container {
@@ -158,32 +112,4 @@
.select-container {
display: flex;
}
-
- .date-option {
- color: $white;
- }
-
- ul {
- background: $grey-linear-gradient-background;
- color: $white;
- font-weight: normal;
- .MuiMenuItem-root {
- font-family: $text-font;
- text-align: center;
- font-size: 1.25rem;
- display: flex;
- justify-content: space-evenly;
- :hover {
- background-color: $gold-shadow;
- }
- }
- .MuiListItem-root.Mui-selected,
- .MuiListItem-root.Mui-selected:hover {
- background-color: $gold-shadow;
- color: $dark-2;
- font-weight: bold;
- display: flex;
- justify-content: space-evenly;
- }
- }
}
diff --git a/src/components/ProfileType/profileTypeView.scss b/src/components/ProfileType/profileTypeView.scss
index e8cd7e8470d27434c43af811ba609018503fa51a..c19925faacf12c042dae9264c1016189964334ba 100644
--- a/src/components/ProfileType/profileTypeView.scss
+++ b/src/components/ProfileType/profileTypeView.scss
@@ -2,6 +2,7 @@
display: flex;
flex-direction: column;
flex: 1;
+ gap: 16px;
padding-top: 1rem;
.progressContainer {
margin-inline: 1rem;
@@ -14,8 +15,5 @@
flex: 1;
flex-direction: column;
justify-content: space-between;
- label {
- cursor: pointer;
- }
}
}
diff --git a/src/components/theme.ts b/src/components/theme.ts
index e24da5ec581f5b4d9b960d0c72bedcaa41564ff4..d92a1cc42afd6f64c071bac4628d3f339268406d 100644
--- a/src/components/theme.ts
+++ b/src/components/theme.ts
@@ -54,5 +54,11 @@ export const theme = createTheme({
gap: 12,
},
},
+ MuiFormControlLabel: {
+ root: {
+ marginLeft: 0,
+ marginRight: 0,
+ },
+ },
},
})
diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss
index 01c785416d3c57e4092233ad598b96b5def9216b..910db10ed495efafb39a549b4c8cc1e972d0d62d 100644
--- a/src/styles/base/_color.scss
+++ b/src/styles/base/_color.scss
@@ -14,7 +14,6 @@ $red-primary: #d25959;
/** YELLOW **/
$gold: #b2901b;
-$gold-40: rgba(227, 184, 42, 0.4);
$gold-light: #deaf0e;
$gold-shadow: #e3b82a;
$gold-euro: #f1c017;
diff --git a/src/styles/components/_dialog.scss b/src/styles/components/_dialog.scss
index 66f2e0da5fd0ac1133554c095cb2299330a7d721..6d290c1629b34da143637139fcabea37df63aeb8 100644
--- a/src/styles/components/_dialog.scss
+++ b/src/styles/components/_dialog.scss
@@ -9,6 +9,7 @@ div.modal-root {
div.modal-paper {
background: $grey-1;
+ border: 1px solid $grey-2;
width: 36rem;
max-width: 100%;
max-height: 90vh;
@@ -32,9 +33,6 @@ div.modal-paper {
&.no-padding {
padding: 0;
}
- &.yellow-border {
- border: 1px solid $gold-40;
- }
.modal-paper-close-button {
position: absolute;
top: 0.5rem;