Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Update Default styles of Widgets (#2823)

Browse Source 
* update default styling of widgets

* [CodeFactor] Apply fixes

* update widgets styles

* fix eslint bug

* update button colors

* update primary button color

* update primary button color

* remove px in 0px in css

* incorporate abhinav review feedbacks

* fixed global styling of popover

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro.local>
Co-authored-by: codefactor-io <support@codefactor.io>
This commit is contained in:
Pawan Kumar 2021-02-08 13:00:01 +05:30 committed by GitHub
parent 912ddc0ca2
commit 3e53df8b64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 234 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
app/client/cypress/manual_TestSuite/Invite_flow_Spec.js
View File

@ -1,64 +1,47 @@
const homePage = require("../../../locators/HomePage.json");
describe("adding role without Email Id", function() {
it("Empty Email ID Invite flow", function() {
// Navigate to Home Page
// Click on "Share" option
// Add Role from the dropdown
// Ensure the "Invite" option is "Inactive"
});
it("Error message must be dispalyed to user on inappropriate Email ID", function() {
// Navigate to Home Page
// Click on "Share" option
// Add inappropriate Email Id
// Select the "Role"
// Ensure the "Invite" option is "Inactive" and error message is displayed to user
});
it("Clicking on the organisation list the user must be lead to organisation Station ", function() {
// Navigate to Home Page
// Navigate to Organisation list
// Click on one of the organisation name
// Ensure user is directed to the organisation
});
describe("adding role without Email Id", function() {
it("Empty Email ID Invite flow", function()
{
// Navigate to Home Page
// Click on "Share" option
// Add Role from the dropdown
// Ensure the "Invite" option is "Inactive"
}
)
it("Error message must be dispalyed to user on inappropriate Email ID", function()
{
// Navigate to Home Page
// Click on "Share" option
// Add inappropriate Email Id
// Select the "Role"
// Ensure the "Invite" option is "Inactive" and error message is displayed to user
}
)
it("Clicking on the organisation list the user must be lead to organisation Station ", function()
{
// Navigate to Home Page
// Navigate to Organisation list
// Click on one of the organisation name
// Ensure user is directed to the organisation
}
)
it("Admin can only assign another Admin ", function() {
// Navigate to Organisation Setting
// Navigate to Members
// Navigate to roles
// Ensure your also an "Admin"
// Change the role "Admin"
});
it("Admin can only assign another Admin ", function()
{
// Navigate to Organisation Setting
// Navigate to Members
// Navigate to roles
// Ensure your also an "Admin"
// Change the role "Admin"
it("Ensure the user can not delete or create an application in the organisation", function() {
// Navigate to Home page
// Navigate to Members
// Navigate to roles
// Ensure role is "App Viewer"
// Ensure user is not able to delete or add any user for the application
});
}
)
it("Ensure the user can not delete or create an application in the organisation", function()
{
// Navigate to Home page
// Navigate to Members
// Navigate to roles
// Ensure role is "App Viewer"
// Ensure user is not able to delete or add any user for the application
}
)
it("Ensure On invaild Email Id the box must get highlighted", function()
{
// Navigate to Home page
// Click on the Share option
// Ensure the pop up opens
// Enter an Invaild Email Id
// and ensure the Email ID box is highlight
}
)
}
)
it("Ensure On invaild Email Id the box must get highlighted", function() {
// Navigate to Home page
// Click on the Share option
// Ensure the pop up opens
// Enter an Invaild Email Id
// and ensure the Email ID box is highlight
});
});

50
app/client/cypress/manual_TestSuite/Login_Spec.js
View File

@ -3,32 +3,26 @@ const explorer = require("../../../locators/explorerlocators.json");
const homePage = require("../../../locators/HomePage.json");
const loginPage = require("../../../locators/LoginPage.json");
describe("Onboarding flow", function()
{
it("Onboarding using Google Id ", function()
{
// Navigate to Login Page
// Click on "Sign In with Google"
// Ensure user is navigated to Google Account
// Do select the Google Id
// Ensure user is navigated into the Appsmith
// Click on the icon on the right with single letter (Profile)
// Check the Email Id
// Click on Logout
}
)
describe("Onboarding flow", function() {
it("Onboarding using Google Id ", function() {
// Navigate to Login Page
// Click on "Sign In with Google"
// Ensure user is navigated to Google Account
// Do select the Google Id
// Ensure user is navigated into the Appsmith
// Click on the icon on the right with single letter (Profile)
// Check the Email Id
// Click on Logout
});
it("Onboarding using Github ID ", function()
{
// Navigate to Login Page
// Click on "Sign In with Github"
// Ensure user is navigated to Github Account
// Do select the Github Id
// Ensure user is navigated into the Appsmith
// Click on the icon on the right with single letter (Profile)
// Check the Email Id
// Click on Logout
}
)
}
)
it("Onboarding using Github ID ", function() {
// Navigate to Login Page
// Click on "Sign In with Github"
// Ensure user is navigated to Github Account
// Do select the Github Id
// Ensure user is navigated into the Appsmith
// Click on the icon on the right with single letter (Profile)
// Check the Email Id
// Click on Logout
});
});

128
app/client/cypress/manual_TestSuite/Organisation_Name_Spec.js
View File

@ -1,77 +1,61 @@
const homePage = require("../../../locators/HomePage.json");
describe("Checking for error message on Organisation Name ", function() {
it("Ensure of Inactive Submit button ", function()
{
// Navigate to home Page
// Click on Create Organisation
// Type "Space" as first character
// Ensure "Submit" button does not get Active
// Now click on "X" (Close icon) ensure the pop up closes
}
)
it("Reuse the name of the deleted application name ", function()
{
// Navigate to home Page
// Create an Application by name "XYZ"
// Add some widgets
// Navigate back to the application
// Delete the Application
// Click on "Create New" option under same organisation
// Enter the name "XYZ"
// Ensure the application can be created with the same name
}
)
it("Adding Special Character ", function()
{
// Navigate to home Page
// Click on Create Organisation
// Add special as first character
// Ensure "Submit" get Active
// Now click outside and ensure the pop up closes
}
)
it("Reuse the name of the deleted application name on the other organisation", function()
{
// Navigate to home Page
// Create an Application by name "XYZ"
// Add some widgets
// Navigate back to the application
// Delete the Application
// Click on "Create New" option under different organisation
// Enter the name "XYZ"
// Ensure the application can be created with the same name
}
)
describe("Checking for error message on Organisation Name ", function() {
it("Ensure of Inactive Submit button ", function() {
// Navigate to home Page
// Click on Create Organisation
// Type "Space" as first character
// Ensure "Submit" button does not get Active
// Now click on "X" (Close icon) ensure the pop up closes
});
it("Reuse the name of the deleted application name ", function() {
// Navigate to home Page
// Create an Application by name "XYZ"
// Add some widgets
// Navigate back to the application
// Delete the Application
// Click on "Create New" option under same organisation
// Enter the name "XYZ"
// Ensure the application can be created with the same name
});
it("Adding Special Character ", function() {
// Navigate to home Page
// Click on Create Organisation
// Add special as first character
// Ensure "Submit" get Active
// Now click outside and ensure the pop up closes
});
it("Reuse the name of the deleted application name on the other organisation", function() {
// Navigate to home Page
// Create an Application by name "XYZ"
// Add some widgets
// Navigate back to the application
// Delete the Application
// Click on "Create New" option under different organisation
// Enter the name "XYZ"
// Ensure the application can be created with the same name
});
it("User must not be able to add empty organisation name", function()
{
// Navigate to home Page
// Click on the "Create Organisation" button
// Ensure "Organisation Name" field is empty
// Ensure "Submit" is inactive
}
)
it("User must not be able to add empty organisation name", function() {
// Navigate to home Page
// Click on the "Create Organisation" button
// Ensure "Organisation Name" field is empty
// Ensure "Submit" is inactive
});
it("Cancel creating an Organisation when the Organisation name is empty", function()
{
// Navigate to home Page
// Click on the "Create Organisation" button
// Ensure "Organisation Name" field is empty
// Click on "Cancel" option
// Observe the organisation is not created
}
)
it("Cancel creating an Organisation when the Organisation name is empty", function() {
// Navigate to home Page
// Click on the "Create Organisation" button
// Ensure "Organisation Name" field is empty
// Click on "Cancel" option
// Observe the organisation is not created
});
it("Cancel creating an Organisation when the Organisation name is dually filled", function()
{
// Navigate to home Page
// Click on the "Create Organisation" button
// Ensure "Organisation Name" field is enterd respectively
// Click on "Cancel" option
// Observe the organisation is not created
}
)
}
)
it("Cancel creating an Organisation when the Organisation name is dually filled", function() {
// Navigate to home Page
// Click on the "Create Organisation" button
// Ensure "Organisation Name" field is enterd respectively
// Click on "Cancel" option
// Observe the organisation is not created
});
});

2
app/client/src/components/ads/Button.tsx
View File

@ -301,7 +301,7 @@ const ButtonStyles = css<ThemeProp & ButtonProps>`
background-color: ${(props) => btnColorStyles(props, "main").bgColor};
color: ${(props) => btnColorStyles(props, "main").txtColor};
border: ${(props) => btnColorStyles(props, "main").border};
border-radius: ${(props) => props.theme.radii[0]};
border-radius: 0;
${(props) => btnFontStyles(props).buttonFont};
padding: ${(props) => btnFontStyles(props).padding};
.${Classes.ICON} {

2
app/client/src/components/ads/DialogComponent.tsx
View File

@ -9,7 +9,7 @@ const StyledDialog = styled(Dialog)<{
showHeaderUnderline?: boolean;
}>`
&& {
border-radius: ${(props) => props.theme.radii[0]}px;
border-radius: 0;
padding-bottom: ${(props) => props.theme.spaces[2]}px;
background: ${(props) => props.theme.colors.modal.bg};
${(props) => (props.maxHeight ? `max-height: ${props.maxHeight};` : "")}

8
app/client/src/components/designSystems/appsmith/ChartComponent.tsx
View File

@ -2,7 +2,7 @@ import _ from "lodash";
import React from "react";
import styled from "styled-components";
import { invisible } from "constants/DefaultTheme";
import { getBorderCSSShorthand, invisible } from "constants/DefaultTheme";
import { getAppsmithConfigs } from "configs";
import { ChartType, ChartData, ChartDataPoint } from "widgets/ChartWidget";
@ -31,12 +31,12 @@ export interface ChartComponentProps {
}
const CanvasContainer = styled.div<ChartComponentProps>`
border: none;
border-radius: ${(props) => `${props.theme.radii[1]}px`};
border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
border-radius: 0;
height: 100%;
width: 100%;
background: white;
box-shadow: 0 1px 1px 0 rgba(60,75,100,.14),0 2px 1px -1px rgba(60,75,100,.12),0 1px 3px 0 rgba(60,75,100,.2);
overflow: hidden;
position: relative;
${(props) => (!props.isVisible ? invisible : "")};
padding: 10px 0 0 0;

13
app/client/src/components/designSystems/appsmith/ContainerComponent.tsx
View File

@ -1,7 +1,7 @@
import React, { ReactNode, useRef, useEffect, RefObject } from "react";
import styled, { css } from "styled-components";
import { ComponentProps } from "./BaseComponent";
import { invisible } from "constants/DefaultTheme";
import { getBorderCSSShorthand, invisible } from "constants/DefaultTheme";
import { Color } from "constants/Colors";
import { generateClassName, getCanvasClassName } from "utils/generators";
@ -18,18 +18,13 @@ const StyledContainerComponent = styled.div<
${(props) =>
props.containerStyle !== "none"
? `
border: none;
border-radius: ${
props.containerStyle === "card" || props.containerStyle === "rounded-border"
? props.theme.radii[1]
: 0
}px;`
border: ${getBorderCSSShorthand(props.theme.borders[2])};
border-radius: 0;`
: ""}
height: 100%;
width: 100%;
background: ${(props) => props.backgroundColor};
box-shadow: ${(props) =>
props.containerStyle === "card" ? props.theme.shadows[2] : "none"};
${(props) => (!props.isVisible ? invisible : "")};
overflow: hidden;
${(props) => (props.shouldScrollContents ? scrollContents : "")}

3
app/client/src/components/designSystems/appsmith/MapComponent.tsx
View File

@ -5,6 +5,7 @@ import { MarkerProps } from "widgets/MapWidget";
import PickMyLocation from "./PickMyLocation";
import styled from "styled-components";
import { useScript, ScriptStatus, AddScriptTo } from "utils/hooks/useScript";
import { getBorderCSSShorthand } from "constants/DefaultTheme";
interface MapComponentProps {
apiKey: string;
@ -38,6 +39,8 @@ const MapWrapper = styled.div`
position: relative;
width: 100%;
height: 100%;
border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
border-radius: 0;
`;
const MapContainerWrapper = styled.div`

3
app/client/src/components/designSystems/appsmith/TableComponent.tsx
View File

@ -2,6 +2,7 @@ import BaseTable from "react-base-table";
import styled from "styled-components";
import React from "react";
import { noop } from "utils/AppsmithUtils";
import { getBorderCSSShorthand } from "constants/DefaultTheme";
const RowLoader = styled.div`
height: 16px !important;
@ -20,6 +21,8 @@ const rowProps = ({ rowData }: { rowData: { isLoading: boolean } }) => {
};
const StyledTable = styled(BaseTable)`
border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
border-radius: 0;
.row-selected {
background-color: ${(props) =>
props.theme.widgets.tableWidget.selectHighlightColor};

10
app/client/src/components/designSystems/appsmith/TabsComponent.tsx
View File

@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
import { ComponentProps } from "./BaseComponent";
import { TabsWidgetProps, TabContainerWidgetProps } from "widgets/TabsWidget";
import { generateClassName, getCanvasClassName } from "utils/generators";
import { scrollbarLight } from "constants/DefaultTheme";
import { getBorderCSSShorthand, scrollbarLight } from "constants/DefaultTheme";
interface TabsComponentProps extends ComponentProps {
children?: ReactNode;
@ -32,11 +32,9 @@ const TabsContainerWrapper = styled.div<{
width: 100%;
justify-content: center;
align-items: center;
border-bottom-right-radius: ${(props) => `${props.theme.radii[1]}px`};
border-bottom-left-radius: ${(props) => `${props.theme.radii[1]}px`};
border-top-right-radius: ${(props) => `${props.theme.radii[1]}px`};
border-top-left-radius: ${(props) => `${props.theme.radii[1]}px`};
box-shadow: ${(props) => props.theme.shadows[2]};
border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
border-radius: 0;
box-shadow: none;
overflow: hidden;
`;

6
app/client/src/components/designSystems/blueprint/ButtonComponent.tsx
View File

@ -22,7 +22,7 @@ const getButtonColorStyles = (props: { theme: Theme } & ButtonStyleProps) => {
if (props.filled) return props.theme.colors.textOnDarkBG;
if (props.accent) {
if (props.accent === "secondary") {
return props.theme.colors.OXFORD_BLUE;
return props.theme.colors[AccentColorMap["primary"]];
}
return props.theme.colors[AccentColorMap[props.accent]];
}
@ -56,8 +56,8 @@ const ButtonWrapper = styled((props: ButtonStyleProps & IButtonProps) => (
${(props) =>
props.accent
? props.theme.colors[AccentColorMap[props.accent]]
: props.theme.colors.secondary};
border-radius: 4px;
: props.theme.colors.primary};
border-radius: 0;
font-weight: ${(props) => props.theme.fontWeights[2]};
outline: none;
&.bp3-button {

1
app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx
View File

@ -39,6 +39,7 @@ class CheckboxComponent extends React.Component<CheckboxComponentProps> {
className={
this.props.isLoading ? "bp3-skeleton" : Classes.RUNNING_TEXT
}
style={{ borderRadius: 0 }}
onChange={this.onCheckChange}
disabled={this.props.isDisabled}
checked={this.props.isChecked}

23
app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import styled from "styled-components";
import { labelStyle } from "constants/DefaultTheme";
import { getBorderCSSShorthand, labelStyle } from "constants/DefaultTheme";
import { ControlGroup, Classes, Label } from "@blueprintjs/core";
import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
import { DateInput } from "@blueprintjs/datetime";
@ -16,9 +16,10 @@ const StyledControlGroup = styled(ControlGroup)`
&&& {
.${Classes.INPUT} {
box-shadow: none;
border: 1px solid;
border-color: ${Colors.GEYSER_LIGHT};
border-radius: ${(props) => props.theme.radii[1]}px;
color: ${Colors.OXFORD_BLUE};
font-size: ${(props) => props.theme.fontSizes[3]}px;
border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
border-radius: 0;
width: 100%;
height: inherit;
align-items: center;
@ -26,7 +27,10 @@ const StyledControlGroup = styled(ControlGroup)`
border-color: ${Colors.HIT_GRAY};
}
&:focus {
border-color: ${Colors.MYSTIC};
border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
}
}
.${Classes.INPUT_GROUP} {
@ -45,15 +49,6 @@ const StyledControlGroup = styled(ControlGroup)`
max-width: calc(30% - ${WIDGET_PADDING}px);
}
}
&&& {
input {
border: 1px solid ${Colors.HIT_GRAY};
border-radius: ${(props) => props.theme.radii[1]}px;
box-shadow: none;
color: ${Colors.OXFORD_BLUE};
font-size: ${(props) => props.theme.fontSizes[3]}px;
}
}
`;
class DatePickerComponent extends React.Component<

9
app/client/src/components/designSystems/blueprint/DropdownComponent.tsx
View File

@ -25,6 +25,7 @@ import styled, {
labelStyle,
BlueprintCSSTransform,
BlueprintInputTransform,
getBorderCSSShorthand,
} from "constants/DefaultTheme";
import { Colors } from "constants/Colors";
import Fuse from "fuse.js";
@ -57,6 +58,7 @@ const StyledSingleDropDown = styled(SingleDropDown)`
box-shadow: none;
background: white;
min-height: 32px;
border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
}
.${Classes.BUTTON_TEXT} {
text-overflow: ellipsis;
@ -94,8 +96,11 @@ const StyledControlGroup = styled(ControlGroup)<{ haslabel: string }>`
const DropdownStyles = createGlobalStyle`
.select-popover-wrapper {
width: 100%;
border-radius: ${(props) => props.theme.radii[1]}px;
box-shadow: 0px 2px 4px rgba(67, 70, 74, 0.14);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) !important;
border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
border-color: rgba(0, 0, 0, 0.2);
border-radius: 0;
margin-top: ${(props) => props.theme.spaces[3]}px;
padding: ${(props) => props.theme.spaces[3]}px;
background: white;
&& .${Classes.MENU} {

16
app/client/src/components/designSystems/blueprint/InputComponent.tsx
View File

@ -1,6 +1,10 @@
import React from "react";
import styled from "styled-components";
import { IntentColors, labelStyle } from "constants/DefaultTheme";
import {
getBorderCSSShorthand,
IntentColors,
labelStyle,
} from "constants/DefaultTheme";
import { ComponentProps } from "components/designSystems/appsmith/BaseComponent";
import {
Intent,
@ -39,7 +43,7 @@ const InputComponentWrapper = styled((props) => (
border: 1px solid;
border-color: ${({ hasError }) =>
hasError ? IntentColors.danger : Colors.GEYSER_LIGHT};
border-radius: ${(props) => props.theme.radii[1]}px;
border-radius: 0;
height: ${(props) => (props.multiline === "true" ? "100%" : "inherit")};
width: 100%;
${(props) =>
@ -49,6 +53,7 @@ const InputComponentWrapper = styled((props) => (
border-bottom-right-radius: 0px;
border-right-width: 0px;
`}
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
&:active {
border-color: ${({ hasError }) =>
hasError ? IntentColors.danger : Colors.HIT_GRAY};
@ -56,6 +61,13 @@ const InputComponentWrapper = styled((props) => (
&:focus {
border-color: ${({ hasError }) =>
hasError ? IntentColors.danger : Colors.MYSTIC};
&:focus {
border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
}
}
}
.${Classes.INPUT_GROUP} {

6
app/client/src/constants/Colors.tsx
View File

@ -4,7 +4,7 @@ export const Colors: Record<string, string> = {
WHITE_SMOKE: "#F4F4F4",
POLAR: "#E9FAF3",
GEYSER: "#D3DEE3",
GEYSER_LIGHT: "#D0D7DD",
GEYSER_LIGHT: "#E7E7E7",
ATHENS_GRAY: "#EBEFF2",
CONCRETE: "#F3F3F3",
MYSTIC: "#E1E8ED",
@ -36,11 +36,11 @@ export const Colors: Record<string, string> = {
MAKO: "#464D53",
ALTO: "#DFDFDF",
GREEN: "#29CCA3",
GREEN: "#03B365",
JUNGLE_GREEN: "#24BA91",
JUNGLE_GREEN_DARKER: "#30A481",
EUCALYPTUS: "#218358",
RED: "#CE4257",
RED: "#B30338",
ERROR_RED: "#E22C2C",
PURPLE: "#6871EF",
OXFORD_BLUE: "#2E3D49",

11
app/client/src/constants/DefaultTheme.tsx
View File

@ -98,6 +98,11 @@ export const BlueprintControlTransform = css`
border: 2px solid ${Colors.SLATE_GRAY};
}
}
.${Classes.CHECKBOX} .${Classes.CONTROL_INDICATOR} {
border-radius: 0;
}
.${Classes.CONTROL_INDICATOR} {
box-shadow: none;
background: none;
@ -121,9 +126,8 @@ export const BlueprintCSSTransform = css`
&&&& {
.${Classes.BUTTON} {
box-shadow: none;
border-radius: 4px;
border-radius: 0;
background: white;
border: 1px solid ${Colors.GEYSER};
}
.${Classes.INTENT_PRIMARY} {
background: ${IntentColors.primary};
@ -1520,7 +1524,8 @@ export const theme: Theme = {
lightBg: lightShades[0],
darkBg: lightShades[10],
},
appBackground: "#EFEFEF",
appBackground: "#EDEDED",
artboard: "#F6F6F6",
primaryOld: Colors.GREEN,
primaryDarker: Colors.JUNGLE_GREEN,
primaryDarkest: Colors.JUNGLE_GREEN_DARKER,

41
app/client/src/index.css
View File

@ -63,3 +63,44 @@ div.bp3-popover-arrow {
z-index: 10;
}
.bp3-popover.bp3-dateinput-popover {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) !important;
border-radius: 0;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.bp3-popover .bp3-input {
outline: 0;
box-shadow: none;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0 !important;
}
.bp3-popover .bp3-input:focus {
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.1rem rgba(0, 123, 255, 0.25);
}
.bp3-popover.bp3-minimal {
margin-top: 8px !important;
}
.bp3-datepicker {
border-radius: 0 !important;
}
/* rich text editor styles */
.tox-tinymce {
border-color: #E7E7E7 !important;
}
.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type), .tox .tox-statusbar {
border-color: #E7E7E7 !important;
}
.tox .tox-toolbar__primary {
background: white !important;
border-bottom: 1px solid #E7E7E7 !important;
}

2
app/client/src/pages/AppViewer/AppViewerPageContainer.tsx
View File

@ -25,7 +25,7 @@ import {
import { fetchPublishedPage } from "actions/pageActions";
const Section = styled.section`
background: ${(props) => props.theme.colors.bodyBG};
background: ${(props) => props.theme.colors.artboard};
height: 100%;
width: 100%;
position: relative;

1
app/client/src/pages/Editor/MainContainer.tsx
View File

@ -12,6 +12,7 @@ const SentryRoute = Sentry.withSentryRouting(Route);
const Container = styled.div`
display: flex;
height: calc(100vh - ${(props) => props.theme.smallHeaderHeight});
background-color: ${(props) => props.theme.appBackground};
`;
const EditorContainer = styled.div`

3
app/client/src/pages/common/ArtBoard.tsx
View File

@ -3,5 +3,8 @@ export default styled.div<{ width: number }>`
width: ${(props) => props.width}px;
margin: 0 auto;
position: relative;
background: ${(props) => {
return props.theme.colors.artboard;
}};
padding: ${(props) => props.theme.canvasPadding};
`;

3
app/client/src/widgets/MapWidget.tsx
View File

@ -11,6 +11,7 @@ import styled from "styled-components";
import * as Sentry from "@sentry/react";
import withMeta, { WithMeta } from "./MetaHOC";
import { DEFAULT_CENTER } from "constants/WidgetConstants";
import { getBorderCSSShorthand } from "constants/DefaultTheme";
const { google } = getAppsmithConfigs();
@ -20,6 +21,8 @@ const DisabledContainer = styled.div`
text-align: center;
display: flex;
flex-direction: column;
border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
border-radius: 0;
h1 {
margin-top: 15%;
margin-bottom: 10%;