diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ThemingTests/Basic_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ThemingTests/Basic_spec.js index 87b257a322..0bb41e2769 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ThemingTests/Basic_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ThemingTests/Basic_spec.js @@ -286,8 +286,8 @@ describe("App Theming funtionality", function() { cy.get(widgetsPage.colorPickerV2Popover) .click({ force: true }) .click(); - cy.get(widgetsPage.colorPickerV2Color) - .eq(28) + cy.get(widgetsPage.colorPickerV2TailwindColor) + .eq(23) .then(($elem) => { cy.get($elem).click({ force: true }); cy.get(commonlocators.canvas).should( @@ -797,8 +797,8 @@ describe("App Theming funtionality", function() { cy.get(widgetsPage.colorPickerV2Popover) .click({ force: true }) .click(); - cy.get(widgetsPage.colorPickerV2Color) - .eq(40) + cy.get(widgetsPage.colorPickerV2TailwindColor) + .eq(33) .then(($elem) => { cy.get($elem).click({ force: true }); cy.get(widgetsPage.widgetBtn) @@ -1029,8 +1029,8 @@ describe("App Theming funtionality", function() { cy.get(widgetsPage.colorPickerV2Popover) .click({ force: true }) .click(); - cy.get(widgetsPage.colorPickerV2Color) - .eq(22) + cy.get(widgetsPage.colorPickerV2TailwindColor) + .eq(13) .then(($elem) => { cy.get($elem).click({ force: true }); cy.get(widgetsPage.widgetBtn) diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js index 7219bd2396..97c1e77ef4 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js @@ -7,7 +7,7 @@ describe("Visual regression tests", () => { // command: "npx cypress run --spec cypress/integration/Smoke_TestSuite/ClientSideTests/LayoutValidation/AppPageLayout_spec.js --browser chrome" // 3. New screenshot will be generated in the snapshot folder. - it.skip("Layout validation for app page in edit mode", () => { + it("Layout validation for app page in edit mode", () => { cy.visit("/applications"); cy.wait(3000); cy.get(".t--applications-container .createnew").should("be.visible"); @@ -19,28 +19,28 @@ describe("Visual regression tests", () => { cy.get("#root").matchImageSnapshot("apppage"); }); - it.skip("Layout validation for Quick page wizard", () => { + it("Layout validation for Quick page wizard", () => { cy.get("[data-cy='generate-app']").click(); cy.wait(2000); // taking screenshot of generate crud page cy.get("#root").matchImageSnapshot("quickPageWizard"); }); - it.skip("Layout Validation for App builder Page", () => { + it("Layout Validation for App builder Page", () => { cy.get(".bp3-icon-chevron-left").click(); cy.wait(2000); // taking screenshot of app builder page cy.get("#root").matchImageSnapshot("emptyAppBuilder"); }); - it.skip("Layout Validation for Empty deployed app", () => { + it("Layout Validation for Empty deployed app", () => { cy.PublishtheApp(); cy.wait(3000); // taking screenshot of empty deployed app cy.get("#root").matchImageSnapshot("EmptyApp"); }); - it.skip("Layout Validation for profile page", () => { + it("Layout Validation for profile page", () => { cy.get(".t--profile-menu-icon").click(); cy.get(".t--edit-profile").click(); cy.wait(2000); @@ -48,13 +48,12 @@ describe("Visual regression tests", () => { cy.get("#root").matchImageSnapshot("Profile"); }); - it.skip("Layout validation for login page", () => { + it("Layout validation for login page", () => { cy.get(homePage.profileMenu).click(); cy.get(homePage.signOutIcon).click(); cy.wait(500); // validating all the fields on login page - cy.get(homePage.headerAppSmithLogo).should("be.visible"); - cy.xpath("//h1").should("have.text", "Sign in to your account"); + cy.xpath("//h1").should("have.text", "Sign in"); cy.get(".bp3-label") .first() .should("have.text", "Email "); diff --git a/app/client/cypress/integration/Smoke_TestSuite_Fat/ClientSideTests/Branding/Branding_spec.js b/app/client/cypress/integration/Smoke_TestSuite_Fat/ClientSideTests/Branding/Branding_spec.js index f78b1a009d..c375a1cea7 100644 --- a/app/client/cypress/integration/Smoke_TestSuite_Fat/ClientSideTests/Branding/Branding_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite_Fat/ClientSideTests/Branding/Branding_spec.js @@ -39,13 +39,6 @@ describe("Branding", () => { cy.get(locators.LeftPaneBrandingLink).should("be.visible"); cy.get(locators.LeftPaneBrandingLink).click(); cy.wait(2000); - - cy.get("h2").contains( - Cypress.env("MESSAGES").ADMIN_BRANDING_SETTINGS_TITLE(), - ); - cy.get("h2 + div").contains( - Cypress.env("MESSAGES").ADMIN_BRANDING_SETTINGS_SUBTITLE(), - ); }); it("should test that changing logo,favicon and color changes the preview", () => { @@ -104,102 +97,5 @@ describe("Branding", () => { if (Cypress.env("Edition") === 0) { cy.get(locators.submitButton).should("be.disabled"); } - - if (Cypress.env("Edition") === 1) { - // click on submit button - cy.get(locators.submitButton).click(); - cy.wait(2000); - - cy.get(commonlocators.toastMsg).contains("Successfully Saved"); - - // grab the favicon value - cy.get(locators.AdmingSettingsFaviconInputImage) - .invoke("attr", "src") - .then((src) => { - favicon = src; - }); - - // grab the logo value - cy.get(locators.AdmingSettingsLogoInputImage) - .invoke("attr", "src") - .then((src) => { - logo = src; - }); - - // grap the shades - let currentColor; - cy.get(locators.AdminSettingsColorInputShades) - .find("div") - .each(($el) => { - cy.wrap($el) - .invoke("css", "background-color") - .then((color) => { - currentColor = color; - - cy.wrap($el) - .invoke("data", "id") - .then((id) => { - shades[id] = currentColor; - }); - }); - }); - } - }); - - it("checks branding on dashboard", () => { - if (Cypress.env("Edition") === 1) { - // naivagae to dashboard - cy.get(locators.appsmithLogo).click(); - - // check logo - cy.get(locators.appsmithLogoImg) - .invoke("attr", "src") - .should("eq", logo); - - // check favicon - cy.get(locators.BrandingFaviconHead) - .invoke("attr", "href") - .should("eq", favicon); - - // check the apps tab border bottom - cy.get(locators.dashboardAppTab).should( - "have.css", - "border-bottom-color", - shades.primary, - ); - - // check the button bg - cy.get(locators.createNewAppButton).should( - "have.css", - "background-color", - shades.primary, - ); - } - }); - - it("checks branding colors on login page", () => { - if (Cypress.env("Edition") === 1) { - // logout user - cy.window() - .its("store") - .invoke("dispatch", { type: "LOGOUT_USER_INIT" }); - cy.wait("@postLogout"); - - cy.wait(2000); - - cy.get(locators.loginContainer).should( - "have.css", - "border-top-color", - shades.primary, - ); - - cy.get(locators.signupLink).should("have.css", "color", shades.primary); - - cy.get(locators.authContainer).should( - "have.css", - "background-color", - shades.background, - ); - } }); }); diff --git a/app/client/cypress/locators/Widgets.json b/app/client/cypress/locators/Widgets.json index 543a7d4002..c96d7e8024 100644 --- a/app/client/cypress/locators/Widgets.json +++ b/app/client/cypress/locators/Widgets.json @@ -193,6 +193,7 @@ "selectedTextSize": ".t--property-control-textsize .bp3-popover-target .sub-text", "colorPickerV2Popover": ".t--colorpicker-v2-popover", "colorPickerV2Color": ".t--colorpicker-v2-color", + "colorPickerV2TailwindColor": ".t--tailwind-colors .t--colorpicker-v2-color", "modalCloseButton": ".t--draggable-iconbuttonwidget .bp3-button", "filepickerwidgetv2": ".t--widget-filepickerwidgetv2", "filepickerwidgetv2CancelBtn": "button.uppy-DashboardContent-back", diff --git a/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js/apppage.snap.png b/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js/apppage.snap.png index dc4438391d..6b03585b9b 100644 Binary files a/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js/apppage.snap.png and b/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js/apppage.snap.png differ diff --git a/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js/emptyAppBuilder.snap.png b/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js/emptyAppBuilder.snap.png index 877e01bcd7..6b03585b9b 100644 Binary files a/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js/emptyAppBuilder.snap.png and b/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js/emptyAppBuilder.snap.png differ diff --git a/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js/loginpage.snap.png b/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js/loginpage.snap.png index bdf99f7d7e..c2a5512b4e 100644 Binary files a/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js/loginpage.snap.png and b/app/client/cypress/snapshots/Smoke_TestSuite/ClientSideTests/VisualTests/AppPageLayout_spec.js/loginpage.snap.png differ diff --git a/app/client/src/ce/constants/messages.ts b/app/client/src/ce/constants/messages.ts index 8791233447..040431f3b4 100644 --- a/app/client/src/ce/constants/messages.ts +++ b/app/client/src/ce/constants/messages.ts @@ -1162,7 +1162,7 @@ export const ADMIN_BRANDING_LOGO_SIZE_ERROR = () => export const ADMIN_BRANDING_LOGO_DIMENSION_ERROR = () => `Logo should be atleast 256px in height`; export const ADMIN_BRANDING_LOGO_FORMAT_ERROR = () => - `Uploaded file must be in .ICO, .PNG, and .JPG formats`; + `Uploaded file must be in .SVG .PNG, and .JPG formats`; export const ADMIN_BRANDING_LOGO_REQUIREMENT = () => `.SVG, .PNG, or .JPG only • Max 2MB`; export const ADMIN_BRANDING_FAVICON_DIMENSION_ERROR = () => diff --git a/app/client/src/ce/reducers/tenantReducer.ts b/app/client/src/ce/reducers/tenantReducer.ts index cfc7ea7d86..447c42b0d6 100644 --- a/app/client/src/ce/reducers/tenantReducer.ts +++ b/app/client/src/ce/reducers/tenantReducer.ts @@ -13,11 +13,11 @@ export interface TenantReduxState { } export const defaultBrandingConfig = { - brandFaviconUrl: "/static/img/favicon-orange.ico", + brandFaviconUrl: "https://assets.appsmith.com/appsmith-favicon-orange.ico", brandColors: { ...createBrandColorsFromPrimaryColor("#F86A2B"), }, - brandLogoUrl: "/static/img/appsmith-logo.svg", + brandLogoUrl: "https://assets.appsmith.com/appsmith-logo.svg", }; export const initialState: TenantReduxState = { diff --git a/app/client/src/ce/selectors/tenantSelectors.tsx b/app/client/src/ce/selectors/tenantSelectors.tsx index ecf09abcfa..0467a234b6 100644 --- a/app/client/src/ce/selectors/tenantSelectors.tsx +++ b/app/client/src/ce/selectors/tenantSelectors.tsx @@ -13,3 +13,12 @@ export const getTenantPermissions = (state: AppState) => { export const getTenantConfig = (state: AppState) => { return state.tenant?.tenantConfiguration; }; + +/** + * selects the tenant brand colors + * + * @returns + */ +export const getBrandColors = () => { + return {} as Record; +}; diff --git a/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx b/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx index 2d7c53ae4a..3ff8abaa07 100644 --- a/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx +++ b/app/client/src/components/propertyControls/ColorPickerComponentV2.tsx @@ -26,7 +26,7 @@ import { extractColorsFromString } from "utils/helpers"; import { TAILWIND_COLORS } from "constants/ThemeConstants"; import useDSEvent from "utils/hooks/useDSEvent"; import { DSEventTypes } from "utils/AppsmithUtils"; -import { getTenantConfig } from "@appsmith/selectors/tenantSelectors"; +import { getBrandColors } from "@appsmith/selectors/tenantSelectors"; const FocusTrap = require("focus-trap-react"); const MAX_COLS = 10; @@ -109,7 +109,7 @@ interface ColorPickerPopupProps { function ColorPickerPopup(props: ColorPickerPopupProps) { const themeColors = useSelector(getSelectedAppThemeProperties).colors; - const brandColors = useSelector(getTenantConfig).brandColors; + const brandColors = useSelector(getBrandColors); const widgets = useSelector(getWidgets); const DSLStringified = JSON.stringify(widgets); const applicationColors = useMemo(() => { @@ -232,7 +232,7 @@ function ColorPickerPopup(props: ColorPickerPopupProps) {

All Colors

-
+
{Object.keys(TAILWIND_COLORS).map((colorKey, rowIndex) => Object.keys(get(TAILWIND_COLORS, `${colorKey}`)).map( (singleColorKey, colIndex) => ( diff --git a/app/client/src/pages/UserAuth/Container.tsx b/app/client/src/pages/UserAuth/Container.tsx index fe5b467dd7..5b5adb8774 100644 --- a/app/client/src/pages/UserAuth/Container.tsx +++ b/app/client/src/pages/UserAuth/Container.tsx @@ -17,8 +17,8 @@ function Container(props: ContainerProps) { const tenantConfig = useSelector(getTenantConfig); return ( - <> -
+
+

{title}

@@ -31,7 +31,7 @@ function Container(props: ContainerProps) { {footer}
- +
); } diff --git a/app/client/src/pages/UserAuth/index.tsx b/app/client/src/pages/UserAuth/index.tsx index d43051d7d5..ba5c4cf151 100644 --- a/app/client/src/pages/UserAuth/index.tsx +++ b/app/client/src/pages/UserAuth/index.tsx @@ -23,7 +23,7 @@ export function UserAuth() { return ( -
+