all code review comments handled

app/client/src/components/editorComponents/Button.tsx

@@ -1,5 +1,9 @@
 import React from "react";
-import { Intent, BlueprintButtonIntentsCSS } from "constants/DefaultTheme";
+import {
+  Intent,
+  BlueprintButtonIntentsCSS,
+  Skin,
+} from "constants/DefaultTheme";
 import styled, { css } from "styled-components";
 import {
   AnchorButton as BlueprintAnchorButton,
@@ -21,7 +25,7 @@ const buttonStyles = css<{
   intent?: Intent;
   filled?: string;
   fluid?: boolean;
-  skin?: string;
+  skin?: Skin;
   iconAlignment?: Direction;
 }>`
   ${BlueprintButtonIntentsCSS}
@@ -38,23 +42,19 @@ const buttonStyles = css<{
   }
   &&&&&& {
     &.bp3-button span {
-      font-weight: ${props => (props.skin ? 400 : 700)};
+      font-weight: ${props => (props.skin !== undefined ? 400 : 700)};
     }
     .bp3-icon svg {
-      width: ${props => (props.skin ? 14 : 16)}px;
-      height: ${props => (props.skin ? 14 : 16)}px;
+      width: ${props => (props.skin !== undefined ? 14 : 16)}px;
+      height: ${props => (props.skin !== undefined ? 14 : 16)}px;
     }
     &.bp3-button {
       display: flex;
       width: 100%;
       justify-content: ${props =>
-        props.skin !== undefined
-          ? props.iconAlignment === Directions.RIGHT
-            ? "space-between"
-            : props.iconAlignment === Directions.LEFT
-            ? "flex-start"
-            : ""
-          : ""};
+        props.iconAlignment === Directions.RIGHT
+          ? "space-between"
+          : "flex-start"};
     }
   }
   ${props => (props.outline ? outline : "")}
@@ -63,7 +63,7 @@ const StyledButton = styled(BlueprintButton)<{
   outline?: string;
   intent?: Intent;
   filled?: string;
-  skin?: string;
+  skin?: Skin;
   iconAlignment?: Direction;
 }>`
   ${buttonStyles}
@@ -72,7 +72,7 @@ const StyledAnchorButton = styled(BlueprintAnchorButton)<{
   outline?: string;
   intent?: Intent;
   filled?: string;
-  skin?: string;
+  skin?: Skin;
   iconAlignment?: Direction;
 }>`
   ${buttonStyles}
@@ -93,7 +93,7 @@ export type ButtonProps = {
   type?: "button" | "submit" | "reset";
   className?: string;
   fluid?: boolean;
-  skin?: string;
+  skin?: Skin;
 };
 
 export const Button = (props: ButtonProps) => {
@@ -121,7 +121,7 @@ export const Button = (props: ButtonProps) => {
     type: props.type,
     className: props.className,
     fluid: props.fluid ? props.fluid.toString() : undefined,
-    skin: props.skin ? props.skin : undefined,
+    skin: props.skin,
     iconAlignment: props.iconAlignment ? props.iconAlignment : undefined,
   };
   if (props.href) {

app/client/src/components/editorComponents/DynamicAutocompleteInput.tsx

@@ -19,7 +19,7 @@ import { WrappedFieldInputProps, WrappedFieldMetaProps } from "redux-form";
 import _ from "lodash";
 import { parseDynamicString } from "utils/DynamicBindingUtils";
 import { DataTree } from "entities/DataTree/dataTreeFactory";
-import { Theme } from "constants/DefaultTheme";
+import { Theme, Skin } from "constants/DefaultTheme";
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import TernServer from "utils/autocomplete/TernServer";
 import KeyboardShortcuts from "constants/KeyboardShortcuts";
@@ -581,7 +581,7 @@ class DynamicAutocompleteInput extends Component<Props, State> {
         {showLightningMenu !== false && (
           <Suspense fallback={<div />}>
             <LightningMenu
-              skin={this.props.theme === "DARK" ? "dark" : "light"}
+              skin={this.props.theme === "DARK" ? Skin.DARK : Skin.LIGHT}
               updateDynamicInputValue={this.updatePropertyValue}
             />
           </Suspense>

app/client/src/components/editorComponents/LightningMenu/helpers.tsx

@@ -20,9 +20,10 @@ import {
   LIGHTNING_MENU_QUERY_CREATE_NEW,
   LIGHTNING_MENU_API_CREATE_NEW,
 } from "constants/messages";
+import { Skin } from "constants/DefaultTheme";
 
 export const getApiOptions = (
-  skin: string,
+  skin: Skin,
   apis: RestAction[],
   pageId: string,
   dispatch: Function,
@@ -66,7 +67,7 @@ export const getApiOptions = (
 });
 
 export const getQueryOptions = (
-  skin: string,
+  skin: Skin,
   queries: RestAction[],
   pageId: string,
   dispatch: Function,
@@ -110,7 +111,7 @@ export const getQueryOptions = (
 });
 
 export const getWidgetOptions = (
-  skin: string,
+  skin: Skin,
   widgets: WidgetProps[],
   updateDynamicInputValue: (value: string, cursor?: number) => void,
 ) => ({
@@ -140,7 +141,7 @@ export const getLightningMenuOptions = (
   widgets: WidgetProps[],
   pageId: string,
   dispatch: Function,
-  skin: string,
+  skin: Skin,
   updateDynamicInputValue: (value: string, cursor?: number) => void,
 ) => {
   const options: CustomizedDropdownOption[] = [

app/client/src/components/editorComponents/LightningMenu/index.tsx

@@ -12,13 +12,13 @@ import { LIGHTNING_MENU_DATA_TOOLTIP } from "constants/messages";
 
 import { getLightningMenuOptions } from "./helpers";
 import { useActions, useWidgets, usePageId } from "./hooks";
-import { Theme } from "constants/DefaultTheme";
+import { Theme, Skin } from "constants/DefaultTheme";
 import { withTheme } from "styled-components";
 import { useDispatch } from "react-redux";
 
 const LightningIcon = ControlIcons.LIGHTNING_CONTROL;
 const lightningMenuOptions = (
-  skin: string,
+  skin: Skin,
   apis: RestAction[],
   queries: RestAction[],
   widgets: WidgetProps[],
@@ -58,7 +58,7 @@ const lightningMenuOptions = (
 type LightningMenuProps = {
   onSelect?: (value: string) => void;
   updateDynamicInputValue: (value: string, cursor?: number) => void;
-  skin: string;
+  skin: Skin;
   theme: Theme;
 };
 
@@ -71,7 +71,7 @@ export const LightningMenu = (props: LightningMenuProps) => {
     <LightningIcon
       width={props.theme.lightningMenu.iconSize}
       height={props.theme.lightningMenu.iconSize}
-      color={props.theme.lightningMenu[props.skin as "light" | "dark"].color}
+      color={props.theme.lightningMenu[props.skin].color}
     />
   );
 

app/client/src/constants/DefaultTheme.tsx

@@ -37,6 +37,11 @@ export const IntentIcons: Record<Intent, JSXElementConstructor<IconProps>> = {
   warning: AlertIcons.WARNING,
 };
 
+export enum Skin {
+  LIGHT,
+  DARK,
+}
+
 export const BlueprintControlTransform = css`
   && {
     .${Classes.CONTROL} {
@@ -264,13 +269,13 @@ export type Theme = {
     hoverBGOpacity: number;
   };
   dropdown: {
-    light: {
+    [Skin.LIGHT]: {
       hoverBG: Color;
       hoverText: Color;
       inActiveBG: Color;
       inActiveText: Color;
     };
-    dark: {
+    [Skin.DARK]: {
       hoverBG: Color;
       hoverText: Color;
       inActiveBG: Color;
@@ -296,8 +301,8 @@ export type Theme = {
   alert: Record<string, { color: Color }>;
   lightningMenu: {
     iconSize: number;
-    dark: { color: Color };
-    light: { color: Color };
+    [Skin.DARK]: { color: Color };
+    [Skin.LIGHT]: { color: Color };
   };
 };
 
@@ -425,13 +430,13 @@ export const theme: Theme = {
     hoverBGOpacity: 0.5,
   },
   dropdown: {
-    light: {
+    [Skin.LIGHT]: {
       hoverBG: Colors.GREEN,
       hoverText: Colors.WHITE,
       inActiveBG: Colors.WHITE,
       inActiveText: Colors.BLACK_PEARL,
     },
-    dark: {
+    [Skin.DARK]: {
       hoverBG: Colors.TROUT_DARK,
       hoverText: Colors.WHITE,
       inActiveBG: Colors.BLUE_CHARCOAL,
@@ -475,10 +480,10 @@ export const theme: Theme = {
   },
   lightningMenu: {
     iconSize: 14,
-    dark: {
+    [Skin.DARK]: {
       color: Colors.WHITE,
     },
-    light: {
+    [Skin.LIGHT]: {
       color: Colors.HIT_GRAY,
     },
   },

app/client/src/pages/Editor/EditorHeader.tsx

@@ -20,6 +20,7 @@ import {
   getOnSelectAction,
 } from "pages/common/CustomizedDropdown/dropdownHelpers";
 import AnalyticsUtil from "utils/AnalyticsUtil";
+import { Skin } from "constants/DefaultTheme";
 
 const LoadingContainer = styled.div`
   display: flex;
@@ -79,8 +80,8 @@ export const EditorHeader = (props: EditorHeaderProps) => {
               <Button
                 text="Manage Pages"
                 icon="page-layout"
-                iconAlignment="left"
-                skin="light"
+                iconAlignment={Directions.LEFT}
+                skin={Skin.LIGHT}
               />
             ),
             onSelect: () =>

app/client/src/pages/common/CustomizedDropdown/StyledComponents.tsx

@@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";
-import { Intent } from "constants/DefaultTheme";
+import { Intent, Skin } from "constants/DefaultTheme";
 
-export const DropdownTrigger = styled.div<{ skin: string }>`
+export const DropdownTrigger = styled.div<{ skin: Skin }>`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -20,9 +20,9 @@ export const DropdownTrigger = styled.div<{ skin: string }>`
     span {
       font-weight: 400;
       color: ${props =>
-        props.skin === "dark"
+        props.skin === Skin.DARK
           ? props.theme.colors.textOnDarkBG
-          : props.skin === "light"
+          : props.skin === Skin.LIGHT
           ? props.theme.colors.defaultText
           : "initial"};
     }
@@ -31,19 +31,19 @@ export const DropdownTrigger = styled.div<{ skin: string }>`
     }
   }
 `;
-export const DropdownContent = styled.div<{ skin: string }>`
+export const DropdownContent = styled.div<{ skin: Skin }>`
   &&& * {
     font-size: ${props => props.theme.fontSizes[3]}px;
   }
-  border: ${props => (props.skin === "dark" ? "1px solid" : "")};
+  border: ${props => (props.skin === Skin.DARK ? "1px solid" : "")};
   border-color: ${props =>
-    props.skin === "dark" ? props.theme.dropdown[props.skin].border : ""};
+    props.skin === Skin.DARK ? props.theme.dropdown[props.skin].border : ""};
   background: ${props => props.theme.dropdown[props.skin].inActiveBG};
 `;
 
 export const DropdownContentSection = styled.div<{
   stick: boolean;
-  skin: string;
+  skin: Skin;
 }>`
   position: ${props => (props.stick ? "sticky" : "relative")};
   background: white;
@@ -66,11 +66,11 @@ export const DropdownContentSection = styled.div<{
     right: 0;
     bottom: 0;
     height: 1px;
-    background: ${props => (props.skin === "dark" ? "#535B62" : "#ccc")};
+    background: ${props => (props.skin === Skin.DARK ? "#535B62" : "#ccc")};
   }
 `;
 
-export const highlightOption = css<{ intent?: Intent; skin: string }>`
+export const highlightOption = css<{ intent?: Intent; skin: Skin }>`
   text-decoration: none;
   color: ${props => props.theme.dropdown[props.skin].hoverText};
   background: ${props => props.theme.dropdown[props.skin].hoverBG};
@@ -83,7 +83,7 @@ export const Option = styled.div<{
   intent?: Intent;
   active?: boolean;
   disabled?: boolean;
-  skin: string;
+  skin: Skin;
 }>`
   padding: 8px 16px;
   min-width: 200px;
@@ -102,9 +102,9 @@ export const Option = styled.div<{
   &&& button {
     span {
       color: ${props =>
-        props.skin === "dark"
+        props.skin === Skin.DARK
           ? props.theme.colors.textOnDarkBG
-          : props.skin === "light"
+          : props.skin === Skin.LIGHT
           ? props.theme.colors.defaultText
           : "initial"};
     }

app/client/src/pages/common/CustomizedDropdown/index.tsx

@@ -13,7 +13,7 @@ import { MenuIcons } from "icons/MenuIcons";
 import { Intent, IntentColors } from "constants/DefaultTheme";
 import { Direction, Directions } from "utils/helpers";
 import { getDirectionBased } from "./dropdownHelpers";
-import { Theme } from "constants/DefaultTheme";
+import { Theme, Skin } from "constants/DefaultTheme";
 import {
   Option,
   DropdownContentSection,
@@ -45,7 +45,7 @@ export type CustomizedDropdownProps = {
   openDirection: Direction;
   openOnHover?: boolean;
   usePortal?: boolean;
-  skin?: string;
+  skin?: Skin;
 };
 
 const getIcon = (icon?: string, intent?: Intent) => {
@@ -72,7 +72,7 @@ const getIcon = (icon?: string, intent?: Intent) => {
 
 const getContentSection = (
   section: CustomizedDropdownOptionSection,
-  skin: string,
+  skin: Skin,
 ) => {
   return (
     <React.Fragment>
@@ -101,7 +101,9 @@ const getContentSection = (
 export const CustomizedDropdown = (
   props: CustomizedDropdownProps & { theme: Theme },
 ) => {
-  const skin = props.skin ? props.skin : "light";
+  console.log("skin", props.skin);
+  const skin = props.skin ? props.skin : Skin.LIGHT;
+  console.log("skin", skin);
   const icon = getIcon(props.trigger.icon, props.trigger.intent);
   const trigger = (
     <React.Fragment>
@@ -115,7 +117,7 @@ export const CustomizedDropdown = (
           iconAlignment={Directions.RIGHT}
           text={props.trigger.text}
           intent={props.trigger.intent}
-          skin={props.skin}
+          skin={skin}
           type="button"
         />
       )}