Replace removal icon

saleor · Jul 7, 2023 · b5d6944 · b5d6944
1 parent 3f53e14
commit b5d6944
Showing 1 changed file with 5 additions and 24 deletions.
diff --git a/src/components/Datagrid/ColumnPicker/ColumnPickerDynamicColumns.tsx b/src/components/Datagrid/ColumnPicker/ColumnPickerDynamicColumns.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, PlusIcon, Text } from "@saleor/macaw-ui/next";
+import { Box, Button, PlusIcon, RemoveIcon, Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
@@ -45,30 +45,11 @@ export const ColumnPickerDynamicColumns = ({
         <Button
           onClick={() => onToggle(column.id)}
           data-test-id={`dynamic-col-${column.id}`}
-          variant="secondary"
+          variant="tertiary"
           size="small"
-          // hacky for now, this icon should probably come from macaw
-          // although it's 8x8
-          icon={
-            <svg
-              viewBox="0 0 8 2"
-              width="8"
-              height="2"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M0 1C0 0.447715 0.447715 0 1 0H7C7.55228 0 8 0.447715 8 1C8 1.55228 7.55228 2 7 2H1C0.447715 2 0 1.55228 0 1Z"
-                fill="currentColor"
-              />
-            </svg>
-          }
-          // hacky again, because macaw button classes have high specificity
-          // and it's diffcult to override sizes
-          __height="16px"
-          __width="16px"
+          icon={<RemoveIcon color="iconNeutralPlain" />}
+          __width="20px"
+          __height="20px"
         />
         <Text
           variant="body"