diff options
43 files changed, 391 insertions, 28 deletions
diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-account-circle.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-account-circle.svg new file mode 100644 index 0000000000..58e71e4ead --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-account-circle.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_519_2660" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_519_2660)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM11.9949 11.8129C11.3452 11.8137 10.6978 11.8946 10.0669 12.0536C9.37813 12.2327 8.70677 12.4753 8.06039 12.7785C7.75379 12.9252 7.49057 13.1529 7.29734 13.4384C7.09459 13.7466 6.99107 14.1123 7.0006 14.4843V15.0316C6.99962 15.159 7.02328 15.2853 7.07027 15.4032C7.11726 15.5211 7.18627 15.6283 7.27368 15.7184C7.36109 15.8085 7.46526 15.8798 7.57962 15.9282C7.65126 15.9584 7.72618 15.9793 7.80242 15.9905C7.8481 15.9971 7.89411 16.0003 7.94011 16H16.0602C16.1837 16.0007 16.3063 15.9762 16.4207 15.9277C16.535 15.8793 16.6389 15.808 16.7263 15.718C16.7674 15.6757 16.8045 15.6297 16.837 15.5805C16.8738 15.5251 16.9047 15.4655 16.9297 15.4031C16.9767 15.2852 17.0007 15.1589 16.9997 15.0316V14.4843C17.0066 14.1111 16.8991 13.7452 16.6924 13.4384C16.4953 13.1494 16.2255 12.9213 15.912 12.7785C15.2653 12.4856 14.5969 12.2459 13.9133 12.0619C13.2863 11.8972 12.6419 11.8136 11.9949 11.8129ZM11.9949 6.00227C11.6837 5.98804 11.3728 6.0408 11.0823 6.15707C10.7918 6.27342 10.528 6.45083 10.3078 6.67795C10.0876 6.90515 9.91541 7.17706 9.8027 7.4765C9.68999 7.77593 9.63872 8.09628 9.65285 8.41714C9.63905 8.73792 9.69031 9.05818 9.80303 9.35745C9.91607 9.6568 10.0879 9.92854 10.3081 10.1557C10.5286 10.3827 10.7922 10.56 11.0827 10.6764C11.3728 10.7926 11.6837 10.8455 11.9949 10.8313C12.3061 10.8452 12.6166 10.7923 12.9068 10.6759C13.197 10.5595 13.4608 10.3822 13.681 10.1552C13.9012 9.92812 14.0734 9.65646 14.1861 9.35719C14.2991 9.05801 14.3504 8.73792 14.3369 8.41714C14.3507 8.09637 14.2995 7.7761 14.1867 7.47683C14.0737 7.17757 13.9018 6.90574 13.6813 6.67862C13.4612 6.45159 13.1973 6.27427 12.9071 6.15792C12.6166 6.04165 12.3061 5.98813 11.9949 6.00227Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-add-circle.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-add-circle.svg new file mode 100644 index 0000000000..331c5365e6 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-add-circle.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_146_123" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <path d="M24 0H0V24H24V0Z" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_146_123)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM7 12C7 11.4477 7.44772 11 8 11H11V8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44772 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44772 13 7 12.5523 7 12Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-alert-circle.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-alert-circle.svg new file mode 100644 index 0000000000..4416d62324 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-alert-circle.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_114_1782" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <path d="M24 0H0V24H24V0Z" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_114_1782)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17ZM13 13V7C13 6.44772 12.5523 6 12 6C11.4477 6 11 6.44772 11 7V13C11 13.5523 11.4477 14 12 14C12.5523 14 13 13.5523 13 13Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-checkmark-circle.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-checkmark-circle.svg new file mode 100644 index 0000000000..5eeaff89ae --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-checkmark-circle.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_150_85" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <path d="M24 0H0V24H24V0Z" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_150_85)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM15.2601 8.82733C15.6316 8.41867 16.264 8.38855 16.6727 8.76006C17.0813 9.13157 17.1114 9.76402 16.7399 10.1727L11.7399 15.6727C11.3797 16.0689 10.7712 16.1111 10.3598 15.7682L7.35982 13.2682C6.93554 12.9147 6.87821 12.2841 7.23178 11.8598C7.58534 11.4355 8.21591 11.3782 8.64018 11.7318L10.9044 13.6186L15.2601 8.82733Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-checkmark.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-checkmark.svg new file mode 100644 index 0000000000..41602b60f2 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-checkmark.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_521_2713" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_521_2713)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M19.2071 6.29289C19.5976 6.68342 19.5976 7.31658 19.2071 7.70711L10.2071 16.7071C9.83272 17.0815 9.23138 17.0992 8.83565 16.7474L4.33565 12.7474C3.92286 12.3805 3.88568 11.7484 4.2526 11.3356C4.61952 10.9229 5.25159 10.8857 5.66437 11.2526L9.45964 14.6262L17.7929 6.29289C18.1834 5.90237 18.8166 5.90237 19.2071 6.29289Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-down-circle.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-down-circle.svg new file mode 100644 index 0000000000..b6e8420ce6 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-down-circle.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_125_2166" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <path d="M24 0H0V24H24V0Z" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_125_2166)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM15.2929 9.79289C15.6834 9.40237 16.3166 9.40237 16.7071 9.79289C17.0976 10.1834 17.0976 10.8166 16.7071 11.2071L12.7071 15.2071C12.3166 15.5976 11.6834 15.5976 11.2929 15.2071L7.29289 11.2071C6.90237 10.8166 6.90237 10.1834 7.29289 9.79289C7.68342 9.40237 8.31658 9.40237 8.70711 9.79289L12 13.0858L15.2929 9.79289Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-down.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-down.svg new file mode 100644 index 0000000000..fffed869b0 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-down.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_519_2708" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_519_2708)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 9.29289C16.3166 8.90237 15.6834 8.90237 15.2929 9.29289L12 12.5858L8.70711 9.29289C8.31658 8.90237 7.68342 8.90237 7.29289 9.29289C6.90237 9.68342 6.90237 10.3166 7.29289 10.7071L11.2929 14.7071C11.6834 15.0976 12.3166 15.0976 12.7071 14.7071L16.7071 10.7071C17.0976 10.3166 17.0976 9.68342 16.7071 9.29289Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-left-circle.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-left-circle.svg new file mode 100644 index 0000000000..4b8f49e5cd --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-left-circle.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_122_2130" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <path d="M24 0H0V24H24V0Z" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_122_2130)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12.7929 7.29289C13.1834 6.90237 13.8166 6.90237 14.2071 7.29289C14.5976 7.68342 14.5976 8.31658 14.2071 8.70711L10.9142 12L14.2071 15.2929C14.5976 15.6834 14.5976 16.3166 14.2071 16.7071C13.8166 17.0976 13.1834 17.0976 12.7929 16.7071L8.79289 12.7071C8.40237 12.3166 8.40237 11.6834 8.79289 11.2929L12.7929 7.29289Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-left.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-left.svg new file mode 100644 index 0000000000..915b920681 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-left.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_519_2707" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_519_2707)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M14.7071 7.29289C14.3166 6.90237 13.6834 6.90237 13.2929 7.29289L9.29289 11.2929C8.90237 11.6834 8.90237 12.3166 9.29289 12.7071L13.2929 16.7071C13.6834 17.0976 14.3166 17.0976 14.7071 16.7071C15.0976 16.3166 15.0976 15.6834 14.7071 15.2929L11.4142 12L14.7071 8.70711C15.0976 8.31658 15.0976 7.68342 14.7071 7.29289Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-right-circle.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-right-circle.svg new file mode 100644 index 0000000000..4ba2e907e8 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-right-circle.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_122_2108" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <path d="M24 0H0V24H24V0Z" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_122_2108)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM11.2071 7.29289C10.8166 6.90237 10.1834 6.90237 9.79289 7.29289C9.40237 7.68342 9.40237 8.31658 9.79289 8.70711L13.0858 12L9.79289 15.2929C9.40237 15.6834 9.40237 16.3166 9.79289 16.7071C10.1834 17.0976 10.8166 17.0976 11.2071 16.7071L15.2071 12.7071C15.5976 12.3166 15.5976 11.6834 15.2071 11.2929L11.2071 7.29289Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-right.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-right.svg new file mode 100644 index 0000000000..61984c5155 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-right.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_519_2706" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_519_2706)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M9.29289 7.29289C8.90237 7.68342 8.90237 8.31658 9.29289 8.70711L12.5858 12L9.29289 15.2929C8.90237 15.6834 8.90237 16.3166 9.29289 16.7071C9.68342 17.0976 10.3166 17.0976 10.7071 16.7071L14.7071 12.7071C15.0976 12.3166 15.0976 11.6834 14.7071 11.2929L10.7071 7.29289C10.3166 6.90237 9.68342 6.90237 9.29289 7.29289Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-up-circle.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-up-circle.svg new file mode 100644 index 0000000000..71e948cee6 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-up-circle.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_125_2190" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <path d="M24 0H0V24H24V0Z" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_125_2190)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM7.29289 12.7929L11.2929 8.79289C11.6834 8.40237 12.3166 8.40237 12.7071 8.79289L16.7071 12.7929C17.0976 13.1834 17.0976 13.8166 16.7071 14.2071C16.3166 14.5976 15.6834 14.5976 15.2929 14.2071L12 10.9142L8.70711 14.2071C8.31658 14.5976 7.68342 14.5976 7.29289 14.2071C6.90237 13.8166 6.90237 13.1834 7.29289 12.7929Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-up.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-up.svg new file mode 100644 index 0000000000..9525597ca7 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-chevron-up.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_519_2709" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_519_2709)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7071 9.29289C12.3166 8.90237 11.6834 8.90237 11.2929 9.29289L7.29289 13.2929C6.90237 13.6834 6.90237 14.3166 7.29289 14.7071C7.68342 15.0976 8.31658 15.0976 8.70711 14.7071L12 11.4142L15.2929 14.7071C15.6834 15.0976 16.3166 15.0976 16.7071 14.7071C17.0976 14.3166 17.0976 13.6834 16.7071 13.2929L12.7071 9.29289Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-copy.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-copy.svg new file mode 100644 index 0000000000..dc6f6fd30c --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-copy.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_519_2675" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_519_2675)"> + <path d="M15.789 2H5.684C5.23778 2.00142 4.81021 2.19342 4.49469 2.53405C4.17916 2.87468 4.00132 3.33626 4 3.81799V16.546C4.00121 16.6587 4.02423 16.7699 4.06757 16.8724C4.11091 16.9749 4.17362 17.0665 4.25168 17.1413C4.32973 17.2161 4.42141 17.2725 4.52083 17.3068C4.62025 17.3411 4.72522 17.3526 4.829 17.3406C5.03911 17.3536 5.24569 17.278 5.40519 17.1298C5.56469 16.9816 5.66465 16.7723 5.684 16.546V3.81799H15.789C16.0033 3.80121 16.205 3.7022 16.3576 3.53885C16.5102 3.37549 16.6037 3.15859 16.621 2.92735C16.6095 2.69036 16.5189 2.46588 16.3659 2.29542C16.213 2.12495 16.008 2.02001 15.789 2ZM18.315 5.63597H9.053C8.60643 5.63711 8.17846 5.82913 7.86269 6.17002C7.54692 6.51092 7.36906 6.97294 7.368 7.45504V20.182C7.36932 20.6637 7.54716 21.1253 7.86269 21.466C8.17822 21.8066 8.60578 21.9986 9.052 22H18.315C18.7614 21.9989 19.1892 21.807 19.505 21.4663C19.8207 21.1257 19.9987 20.6639 20 20.182V7.45504C19.9989 6.97313 19.8212 6.51127 19.5057 6.1704C19.1901 5.82954 18.7614 5.6374 18.315 5.63597ZM18.315 20.182H9.053V7.45504H18.316L18.315 20.182Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-cross-circle.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-cross-circle.svg new file mode 100644 index 0000000000..37698f5690 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-cross-circle.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"> + <mask id="mask0_146_119" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48"> + <path d="M48 0H0V48H48V0Z" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_146_119)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M44 24C44 35.0457 35.0457 44 24 44C12.9543 44 4 35.0457 4 24C4 12.9543 12.9543 4 24 4C35.0457 4 44 12.9543 44 24ZM16.5858 16.5858C17.3668 15.8047 18.6332 15.8047 19.4142 16.5858L24 21.1716L28.5858 16.5858C29.3668 15.8047 30.6332 15.8047 31.4142 16.5858C32.1953 17.3668 32.1953 18.6332 31.4142 19.4142L26.8284 24L31.4142 28.5858C32.1953 29.3668 32.1953 30.6332 31.4142 31.4142C30.6332 32.1953 29.3668 32.1953 28.5858 31.4142L24 26.8284L19.4142 31.4142C18.6332 32.1953 17.3668 32.1953 16.5858 31.4142C15.8047 30.6332 15.8047 29.3668 16.5858 28.5858L21.1716 24L16.5858 19.4142C15.8047 18.6332 15.8047 17.3668 16.5858 16.5858Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-cross.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-cross.svg new file mode 100644 index 0000000000..08896ce5c0 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-cross.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"> + <mask id="mask0_585_7935" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="48" height="48"> + <rect width="48" height="48" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_585_7935)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M15.4142 12.5858C14.6332 11.8047 13.3668 11.8047 12.5858 12.5858C11.8047 13.3668 11.8047 14.6332 12.5858 15.4142L21.1716 24L12.5858 32.5858C11.8047 33.3668 11.8047 34.6332 12.5858 35.4142C13.3668 36.1953 14.6332 36.1953 15.4142 35.4142L24 26.8284L32.5858 35.4142C33.3668 36.1953 34.6332 36.1953 35.4142 35.4142C36.1953 34.6332 36.1953 33.3668 35.4142 32.5858L26.8284 24L35.4142 15.4142C36.1953 14.6332 36.1953 13.3668 35.4142 12.5858C34.6332 11.8047 33.3668 11.8047 32.5858 12.5858L24 21.1716L15.4142 12.5858Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-edit-circle.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-edit-circle.svg new file mode 100644 index 0000000000..b153761bbd --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-edit-circle.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_151_181" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <path d="M24 0H0V24H24V0Z" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_151_181)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM7.86583 16.1343C7.95754 16.226 8.07119 16.2719 8.20676 16.2719H9.12405C9.25315 16.2719 9.37621 16.2471 9.49322 16.1976C9.61022 16.148 9.71216 16.0798 9.79904 15.9929L15.0035 10.7927L13.2109 9L8.00721 14.2011C7.92033 14.288 7.85212 14.3899 7.80258 14.5069C7.75303 14.6239 7.72825 14.747 7.72825 14.8761V15.7934C7.72825 15.929 7.77411 16.0426 7.86583 16.1343ZM14.7112 7.50003C14.7912 7.42732 14.8796 7.37113 14.9763 7.33147C15.0731 7.2918 15.1745 7.27197 15.2807 7.27197C15.3868 7.27197 15.4896 7.29081 15.5891 7.32849C15.6886 7.36616 15.7767 7.42605 15.8534 7.50817L16.4999 8.1628C16.5821 8.2395 16.6406 8.32775 16.6755 8.42756C16.7105 8.52737 16.728 8.62717 16.728 8.72697C16.728 8.83343 16.7098 8.93502 16.6734 9.03176C16.6371 9.1285 16.5793 9.2169 16.4999 9.29695L15.7902 10.01L14.0002 8.21002L14.7112 7.50003Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-external.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-external.svg new file mode 100644 index 0000000000..8399c901bd --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-external.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_1744_3687" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_1744_3687)"> + <path d="M16 20H6C5.73478 20 5.48043 19.8947 5.29289 19.7071C5.10536 19.5196 5 19.2652 5 19V9.00001C5 8.73479 5.10536 8.48044 5.29289 8.2929C5.48043 8.10537 5.73478 8.00001 6 8.00001H13.465L11.465 10H7V18H15V13.536L17 11.536V19C17 19.2652 16.8946 19.5196 16.7071 19.7071C16.5196 19.8947 16.2652 20 16 20ZM11 15C10.802 15.0002 10.6085 14.9416 10.4439 14.8316C10.2792 14.7217 10.151 14.5654 10.0752 14.3825C9.99953 14.1996 9.97981 13.9983 10.0186 13.8042C10.0573 13.6101 10.1528 13.4318 10.293 13.292L17.586 6.00001H13.991C13.7258 5.99882 13.4719 5.89232 13.2852 5.70393C13.0985 5.51555 12.9943 5.26073 12.9955 4.99551C12.9967 4.73029 13.1032 4.47641 13.2916 4.28972C13.48 4.10303 13.7348 3.99882 14 4.00001H20C20.2652 4.00001 20.5196 4.10537 20.7071 4.2929C20.8946 4.48044 21 4.73479 21 5.00001V11C21.0008 11.2652 20.8962 11.5199 20.7092 11.708C20.5223 11.8961 20.2682 12.0022 20.003 12.003C19.7378 12.0038 19.4831 11.8992 19.295 11.7122C19.1069 11.5253 19.0008 11.2712 19 11.006V7.41501L11.707 14.707C11.6144 14.8002 11.5042 14.8741 11.3829 14.9244C11.2615 14.9747 11.1314 15.0004 11 15Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-filter-circle.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-filter-circle.svg new file mode 100644 index 0000000000..abeda4f184 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-filter-circle.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_521_2715" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_521_2715)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM7 8.5C6.44772 8.5 6 8.94772 6 9.5C6 10.0523 6.44772 10.5 7 10.5H17C17.5523 10.5 18 10.0523 18 9.5C18 8.94772 17.5523 8.5 17 8.5H7ZM9 12C8.44772 12 8 12.4477 8 13C8 13.5523 8.44772 14 9 14H15C15.5523 14 16 13.5523 16 13C16 12.4477 15.5523 12 15 12H9ZM11 15.5C10.4477 15.5 10 15.9477 10 16.5C10 17.0523 10.4477 17.5 11 17.5H13C13.5523 17.5 14 17.0523 14 16.5C14 15.9477 13.5523 15.5 13 15.5H11Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-grabber.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-grabber.svg new file mode 100644 index 0000000000..f8792121c1 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-grabber.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_1903_1526" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_1903_1526)"> + <path d="M4.32165 16.2682C4.09707 16.2682 3.90261 16.1833 3.73828 16.0135C3.57943 15.8437 3.5 15.6438 3.5 15.4137C3.5 15.1891 3.57943 14.9947 3.73828 14.8304C3.89713 14.666 4.09159 14.5839 4.32165 14.5839H19.6783C19.9029 14.5839 20.0947 14.666 20.2535 14.8304C20.4178 14.9947 20.5 15.1891 20.5 15.4137C20.5 15.6438 20.4178 15.8437 20.2535 16.0135C20.0947 16.1833 19.9029 16.2682 19.6783 16.2682H4.32165ZM4.32165 12.464C4.09707 12.464 3.90261 12.3818 3.73828 12.2175C3.57943 12.0477 3.5 11.8505 3.5 11.6259C3.5 11.3958 3.57943 11.1986 3.73828 11.0343C3.89713 10.8645 4.09159 10.7796 4.32165 10.7796H19.6783C19.9029 10.7796 20.0947 10.8645 20.2535 11.0343C20.4178 11.1986 20.5 11.3958 20.5 11.6259C20.5 11.8505 20.4178 12.0477 20.2535 12.2175C20.0947 12.3818 19.9029 12.464 19.6783 12.464H4.32165ZM4.32165 8.67617C4.09707 8.67617 3.90261 8.59401 3.73828 8.42968C3.57943 8.25987 3.5 8.06267 3.5 7.83809C3.5 7.60802 3.57943 7.41083 3.73828 7.2465C3.89713 7.08217 4.09159 7 4.32165 7H19.6783C19.9029 7 20.0947 7.08217 20.2535 7.2465C20.4178 7.41083 20.5 7.60802 20.5 7.83809C20.5 8.06267 20.4178 8.25987 20.2535 8.42968C20.0947 8.59401 19.9029 8.67617 19.6783 8.67617H4.32165Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-hide.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-hide.svg new file mode 100644 index 0000000000..4b429fa965 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-hide.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_519_2677" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_519_2677)"> + <path d="M12 6.98676C13.6716 6.98116 15.3108 7.45108 16.7292 8.34251C18.1476 9.23393 19.2876 10.5107 20.0182 12.0259C19.4909 13.1206 18.745 14.0938 17.8273 14.8845L19.1091 16.1764C20.3856 15.0435 21.3765 13.6208 22 12.0259C20.9982 9.4607 19.0645 7.37638 16.5922 6.1969C14.1198 5.01743 11.2945 4.83137 8.69091 5.67658L10.1909 7.18833C10.7858 7.06097 11.3918 6.99345 12 6.98676ZM11.0273 8.03124L12.9091 9.92781C13.4287 10.1585 13.8438 10.5769 14.0727 11.1006L15.9545 12.9971C16.0343 12.6764 16.0771 12.3474 16.0818 12.0168C16.0827 11.4763 15.9776 10.941 15.7728 10.4415C15.568 9.942 15.2673 9.48816 14.8882 9.10599C14.509 8.72382 14.0586 8.42084 13.563 8.2144C13.0674 8.00796 12.5363 7.90213 12 7.90297C11.6717 7.90384 11.3448 7.94695 11.0273 8.03124ZM2.91818 5.03523L5.35455 7.49068C3.85484 8.67366 2.69659 10.2396 2 12.0259C2.78976 14.0507 4.16597 15.7889 5.94951 17.0145C7.73305 18.2401 9.84134 18.8962 12 18.8975C13.3444 18.8988 14.6769 18.6439 15.9273 18.1462L19.0364 21.2797C19.2103 21.4298 19.434 21.5082 19.6628 21.4993C19.8916 21.4904 20.1086 21.3948 20.2705 21.2316C20.4324 21.0685 20.5273 20.8497 20.5361 20.6191C20.5449 20.3886 20.4671 20.1631 20.3182 19.9878C20 19.6369 4.53727 4.03381 4.2 3.7342C4.02018 3.58289 3.79335 3.5 3.55909 3.5C3.32483 3.5 3.098 3.58289 2.91818 3.7342C2.75557 3.91119 2.66524 4.14351 2.66524 4.38472C2.66524 4.62592 2.75557 4.85824 2.91818 5.03523ZM9.73636 11.9068L12.1091 14.2981C12.0736 14.3087 12.037 14.3149 12 14.3165C11.3972 14.3165 10.8192 14.0751 10.3929 13.6456C9.96672 13.216 9.72727 12.6334 9.72727 12.0259C9.72727 11.9801 9.73636 11.9526 9.73636 11.9068ZM6.64545 8.7917L8.23636 10.3951C8.02082 10.9114 7.90957 11.4658 7.90909 12.0259C7.90982 12.7078 8.07814 13.3788 8.39902 13.9791C8.7199 14.5794 9.18333 15.0902 9.74791 15.4659C10.3125 15.8416 10.9606 16.0705 11.6344 16.1321C12.3082 16.1938 12.9866 16.0862 13.6091 15.8191L14.5 16.7169C13.6858 16.9447 12.845 17.0618 12 17.0651C10.3284 17.0707 8.68921 16.6008 7.2708 15.7094C5.85239 14.8179 4.71238 13.5412 3.98182 12.0259C4.60619 10.7525 5.51856 9.64472 6.64545 8.7917Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-info-circle.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-info-circle.svg new file mode 100644 index 0000000000..242a66186f --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-info-circle.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_116_1925" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <path d="M24 0H0V24H24V0Z" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_116_1925)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM13 7C13 7.55228 12.5523 8 12 8C11.4477 8 11 7.55228 11 7C11 6.44772 11.4477 6 12 6C12.5523 6 13 6.44772 13 7ZM13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17V11C11 10.4477 11.4477 10 12 10C12.5523 10 13 10.4477 13 11V17Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-language.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-language.svg new file mode 100644 index 0000000000..2c62878774 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-language.svg @@ -0,0 +1,68 @@ +<svg width="16" height="19" viewBox="0 0 16 19" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g id="Language-Icon-Fireworks [Converted]"> + <path + id="Fill 1" + d="M7.99265 2.4425L1.80328 0.203491V14.0097L7.99265 11.9575V2.4425Z" + fill="#000105" /> + <path + id="Fill 2" + d="M7.84454 2.43615L14.2711 0.197144V14.0033L7.84454 11.9512V2.43615Z" + fill="#FFFFFE" /> + <path + id="Fill 3" + d="M0.19812 16.4269L7.84599 13.8142V2.43384L0.19812 5.04654V16.4269Z" + fill="#FFFFFE" /> + <path + id="Fill 4" + d="M11.3289 16.5986L12.4104 18.4259L12.9836 16.7285L11.3289 16.5986Z" + fill="#000105" /> + <path + id="Fill 5" + d="M2.79811 6.35674C2.75794 6.31636 2.85142 6.69085 2.9812 6.82544C3.04391 6.90299 3.12097 6.96705 3.20794 7.01393C3.29492 7.06081 3.39009 7.08958 3.48797 7.09859C3.70377 7.10051 3.91787 7.05936 4.11834 6.97745C4.32665 6.90182 4.50659 6.76116 4.63283 6.57526C4.66044 6.53201 4.67855 6.48313 4.68588 6.432C4.69322 6.38087 4.68962 6.32871 4.67532 6.27915C4.67325 6.2525 4.66589 6.22657 4.6537 6.20294C4.64151 6.17931 4.62473 6.15849 4.60441 6.14173C4.58409 6.12498 4.56064 6.11266 4.53551 6.10552C4.51037 6.09838 4.48408 6.09658 4.45824 6.10022C4.26471 6.13342 4.07368 6.18051 3.88658 6.24115C3.73208 6.28865 3.42308 6.38682 3.28325 6.41691C3.11919 6.44137 2.95174 6.42061 2.79811 6.35674Z" + fill="#000105" /> + <path + id="Fill 6" + d="M6.65638 10.8388C6.59613 10.8166 5.34929 10.2846 5.17316 10.2006C5.0287 10.1294 4.67411 9.97578 4.50725 9.90611C4.97694 9.16267 5.27358 8.60292 5.31375 8.51741C5.38714 8.35907 5.88387 7.36386 5.89546 7.30211C5.91103 7.18725 5.91568 7.07111 5.90936 6.95533C5.89855 6.89991 5.71623 7.00679 5.46826 7.09309C5.22028 7.17939 4.74905 7.4945 4.56751 7.5325C4.38597 7.5705 3.80117 7.79852 3.50221 7.89986C3.20325 8.00121 2.63854 8.17855 2.40602 8.24268C2.17349 8.30681 1.96955 8.31156 1.83745 8.35194C1.84417 8.43517 1.86238 8.51701 1.89152 8.595C1.96461 8.70357 2.07004 8.78496 2.19203 8.82698C2.35326 8.85912 2.51903 8.85912 2.68026 8.82698C2.79662 8.79806 2.90565 8.74408 3.00008 8.66863C3.02557 8.62746 2.98695 8.4992 3.02943 8.46041C3.07192 8.42161 3.64126 8.28544 3.85602 8.22289C4.2316 8.0821 4.61523 7.96497 5.00475 7.87215C4.96921 7.9925 4.30949 9.33448 4.09473 9.73509C3.87997 10.1357 2.64472 11.8981 2.37821 12.2085C2.18122 12.4444 1.69608 13.0485 1.52844 13.1847C1.66253 13.1907 1.79667 13.1741 1.92551 13.1356C2.33034 12.792 2.69623 12.403 3.0163 11.9757C3.5203 11.363 3.9875 10.7194 4.41532 10.0486C4.49257 10.0803 5.08509 10.5775 5.24037 10.6883C5.39564 10.7992 6.01288 11.1499 6.14266 11.2077C6.27244 11.2655 6.78694 11.5078 6.80857 11.4262C6.80322 11.2206 6.75026 11.0193 6.65406 10.8388" + fill="#000105" /> + <path + id="Fill 7" + d="M3.77635 17.4918C3.89224 17.5641 4.0119 17.63 4.1348 17.6889C4.39791 17.8264 4.66818 17.9491 4.94439 18.0563C5.3082 18.1967 5.68057 18.3125 6.05913 18.4031C6.26462 18.4506 6.49019 18.4917 6.70958 18.5258C6.72967 18.5258 7.31987 18.6002 7.43961 18.6002H8.03676C8.26851 18.5796 8.48791 18.5662 8.72043 18.5321C8.90661 18.5052 9.1121 18.4712 9.31063 18.4236C9.45664 18.3896 9.6096 18.3556 9.7556 18.3081C9.90161 18.2606 10.0546 18.213 10.2067 18.1584C10.3064 18.1244 10.4122 18.0792 10.5158 18.0357C10.6046 17.9953 10.7104 17.9486 10.8101 17.9066C10.9298 17.852 11.0689 17.7776 11.2017 17.7095C11.3076 17.6549 11.4273 17.5868 11.5401 17.5187C11.6266 17.4736 11.8252 17.3152 11.9318 17.3152C11.9843 17.3164 12.0343 17.3383 12.0714 17.3764C12.1085 17.4144 12.1299 17.4657 12.1311 17.5195C12.1311 17.7166 11.8723 17.7776 11.7525 17.8663C11.6328 17.9549 11.4737 18.0246 11.3408 18.0975C11.0824 18.2355 10.8165 18.3582 10.5443 18.4648C10.2036 18.5966 9.85561 18.7079 9.50222 18.7981C9.3763 18.8251 9.25038 18.8591 9.12368 18.8773C9.05725 18.8908 8.36739 19 8.17504 19H7.29978C7.06803 18.9794 6.82237 18.9525 6.58984 18.9209C6.38435 18.8868 6.16496 18.8464 5.95947 18.7981C5.80034 18.7641 5.62806 18.719 5.47511 18.6691C5.21174 18.5926 4.95257 18.5017 4.69873 18.3967C4.21072 18.2132 3.7443 17.9742 3.30821 17.6842C3.27956 17.6669 3.25646 17.6415 3.24177 17.611C3.22708 17.5804 3.22144 17.5462 3.22555 17.5124C3.22502 17.4863 3.22964 17.4605 3.23912 17.4363C3.2486 17.4121 3.26275 17.3902 3.28072 17.3718C3.29869 17.3534 3.3201 17.3389 3.34368 17.3291C3.36725 17.3194 3.3925 17.3147 3.41791 17.3152C3.54665 17.3518 3.66803 17.4116 3.77635 17.4918Z" + fill="#000105" /> + <g id="Group 11"> + <g id="Clip path group"> + <mask + id="mask0_519_2530" + style="mask-type: luminance" + maskUnits="userSpaceOnUse" + x="0" + y="0" + width="15" + height="17"> + <g id="clip-path"> + <path id="Clip 9" d="M0 0H14.4723V16.6263H0V0Z" fill="white" /> + </g> + </mask> + <g mask="url(#mask0_519_2530)"> + <g id="Group 11_2"> + <path + id="Fill 8" + d="M0.198536 16.6279C0.156998 16.6257 0.116933 16.6114 0.0830126 16.5867C0.0490921 16.562 0.0227135 16.528 0.00695261 16.4886C0.00749474 16.4857 0.00749474 16.4827 0.00695261 16.4798C0.00271452 16.4732 0.000311045 16.4656 0 16.4577L0 5.0259C0 5.0164 0.00695261 5.00531 0.0100427 4.99423C0.0158898 4.96527 0.0283306 4.93815 0.0463508 4.91505C0.09062 4.86341 0.150924 4.82902 0.217076 4.81767L0.251839 4.80738C0.322138 4.78284 7.72513 2.23743 7.83019 2.23743C7.90203 2.23743 8.04263 2.28889 8.04263 2.40765V13.8331C8.03539 13.8705 8.0195 13.9055 7.99628 13.9352C7.98174 13.9585 7.96114 13.9772 7.9368 13.9891C7.87268 14.0152 0.317503 16.6279 0.198536 16.6279ZM7.63783 2.72672L0.404797 5.19612V16.1315L7.63783 13.6621V2.72672Z" + fill="#000105" /> + <path + id="Fill 10" + d="M14.2596 14.1998C14.0213 14.1421 13.7863 14.0707 13.5558 13.986H13.552L13.4438 13.9496L12.5523 13.6677C12.0209 13.4999 11.4708 13.3257 10.9355 13.1547L10.7501 13.0937C10.6242 13.0526 10.4975 13.0146 10.3785 12.9702C10.1916 12.914 10.0255 12.861 9.88718 12.8119L9.57277 12.7129C8.97175 12.5237 8.34988 12.3273 7.74423 12.1191C7.70212 12.0884 7.66964 12.0457 7.65076 11.9964L7.65076 2.38719V2.37531C7.66104 2.33978 7.68053 2.30777 7.70715 2.28268C7.75968 2.22805 9.77362 1.53925 10.7408 1.2083L10.9347 1.1418C11.2159 1.03887 14.1684 0.000123964 14.2596 0.000123964C14.2877 -0.000864301 14.3157 0.00406493 14.3418 0.0146068C14.368 0.0251486 14.3918 0.0410789 14.4117 0.0614123C14.4316 0.0817457 14.4472 0.10605 14.4576 0.132822C14.468 0.159593 14.4729 0.188263 14.472 0.217058V13.9757C14.4731 14.0049 14.4684 14.034 14.4581 14.0612C14.4479 14.0885 14.4324 14.1133 14.4125 14.1343C14.3927 14.1552 14.3689 14.1718 14.3426 14.1831C14.3163 14.1943 14.2881 14.2 14.2596 14.1998ZM14.0672 0.489413L8.04937 2.58433V11.7969L14.0672 13.7152V0.489413Z" + fill="#000105" /> + </g> + </g> + </g> + </g> + <path + id="Fill 12" + d="M16 16.5993L7.95972 13.9724L7.99371 2.53821L16 5.15091V16.5993Z" + fill="#000105" /> + <path + id="Fill 13" + d="M14.3965 13.0951L13.3327 12.7642L12.9503 11.3335L10.751 10.6502L10.2782 11.8196L9.21368 11.4847L11.4733 5.80249L12.5092 6.12393L14.3957 13.0911L14.3965 13.0951ZM11.9468 7.64801L11.1573 9.60279L12.6081 10.0533L11.9468 7.64801Z" + fill="#FFFFFE" /> + </g> +</svg> diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-more-horizontal-circle.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-more-horizontal-circle.svg new file mode 100644 index 0000000000..4bf927854e --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-more-horizontal-circle.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_522_2738" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_522_2738)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12 13.5C12.8284 13.5 13.5 12.8284 13.5 12C13.5 11.1716 12.8284 10.5 12 10.5C11.1716 10.5 10.5 11.1716 10.5 12C10.5 12.8284 11.1716 13.5 12 13.5ZM8.5 12C8.5 12.8284 7.82843 13.5 7 13.5C6.17157 13.5 5.5 12.8284 5.5 12C5.5 11.1716 6.17157 10.5 7 10.5C7.82843 10.5 8.5 11.1716 8.5 12ZM17 13.5C17.8284 13.5 18.5 12.8284 18.5 12C18.5 11.1716 17.8284 10.5 17 10.5C16.1716 10.5 15.5 11.1716 15.5 12C15.5 12.8284 16.1716 13.5 17 13.5Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-more-horizontal.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-more-horizontal.svg new file mode 100644 index 0000000000..da5e0fc81c --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-more-horizontal.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_1578_8073" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_1578_8073)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M8 12C8 13.1046 7.10457 14 6 14C4.89543 14 4 13.1046 4 12C4 10.8954 4.89543 10 6 10C7.10457 10 8 10.8954 8 12ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12ZM18 14C19.1046 14 20 13.1046 20 12C20 10.8954 19.1046 10 18 10C16.8954 10 16 10.8954 16 12C16 13.1046 16.8954 14 18 14Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-more-vertical-circle.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-more-vertical-circle.svg new file mode 100644 index 0000000000..3703c2823d --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-more-vertical-circle.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_1744_3796" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_1744_3796)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM12 13.5C12.8284 13.5 13.5 12.8284 13.5 12C13.5 11.1716 12.8284 10.5 12 10.5C11.1716 10.5 10.5 11.1716 10.5 12C10.5 12.8284 11.1716 13.5 12 13.5ZM13.5 7C13.5 7.82843 12.8284 8.5 12 8.5C11.1716 8.5 10.5 7.82843 10.5 7C10.5 6.17157 11.1716 5.5 12 5.5C12.8284 5.5 13.5 6.17157 13.5 7ZM12 18.5C12.8284 18.5 13.5 17.8284 13.5 17C13.5 16.1716 12.8284 15.5 12 15.5C11.1716 15.5 10.5 16.1716 10.5 17C10.5 17.8284 11.1716 18.5 12 18.5Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-more-vertical.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-more-vertical.svg new file mode 100644 index 0000000000..89526553a2 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-more-vertical.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_522_2719" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_522_2719)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M14 6C14 7.10457 13.1046 8 12 8C10.8954 8 10 7.10457 10 6C10 4.89543 10.8954 4 12 4C13.1046 4 14 4.89543 14 6ZM14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12ZM12 20C13.1046 20 14 19.1046 14 18C14 16.8954 13.1046 16 12 16C10.8954 16 10 16.8954 10 18C10 19.1046 10.8954 20 12 20Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-reconnect.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-reconnect.svg new file mode 100644 index 0000000000..cc203ec2c5 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-reconnect.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_605_13351" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_605_13351)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C6 8.68629 8.68629 6 12 6C13.7762 6 15.3729 6.77144 16.4724 8H15C14.4477 8 14 8.44772 14 9C14 9.55228 14.4477 10 15 10H19C19.5523 10 20 9.55228 20 9V5C20 4.44772 19.5523 4 19 4C18.4477 4 18 4.44772 18 5V6.70853C16.535 5.04867 14.3903 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C14.13 20 16.0674 19.1663 17.5001 17.8094C17.9011 17.4296 17.9183 16.7967 17.5386 16.3957C17.1588 15.9947 16.5259 15.9775 16.1249 16.3572C15.0487 17.3764 13.5983 18 12 18C8.68629 18 6 15.3137 6 12Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-remove-circle.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-remove-circle.svg new file mode 100644 index 0000000000..cfeeca72f4 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-remove-circle.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_150_69" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <path d="M24 0H0V24H24V0Z" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_150_69)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM8 11C7.44772 11 7 11.4477 7 12C7 12.5523 7.44772 13 8 13H12H16C16.5523 13 17 12.5523 17 12C17 11.4477 16.5523 11 16 11H12H8Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-search-circle.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-search-circle.svg new file mode 100644 index 0000000000..4f99c8d33b --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-search-circle.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_1747_3962" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_1747_3962)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM13.7574 15.1716C12.967 15.6951 12.0191 16 11 16C8.23858 16 6 13.7614 6 11C6 8.23858 8.23858 6 11 6C13.7614 6 16 8.23858 16 11C16 12.0191 15.6951 12.967 15.1716 13.7574L17.7071 16.2929C18.0976 16.6834 18.0976 17.3166 17.7071 17.7071C17.3166 18.0976 16.6834 18.0976 16.2929 17.7071L13.7574 15.1716ZM8 11C8 9.34315 9.34315 8 11 8C12.6569 8 14 9.34315 14 11C14 12.6569 12.6569 14 11 14C9.34315 14 8 12.6569 8 11Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-search.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-search.svg new file mode 100644 index 0000000000..211a98a03e --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-search.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_519_2680" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_519_2680)"> + <path fill-rule="evenodd" clip-rule="evenodd" d="M7 10C7 7.79086 8.79086 6 11 6C13.2091 6 15 7.79086 15 10C15 11.2998 14.38 12.4548 13.4196 13.1855C13.4066 13.1947 13.3938 13.2044 13.3812 13.2143C12.7159 13.708 11.8921 14 11 14C8.79086 14 7 12.2091 7 10ZM13.861 15.2752C13.0106 15.7374 12.036 16 11 16C7.68629 16 5 13.3137 5 10C5 6.68629 7.68629 4 11 4C14.3137 4 17 6.68629 17 10C17 11.5515 16.4111 12.9654 15.4447 14.0305L19.7071 18.2929C20.0976 18.6834 20.0976 19.3166 19.7071 19.7071C19.3166 20.0976 18.6834 20.0976 18.2929 19.7071L13.861 15.2752Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-settings-filled.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-settings-filled.svg new file mode 100644 index 0000000000..289bc9e4a0 --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-settings-filled.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_519_2674" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_519_2674)"> + <path d="M14.0574 22H9.94487C9.82552 22.0017 9.7095 21.9606 9.6178 21.8842C9.52609 21.8078 9.46476 21.7011 9.44487 21.5834L9.05404 18.9326C8.43311 18.683 7.84779 18.3526 7.31321 17.95L4.75321 18.9501C4.69568 18.9705 4.63508 18.9809 4.57404 18.9809C4.48399 18.9826 4.3951 18.9603 4.31647 18.9164C4.23784 18.8725 4.1723 18.8085 4.12654 18.7309L2.07071 15.27C2.0102 15.1665 1.98944 15.0444 2.01228 14.9267C2.03513 14.8089 2.10003 14.7035 2.19487 14.63L4.36154 12.98C4.31687 12.6552 4.29321 12.3279 4.29071 12C4.29343 11.6725 4.31737 11.3454 4.36237 11.0209L2.19571 9.37088C2.0985 9.29903 2.0318 9.19332 2.00881 9.07465C1.98582 8.95598 2.0082 8.833 2.07154 8.73005L4.12654 5.27005C4.17041 5.19235 4.23426 5.12781 4.31149 5.08312C4.38871 5.03842 4.47649 5.01521 4.56571 5.01588C4.62982 5.01602 4.69336 5.02788 4.75321 5.05088L7.31321 6.05088C7.84873 5.65203 8.43252 5.32247 9.05071 5.07005L9.44154 2.41672C9.46142 2.29901 9.52276 2.19231 9.61446 2.11589C9.70617 2.03947 9.82218 1.99838 9.94154 2.00005H14.0574C14.1767 1.99838 14.2927 2.03947 14.3845 2.11589C14.4762 2.19231 14.5375 2.29901 14.5574 2.41672L14.9482 5.06672C15.5691 5.31679 16.1544 5.6474 16.689 6.05005L19.249 5.05005C19.3066 5.02962 19.3672 5.0192 19.4282 5.01922C19.5183 5.01751 19.6071 5.03975 19.6858 5.08368C19.7644 5.12761 19.83 5.19164 19.8757 5.26922L21.9324 8.73005C21.9919 8.83402 22.0121 8.95591 21.9893 9.07352C21.9665 9.19114 21.9022 9.29666 21.8082 9.37088L19.6415 11.0209C19.6857 11.3454 19.7091 11.6725 19.7115 12C19.7086 12.3279 19.6847 12.6552 19.6399 12.98L21.8065 14.63C21.9014 14.7035 21.9663 14.8089 21.9891 14.9267C22.012 15.0444 21.9912 15.1665 21.9307 15.27L19.874 18.7309C19.8301 18.8087 19.7661 18.8733 19.6887 18.918C19.6114 18.9627 19.5234 18.9859 19.434 18.9851C19.3699 18.985 19.3064 18.9731 19.2465 18.9501L16.6865 17.95C16.1512 18.3487 15.5673 18.6777 14.949 18.9292L14.5607 21.5834C14.5407 21.7017 14.4789 21.8088 14.3865 21.8853C14.2941 21.9618 14.1773 22.0025 14.0574 22ZM11.999 7.83338C11.175 7.83338 10.3694 8.07775 9.68416 8.53559C8.99896 8.99343 8.46491 9.64418 8.14954 10.4055C7.83418 11.1669 7.75166 12.0047 7.91244 12.8129C8.07321 13.6212 8.47004 14.3636 9.05276 14.9463C9.63548 15.529 10.3779 15.9259 11.1862 16.0867C11.9944 16.2474 12.8322 16.1649 13.5936 15.8495C14.3549 15.5342 15.0057 15.0001 15.4635 14.3149C15.9213 13.6297 16.1657 12.8241 16.1657 12C16.1646 10.8953 15.7253 9.83615 14.9441 9.05499C14.1629 8.27383 13.1038 7.83449 11.999 7.83338Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/assets/images/icons/icon-show.svg b/desktop/packages/mullvad-vpn/assets/images/icons/icon-show.svg new file mode 100644 index 0000000000..a4b2aa591d --- /dev/null +++ b/desktop/packages/mullvad-vpn/assets/images/icons/icon-show.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> + <mask id="mask0_519_2676" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"> + <rect width="24" height="24" fill="#D9D9D9"/> + </mask> + <g mask="url(#mask0_519_2676)"> + <path d="M12 7.2334C13.6716 7.2281 15.3108 7.67263 16.7292 8.51588C18.1476 9.35913 19.2876 10.5669 20.0182 12.0003C19.2832 13.4303 18.1421 14.6351 16.7247 15.4778C15.3073 16.3204 13.6704 16.7671 12 16.7671C10.3296 16.7671 8.69269 16.3204 7.27529 15.4778C5.85789 14.6351 4.71684 13.4303 3.98182 12.0003C4.71238 10.5669 5.85239 9.35913 7.2708 8.51588C8.68921 7.67263 10.3284 7.2281 12 7.2334ZM12 5.5C9.84134 5.50123 7.73305 6.1219 5.94951 7.28125C4.16597 8.4406 2.78976 10.0849 2 12.0003C2.78879 13.9162 4.16477 15.5611 5.94855 16.7205C7.73232 17.8799 9.84112 18.5 12 18.5C14.1589 18.5 16.2677 17.8799 18.0515 16.7205C19.8352 15.5611 21.2112 13.9162 22 12.0003C21.2102 10.0849 19.834 8.4406 18.0505 7.28125C16.2669 6.1219 14.1587 5.50123 12 5.5ZM12 9.8335C12.4495 9.8335 12.8889 9.96058 13.2627 10.1987C13.6364 10.4367 13.9277 10.7751 14.0997 11.1711C14.2717 11.567 14.3168 12.0027 14.2291 12.423C14.1414 12.8433 13.9249 13.2294 13.6071 13.5324C13.2892 13.8354 12.8843 14.0418 12.4434 14.1254C12.0025 14.209 11.5456 14.1661 11.1303 14.0021C10.715 13.8381 10.36 13.5604 10.1103 13.204C9.86057 12.8477 9.72727 12.4288 9.72727 12.0003C9.72727 11.4256 9.96672 10.8745 10.3929 10.4681C10.8192 10.0618 11.3972 9.8335 12 9.8335ZM12 8.1001C11.1909 8.1001 10.4 8.32884 9.72721 8.75739C9.05447 9.18595 8.53012 9.79507 8.22049 10.5077C7.91086 11.2204 7.82985 12.0046 7.9877 12.7611C8.14555 13.5177 8.53517 14.2126 9.10729 14.7581C9.67942 15.3035 10.4083 15.675 11.2019 15.8255C11.9955 15.976 12.818 15.8987 13.5655 15.6035C14.313 15.3083 14.952 14.8084 15.4015 14.1671C15.851 13.5257 16.0909 12.7716 16.0909 12.0003C16.0892 10.9664 15.6577 9.97527 14.8909 9.2442C14.124 8.51313 13.0845 8.10171 12 8.1001Z" fill="white"/> + </g> +</svg>
\ No newline at end of file diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx index 90dd080529..f0ce07b98b 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/InfoButton.tsx @@ -36,7 +36,7 @@ export default function InfoButton({ title, message, children, ...props }: InfoB return ( <> <IconButton - icon="icon-info" + icon="info-circle" onClick={show} aria-label={messages.pgettext('accessibility', 'More information')} {...props} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx index 35af1724c5..9858e7a2f4 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/NotificationBanner.tsx @@ -86,8 +86,7 @@ export function NotificationCloseAction(props: NotificationActionProps) { aria-describedby={NOTIFICATION_AREA_ID} aria-label={messages.pgettext('accessibility', 'Close notification')} onClick={props.onClick} - icon="icon-close" - size="medium" + icon="cross-circle" variant="secondary" /> ); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx index baccb60f42..7b2fc60cc2 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/SettingsTextImport.tsx @@ -60,7 +60,7 @@ export default function SettingsTextImport() { } titleVisible> <AppNavigationHeader.IconButton - icon="icon-check" + icon="checkmark" onClick={save} aria-label={messages.gettext('Save')} /> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderAccountButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderAccountButton.tsx index f66ba6d17f..be10808816 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderAccountButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderAccountButton.tsx @@ -22,7 +22,7 @@ export const AppMainHeaderBarAccountButton = (props: MainHeaderBarAccountButtonP return ( <MainHeader.IconButton - icon="icon-account" + icon="account-circle" onClick={openAccount} data-testid="account-button" aria-label={messages.gettext('Account settings')} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx index d738f502a3..9ecaab479e 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-main-header/components/AppMainHeaderSettingsButton.tsx @@ -18,7 +18,7 @@ export function AppMainHeaderSettingsButton(props: MainHeaderSettingsButtonProps return ( <MainHeader.IconButton - icon="icon-settings" + icon="settings-filled" onClick={openSettings} aria-label={messages.gettext('Settings')} /> diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx index e30f5f4dbe..13e26f3444 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/app-navigation-header/components/AppNavigationHeaderBackButton.tsx @@ -17,7 +17,7 @@ export const AppNavigationHeaderBackButton = () => { if (!parentBackAction) return null; - const iconSource = backIcon ? 'icon-back' : 'icon-close-down'; + const iconSource = backIcon ? 'chevron-left-circle' : 'chevron-down-circle'; const ariaLabel = backIcon ? messages.gettext('Back') : messages.gettext('Close'); return ( diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx index d650fd1802..31a56926ae 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/components/select-location/SelectLocation.tsx @@ -137,7 +137,7 @@ export default function SelectLocation() { } titleVisible> <IconButton - icon="icon-filter-round" + icon="filter-circle" variant="secondary" onClick={onViewFilter} aria-label={messages.gettext('Filter')} diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx index 18cf773b40..80126341e7 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon-button/IconButton.tsx @@ -9,7 +9,7 @@ export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> { variant?: 'primary' | 'secondary'; size?: IconProps['size']; - icon: string; + icon: IconProps['icon']; } const variants = { @@ -26,11 +26,11 @@ const variants = { } as const; const sizes = { - small: 12, - medium: 16, - large: 24, - big: 32, - huge: 48, + tiny: 12, + small: 16, + medium: 24, + large: 32, + big: 48, }; const StyledButton = styled.button({ @@ -56,7 +56,7 @@ const StyledIcon = styled(Icon)<IconProps & { $hoverColor: string; $disabled?: b ); export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>( - ({ icon, variant = 'primary', size: sizeProp = 'large', disabled, style, ...props }, ref) => { + ({ icon, variant = 'primary', size: sizeProp = 'medium', disabled, style, ...props }, ref) => { const styles = variants[variant]; const size = sizes[sizeProp]; return ( @@ -71,7 +71,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>( } {...props}> <StyledIcon - src={icon} + icon={icon} color={styles.background} size={sizeProp} $hoverColor={styles.hover} diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx index 888d8105e9..59ed3fd1fb 100644 --- a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/Icon.tsx @@ -1,16 +1,20 @@ import styled from 'styled-components'; +import { Colors } from '../../foundations'; import { TransientProps } from '../../types'; +import { icons } from './types'; export type IconProps = { - src: string; - size?: 'small' | 'medium' | 'large' | 'big' | 'huge'; - color?: string; + icon: keyof typeof icons; + size?: 'tiny' | 'small' | 'medium' | 'large' | 'big'; + color?: Colors; alt?: string; className?: string; }; -const StyledIcon = styled.div<TransientProps<Pick<IconProps, 'color' | 'src'>> & { $size: number }>` +const StyledIcon = styled.div< + TransientProps<Pick<IconProps, 'color'>> & { $size: number; $src: string } +>` width: ${({ $size }) => $size}px; height: ${({ $size }) => $size}px; mask: url(${({ $src }) => $src}) no-repeat center; @@ -19,22 +23,23 @@ const StyledIcon = styled.div<TransientProps<Pick<IconProps, 'color' | 'src'>> & `; const sizes = { - small: 12, - medium: 16, - large: 24, - big: 32, - huge: 48, + tiny: 12, + small: 16, + medium: 24, + large: 32, + big: 48, }; -export const Icon = ({ src: srcProp, size = 'large', color, alt, ...props }: IconProps) => { - const src = srcProp.startsWith('data:') ? srcProp : `../../assets/images/${srcProp}.svg`; +export const Icon = ({ icon: iconProp, size = 'medium', color, alt, ...props }: IconProps) => { + const icon = icons[iconProp]; + const src = iconProp.startsWith('data:') ? iconProp : `../../assets/images/icons/${icon}.svg`; return ( <StyledIcon $src={src} $size={sizes[size]} $color={color} role="img" - aria-label={alt || srcProp} + aria-label={alt || iconProp} {...props} /> ); diff --git a/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/types.ts b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/types.ts new file mode 100644 index 0000000000..caf4bfa9f9 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/lib/components/icon/types.ts @@ -0,0 +1,35 @@ +export const icons = { + 'account-circle': 'icon-account-circle', + 'add-circle': 'icon-add-circle', + 'alert-circle': 'icon-alert-circle', + 'checkmark-circle': 'icon-checkmark-circle', + checkmark: 'icon-checkmark', + 'chevron-down-circle': 'icon-chevron-down-circle', + 'chevron-down': 'icon-chevron-down', + 'chevron-left-circle': 'icon-chevron-left-circle', + 'chevron-left': 'icon-chevron-left', + 'chevron-right-circle': 'icon-chevron-right-circle', + 'chevron-right': 'icon-chevron-right', + 'chevron-up-circle': 'icon-chevron-up-circle', + 'chevron-up': 'icon-chevron-up', + copy: 'icon-copy', + 'cross-circle': 'icon-cross-circle', + cross: 'icon-cross', + 'edit-circle': 'icon-edit-circle', + external: 'icon-external', + 'filter-circle': 'icon-filter-circle', + grabber: 'icon-grabber', + hide: 'icon-hide', + 'info-circle': 'icon-info-circle', + language: 'icon-language', + 'more-horizontal-circle': 'icon-more-horizontal-circle', + 'more-horizontal': 'icon-more-horizontal', + 'more-vertical-circle': 'icon-more-vertical-circle', + 'more-vertical': 'icon-more-vertical', + reconnect: 'icon-reconnect', + 'remove-circle': 'icon-remove-circle', + 'search-circle': 'icon-search-circle', + search: 'icon-search', + 'settings-filled': 'icon-settings-filled', + show: 'icon-show', +}; |
