feat(WEB-162): final design edit profile page

components/Icons/ChevronDown.tsx

@@ -12,27 +12,27 @@ export default function ChevronDownIcon({
     <svg
       className={classNames}
       fill="none"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
+      height="20"
+      viewBox="0 0 20 20"
+      width="20"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <mask
-        height="24"
-        id="mask0_553_6963"
+        height="20"
+        id="mask0_4971_13121"
         maskUnits="userSpaceOnUse"
         style={{ maskType: "alpha" }}
-        width="24"
+        width="20"
         x="0"
         y="0"
       >
-        <rect width="24" height="24" fill="#D9D9D9" />
+        <rect width="20" height="20" fill="#D9D9D9" />
       </mask>
-      <g mask="url(#mask0_553_6963)">
+      <g mask="url(#mask0_4971_13121)">
         <path
-          d="M12 15.3746L6 9.37461L7.4 7.97461L12 12.5746L16.6 7.97461L18 9.37461L12 15.3746Z"
-          fill="#757575"
+          d="M10.422 11.9374L16.2449 6.1145C16.4254 5.93395 16.6459 5.84193 16.9063 5.83846C17.1668 5.83499 17.3873 5.92353 17.5678 6.10409C17.7484 6.28464 17.8386 6.50513 17.8386 6.76554C17.8386 7.02596 17.7484 7.24645 17.5678 7.427L11.4011 13.6041C11.2553 13.7499 11.1025 13.8523 10.9428 13.9114C10.7831 13.9704 10.6095 13.9999 10.422 13.9999C10.2345 13.9999 10.0609 13.9704 9.90114 13.9114C9.74142 13.8523 9.58864 13.7499 9.44281 13.6041L3.27614 7.43742C3.09558 7.25686 3.00357 7.03464 3.0001 6.77075C2.99663 6.50686 3.08517 6.28464 3.26572 6.10409C3.44628 5.92353 3.66676 5.83325 3.92718 5.83325C4.1876 5.83325 4.40808 5.92353 4.58864 6.10409L10.422 11.9374Z"
+          fill="#4D001B"
         />
       </g>
     </svg>

components/Icons/InfoCircle.tsx

@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function InfoCircleIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      fill="none"
+      height="17"
+      viewBox="0 0 16 17"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask
+        height="17"
+        id="mask0_954_4761"
+        maskUnits="userSpaceOnUse"
+        style={{ maskType: "alpha" }}
+        width="16"
+        x="0"
+        y="0"
+      >
+        <rect y="0.5" width="16" height="16" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_954_4761)">
+        <path
+          d="M8.00833 11.75C8.18056 11.75 8.32778 11.6889 8.45 11.5667C8.57222 11.4444 8.63333 11.2972 8.63333 11.125V8.475C8.63333 8.30278 8.57222 8.15556 8.45 8.03333C8.32778 7.91111 8.18056 7.85 8.00833 7.85C7.83611 7.85 7.68889 7.91111 7.56667 8.03333C7.44444 8.15556 7.38333 8.30278 7.38333 8.475V11.125C7.38333 11.2972 7.44444 11.4444 7.56667 11.5667C7.68889 11.6889 7.83611 11.75 8.00833 11.75ZM7.99825 6.56667C8.17719 6.56667 8.32778 6.50614 8.45 6.38508C8.57222 6.26404 8.63333 6.11404 8.63333 5.93508C8.63333 5.75614 8.57281 5.60556 8.45175 5.48333C8.33071 5.36111 8.18071 5.3 8.00175 5.3C7.82281 5.3 7.67222 5.36053 7.55 5.48158C7.42778 5.60263 7.36667 5.75263 7.36667 5.93158C7.36667 6.11053 7.42719 6.26111 7.54825 6.38333C7.66929 6.50556 7.81929 6.56667 7.99825 6.56667ZM8 15C7.10103 15 6.25623 14.8291 5.46558 14.4873C4.67493 14.1455 3.98717 13.6816 3.4023 13.0956C2.81743 12.5097 2.35417 11.8217 2.0125 11.0319C1.67083 10.242 1.5 9.39806 1.5 8.5C1.5 7.60103 1.67091 6.75623 2.01272 5.96558C2.35453 5.17493 2.81842 4.48717 3.40438 3.9023C3.99035 3.31743 4.67826 2.85417 5.46812 2.5125C6.25798 2.17083 7.10194 2 8 2C8.89897 2 9.74377 2.17091 10.5344 2.51272C11.3251 2.85453 12.0128 3.31842 12.5977 3.90438C13.1826 4.49035 13.6458 5.17826 13.9875 5.96812C14.3292 6.75798 14.5 7.60194 14.5 8.5C14.5 9.39897 14.3291 10.2438 13.9873 11.0344C13.6455 11.8251 13.1816 12.5128 12.5956 13.0977C12.0097 13.6826 11.3217 14.1458 10.5319 14.4875C9.74202 14.8292 8.89806 15 8 15Z"
+          fill="#CD0921"
+        />
+      </g>
+    </svg>
+  )
+}

components/Icons/icon.module.css

@@ -1,6 +1,5 @@
 .icon {
-  height: 20px;
-  width: 20px;
+  margin: 0;
 }
 
 .black,
@@ -13,6 +12,11 @@
   fill: var(--Scandic-Brand-Burgundy);
 }
 
+.grey80,
+.grey80 * {
+  fill: var(--UI-Grey-80);
+}
+
 .pale,
 .pale * {
   fill: var(--Scandic-Brand-Pale-Peach);

components/Icons/index.tsx

@@ -9,6 +9,7 @@ export { default as ChevronRightIcon } from "./ChevronRight"
 export { default as EmailIcon } from "./Email"
 export { default as GlobeIcon } from "./Globe"
 export { default as HouseIcon } from "./House"
+export { default as InfoCircleIcon } from "./InfoCircle"
 export { default as LocationIcon } from "./Location"
 export { default as LockIcon } from "./Lock"
 export { default as PhoneIcon } from "./Phone"

components/Icons/variants.ts

@@ -7,6 +7,7 @@ const config = {
     color: {
       black: styles.black,
       burgundy: styles.burgundy,
+      grey80: styles.grey80,
       pale: styles.pale,
       peach80: styles.peach80,
       primaryLightOnSurfaceAccent: styles.plosa,