fix: Make the entire error rectangle clickable raher than the arrow only

deependrasingh002 · Oct 1, 2023 · 1041c0f · 1041c0f
1 parent a6cbc3e
commit 1041c0f
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 27 deletions.
diff --git a/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx b/apps/web/src/pages/templates/components/LackIntegrationAlert.tsx
@@ -38,26 +38,26 @@ export function LackIntegrationAlert({
 
   return (
     <>
-      <WarningMessage backgroundColor={alertTypeToMessageBackgroundColor(type)}>
+      <WarningMessage
+        backgroundColor={alertTypeToMessageBackgroundColor(type)}
+        onClick={() => {
+          if (isPrimaryMissing) {
+            openSelectPrimaryIntegrationModal({
+              environmentId: environment?._id,
+              channelType: channelType,
+              onClose: () => {
+                segment.track(TemplateEditorAnalyticsEnum.CONFIGURE_PRIMARY_PROVIDER_BANNER_CLICK);
+              },
+            });
+          } else {
+            openIntegrationsModal(true);
+            segment.track(TemplateEditorAnalyticsEnum.CONFIGURE_PROVIDER_BANNER_CLICK);
+          }
+        }}
+      >
         <Group spacing={12} noWrap>
           <div>
-            <MissingIcon
-              color={alertTypeToDoubleArrowColor(type)}
-              onClick={() => {
-                if (isPrimaryMissing) {
-                  openSelectPrimaryIntegrationModal({
-                    environmentId: environment?._id,
-                    channelType: channelType,
-                    onClose: () => {
-                      segment.track(TemplateEditorAnalyticsEnum.CONFIGURE_PRIMARY_PROVIDER_BANNER_CLICK);
-                    },
-                  });
-                } else {
-                  openIntegrationsModal(true);
-                  segment.track(TemplateEditorAnalyticsEnum.CONFIGURE_PROVIDER_BANNER_CLICK);
-                }
-              }}
-            />
+            <MissingIcon color={alertTypeToDoubleArrowColor(type)} />
           </div>
           <Text color={alertTypeToMessageTextColor(type)}>
             {text
@@ -97,7 +97,7 @@ const WarningMessage = styled.div<{ backgroundColor: string }>`
   padding: 15px;
   margin-bottom: 40px;
   color: #e54545;
-
+  cursor: pointer;
   background: ${({ backgroundColor }) => backgroundColor};
   border-radius: 7px;
 `;

diff --git a/apps/web/src/pages/templates/workflow/NodeErrorPopover.tsx b/apps/web/src/pages/templates/workflow/NodeErrorPopover.tsx
@@ -62,7 +62,6 @@ const useStyles = createStyles(() => ({
     border: 'none',
     maxWidth: '300px',
     background: 'linear-gradient(0deg, rgba(229, 69, 69, 0.20) 0%, rgba(229, 69, 69, 0.20) 100%), #23232B',
-    cursor: 'pointer',
   },
   arrow: {
     width: '7px',

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml