added basic theming

app/client/package-lock.json

@@ -14273,17 +14273,6 @@
         }
       }
     },
-    "react": {
-      "version": "16.7.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-0.0.0-4a1072194.tgz",
-      "integrity": "sha512-ZUj2lkUDLjwJaGu4WD0dYSvsfIyhQt2l/AJDlg4ij+rCDU3fSFKgHWanNovViUoaWHAxgrpft3KGFfvWPZH5LA==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.12.0"
-      }
-    },
     "react-app-polyfill": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-0.2.0.tgz",
@@ -14467,17 +14456,6 @@
         "lodash": "^4.17.11"
       }
     },
-    "react-dom": {
-      "version": "16.7.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-0.0.0-4a1072194.tgz",
-      "integrity": "sha512-GfG8Vh/jMcnJKDpv7T6O1pS/WVqiocjPQ9o9cscW8bjR9W36DT3Xb4pDZT70t1xyVvX48/NrTQGz0H7I3fCLhQ==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.12.0"
-      }
-    },
     "react-error-overlay": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.2.tgz",
@@ -15780,15 +15758,6 @@
         "xmlchars": "^1.3.1"
       }
     },
-    "scheduler": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.0.0-4a1072194.tgz",
-      "integrity": "sha512-U+PqKfBcR39RFbJrlJPFwDXG2iLOZBGOPzNSWTAGUoOfTiL8qHTkemJeyV5CcL0UyaRgR8g3S469cNWFs/SHIw==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      }
-    },
     "schema-utils": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",

app/client/src/constants/ActionConstants.tsx

@@ -1,7 +1,7 @@
 import ContainerWidget from "../widgets/ContainerWidget"
 
 export type ActionType = "LOAD_CANVAS" | "CLEAR_CANVAS" | "DROP_WIDGET_CANVAS" | "REMOVE_WIDGET_CANVAS"
-export const ActionTypes = {
+export const ActionTypes: { [id: string]: ActionType } = {
     LOAD_CANVAS: "LOAD_CANVAS",
     CLEAR_CANVAS: "CLEAR_CANVAS",
     DROP_WIDGET_CANVAS: "DROP_WIDGET_CANVAS",

app/client/src/constants/ColorConstants.tsx

@@ -1,3 +0,0 @@
-export const a = () => {
-    
-}

app/client/src/constants/DefaultTheme.tsx

@@ -0,0 +1,45 @@
+import * as styledComponents from "styled-components"
+import { Color, FontFamily, Colors, Fonts } from "./StyleConstants"
+
+const {
+  default: styled,
+  css,
+  keyframes,
+  createGlobalStyle,
+  ThemeProvider
+} = styledComponents as styledComponents.ThemedStyledComponentsModule<
+  IThemeInterface
+>
+
+export interface IFontInterface {
+    fontSize: number
+    fontColor: Color,
+    fontFamily: FontFamily
+}
+
+export interface IThemeInterface {
+  primaryColor: Color
+  secondaryColor: Color
+  ascentColor: Color
+  headerFont: IFontInterface,
+  titleFont: IFontInterface,
+  subTitleFont: IFontInterface
+}
+
+const defaultFont: IFontInterface = {
+  fontSize: 14,
+  fontColor: Colors.FullBlack,
+  fontFamily: Fonts.RobotoBold
+}
+
+export const theme = {
+  primaryColor: Colors.FullWhite,
+  secondaryColor: Colors.FullWhite,
+  ascentColor: Colors.FullBlack,
+  headerFont: defaultFont,
+  titleFont: defaultFont,
+  subTitleFont: defaultFont
+}
+
+export default styled
+export { css, createGlobalStyle, keyframes, ThemeProvider }

app/client/src/constants/StyleConstants.tsx

@@ -0,0 +1,13 @@
+export type Color = "full-white" | "full-black"
+
+export const Colors: { [id: string]: Color } = {
+    FullWhite: "full-white",
+    FullBlack: "full-black"
+}
+
+export type FontFamily = "Brandon-Regular" | "Roboto-Bold"
+
+export const Fonts: { [id: string]: FontFamily } = {
+    BrandonRegular: "Brandon-Regular",
+    RobotoBold: "Roboto-Bold"
+}

app/client/src/editorComponents/ContainerComponent.tsx

@@ -1,17 +1,17 @@
 import * as React from "react"
 import BaseComponent, { IComponentProps } from "./BaseComponent"
 import { ContainerOrientation } from "../constants/WidgetConstants"
-import styled from "styled-components"
+import styled from "../constants/DefaultTheme"
 
 const Container = styled.div`
-  background: "black";
+  background: ${props => props.theme.primaryColor};
   color: "black";
 `
 
 class ContainerComponent extends BaseComponent<IContainerProps> {
   render() {
     return (
-      <Container>
+      <Container key={this.componentData.widgetId}>
         {this.props.children
           ? this.props.children.map(child => {
               return child

app/client/src/index.tsx

@@ -10,11 +10,13 @@ import { BrowserRouter, Route, Switch } from "react-router-dom"
 import { createStore } from "redux"
 import appReducer from "./reducers"
 import WidgetBuilderRegistry from "./utils/WidgetRegistry"
+import { ThemeProvider, theme } from "./constants/DefaultTheme"
 
 WidgetBuilderRegistry.registerWidgetBuilders()
 const store = createStore(appReducer)
 ReactDOM.render(
   <Provider store={store}>
+    <ThemeProvider theme={theme}>
       <BrowserRouter>
         <Switch>
           <Route exact path="/" component={App} />
@@ -22,6 +24,7 @@ ReactDOM.render(
           <Route component={PageNotFound} />
         </Switch>
       </BrowserRouter>
+    </ThemeProvider>
   </Provider>,
   document.getElementById("root")
 )

app/client/src/reducers/uiReducers/canvasReducer.tsx

@@ -14,7 +14,6 @@ const initialState: CanvasReduxState = {
       {
         widgetId: "1",
         widgetType: "TEXT_WIDGET",
-        //text: "Hello World",
         topRow: 0,
         leftColumn: 0,
         bottomRow: 5,