diff --git a/app/client/package-lock.json b/app/client/package-lock.json index eb991bde32..31d9b83b73 100644 --- a/app/client/package-lock.json +++ b/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", diff --git a/app/client/src/constants/ActionConstants.tsx b/app/client/src/constants/ActionConstants.tsx index 98c082d005..1e7d67a946 100644 --- a/app/client/src/constants/ActionConstants.tsx +++ b/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", diff --git a/app/client/src/constants/ColorConstants.tsx b/app/client/src/constants/ColorConstants.tsx deleted file mode 100644 index 28e681f540..0000000000 --- a/app/client/src/constants/ColorConstants.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export const a = () => { - -} \ No newline at end of file diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx new file mode 100644 index 0000000000..857ccdb809 --- /dev/null +++ b/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 } diff --git a/app/client/src/constants/StyleConstants.tsx b/app/client/src/constants/StyleConstants.tsx new file mode 100644 index 0000000000..272b519f53 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/app/client/src/editorComponents/ContainerComponent.tsx b/app/client/src/editorComponents/ContainerComponent.tsx index 53928be6fe..d7cf936c46 100644 --- a/app/client/src/editorComponents/ContainerComponent.tsx +++ b/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 { render() { return ( - + {this.props.children ? this.props.children.map(child => { return child diff --git a/app/client/src/index.tsx b/app/client/src/index.tsx index f7834b1861..bb83ef9a24 100755 --- a/app/client/src/index.tsx +++ b/app/client/src/index.tsx @@ -10,18 +10,21 @@ 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( - - - - - - - + + + + + + + + + , document.getElementById("root") ) diff --git a/app/client/src/reducers/uiReducers/canvasReducer.tsx b/app/client/src/reducers/uiReducers/canvasReducer.tsx index 2772d52210..dcf81e7457 100644 --- a/app/client/src/reducers/uiReducers/canvasReducer.tsx +++ b/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,