From f3bca9af39d81811a22f6c3f7ba49250a3216feb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Dro=C5=84?= <dron.official@yahoo.com>
Date: Mon, 21 Mar 2022 12:37:55 +0100
Subject: [PATCH] Fix invisible edit button in media tiles hover state (#1920)

* Fix control icons in media tiles

* Update snapshots

* Change divs to buttons

* Update snapshots
---
 src/components/MediaTile/MediaTile.tsx        |  29 +-
 .../__snapshots__/Stories.test.ts.snap        | 256 +++++++-----------
 2 files changed, 126 insertions(+), 159 deletions(-)

diff --git a/src/components/MediaTile/MediaTile.tsx b/src/components/MediaTile/MediaTile.tsx
index 90ca30228..f30a74f10 100644
--- a/src/components/MediaTile/MediaTile.tsx
+++ b/src/components/MediaTile/MediaTile.tsx
@@ -1,6 +1,5 @@
 import { CircularProgress } from "@material-ui/core";
-import EditIcon from "@material-ui/icons/Edit";
-import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
+import { DeleteIcon, EditIcon, makeStyles } from "@saleor/macaw-ui";
 import classNames from "classnames";
 import React from "react";
 
@@ -28,7 +27,8 @@ const useStyles = makeStyles(
       width: 148
     },
     mediaOverlay: {
-      background: "rgba(0, 0, 0, 0.6)",
+      background: theme.palette.background.default,
+      opacity: 0.8,
       cursor: "move",
       display: "none",
       height: 148,
@@ -47,6 +47,21 @@ const useStyles = makeStyles(
     mediaOverlayToolbar: {
       display: "flex",
       justifyContent: "flex-end"
+    },
+    controlButton: {
+      color: theme.palette.saleor.main[1],
+      backgroundColor: "transparent",
+      border: "none",
+      cursor: "pointer",
+      margin: theme.spacing(2),
+      padding: 0,
+
+      "&:hover": {
+        color: theme.palette.saleor.active[1]
+      },
+      "&:first-child": {
+        marginRight: 0
+      }
     }
   }),
   { name: "MediaTile" }
@@ -84,14 +99,14 @@ const MediaTile: React.FC<MediaTileProps> = props => {
         ) : (
           <div className={classes.mediaOverlayToolbar}>
             {onEdit && (
-              <IconButton variant="secondary" color="primary" onClick={onEdit}>
+              <button className={classes.controlButton} onClick={onEdit}>
                 <EditIcon />
-              </IconButton>
+              </button>
             )}
             {onDelete && (
-              <IconButton color="primary" onClick={onDelete}>
+              <button className={classes.controlButton} onClick={onDelete}>
                 <DeleteIcon />
-              </IconButton>
+              </button>
             )}
           </div>
         )}
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index dabfbff7a..46ab32b03 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -40337,27 +40337,21 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
                 class="MediaTile-mediaOverlayToolbar-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                  tabindex="0"
-                  type="button"
+                  class="MediaTile-controlButton-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
+                    <path
+                      clip-rule="evenodd"
+                      d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                      fill="currentColor"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
                 </button>
               </div>
             </div>
@@ -41116,27 +41110,21 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
                 class="MediaTile-mediaOverlayToolbar-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                  tabindex="0"
-                  type="button"
+                  class="MediaTile-controlButton-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
+                    <path
+                      clip-rule="evenodd"
+                      d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                      fill="currentColor"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
                 </button>
               </div>
             </div>
@@ -43232,27 +43220,21 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
                 class="MediaTile-mediaOverlayToolbar-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                  tabindex="0"
-                  type="button"
+                  class="MediaTile-controlButton-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
+                    <path
+                      clip-rule="evenodd"
+                      d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                      fill="currentColor"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
                 </button>
               </div>
             </div>
@@ -44006,27 +43988,21 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
                 class="MediaTile-mediaOverlayToolbar-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                  tabindex="0"
-                  type="button"
+                  class="MediaTile-controlButton-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
+                    <path
+                      clip-rule="evenodd"
+                      d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                      fill="currentColor"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
                 </button>
               </div>
             </div>
@@ -44778,27 +44754,21 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 class="MediaTile-mediaOverlayToolbar-id"
               >
                 <button
-                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                  tabindex="0"
-                  type="button"
+                  class="MediaTile-controlButton-id"
                 >
-                  <span
-                    class="MuiIconButton-label-id"
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root-id"
+                    focusable="false"
+                    viewBox="0 0 24 24"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root-id"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
-                        fill="currentColor"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
+                    <path
+                      clip-rule="evenodd"
+                      d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                      fill="currentColor"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
                 </button>
               </div>
             </div>
@@ -51179,27 +51149,21 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                     class="MediaTile-mediaOverlayToolbar-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                      class="MediaTile-controlButton-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        viewBox="0 0 24 24"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            clip-rule="evenodd"
-                            d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
-                            fill="currentColor"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </span>
+                        <path
+                          clip-rule="evenodd"
+                          d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                          fill="currentColor"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
                     </button>
                   </div>
                 </div>
@@ -52655,27 +52619,21 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                     class="MediaTile-mediaOverlayToolbar-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                      class="MediaTile-controlButton-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        viewBox="0 0 24 24"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            clip-rule="evenodd"
-                            d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
-                            fill="currentColor"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </span>
+                        <path
+                          clip-rule="evenodd"
+                          d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                          fill="currentColor"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
                     </button>
                   </div>
                 </div>
@@ -55027,27 +54985,21 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
                     class="MediaTile-mediaOverlayToolbar-id"
                   >
                     <button
-                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                      tabindex="0"
-                      type="button"
+                      class="MediaTile-controlButton-id"
                     >
-                      <span
-                        class="MuiIconButton-label-id"
+                      <svg
+                        aria-hidden="true"
+                        class="MuiSvgIcon-root-id"
+                        focusable="false"
+                        viewBox="0 0 24 24"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="MuiSvgIcon-root-id"
-                          focusable="false"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            clip-rule="evenodd"
-                            d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
-                            fill="currentColor"
-                            fill-rule="evenodd"
-                          />
-                        </svg>
-                      </span>
+                        <path
+                          clip-rule="evenodd"
+                          d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z"
+                          fill="currentColor"
+                          fill-rule="evenodd"
+                        />
+                      </svg>
                     </button>
                   </div>
                 </div>