WIP: Workflow fixes

app/client/src/constants/Colors.tsx

@@ -1,14 +1,13 @@
+// Color Names generated from http://chir.ag/projects/name-that-color
 export const WHITE = "#FFFFFF";
-export const WHITE_1 = "#E9FAF3";
+export const POLAR = "#E9FAF3";
-export const WHITE_2 = "#D0D7DD";
+export const GEYSER = "#D0D7DD";
 
 export const BLACK = "#000000";
-export const BLACK_1 = "#040627";
+export const BLACK_PEARL = "#040627";
-export const BLACK_2 = "#21282C";
+export const SHARK = "#21282C";
-export const BLACK_3 = "#272E32";
+export const OUTER_SPACE = "#272E32";
-export const BLACK_4 = "#363E44";
 
 export const GREEN = "#29CCA3";
 export const RED = "#CE4257";
 export const PURPLE = "#6871EF";
-

app/client/src/constants/DefaultTheme.tsx

@@ -31,13 +31,13 @@ export const theme: Theme = {
   colors: {
     primary: Colors.GREEN,
     error: Colors.RED,
-    hover: Colors.WHITE_1,
+    hover: Colors.POLAR,
-    textDefault: Colors.BLACK_1,
+    textDefault: Colors.BLACK_PEARL,
     textOnDarkBG: Colors.WHITE,
-    textAnchor: Colors.PURPLE ,
+    textAnchor: Colors.PURPLE,
-    border: Colors.WHITE_2 ,
+    border: Colors.GEYSER,
-    paneCard: Colors.BLACK_2,
+    paneCard: Colors.SHARK,
-    paneBG: Colors.BLACK_4,
+    paneBG: Colors.OUTER_SPACE,
   },
   lineHeights: [0, 14, 18, 22, 24, 28, 36, 48, 64, 80],
   fonts: [FontFamilies.DMSans, FontFamilies.AppsmithWidget],

app/client/src/constants/Fonts.tsx

@@ -1,3 +1,2 @@
 export const DMSans = "DM Sans";
 export const AppsmithWidget = "appsmith-widget-font";
-export const OpenSans = "Open Sans";

app/client/src/index.css

@@ -10,7 +10,7 @@ body {
 }
 
 body.fontLoaded {
-  font-family: "DM Sans, sans-serif";
+  font-family: "DM Sans", sans-serif;
 }
 
 code {

app/client/src/index.tsx

@@ -14,21 +14,10 @@ import WidgetBuilderRegistry from "./utils/WidgetRegistry";
 import { ThemeProvider, theme } from "./constants/DefaultTheme";
 import createSagaMiddleware from 'redux-saga'
 import { rootSaga } from "./sagas"
-import FontFaceObserver from "fontfaceobserver";
 import { DndProvider } from "react-dnd"
 import HTML5Backend from "react-dnd-html5-backend"
 import { appInitializer } from "./utils/AppsmithUtils";
 
-// font face observer
-const textFont = new FontFaceObserver("DM Sans");
-const widgetIconFont = new FontFaceObserver("appmith-widget-font");
-Promise.all([textFont.load(), widgetIconFont.load()]).then(()=>{
-  document.body.className += "fontLoaded";
-}).catch(err => {
-  console.log(err);
-});
-
-
 appInitializer();
 WidgetBuilderRegistry.registerWidgetBuilders();
 const sagaMiddleware = createSagaMiddleware()

app/client/src/mockResponses/WidgetCardsPaneResponse.tsx

@@ -4,17 +4,61 @@ const WidgetCardsPaneResponse: WidgetCardsPaneReduxState = {
   cards: {
     common: [
       {
-        widgetType: "BUTTON_WIDGET",
+        widgetType: "TEXT_WIDGET",
-        icon: "appsmith-widget-button",
+        icon: "appsmith-widget-text",
-        label: "Button",
+        label: "Container",
+      },
+      {
+        widgetType: "CHECKBOX_WIDGET",
+        icon: "appsmith-widget-checkbox",
+        label: "Container",
+      },
+      {
+        widgetType: "RADIO_GROUP_WIDGET",
+        icon: "appsmith-widget-radio",
+        label: "Container",
       },
-    ],
-    form: [
       {
         widgetType: "BUTTON_WIDGET",
         icon: "appsmith-widget-button",
         label: "Button",
       },
+      {
+        widgetType: "INPUT_GROUP_WIDGET",
+        icon: "appsmith-widget-input",
+        label: "Input",
+      },
+      {
+        widgetType: "SPINNER_WIDGET",
+        icon: "appsmith-widget-switch",
+        label: "Spinner",
+      },
+      {
+        widgetType: "CONTAINER_WIDGET",
+        icon: "appsmith-widget-modal",
+        label: "Container",
+      },
+      {
+        widgetType: "BREADCRUMBS_WIDGET",
+        icon: "appsmith-widget-collapse",
+        label: "Input",
+      },{
+        widgetType: "TAG_INPUT_WIDGET",
+        icon: "appsmith-widget-dropdown",
+        label: "Tag",
+      },
+      {
+        widgetType: "NUMERIC_INPUT_WIDGET",
+        icon: "appsmith-widget-table",
+        label: "Numeric",
+      }
+    ],
+    form: [
+      {
+        widgetType: "ICON_WIDGET",
+        icon: "appsmith-widget-button",
+        label: "Icon",
+      },
       {
         widgetType: "CALLOUT_WIDGET",
         icon: "appsmith-widget-alert",
@@ -23,9 +67,9 @@ const WidgetCardsPaneResponse: WidgetCardsPaneReduxState = {
     ],
     view: [
       {
-        widgetType: "BUTTON_WIDGET",
+        widgetType: "INPUT_GROUP_WIDGET",
-        icon: "appsmith-widget-button",
+        icon: "appsmith-widget-input",
-        label: "Button",
+        label: "Input",
       }
     ]
   }

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

@@ -11,11 +11,6 @@ type CardProps = {
 }
 
 export const Wrapper = styled.div`
-  display:flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  flex: 1;
   padding: 10px 5px 10px 5px;
   border-radius: ${props => props.theme.radii[1]}px;
   background: ${props => props.theme.colors.paneCard};
@@ -45,6 +40,7 @@ export const IconLabel = styled.h5`
   font-weight: ${props => props.theme.fontWeights[1]};
   flex-shrink: 1;
   font-size: ${props => props.theme.fontSizes[1]}px;
+  line-height: ${props => props.theme.lineHeights[1]}px;
 `;
 
 /* eslint-disable @typescript-eslint/no-unused-vars */

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

@@ -8,7 +8,6 @@ type WidgetCardPaneProps  = {
 }
 
 const CardsPaneWrapper = styled.div`
-  width: 256px;
   background-color: ${props => props.theme.colors.paneBG}; 
   border-radius: ${props => props.theme.radii[2]}px;
   box-shadow: 0px 0px 3px ${props => props.theme.colors.paneBG};
@@ -21,6 +20,8 @@ const CardsWrapper = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-gap: ${props => props.theme.spaces[2]}px;
+  justify-items: stretch;
+  align-items: stretch;
 `;
 
 const WidgetCardsPane: React.SFC<WidgetCardPaneProps> = (props: WidgetCardPaneProps) => {

app/client/src/utils/AppsmithUtils.tsx

@@ -1,3 +1,4 @@
+import FontFaceObserver from 'fontfaceobserver'
 import { ReduxAction } from "../constants/ActionConstants"
 import { SENTRY_PROD_CONFIG, SENTRY_STAGE_CONFIG, HOTJAR_PROD_HJID, HOTJAR_PROD_HJSV } from "../constants/ThirdPartyConstants";
 import * as Sentry from '@sentry/browser';
@@ -31,6 +32,11 @@ export const appInitializer = () => {
     case "LOCAL":
       break;
   }
+
+  const textFont = new FontFaceObserver("DM Sans");
+  textFont.load().then(()=> {
+    document.body.className += "fontLoaded";
+  }).catch(err => {
+    console.log(err);
+  });
 }
-
-