code review changes

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

@@ -21,7 +21,7 @@ const buttonStyles = css<{
   intent?: Intent;
   filled?: string;
   fluid?: boolean;
-  themeType?: string;
+  skin?: string;
   iconAlignment?: Direction;
 }>`
   ${BlueprintButtonIntentsCSS}
@@ -38,19 +38,21 @@ const buttonStyles = css<{
   }
   &&&&&& {
     &.bp3-button span {
-      font-weight: ${props => (props.themeType ? 400 : 700)};
+      font-weight: ${props => (props.skin ? 400 : 700)};
     }
     .bp3-icon svg {
-      width: ${props => (props.themeType ? 14 : 16)}px;
-      height: ${props => (props.themeType ? 14 : 16)}px;
+      width: ${props => (props.skin ? 14 : 16)}px;
+      height: ${props => (props.skin ? 14 : 16)}px;
     }
     &.bp3-button {
-      ${props =>
-        props.themeType !== undefined
-          ? props.iconAlignment === "right"
-            ? "display: flex; justify-content: space-between;width: 100%;"
-            : props.iconAlignment === "left"
-            ? "display: flex; justify-content: flex-start;width: 100%;"
+      display: flex;
+      width: 100%;
+      justify-content: ${props =>
+        props.skin !== undefined
+          ? props.iconAlignment === Directions.RIGHT
+            ? "space-between"
+            : props.iconAlignment === Directions.LEFT
+            ? "flex-start"
             : ""
           : ""};
     }
@@ -61,7 +63,7 @@ const StyledButton = styled(BlueprintButton)<{
   outline?: string;
   intent?: Intent;
   filled?: string;
-  themeType?: string;
+  skin?: string;
   iconAlignment?: Direction;
 }>`
   ${buttonStyles}
@@ -70,7 +72,7 @@ const StyledAnchorButton = styled(BlueprintAnchorButton)<{
   outline?: string;
   intent?: Intent;
   filled?: string;
-  themeType?: string;
+  skin?: string;
   iconAlignment?: Direction;
 }>`
   ${buttonStyles}
@@ -91,7 +93,7 @@ export type ButtonProps = {
   type?: "button" | "submit" | "reset";
   className?: string;
   fluid?: boolean;
-  themeType?: string;
+  skin?: string;
 };
 
 export const Button = (props: ButtonProps) => {
@@ -119,7 +121,7 @@ export const Button = (props: ButtonProps) => {
     type: props.type,
     className: props.className,
     fluid: props.fluid ? props.fluid.toString() : undefined,
-    themeType: props.themeType ? props.themeType : undefined,
+    skin: props.skin ? props.skin : undefined,
     iconAlignment: props.iconAlignment ? props.iconAlignment : undefined,
   };
   if (props.href) {

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

@@ -254,6 +254,7 @@ const DynamicAutocompleteInputWrapper = styled.div`
   height: 100%;
   flex: 1;
   position: relative;
+  //TODO(abhinav): Fix these styles when we have the designs for the lightning icon in both themes
   & > span:first-of-type {
     position: absolute;
     right: 4px;
@@ -589,7 +590,7 @@ class DynamicAutocompleteInput extends Component<Props, State> {
         {(showLightningMenu === undefined || showLightningMenu === true) && (
           <Suspense fallback={<div />}>
             <LightningMenu
-              themeType={this.props.theme === "DARK" ? "dark" : "light"}
+              skin={this.props.theme === "DARK" ? "dark" : "light"}
               updatePropertyValue={this.updatePropertyValue}
               createNewApiAction={this.props.createNewApiAction}
               createAction={this.props.createAction}

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

@@ -27,7 +27,7 @@ import {
 } from "constants/messages";
 
 export const getApiOptions = (
-  themeType: string,
+  skin: string,
   apis: RestAction[],
   pageId: string,
   createNewApiAction: (pageId: string) => void,
@@ -43,7 +43,7 @@ export const getApiOptions = (
               text={LIGHTNING_MENU_API_CREATE_NEW}
               icon="plus"
               iconAlignment="left"
-              themeType={themeType}
+              skin={skin}
               type="button"
             />
           ),
@@ -67,11 +67,11 @@ export const getApiOptions = (
   },
   openDirection: Directions.RIGHT,
   openOnHover: false,
-  themeType: themeType,
+  skin: skin,
 });
 
 export const getQueryOptions = (
-  themeType: string,
+  skin: string,
   queries: RestAction[],
   pageId: string,
   applicationId: string,
@@ -91,7 +91,7 @@ export const getQueryOptions = (
               text={LIGHTNING_MENU_QUERY_CREATE_NEW}
               icon="plus"
               iconAlignment="left"
-              themeType={themeType}
+              skin={skin}
               type="button"
             />
           ),
@@ -144,11 +144,11 @@ export const getQueryOptions = (
   },
   openDirection: Directions.RIGHT,
   openOnHover: false,
-  themeType: themeType,
+  skin: skin,
 });
 
 export const getWidgetOptions = (
-  themeType: string,
+  skin: string,
   widgets: WidgetProps[],
   updatePropertyValue: (value: string, cursor?: number) => void,
 ) => ({
@@ -169,7 +169,7 @@ export const getWidgetOptions = (
   },
   openDirection: Directions.RIGHT,
   openOnHover: false,
-  themeType: themeType,
+  skin: skin,
 });
 
 export const getLightningMenuOptions = (
@@ -183,7 +183,7 @@ export const getLightningMenuOptions = (
   dataSources: Datasource[],
   createNewApiAction: (pageId: string) => void,
   createAction: (data: Partial<RestAction>) => void,
-  themeType: string,
+  skin: string,
   updatePropertyValue: (value: string, cursor?: number) => void,
 ) => {
   const options: CustomizedDropdownOption[] = [
@@ -199,7 +199,7 @@ export const getLightningMenuOptions = (
       content: (
         <CustomizedDropdown
           {...getApiOptions(
-            themeType,
+            skin,
             apis,
             pageId,
             createNewApiAction,
@@ -214,7 +214,7 @@ export const getLightningMenuOptions = (
       content: (
         <CustomizedDropdown
           {...getQueryOptions(
-            themeType,
+            skin,
             queries,
             pageId,
             applicationId,
@@ -234,7 +234,7 @@ export const getLightningMenuOptions = (
     options.push({
       content: (
         <CustomizedDropdown
-          {...getWidgetOptions(themeType, widgets, updatePropertyValue)}
+          {...getWidgetOptions(skin, widgets, updatePropertyValue)}
         />
       ),
       disabled: false,

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

@@ -28,7 +28,7 @@ import { withTheme } from "styled-components";
 
 const LightningIcon = ControlIcons.LIGHTNING_CONTROL;
 const lightningMenuOptions = (
-  themeType: string,
+  skin: string,
   apis: RestAction[],
   queries: RestAction[],
   widgets: WidgetProps[],
@@ -53,7 +53,7 @@ const lightningMenuOptions = (
     dataSources,
     createNewApiAction,
     createAction,
-    themeType,
+    skin,
     updatePropertyValue,
   );
   return {
@@ -71,7 +71,7 @@ const lightningMenuOptions = (
         </Tooltip>
       ),
     },
-    themeType: themeType,
+    skin,
   };
 };
 
@@ -80,7 +80,7 @@ type LightningMenuProps = {
   updatePropertyValue: (value: string, cursor?: number) => void;
   createNewApiAction: (pageId: string) => void;
   createAction: (data: Partial<RestAction>) => void;
-  themeType: string;
+  skin: string;
   theme: Theme;
 };
 
@@ -96,16 +96,14 @@ export const LightningMenu = (props: LightningMenuProps) => {
     <LightningIcon
       width={props.theme.lightningMenu.iconSize}
       height={props.theme.lightningMenu.iconSize}
-      color={
-        props.theme.lightningMenu[props.themeType as "light" | "dark"].color
-      }
+      color={props.theme.lightningMenu[props.skin as "light" | "dark"].color}
     />
   );
 
   return (
     <CustomizedDropdown
       {...lightningMenuOptions(
-        props.themeType,
+        props.skin,
         apis,
         queries,
         widgets,

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

@@ -80,7 +80,7 @@ export const EditorHeader = (props: EditorHeaderProps) => {
                 text="Manage Pages"
                 icon="page-layout"
                 iconAlignment="left"
-                themeType="light"
+                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";
 
-export const DropdownTrigger = styled.div<{ themeType: string }>`
+export const DropdownTrigger = styled.div<{ skin: string }>`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -20,9 +20,9 @@ export const DropdownTrigger = styled.div<{ themeType: string }>`
     span {
       font-weight: 400;
       color: ${props =>
-        props.themeType === "dark"
+        props.skin === "dark"
           ? props.theme.colors.textOnDarkBG
-          : props.themeType === "light"
+          : props.skin === "light"
           ? props.theme.colors.defaultText
           : "initial"};
     }
@@ -31,21 +31,19 @@ export const DropdownTrigger = styled.div<{ themeType: string }>`
     }
   }
 `;
-export const DropdownContent = styled.div<{ themeType: string }>`
+export const DropdownContent = styled.div<{ skin: string }>`
   &&& * {
     font-size: ${props => props.theme.fontSizes[3]}px;
   }
-  border: ${props => (props.themeType === "dark" ? "1px solid" : "")};
+  border: ${props => (props.skin === "dark" ? "1px solid" : "")};
   border-color: ${props =>
-    props.themeType === "dark"
-      ? props.theme.dropdown[props.themeType].border
-      : ""};
-  background: ${props => props.theme.dropdown[props.themeType].inActiveBG};
+    props.skin === "dark" ? props.theme.dropdown[props.skin].border : ""};
+  background: ${props => props.theme.dropdown[props.skin].inActiveBG};
 `;
 
 export const DropdownContentSection = styled.div<{
   stick: boolean;
-  themeType: string;
+  skin: string;
 }>`
   position: ${props => (props.stick ? "sticky" : "relative")};
   background: white;
@@ -68,16 +66,16 @@ export const DropdownContentSection = styled.div<{
     right: 0;
     bottom: 0;
     height: 1px;
-    background: ${props => (props.themeType === "dark" ? "#535B62" : "#ccc")};
+    background: ${props => (props.skin === "dark" ? "#535B62" : "#ccc")};
   }
 `;
 
-export const highlightOption = css<{ intent?: Intent; themeType: string }>`
+export const highlightOption = css<{ intent?: Intent; skin: string }>`
   text-decoration: none;
-  color: ${props => props.theme.dropdown[props.themeType].hoverText};
-  background: ${props => props.theme.dropdown[props.themeType].hoverBG};
+  color: ${props => props.theme.dropdown[props.skin].hoverText};
+  background: ${props => props.theme.dropdown[props.skin].hoverBG};
   * {
-    color: ${props => props.theme.dropdown[props.themeType].hoverText};
+    color: ${props => props.theme.dropdown[props.skin].hoverText};
   }
 `;
 
@@ -85,7 +83,7 @@ export const Option = styled.div<{
   intent?: Intent;
   active?: boolean;
   disabled?: boolean;
-  themeType: string;
+  skin: string;
 }>`
   padding: 8px 16px;
   min-width: 200px;
@@ -95,8 +93,8 @@ export const Option = styled.div<{
     margin: 0;
   }
   cursor: pointer;
-  background: ${props => props.theme.dropdown[props.themeType].inActiveBG};
-  color: ${props => props.theme.dropdown[props.themeType].inActiveText};
+  background: ${props => props.theme.dropdown[props.skin].inActiveBG};
+  color: ${props => props.theme.dropdown[props.skin].inActiveText};
   &:hover {
     ${props => (!props.disabled ? highlightOption : ``)};
   }
@@ -104,9 +102,9 @@ export const Option = styled.div<{
   &&& button {
     span {
       color: ${props =>
-        props.themeType === "dark"
+        props.skin === "dark"
           ? props.theme.colors.textOnDarkBG
-          : props.themeType === "light"
+          : props.skin === "light"
           ? props.theme.colors.defaultText
           : "initial"};
     }

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

@@ -45,7 +45,7 @@ export type CustomizedDropdownProps = {
   openDirection: Direction;
   openOnHover?: boolean;
   usePortal?: boolean;
-  themeType?: string;
+  skin?: string;
 };
 
 const getIcon = (icon?: string, intent?: Intent) => {
@@ -72,7 +72,7 @@ const getIcon = (icon?: string, intent?: Intent) => {
 
 const getContentSection = (
   section: CustomizedDropdownOptionSection,
-  themeType: string,
+  skin: string,
 ) => {
   return (
     <React.Fragment>
@@ -88,7 +88,7 @@ const getContentSection = (
               onClick={option.onSelect}
               active={!!option.active}
               disabled={!!option.disabled}
-              themeType={themeType}
+              skin={skin}
             >
               {option.content}
             </Option>
@@ -101,7 +101,7 @@ const getContentSection = (
 export const CustomizedDropdown = (
   props: CustomizedDropdownProps & { theme: Theme },
 ) => {
-  const themeType = props.themeType ? props.themeType : "light";
+  const skin = props.skin ? props.skin : "light";
   const icon = getIcon(props.trigger.icon, props.trigger.intent);
   const trigger = (
     <React.Fragment>
@@ -115,7 +115,7 @@ export const CustomizedDropdown = (
           iconAlignment={Directions.RIGHT}
           text={props.trigger.text}
           intent={props.trigger.intent}
-          themeType={props.themeType}
+          skin={props.skin}
           type="button"
         />
       )}
@@ -123,12 +123,8 @@ export const CustomizedDropdown = (
   );
 
   const content = props.sections.map((section, index) => (
-    <DropdownContentSection
-      key={index}
-      stick={!!section.isSticky}
-      themeType={themeType}
-    >
-      {getContentSection(section, themeType)}
+    <DropdownContentSection key={index} stick={!!section.isSticky} skin={skin}>
+      {getContentSection(section, skin)}
     </DropdownContentSection>
   ));
   return (
@@ -146,8 +142,8 @@ export const CustomizedDropdown = (
       minimal
       enforceFocus={false}
     >
-      <DropdownTrigger themeType={themeType}>{trigger}</DropdownTrigger>
-      <DropdownContent themeType={themeType}>{content}</DropdownContent>
+      <DropdownTrigger skin={skin}>{trigger}</DropdownTrigger>
+      <DropdownContent skin={skin}>{content}</DropdownContent>
     </Popover>
   );
 };