Fix buttons in apps, Fix checkbox in the grid (#4568)

* Fix apps colors, fix grid checkbox * Fix apps colors, fix grid checkbox
saleor · Dec 28, 2023 · dd6f46f · dd6f46f
1 parent 5546daa
commit dd6f46f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/.changeset/selfish-pets-hammer.md 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
@@ -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
@@ -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
@@ -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,
       };