From ac27f0f2c6980be3cb73bd9e22cccd623e2a8755 Mon Sep 17 00:00:00 2001
From: Satbir Singh <satbir121@gmail.com>
Date: Fri, 3 Apr 2020 06:56:13 +0000
Subject: [PATCH] Fixing column delete button css and margin

---
 .../ColumnActionSelectorControl.tsx           | 48 ++++++++++---------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx b/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx
index 42c01daab6..ce6617e6be 100644
--- a/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx
+++ b/app/client/src/components/propertyControls/ColumnActionSelectorControl.tsx
@@ -16,17 +16,15 @@ export interface ColumnAction {
   dynamicTrigger: string;
 }
 const StyledDeleteIcon = styled(FormIcons.DELETE_ICON as AnyStyledComponent)`
-  padding: 5px 5px;
+  padding: 5px 0px;
   position: absolute;
   right: 8px;
   cursor: pointer;
   top: 0px;
 `;
 
-const StyledInputText = styled(InputText)`
-  && {
-    margin-bottom: 3px;
-  }
+const Wrapper = styled.div`
+  margin-bottom: 8px;
 `;
 
 class ColumnActionSelectorControl extends BaseControl<
@@ -44,24 +42,28 @@ class ColumnActionSelectorControl extends BaseControl<
                   position: "relative",
                 }}
               >
-                <StyledInputText
-                  label={columnAction.label}
-                  value={columnAction.label}
-                  onChange={this.updateColumnActionLabel.bind(
-                    this,
-                    columnAction,
-                  )}
-                  isValid={true}
-                />
-                <DynamicActionCreator
-                  value={columnAction.dynamicTrigger}
-                  isValid={(columnAction as any).isValid}
-                  validationMessage={(columnAction as any).message}
-                  onValueChange={this.updateColumnActionFunction.bind(
-                    this,
-                    columnAction,
-                  )}
-                />
+                <Wrapper>
+                  <InputText
+                    label={columnAction.label}
+                    value={columnAction.label}
+                    onChange={this.updateColumnActionLabel.bind(
+                      this,
+                      columnAction,
+                    )}
+                    isValid={true}
+                  />
+                </Wrapper>
+                <Wrapper>
+                  <DynamicActionCreator
+                    value={columnAction.dynamicTrigger}
+                    isValid={(columnAction as any).isValid}
+                    validationMessage={(columnAction as any).message}
+                    onValueChange={this.updateColumnActionFunction.bind(
+                      this,
+                      columnAction,
+                    )}
+                  />
+                </Wrapper>
                 <StyledDeleteIcon
                   height={20}
                   width={20}