diff --git a/app/client/src/constants/Colors.tsx b/app/client/src/constants/Colors.tsx index b5fe36a9d6..9a979f8116 100644 --- a/app/client/src/constants/Colors.tsx +++ b/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 WHITE_2 = "#D0D7DD"; +export const POLAR = "#E9FAF3"; +export const GEYSER = "#D0D7DD"; export const BLACK = "#000000"; -export const BLACK_1 = "#040627"; -export const BLACK_2 = "#21282C"; -export const BLACK_3 = "#272E32"; -export const BLACK_4 = "#363E44"; +export const BLACK_PEARL = "#040627"; +export const SHARK = "#21282C"; +export const OUTER_SPACE = "#272E32"; export const GREEN = "#29CCA3"; export const RED = "#CE4257"; export const PURPLE = "#6871EF"; - diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx index d41031a9a8..2131455f68 100644 --- a/app/client/src/constants/DefaultTheme.tsx +++ b/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, - textDefault: Colors.BLACK_1, + hover: Colors.POLAR, + textDefault: Colors.BLACK_PEARL, textOnDarkBG: Colors.WHITE, - textAnchor: Colors.PURPLE , - border: Colors.WHITE_2 , - paneCard: Colors.BLACK_2, - paneBG: Colors.BLACK_4, + textAnchor: Colors.PURPLE, + border: Colors.GEYSER, + paneCard: Colors.SHARK, + paneBG: Colors.OUTER_SPACE, }, lineHeights: [0, 14, 18, 22, 24, 28, 36, 48, 64, 80], fonts: [FontFamilies.DMSans, FontFamilies.AppsmithWidget], diff --git a/app/client/src/constants/Fonts.tsx b/app/client/src/constants/Fonts.tsx index 4671d73bc0..345236d9d1 100644 --- a/app/client/src/constants/Fonts.tsx +++ b/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"; \ No newline at end of file diff --git a/app/client/src/index.css b/app/client/src/index.css index 997add21cd..2b808c1d6c 100755 --- a/app/client/src/index.css +++ b/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 { diff --git a/app/client/src/index.tsx b/app/client/src/index.tsx index eef0767308..58b7c8a9f0 100755 --- a/app/client/src/index.tsx +++ b/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() diff --git a/app/client/src/mockResponses/WidgetCardsPaneResponse.tsx b/app/client/src/mockResponses/WidgetCardsPaneResponse.tsx index 6ff551266f..d77138eea7 100644 --- a/app/client/src/mockResponses/WidgetCardsPaneResponse.tsx +++ b/app/client/src/mockResponses/WidgetCardsPaneResponse.tsx @@ -4,17 +4,61 @@ const WidgetCardsPaneResponse: WidgetCardsPaneReduxState = { cards: { common: [ { - widgetType: "BUTTON_WIDGET", - icon: "appsmith-widget-button", - label: "Button", + widgetType: "TEXT_WIDGET", + icon: "appsmith-widget-text", + 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", - icon: "appsmith-widget-button", - label: "Button", + widgetType: "INPUT_GROUP_WIDGET", + icon: "appsmith-widget-input", + label: "Input", } ] } diff --git a/app/client/src/pages/Editor/WidgetCard.tsx b/app/client/src/pages/Editor/WidgetCard.tsx index 63a8d12c4f..216a73366c 100644 --- a/app/client/src/pages/Editor/WidgetCard.tsx +++ b/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 */ diff --git a/app/client/src/pages/Editor/WidgetCardsPane.tsx b/app/client/src/pages/Editor/WidgetCardsPane.tsx index 7672bbf07f..b89d82a01a 100644 --- a/app/client/src/pages/Editor/WidgetCardsPane.tsx +++ b/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 = (props: WidgetCardPaneProps) => { diff --git a/app/client/src/utils/AppsmithUtils.tsx b/app/client/src/utils/AppsmithUtils.tsx index df044bf358..0d8d7d5e09 100644 --- a/app/client/src/utils/AppsmithUtils.tsx +++ b/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); + }); } - -