fix: remove usage of theme object and refactor (#4317)

webiny · Oct 4, 2024 · 7ae8553 · 7ae8553
1 parent 80f00cb
commit 7ae8553
Showing 1 changed file with 17 additions and 19 deletions.
diff --git a/packages/app-audit-logs/src/views/Logs/Table/styled.tsx b/packages/app-audit-logs/src/views/Logs/Table/styled.tsx
@@ -3,43 +3,41 @@ import { css } from "emotion";
 import { Text } from "~/components/Text";
 import { ActionType } from "~/types";
 
-export const ActionWrapper = styled("div")<{ value: ActionType }>`
-    padding: 0px 8px;
+const ACTION_TYPES_COLORS_MAP = {
+    YELLOW: [ActionType.UPDATE],
+    RED: [ActionType.DELETE, ActionType.UNPUBLISH, ActionType.MOVE_TO_TRASH]
+};
+
+export const ActionWrapper = styled.div<{ value: ActionType }>`
+    padding: 0 8px;
     width: fit-content;
     border: 1px solid;
     border-radius: 5px;
 
-    ${({ value, theme }) => {
-        if (
-            [ActionType.CREATE, ActionType.PUBLISH, ActionType.RESTORE_FROM_TRASH].includes(value)
-        ) {
-            return `
-                background-color: ${theme.styles.colors.color2}10;
-                border-color: ${theme.styles.colors.color2};
-                color: ${theme.styles.colors.color2};
-            `;
-        }
-
-        if (ActionType.UPDATE) {
+    ${({ value: actionType }) => {
+        // Yellow.
+        if (ACTION_TYPES_COLORS_MAP.YELLOW.includes(actionType)) {
             return `
                 background-color: #fac42810;
                 border-color: #fac428;
                 color: #fac428;
             `;
         }
 
-        if ([ActionType.DELETE, ActionType.UNPUBLISH, ActionType.MOVE_TO_TRASH].includes(value)) {
+        // Red.
+        if (ACTION_TYPES_COLORS_MAP.RED.includes(actionType)) {
             return `
                 background-color: #ff000010;
                 border-color: #ff0000;
                 color: #ff0000;
             `;
         }
 
+        // Green.
         return `
-            background-color: ${theme.styles.colors.color4}10;
-            border-color: ${theme.styles.colors.color4};
-            color: ${theme.styles.colors.color4};
+            background-color: #00ccb010;
+            border-color: #00ccb0;
+            color: #00ccb0;
         `;
     }}
 `;
@@ -57,7 +55,7 @@ export const previewColumn = css`
 `;
 
 export const TextGray = styled(Text)`
-    color: ${({ theme }) => theme.styles.colors["color4"]};
+    color: "#616161";
 `;
 
 export const TimezoneText = styled(TextGray)`