Update Default styles of Widgets (#2823)

* 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>

app/client/cypress/manual_TestSuite/Invite_flow_Spec.js

@@ -1,64 +1,47 @@
 const homePage = require("../../../locators/HomePage.json");
 
-
 describe("adding role without Email Id", function() {
-    it("Empty Email ID Invite flow", 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() {
-    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() {
-    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() 
+  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() {
-    )
-
-    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() {
-    )
-
-    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
-        
+  });
-    }
+});
-    )
-}
-)

app/client/cypress/manual_TestSuite/Login_Spec.js

@@ -3,10 +3,8 @@ const explorer = require("../../../locators/explorerlocators.json");
 const homePage = require("../../../locators/HomePage.json");
 const loginPage = require("../../../locators/LoginPage.json");
 
-describe("Onboarding flow", function() 
+describe("Onboarding flow", function() {
-{
+  it("Onboarding using Google Id ", function() {
-    it("Onboarding using Google Id ", function() 
-    {
     // Navigate to Login Page
     // Click on "Sign In with Google"
     // Ensure user is navigated to Google Account
@@ -15,11 +13,9 @@ describe("Onboarding flow", function()
     // Click on the icon on the right with single letter (Profile)
     // Check the Email Id
     // Click on Logout
-    }
+  });
-    )
 
-    it("Onboarding using Github ID ", function() 
+  it("Onboarding using Github ID ", function() {
-    {
     // Navigate to Login Page
     // Click on "Sign In with Github"
     // Ensure user is navigated to Github Account
@@ -28,7 +24,5 @@ describe("Onboarding flow", function()
     // Click on the icon on the right with single letter (Profile)
     // Check the Email Id
     // Click on Logout
-    }
+  });
-    )
+});
-}
-)

app/client/cypress/manual_TestSuite/Organisation_Name_Spec.js

@@ -1,17 +1,14 @@
 const homePage = require("../../../locators/HomePage.json");
 
 describe("Checking for error message on Organisation Name ", function() {
-    it("Ensure of Inactive Submit button ", 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() {
-    it("Reuse the name of the deleted application name ", function() 
-    {
     // Navigate to home Page
     // Create an Application by name "XYZ"
     // Add some widgets
@@ -20,19 +17,15 @@ describe("Checking for error message on Organisation Name ", function()  {
     // 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() {
-    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() {
-    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
@@ -41,37 +34,28 @@ describe("Checking for error message on Organisation Name ", function()  {
     // 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() 
+  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() 
+  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() {
-    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
-    }
+  });
-    )
+});
-}
-)

app/client/src/components/ads/Button.tsx

@@ -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} {

app/client/src/components/ads/DialogComponent.tsx

@@ -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};` : "")}

app/client/src/components/designSystems/appsmith/ChartComponent.tsx

@@ -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: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
-  border-radius: ${(props) => `${props.theme.radii[1]}px`};
+  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;

app/client/src/components/designSystems/appsmith/ContainerComponent.tsx

@@ -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: ${getBorderCSSShorthand(props.theme.borders[2])};
-  border-radius: ${
+  border-radius: 0;`
-    props.containerStyle === "card" || props.containerStyle === "rounded-border"
-      ? props.theme.radii[1]
-      : 0
-  }px;`
       : ""}
   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 : "")}

app/client/src/components/designSystems/appsmith/MapComponent.tsx

@@ -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`

app/client/src/components/designSystems/appsmith/TableComponent.tsx

@@ -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};

app/client/src/components/designSystems/appsmith/TabsComponent.tsx

@@ -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: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
-  border-bottom-left-radius: ${(props) => `${props.theme.radii[1]}px`};
+  border-radius: 0;
-  border-top-right-radius: ${(props) => `${props.theme.radii[1]}px`};
+  box-shadow: none;
-  border-top-left-radius: ${(props) => `${props.theme.radii[1]}px`};
-  box-shadow: ${(props) => props.theme.shadows[2]};
   overflow: hidden;
 `;
 

app/client/src/components/designSystems/blueprint/ButtonComponent.tsx

@@ -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};
+          : props.theme.colors.primary};
-    border-radius: 4px;
+    border-radius: 0;
     font-weight: ${(props) => props.theme.fontWeights[2]};
     outline: none;
     &.bp3-button {

app/client/src/components/designSystems/blueprint/CheckboxComponent.tsx

@@ -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}

app/client/src/components/designSystems/blueprint/DatePickerComponent.tsx

@@ -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;
+      color: ${Colors.OXFORD_BLUE};
-      border-color: ${Colors.GEYSER_LIGHT};
+      font-size: ${(props) => props.theme.fontSizes[3]}px;
-      border-radius: ${(props) => props.theme.radii[1]}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<

app/client/src/components/designSystems/blueprint/DropdownComponent.tsx

@@ -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: 0 0 2px rgba(0, 0, 0, 0.2) !important;
-    box-shadow:  0px 2px 4px rgba(67, 70, 74, 0.14);
+    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} {

app/client/src/components/designSystems/blueprint/InputComponent.tsx

@@ -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} {

app/client/src/constants/Colors.tsx

@@ -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",

app/client/src/constants/DefaultTheme.tsx

@@ -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,

app/client/src/index.css

@@ -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;
+}
+

app/client/src/pages/AppViewer/AppViewerPageContainer.tsx

@@ -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;

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

@@ -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`

app/client/src/pages/common/ArtBoard.tsx

@@ -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};
 `;

app/client/src/widgets/MapWidget.tsx

@@ -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%;