Merge branch 'fix/bug-413' into 'release'

Fix #413: Adhere widget name and controls to designs

- Widget Name now adheres to designs
- Position and sizes of widget controls now adhere to designs.

See merge request theappsmith/internal-tools-client!198

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;

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>;

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];

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: [