From e0bb9427cb06d9fd789f68506a3f01261255464a Mon Sep 17 00:00:00 2001
From: Guillaume Tardif <guillaume.tardif@gmail.com>
Date: Tue, 16 May 2023 16:01:03 +0200
Subject: [PATCH] Fix MUI grid button style

Signed-off-by: Guillaume Tardif <guillaume.tardif@gmail.com>
---
 Dockerfile     | 16 ++++++++--------
 ui/src/App.tsx | 20 ++++++--------------
 2 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 466d9bd..7b60fa8 100644
--- 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
index c3d869c..4eed037 100644
--- 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>
   );
 }