From dd6f46fba5f00cba67bc4d530664c0f7cd2e4f8c Mon Sep 17 00:00:00 2001
From: Patryk Andrzejewski <vox3r69@gmail.com>
Date: Thu, 28 Dec 2023 13:03:41 +0100
Subject: [PATCH] Fix buttons in apps, Fix checkbox in the grid (#4568)

* Fix apps colors, fix grid checkbox

* Fix apps colors, fix grid checkbox
---
 .changeset/selfish-pets-hammer.md                         | 5 +++++
 .../InstalledAppListRow/InstalledAppListRow.tsx           | 7 ++++++-
 .../NotInstalledAppListRow/NotInstalledAppListRow.tsx     | 7 ++++++-
 src/components/Datagrid/Datagrid.tsx                      | 8 +++++++-
 4 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/selfish-pets-hammer.md

diff --git a/.changeset/selfish-pets-hammer.md b/.changeset/selfish-pets-hammer.md
new file mode 100644
index 00000000000..39d497de411
--- /dev/null
+++ b/.changeset/selfish-pets-hammer.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix apps colors, fix grid checkbox
diff --git a/src/apps/components/InstalledAppListRow/InstalledAppListRow.tsx b/src/apps/components/InstalledAppListRow/InstalledAppListRow.tsx
index b36be5d47c9..6ce33a8e7e0 100644
--- a/src/apps/components/InstalledAppListRow/InstalledAppListRow.tsx
+++ b/src/apps/components/InstalledAppListRow/InstalledAppListRow.tsx
@@ -69,7 +69,12 @@ export const InstalledAppListRow: React.FC<InstalledApp> = props => {
                 {`v${app.version}`}
               </Text>
               {isExternal && (
-                <Chip data-test-id="app-external-label" size="large">
+                <Chip
+                  data-test-id="app-external-label"
+                  size="large"
+                  backgroundColor="default1"
+                  borderColor="default1"
+                >
                   <Text variant="caption" size="small">
                     <FormattedMessage {...appsMessages.externalApp} />
                   </Text>
diff --git a/src/apps/components/NotInstalledAppListRow/NotInstalledAppListRow.tsx b/src/apps/components/NotInstalledAppListRow/NotInstalledAppListRow.tsx
index 99c2f7ffe1e..fe75f2c9bd5 100644
--- a/src/apps/components/NotInstalledAppListRow/NotInstalledAppListRow.tsx
+++ b/src/apps/components/NotInstalledAppListRow/NotInstalledAppListRow.tsx
@@ -49,7 +49,12 @@ export const NotInstalledAppListRow: React.FC<AppInstallation> = props => {
         <AppAvatar logo={logo} />
         <Text variant="bodyStrong">{appInstallation.appName}</Text>
         {isExternal && (
-          <Chip data-test-id="app-external-label" size="large">
+          <Chip
+            data-test-id="app-external-label"
+            size="large"
+            backgroundColor="default1"
+            borderColor="default1"
+          >
             <Text variant="caption" size="small">
               <FormattedMessage {...appsMessages.externalApp} />
             </Text>
diff --git a/src/components/Datagrid/Datagrid.tsx b/src/components/Datagrid/Datagrid.tsx
index b0071584c2a..f61c3f0fc65 100644
--- a/src/components/Datagrid/Datagrid.tsx
+++ b/src/components/Datagrid/Datagrid.tsx
@@ -345,7 +345,13 @@ export const Datagrid: React.FC<DatagridProps> = ({
       }
 
       const overrideTheme: Partial<Theme> = {
-        bgCell: themeValues.colors.background.default1Hovered,
+        /*
+          Grid-specific colors. Transparency matters when we highlight entire row.
+        */
+        bgCell:
+          theme === "defaultLight"
+            ? "hsla(220, 18%, 97%, 1)"
+            : "hsla(211, 32%, 19%, 1)",
         bgCellMedium: themeValues.colors.background.default1Hovered,
       };