djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix invisible edit button in media tiles hover state (#1920)

Browse source 
* Fix control icons in media tiles

* Update snapshots

* Change divs to buttons

* Update snapshots
This commit is contained in:
Michał Droń 2022-03-21 12:37:55 +01:00 committed by GitHub
parent 90ff0ebb5f
commit f3bca9af39
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 126 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/MediaTile/MediaTile.tsx
View file

@ -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>
)}

256
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -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>