From 64996d1c3e5747d2da01623c8de48ecd143e6ccf Mon Sep 17 00:00:00 2001
From: Abhinav Jha <namora@namora.local>
Date: Thu, 19 Dec 2019 12:14:31 +0530
Subject: [PATCH] Fix #413: Adhere widget name and controls to designs

---
 .../appsmith/WidgetNameComponent.tsx          |  7 +++---
 .../editorComponents/DraggableComponent.tsx   | 25 ++++++++++---------
 app/client/src/constants/Colors.tsx           |  1 +
 app/client/src/constants/DefaultTheme.tsx     |  1 +
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/app/client/src/components/designSystems/appsmith/WidgetNameComponent.tsx b/app/client/src/components/designSystems/appsmith/WidgetNameComponent.tsx
index 7cdda23e14..cc3330dc5d 100644
--- a/app/client/src/components/designSystems/appsmith/WidgetNameComponent.tsx
+++ b/app/client/src/components/designSystems/appsmith/WidgetNameComponent.tsx
@@ -6,9 +6,10 @@ import { DraggableComponentContext } from "components/editorComponents/Draggable
 const PositionStyle = styled.div`
   position: absolute;
   top: -${props => props.theme.spaces[10]}px;
-  left: ${props => props.theme.spaces[6]}px;
-  font-size: ${props => props.theme.fontSizes[2]}px;
-  color: ${props => props.theme.colors.containerBorder};
+  left: ${props => props.theme.spaces[6] * 2}px;
+  font-size: ${props => props.theme.fontSizes[3]}px;
+  font-weight: ${props => props.theme.fontWeights[2]};
+  color: ${props => props.theme.colors.widgetName};
   text-align: left;
   width: 100%;
   z-index: 1;
diff --git a/app/client/src/components/editorComponents/DraggableComponent.tsx b/app/client/src/components/editorComponents/DraggableComponent.tsx
index 073d4508e4..1de6f2478f 100644
--- a/app/client/src/components/editorComponents/DraggableComponent.tsx
+++ b/app/client/src/components/editorComponents/DraggableComponent.tsx
@@ -13,7 +13,6 @@ import blankImage from "assets/images/blank.png";
 import { FocusContext } from "pages/Editor/Canvas";
 import { EditorContext } from "components/editorComponents/EditorContextProvider";
 import { ControlIcons } from "icons/ControlIcons";
-import { theme } from "constants/DefaultTheme";
 import { ResizingContext } from "./DropTargetComponent";
 import { Tooltip } from "@blueprintjs/core";
 
@@ -33,8 +32,8 @@ const DraggableWrapper = styled.div<{ show: boolean }>`
 
 const DragHandle = styled.div`
   position: absolute;
-  left: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX] / 2}px;
-  top: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX] / 2}px;
+  left: 0px;
+  top: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX]}px;
   cursor: move;
   display: none;
   cursor: grab;
@@ -43,15 +42,15 @@ const DragHandle = styled.div`
 const DeleteControl = styled.div`
   position: absolute;
   right: ${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX]}px;
-  top: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX] / 2}px;
+  top: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX]}px;
   display: none;
   cursor: pointer;
 `;
 
 const EditControl = styled.div`
   position: absolute;
-  right: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX] / 2}px;
-  top: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX] / 2}px;
+  right: 0;
+  top: -${props => props.theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX]}px;
   display: none;
   cursor: pointer;
 `;
@@ -65,19 +64,21 @@ const DraggableMask = styled.div`
   z-index: -1;
 `;
 
+const CONTROL_ICON_SIZE = 20;
+
 const moveControlIcon = ControlIcons.MOVE_CONTROL({
-  width: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX],
-  height: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX],
+  width: CONTROL_ICON_SIZE,
+  height: CONTROL_ICON_SIZE,
 });
 
 const deleteControlIcon = ControlIcons.DELETE_CONTROL({
-  width: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX],
-  height: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX],
+  width: CONTROL_ICON_SIZE,
+  height: CONTROL_ICON_SIZE,
 });
 
 const editControlIcon = ControlIcons.EDIT_CONTROL({
-  width: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX],
-  height: theme.fontSizes[CONTROL_THEME_FONTSIZE_INDEX],
+  width: CONTROL_ICON_SIZE,
+  height: CONTROL_ICON_SIZE,
 });
 
 type DraggableComponentProps = ContainerWidgetProps<WidgetProps>;
diff --git a/app/client/src/constants/Colors.tsx b/app/client/src/constants/Colors.tsx
index bb6e0037b6..f60ca46c3e 100644
--- a/app/client/src/constants/Colors.tsx
+++ b/app/client/src/constants/Colors.tsx
@@ -32,6 +32,7 @@ export const Colors: Record<string, string> = {
   FRENCH_PASS: "#BBE8FE",
   CADET_BLUE: "#A3B3BF",
   JAFFA: "#F2994A",
+  BLUE_BAYOUX: "#4E5D78",
 };
 
 export type Color = typeof Colors[keyof typeof Colors];
diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx
index 293aa6052c..3ea43db3cf 100644
--- a/app/client/src/constants/DefaultTheme.tsx
+++ b/app/client/src/constants/DefaultTheme.tsx
@@ -158,6 +158,7 @@ export const theme: Theme = {
     menuIconColorInactive: Colors.OXFORD_BLUE,
     bodyBG: Colors.ATHENS_GRAY,
     builderBodyBG: Colors.WHITE,
+    widgetName: Colors.BLUE_BAYOUX,
   },
   lineHeights: [0, 14, 18, 22, 24, 28, 36, 48, 64, 80],
   fonts: [