Fix MUI grid button style

Signed-off-by: Guillaume Tardif <guillaume.tardif@gmail.com>
docker · May 16, 2023 · e0bb942 · e0bb942
1 parent f4aecf3
commit e0bb942
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 22 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -58,12 +58,12 @@ LABEL org.opencontainers.image.title="Volumes Backup & Share" \
     org.opencontainers.image.vendor="Docker Inc." \
     com.docker.desktop.extension.api.version=">= 0.2.3" \
     com.docker.extension.screenshots="[ \
-        {\"alt\": \"Home page - list of volumes\", \"url\": \"https://raw.githubusercontent.com/docker/volumes-backup-extension/main/docs/images/1-table.png\"}, \
-        {\"alt\": \"Import data into a new volume\", \"url\": \"https://raw.githubusercontent.com/docker/volumes-backup-extension/main/docs/images/2-import-new.png\"}, \
-        {\"alt\": \"Export volume dialog\", \"url\": \"https://raw.githubusercontent.com/docker/volumes-backup-extension/main/docs/images/3-export.png\"}, \
-        {\"alt\": \"Transfer volume to another host\", \"url\": \"https://raw.githubusercontent.com/docker/volumes-backup-extension/main/docs/images/4-transfer.png\"}, \
-        {\"alt\": \"Clone volume dialog\", \"url\": \"https://raw.githubusercontent.com/docker/volumes-backup-extension/main/docs/images/5-clone.png\"}, \
-        {\"alt\": \"Delete volume dialog\", \"url\": \"https://raw.githubusercontent.com/docker/volumes-backup-extension/main/docs/images/6-delete.png\"} \
+    {\"alt\": \"Home page - list of volumes\", \"url\": \"https://raw.githubusercontent.com/docker/volumes-backup-extension/main/docs/images/1-table.png\"}, \
+    {\"alt\": \"Import data into a new volume\", \"url\": \"https://raw.githubusercontent.com/docker/volumes-backup-extension/main/docs/images/2-import-new.png\"}, \
+    {\"alt\": \"Export volume dialog\", \"url\": \"https://raw.githubusercontent.com/docker/volumes-backup-extension/main/docs/images/3-export.png\"}, \
+    {\"alt\": \"Transfer volume to another host\", \"url\": \"https://raw.githubusercontent.com/docker/volumes-backup-extension/main/docs/images/4-transfer.png\"}, \
+    {\"alt\": \"Clone volume dialog\", \"url\": \"https://raw.githubusercontent.com/docker/volumes-backup-extension/main/docs/images/5-clone.png\"}, \
+    {\"alt\": \"Delete volume dialog\", \"url\": \"https://raw.githubusercontent.com/docker/volumes-backup-extension/main/docs/images/6-delete.png\"} \
     ]" \
     com.docker.extension.detailed-description="<p>With Volumes Backup & Share you can easily create copies of your volumes and also share them with others through SSH or pushing them to a registry.</p> \
     <h2 id="-features">✨ What can you do with this extension?</h2> \
@@ -88,11 +88,11 @@ LABEL org.opencontainers.image.title="Volumes Backup & Share" \
     "\
     com.docker.extension.publisher-url="https://www.docker.com/" \
     com.docker.extension.additional-urls="[ \
-        {\"title\":\"Support\", \"url\":\"https://github.com/docker/volumes-backup-extension/issues\"} \
+    {\"title\":\"Support\", \"url\":\"https://github.com/docker/volumes-backup-extension/issues\"} \
     ]" \
     com.docker.desktop.extension.icon="https://raw.githubusercontent.com/docker/volumes-backup-extension/main/icon.svg" \
     com.docker.extension.changelog="<ul>\
-    <li>Fixed an issue with notifications and the new Design System.</li> \
+    <li>Fixed style on grid buttons.</li> \
     </ul>" \
     com.docker.extension.categories="volumes"
 

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -47,20 +47,12 @@ const ddClient = createDockerDesktopClient();
 
 function CustomToolbar() {
   return (
-    <GridToolbarContainer
-      sx={{
-        "& .MuiButton-root": {
-          color: (theme) => theme.palette.docker.grey[500],
-          textTransform: "uppercase",
-          "&:hover": {
-            backgroundColor: (theme) => theme.palette.action.hover,
-          },
-        },
-      }}
-    >
-      <GridToolbarColumnsButton />
-      <GridToolbarFilterButton />
-      <GridToolbarDensitySelector />
+    <GridToolbarContainer>
+      <GridToolbarColumnsButton variant="text" />
+      <GridToolbarFilterButton
+        componentsProps={{ button: { variant: "text" } }}
+      />
+      <GridToolbarDensitySelector variant="text" />
     </GridToolbarContainer>
   );
 }