Deduplicate icons using Compound Design Tokens (#28419)

* Deduplicate icons using Compound Design Tokens Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots & snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-11-11 17:27:22 +00:00 · 2024-11-11 17:27:22 +00:00 · db30bc51a1
parent c8c107405f
commit db30bc51a1
34 changed files with 117 additions and 79 deletions
--- a/playwright/snapshots/register/email.spec.ts/registration-check-your-email-linux.png
+++ b/playwright/snapshots/register/email.spec.ts/registration-check-your-email-linux.png
--- a/playwright/snapshots/register/register.spec.ts/registration-linux.png
+++ b/playwright/snapshots/register/register.spec.ts/registration-linux.png
--- a/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png
+++ b/playwright/snapshots/register/register.spec.ts/terms-prompt-linux.png
--- a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
+++ b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/appearance-tab-linux.png
--- a/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png
+++ b/playwright/snapshots/settings/appearance-user-settings-tab/appearance-user-settings-tab.spec.ts/window-12px-linux.png
--- a/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png
+++ b/playwright/snapshots/settings/general-room-settings-tab.spec.ts/General-room-settings-tab-should-be-rendered-properly-1-linux.png
--- a/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
+++ b/playwright/snapshots/settings/preferences-user-settings-tab.spec.ts/Preferences-user-settings-tab-should-be-rendered-properly-1-linux.png
--- a/playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png
+++ b/playwright/snapshots/settings/security-user-settings-tab.spec.ts/Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1-linux.png
--- a/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-linux.png
+++ b/playwright/snapshots/spaces/threads-activity-centre/threadsActivityCentre.spec.ts/tac-hovered-linux.png
--- a/res/css/_common.pcss
+++ b/res/css/_common.pcss
@ -186,7 +186,7 @@ input[type="search"].mx_textinput_icon {
 /* FIXME THEME - Tint by CSS rather than referencing a duplicate asset */
 input[type="text"].mx_textinput_icon.mx_textinput_search,
 input[type="search"].mx_textinput_icon.mx_textinput_search {
-    background-image: url("$(res)/img/feather-customised/search-input.svg");
+    background-image: url("@vector-im/compound-design-tokens/icons/search.svg");
 }

 /* dont search UI as not all browsers support it, */
--- a/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss
+++ b/res/css/components/views/settings/devices/_DeviceExpandDetailsButton.pcss
@ -32,8 +32,8 @@ Please see LICENSE files in the repository root for full details.
 }

 .mx_DeviceExpandDetailsButton_icon {
-    height: 16px;
-    width: 16px;
+    height: 24px;
+    width: 24px;

    transition: all 0.3s;
    transform: var(--icon-transform);
--- a/res/css/structures/_GenericDropdownMenu.pcss
+++ b/res/css/structures/_GenericDropdownMenu.pcss
@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details.
    width: 18px;
    height: 18px;
    background: currentColor;
-    mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
    mask-size: 100%;
    mask-repeat: no-repeat;
    float: right;
--- a/res/css/structures/_RoomView.pcss
+++ b/res/css/structures/_RoomView.pcss
@ -62,7 +62,7 @@ Please see LICENSE files in the repository root for full details.

    &::before {
        background-color: $info-plinth-fg-color;
-        mask: url("$(res)/img/feather-customised/search-input.svg");
+        mask: url("@vector-im/compound-design-tokens/icons/search.svg");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 50px;
--- a/res/css/structures/_SpaceHierarchy.pcss
+++ b/res/css/structures/_SpaceHierarchy.pcss
@ -121,7 +121,7 @@ Please see LICENSE files in the repository root for full details.
            background-color: $tertiary-content;
            mask-size: 16px;
            transform: rotate(270deg);
-            mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
        }

        &.mx_SpaceHierarchy_subspace_toggle_shown::before {
--- a/res/css/structures/_SpacePanel.pcss
+++ b/res/css/structures/_SpacePanel.pcss
@ -48,7 +48,7 @@ Please see LICENSE files in the repository root for full details.
            mask-size: contain;
            mask-repeat: no-repeat;
            background-color: $background;
-            mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
            transform: rotate(270deg);
        }

@ -169,7 +169,7 @@ Please see LICENSE files in the repository root for full details.
            mask-size: 20px;
            mask-repeat: no-repeat;
            background-color: $tertiary-content;
-            mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
        }

        .mx_SpaceButton_icon {
--- a/res/css/views/dialogs/_AnalyticsLearnMoreDialog.pcss
+++ b/res/css/views/dialogs/_AnalyticsLearnMoreDialog.pcss
@ -36,9 +36,24 @@ Please see LICENSE files in the repository root for full details.
    }

    .mx_AnalyticsLearnMore_bullets li {
-        background: url("$(res)/img/tick-circle.svg") no-repeat;
        list-style-type: none;
-        padding: 2px 0px 20px 32px;
+        padding: 2px 0 0 32px;
+        margin-bottom: 20px;
        vertical-align: middle;
+        position: relative;
+
+        &::before {
+            content: "";
+            position: absolute;
+            width: 26px;
+            height: 26px;
+            left: 0;
+            top: 0;
+            background-color: #0dbd8b;
+            mask-image: url("@vector-im/compound-design-tokens/icons/check-circle.svg");
+            mask-repeat: no-repeat;
+            mask-position: center;
+            mask-size: contain;
+        }
    }
 }
--- a/res/css/views/elements/_Dropdown.pcss
+++ b/res/css/views/elements/_Dropdown.pcss
@ -39,11 +39,13 @@ Please see LICENSE files in the repository root for full details.
 }

 .mx_Dropdown_arrow {
-    width: 10px;
-    height: 6px;
-    padding-right: 9px;
-    mask: url("$(res)/img/feather-customised/dropdown-arrow.svg");
+    width: 16px;
+    height: 16px;
+    margin-right: 4px;
+    mask: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: 18px;
    background: $primary-content;
 }

--- a/res/css/views/elements/_Field.pcss
+++ b/res/css/views/elements/_Field.pcss
@ -51,12 +51,15 @@ Please see LICENSE files in the repository root for full details.
 .mx_Field_select::before {
    content: "";
    position: absolute;
-    top: 15px;
-    right: 10px;
-    width: 10px;
-    height: 6px;
-    mask: url("$(res)/img/feather-customised/dropdown-arrow.svg");
+    top: 50%;
+    transform: translateY(-50%);
+    right: 4px;
+    width: 18px;
+    height: 18px;
+    mask: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
    background-color: $primary-content;
    z-index: 1;
    pointer-events: none;
--- a/res/css/views/messages/_DateSeparator.pcss
+++ b/res/css/views/messages/_DateSeparator.pcss
@ -30,6 +30,6 @@ Please see LICENSE files in the repository root for full details.
    mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
-    mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+    mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
    background-color: var(--cpd-color-icon-secondary);
 }
--- a/res/css/views/right_panel/_ThreadPanel.pcss
+++ b/res/css/views/right_panel/_ThreadPanel.pcss
@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
                    width: 18px;
                    height: 18px;
                    background: currentColor;
-                    mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
                    mask-size: 100%;
                    mask-repeat: no-repeat;
                    float: right;
--- a/res/css/views/right_panel/_UserInfo.pcss
+++ b/res/css/views/right_panel/_UserInfo.pcss
@ -26,9 +26,9 @@ Please see LICENSE files in the repository root for full details.
            height: 16px;
            width: 16px;
            padding: 4px;
-            mask-image: url("$(res)/img/minimise.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/chevron-left.svg");
            mask-repeat: no-repeat;
-            mask-position: 7px center;
+            mask-position: center;
            background-color: $header-panel-text-primary-color;
        }
    }
--- a/res/css/views/rooms/_LinkPreviewGroup.pcss
+++ b/res/css/views/rooms/_LinkPreviewGroup.pcss
@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
        }
    }

-    &:hover .mx_LinkPreviewGroup_hide img,
+    &:hover .mx_LinkPreviewGroup_hide svg,
    .mx_LinkPreviewGroup_hide:focus-visible:focus svg {
        visibility: visible;
    }
--- a/res/css/views/rooms/_RoomListHeader.pcss
+++ b/res/css/views/rooms/_RoomListHeader.pcss
@ -42,7 +42,7 @@ Please see LICENSE files in the repository root for full details.
            mask-size: contain;
            mask-repeat: no-repeat;
            background-color: $tertiary-content;
-            mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
        }

        &[aria-expanded="true"] {
--- a/res/css/views/rooms/_RoomSublist.pcss
+++ b/res/css/views/rooms/_RoomSublist.pcss
@ -160,7 +160,7 @@ Please see LICENSE files in the repository root for full details.
                    mask-size: contain;
                    mask-repeat: no-repeat;
                    background-color: var(--cpd-color-icon-secondary);
-                    mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+                    mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
                }

                &.mx_RoomSublist_collapseBtn_collapsed::before {
@ -276,7 +276,7 @@ Please see LICENSE files in the repository root for full details.

        .mx_RoomSublist_showMoreButtonChevron,
        .mx_RoomSublist_showLessButtonChevron {
-            mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+            mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
        }

        .mx_RoomSublist_showLessButtonChevron {
--- a/res/css/views/spaces/_SpaceCreateMenu.pcss
+++ b/res/css/views/spaces/_SpaceCreateMenu.pcss
@ -67,7 +67,7 @@ Please see LICENSE files in the repository root for full details.
                mask-repeat: no-repeat;
                mask-position: 2px 3px;
                mask-size: 24px;
-                mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
            }
        }

--- a/res/css/views/voip/_CallView.pcss
+++ b/res/css/views/voip/_CallView.pcss
@ -147,7 +147,7 @@ Please see LICENSE files in the repository root for full details.
                        &::before {
                            content: "";
                            display: inline-block;
-                            mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
+                            mask-image: url("@vector-im/compound-design-tokens/icons/chevron-down.svg");
                            mask-size: 20px;
                            mask-position: center;
                            background-color: $call-primary-content;
--- a/res/img/feather-customised/chevron-down.svg
+++ b/res/img/feather-customised/chevron-down.svg
@ -1,3 +0,0 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 7.5L9 10.5L12 7.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/res/img/feather-customised/search-input.svg
+++ b/res/img/feather-customised/search-input.svg
@ -1,11 +0,0 @@
-
-<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="LifeBuoy" transform="translate(-1378.000000, -91.000000)" stroke="#61708b" stroke-width="1">
-            <g id="search-copy" transform="translate(1379.000000, 92.000000)">
-                <circle id="Oval" cx="6.22222222" cy="6.22222222" r="6.22222222"></circle>
-                <path d="M14,14 L10.6166667,10.6166667" id="Path"></path>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/res/img/minimise.svg
+++ b/res/img/minimise.svg
@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="10px" height="16px" viewBox="-1 -1 10 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: sketchtool 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
-    <title>minimise</title>
-    <desc>Created with sketchtool.</desc>
-    <defs></defs>
-    <g id="02-Chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="02_1-Chat-collapsed-w-topic" sketch:type="MSArtboardGroup" transform="translate(-176.000000, -27.000000)" stroke-width="2" stroke="#9FA9BA">
-            <g id="Room-list" sketch:type="MSLayerGroup">
-                <g id="Room-list/Header" sketch:type="MSShapeGroup">
-                    <g id="minimise" transform="translate(172.000000, 25.000000)">
-                        <path d="M7,5 L15,5 L15,13" id="Path-53-Copy" transform="translate(11.000000, 9.000000) scale(-1, -1) rotate(-315.000000) translate(-11.000000, -9.000000) "></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/res/img/tick-circle.svg
+++ b/res/img/tick-circle.svg
@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2V2Z" stroke="#0DBD8B" stroke-width="2" stroke-linecap="square"/>
-<path d="M6.54549 12.8882L9.80306 16.2426L17.4546 8.36377" stroke="#0DBD8B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx
+++ b/src/components/views/settings/devices/DeviceExpandDetailsButton.tsx
@ -8,8 +8,8 @@ Please see LICENSE files in the repository root for full details.

 import classNames from "classnames";
 import React, { ComponentProps } from "react";
+import { ChevronDownIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

-import { Icon as CaretIcon } from "../../../../../res/img/feather-customised/dropdown-arrow.svg";
 import { _t } from "../../../../languageHandler";
 import AccessibleButton from "../../elements/AccessibleButton";

@ -38,7 +38,7 @@ export const DeviceExpandDetailsButton = <T extends keyof JSX.IntrinsicElements>
            })}
            onClick={onClick}
        >
-            <CaretIcon className="mx_DeviceExpandDetailsButton_icon" />
+            <ChevronDownIcon className="mx_DeviceExpandDetailsButton_icon" />
        </AccessibleButton>
    );
 };
--- a/test/unit-tests/components/views/settings/devices/snapshots/CurrentDeviceSection-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/devices/snapshots/CurrentDeviceSection-test.tsx.snap
@ -263,9 +263,18 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
            role="button"
            tabindex="0"
          >
-            <div
+            <svg
              class="mx_DeviceExpandDetailsButton_icon"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
              />
+            </svg>
          </div>
        </div>
      </div>
@ -416,9 +425,18 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
            role="button"
            tabindex="0"
          >
-            <div
+            <svg
              class="mx_DeviceExpandDetailsButton_icon"
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
              />
+            </svg>
          </div>
        </div>
      </div>
--- a/test/unit-tests/components/views/settings/devices/snapshots/DeviceExpandDetailsButton-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/devices/snapshots/DeviceExpandDetailsButton-test.tsx.snap
@ -9,9 +9,18 @@ exports[`<DeviceExpandDetailsButton /> renders when expanded 1`] = `
      role="button"
      tabindex="0"
    >
-      <div
+      <svg
        class="mx_DeviceExpandDetailsButton_icon"
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
        />
+      </svg>
    </div>
  </div>,
 }
@ -26,9 +35,18 @@ exports[`<DeviceExpandDetailsButton /> renders when not expanded 1`] = `
      role="button"
      tabindex="0"
    >
-      <div
+      <svg
        class="mx_DeviceExpandDetailsButton_icon"
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
        />
+      </svg>
    </div>
  </div>,
 }
--- a/test/unit-tests/components/views/settings/tabs/user/snapshots/SessionManagerTab-test.tsx.snap
+++ b/test/unit-tests/components/views/settings/tabs/user/snapshots/SessionManagerTab-test.tsx.snap
@ -163,9 +163,18 @@ exports[`<SessionManagerTab /> current session section renders current session s
          role="button"
          tabindex="0"
        >
-          <div
+          <svg
            class="mx_DeviceExpandDetailsButton_icon"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
            />
+          </svg>
        </div>
      </div>
    </div>
@ -302,9 +311,18 @@ exports[`<SessionManagerTab /> current session section renders current session s
          role="button"
          tabindex="0"
        >
-          <div
+          <svg
            class="mx_DeviceExpandDetailsButton_icon"
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 14.95c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212l-4.6-4.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275l3.9 3.9 3.9-3.9a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-4.6 4.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
            />
+          </svg>
        </div>
      </div>
    </div>