Merge branch 't3chguy/dedup-icons-generic' of github.com:element-hq/m…

…atrix-react-sdk into t3chguy/dedup-icons # Conflicts: # res/css/views/dialogs/_SpotlightDialog.pcss # res/css/views/rooms/_ReplyPreview.pcss # res/css/views/rooms/_TopUnreadMessagesBar.pcss # res/css/views/user-onboarding/_UserOnboardingButton.pcss # res/css/views/user-onboarding/_UserOnboardingTask.pcss # src/components/views/elements/AppTile.tsx # src/components/views/elements/Tag.tsx # src/components/views/messages/MessageActionBar.tsx # src/components/views/rooms/LinkPreviewGroup.tsx # src/components/views/spaces/QuickSettingsButton.tsx
element-hq · Oct 14, 2024 · 6da8e43 · 6da8e43
2 parents c302785 + bcd5806
commit 6da8e43
Show file tree

Hide file tree

Showing 32 changed files with 318 additions and 87 deletions.
diff --git a/...napshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png b/...napshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png
diff --git a/.../snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png b/.../snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png
diff --git a/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png b/playwright/snapshots/permalinks/permalinks.spec.ts/permalink-rendering-linux.png
diff --git a/...t/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png b/...t/snapshots/room-directory/room-directory.spec.ts/filtered-no-results-linux.png
diff --git a/...t/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png b/...t/snapshots/room-directory/room-directory.spec.ts/filtered-one-result-linux.png
diff --git a/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png b/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png
diff --git a/...pshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png b/...pshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png
diff --git a/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png b/playwright/snapshots/spaces/spaces.spec.ts/space-panel-expanded-linux.png
diff --git a/playwright/snapshots/timeline/timeline.spec.ts/url-preview-linux.png b/playwright/snapshots/timeline/timeline.spec.ts/url-preview-linux.png
diff --git a/res/css/components/views/context_menus/_KebabContextMenu.pcss b/res/css/components/views/context_menus/_KebabContextMenu.pcss
@@ -8,5 +8,6 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_KebabContextMenu_icon {
     width: 24px;
+    height: 24px;
     color: $icon-button-color;
 }
diff --git a/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss b/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss
@@ -12,8 +12,8 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_PollDetailHeader_icon {
-    height: 15px;
-    width: 15px;
+    height: 16px;
+    width: 16px;
     margin-right: $spacing-8;
     vertical-align: middle;
 }
diff --git a/res/css/components/views/location/_ShareDialogButtons.pcss b/res/css/components/views/location/_ShareDialogButtons.pcss
@@ -40,6 +40,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_ShareDialogButtons_button-icon {
-    height: 10px;
-    margin-top: 3px;
+    width: 20px;
+    height: 20px;
+    margin: 2px;
 }
diff --git a/res/css/views/context_menus/_MessageContextMenu.pcss b/res/css/views/context_menus/_MessageContextMenu.pcss
@@ -81,12 +81,10 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_MessageContextMenu_iconCopy::before {
-        height: 12px;
-        left: 2px;
+        height: 16px;
         mask-image: url($copy-button-url);
         position: relative;
-        width: 12px;
-        top: 3px;
+        width: 16px;
     }
 
     .mx_MessageContextMenu_iconEdit::before {

diff --git a/res/css/views/dialogs/_SpotlightDialog.pcss b/res/css/views/dialogs/_SpotlightDialog.pcss
@@ -121,13 +121,11 @@ Please see LICENSE files in the repository root for full details.
                     content: "";
                     mask-repeat: no-repeat;
                     mask-position: center;
-                    mask-size: contain;
-                    width: 16px;
-                    height: 16px;
+                    mask-size: 14px;
+                    width: inherit;
+                    height: inherit;
                     position: absolute;
-                    left: 50%;
-                    top: 50%;
-                    transform: translate(-50%, -50%);
+                    left: 0;
                     mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
                 }
             }

diff --git a/res/css/views/directory/_NetworkDropdown.pcss b/res/css/views/directory/_NetworkDropdown.pcss
@@ -64,9 +64,9 @@ Please see LICENSE files in the repository root for full details.
         content: "";
         mask-repeat: no-repeat;
         mask-position: center;
-        mask-size: contain;
-        width: 8px;
-        height: 8px;
+        mask-size: 14px;
+        width: inherit;
+        height: inherit;
         position: absolute;
         left: 50%;
         top: 50%;

diff --git a/res/css/views/elements/_TagComposer.pcss b/res/css/views/elements/_TagComposer.pcss
@@ -68,8 +68,8 @@ Please see LICENSE files in the repository root for full details.
         position: relative;
 
         svg {
-            width: 0.5em;
-            vertical-align: middle;
+            width: 16px;
+            height: 16px;
         }
     }
 }
diff --git a/res/css/views/rooms/_LinkPreviewGroup.pcss b/res/css/views/rooms/_LinkPreviewGroup.pcss
@@ -12,14 +12,14 @@ Please see LICENSE files in the repository root for full details.
         width: 18px;
         height: 18px;
 
-        img {
+        svg {
             flex: 0 0 40px;
             visibility: hidden;
         }
     }
 
     &:hover .mx_LinkPreviewGroup_hide img,
-    .mx_LinkPreviewGroup_hide:focus-visible:focus img {
+    .mx_LinkPreviewGroup_hide:focus-visible:focus svg {
         visibility: visible;
     }
 

diff --git a/res/css/views/rooms/_ReplyPreview.pcss b/res/css/views/rooms/_ReplyPreview.pcss
@@ -31,14 +31,14 @@ Please see LICENSE files in the repository root for full details.
 
             .mx_ReplyPreview_header_cancel {
                 background-color: $primary-content;
-                mask: url("@vector-im/compound-design-tokens/icons/close.svg");
+                mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
                 mask-repeat: no-repeat;
                 mask-position: center;
-                mask-size: 18px;
-                width: 18px;
-                height: 18px;
-                min-width: 18px;
-                min-height: 18px;
+                mask-size: contain;
+                width: 20px;
+                height: 20px;
+                min-width: 20px;
+                min-height: 20px;
             }
         }
     }

diff --git a/res/css/views/rooms/_TopUnreadMessagesBar.pcss b/res/css/views/rooms/_TopUnreadMessagesBar.pcss
@@ -65,6 +65,7 @@ Please see LICENSE files in the repository root for full details.
     height: 18px;
     mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
     mask-repeat: no-repeat;
-    mask-size: contain;
+    mask-size: 16px;
+    mask-position: center;
     background: var(--cpd-color-icon-tertiary);
 }
diff --git a/res/css/views/user-onboarding/_UserOnboardingButton.pcss b/res/css/views/user-onboarding/_UserOnboardingButton.pcss
@@ -52,13 +52,12 @@ Please see LICENSE files in the repository root for full details.
                 content: "";
                 mask-repeat: no-repeat;
                 mask-position: center;
-                mask-size: contain;
-                width: 7px;
-                height: 7px;
+                mask-size: 12px;
+                width: inherit;
+                height: inherit;
                 position: absolute;
-                left: 50%;
-                top: 50%;
-                transform: translate(-50%, -50%);
+                left: -1px;
+                top: -1px;
                 mask-image: url("@vector-im/compound-design-tokens/icons/close.svg");
             }
         }

diff --git a/res/css/views/user-onboarding/_UserOnboardingTask.pcss b/res/css/views/user-onboarding/_UserOnboardingTask.pcss
@@ -75,12 +75,12 @@ Please see LICENSE files in the repository root for full details.
                 content: "";
                 mask-repeat: no-repeat;
                 mask-position: center;
-                mask-size: contain;
-                width: 24px;
-                height: 24px;
+                mask-size: 24px;
+                width: inherit;
+                height: inherit;
                 position: absolute;
-                left: calc(50% - 12px);
-                top: calc(50% - 12px);
+                left: 0;
+                top: 0;
                 mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
 
                 animation-duration: 300ms;

diff --git a/src/components/views/elements/AppTile.tsx b/src/components/views/elements/AppTile.tsx
@@ -16,7 +16,7 @@ import { Room, RoomEvent } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
 import { ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
-import MenuIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
+import EllipsisIcon from "@vector-im/compound-design-tokens/assets/web/icons/overflow-horizontal";
 import MaximiseIcon from "@vector-im/compound-design-tokens/assets/web/icons/expand";
 import CollapseIcon from "@vector-im/compound-design-tokens/assets/web/icons/collapse";
 
@@ -806,7 +806,7 @@ export default class AppTile extends React.Component<IProps, IState> {
                                         ref={this.contextMenuButton}
                                         onClick={this.onContextMenuClick}
                                     >
-                                        <MenuIcon className="mx_Icon mx_Icon_12" />
+                                        <EllipsisIcon className="mx_Icon mx_Icon_12" />
                                     </ContextMenuButton>
                                 )}
                             </span>

diff --git a/src/components/views/elements/Tag.tsx b/src/components/views/elements/Tag.tsx
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { DetailedHTMLProps, HTMLAttributes } from "react";
-import CancelRounded from "@vector-im/compound-design-tokens/assets/web/icons/close";
+import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
 
 import AccessibleButton from "./AccessibleButton";
 
@@ -30,7 +30,7 @@ export const Tag: React.FC<IProps> = ({ icon, label, onDeleteClick, disabled = f
                     onClick={onDeleteClick}
                     disabled={disabled}
                 >
-                    <CancelRounded />
+                    <CloseIcon />
                 </AccessibleButton>
             )}
         </div>

diff --git a/src/components/views/rooms/LinkPreviewGroup.tsx b/src/components/views/rooms/LinkPreviewGroup.tsx
@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { useContext, useEffect } from "react";
 import { MatrixEvent, MatrixError, IPreviewUrlResponse, MatrixClient } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
 
 import { useStateToggle } from "../../../hooks/useStateToggle";
 import LinkPreviewWidget from "./LinkPreviewWidget";
@@ -66,15 +67,7 @@ const LinkPreviewGroup: React.FC<IProps> = ({ links, mxEvent, onCancelClick, onH
                             onClick={onCancelClick}
                             aria-label={_t("timeline|url_preview|close")}
                         >
-                            <img
-                                className="mx_filterFlipColor"
-                                alt=""
-                                role="presentation"
-                                src={require("@vector-im/compound-design-tokens/icons/close.svg").default}
-                                width="18"
-                                height="18"
-                                draggable="false"
-                            />
+                            <CloseIcon width="20px" height="20px" />
                         </AccessibleButton>
                     ) : undefined}
                 </LinkPreviewWidget>

diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
@@ -174,9 +174,18 @@ exports[`AppTile for a pinned widget should render 1`] = `
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_Icon mx_Icon_12"
-          />
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
+            />
+          </svg>
         </div>
       </span>
     </div>
@@ -259,9 +268,18 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
           role="button"
           tabindex="0"
         >
-          <div
+          <svg
             class="mx_Icon mx_Icon_12"
-          />
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
+            />
+          </svg>
         </div>
       </span>
     </div>
@@ -409,9 +427,18 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
                 role="button"
                 tabindex="0"
               >
-                <div
+                <svg
                   class="mx_Icon mx_Icon_12"
-                />
+                  fill="currentColor"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
+                  />
+                </svg>
               </div>
             </span>
           </div>

diff --git a/test/components/views/elements/__snapshots__/FilterDropdown-test.tsx.snap b/test/components/views/elements/__snapshots__/FilterDropdown-test.tsx.snap
@@ -16,9 +16,18 @@ exports[`<FilterDropdown /> renders dropdown options in menu 1`] = `
       class="mx_FilterDropdown_option"
       data-testid="filter-option-one"
     >
-      <div
+      <svg
         class="mx_FilterDropdown_optionSelectedIcon"
-      />
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.713-.275.291 0 .529.092.712.275.183.183.275.42.275.713 0 .291-.092.529-.275.712l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+        />
+      </svg>
       <span
         class="mx_FilterDropdown_optionLabel"
       >

diff --git a/test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap b/test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap
@@ -22,9 +22,18 @@ exports[`<PollHistory /> Poll detail navigates back to poll list from detail vie
   role="button"
   tabindex="0"
 >
-  <div
+  <svg
     class="mx_PollDetailHeader_icon"
-  />
+    fill="currentColor"
+    height="1em"
+    viewBox="0 0 24 24"
+    width="1em"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.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.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
+    />
+  </svg>
   Active polls
 </div>
 `;

diff --git a/test/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap b/test/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
@@ -130,7 +130,17 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                       role="button"
                       tabindex="-1"
                     >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
+                        />
+                      </svg>
                     </div>
                   </div>
                 </div>
@@ -246,7 +256,17 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                       role="button"
                       tabindex="-1"
                     >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
+                        />
+                      </svg>
                     </div>
                   </div>
                 </div>
@@ -362,7 +382,17 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                       role="button"
                       tabindex="-1"
                     >
-                      <div />
+                      <svg
+                        fill="currentColor"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M6 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 6 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 6 14Zm6 0c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 10 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 12 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 12 14Zm6 0c-.55 0-1.02-.196-1.413-.588A1.926 1.926 0 0 1 16 12c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 18 10c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412 0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 14Z"
+                        />
+                      </svg>
                     </div>
                   </div>
                 </div>