Reset theme popup dialog has an rendering

functionalTests/helper.ts

@@ -67,6 +67,7 @@ export const creatorTabDesignerName = "Designer";
 export const creatorTabPreviewName = "Preview";
 export const creatorTabLogicName = "Logic";
 export const creatorTabTranslationName = "Translation";
+export const creatorTabThemeName = "Themes";
 export const generalGroupName = "General";
 export const logicGroupName = "Conditions";
 export const inputMaskSettingsGroupName = "Input Mask Settings";

functionalTests/theme/theme.ts

@@ -1,4 +1,4 @@
-import { getPropertyGridCategory, getTabbedMenuItemByText, setJSON } from "../helper";
+import { creatorTabThemeName, getPropertyGridCategory, getTabbedMenuItemByText, setJSON } from "../helper";
 import { ClientFunction, Selector } from "testcafe";
 const title = "Theme Editor";
 const url = "http://127.0.0.1:8080/testCafe/testcafe-theme-tab";
@@ -38,7 +38,7 @@ test("Editors, loose focus on enter", async (t) => {
   };
   await setJSON(json);
 
-  await t.click(getTabbedMenuItemByText("Themes"));
+  await t.click(getTabbedMenuItemByText(creatorTabThemeName));
   await t.click(getPropertyGridCategory("Appearance"));
 
   const colorQuestionInputSelector = Selector("div[data-name=primaryColor] input.spg-color-editor__input");

packages/survey-creator-core/src/ctr-font-sizes.scss

@@ -1,5 +1,6 @@
 @use "./ctr-variables.scss" as *;
 
+.svc-creator-popup,
 .svc-creator {
   --sjs-font-size-x075: calc(#{$font-unit} * 0.75);
   --sjs-font-size-x1: calc(#{$font-unit} * 1);

packages/survey-creator-core/src/ctr-sizes.scss

@@ -1,5 +1,6 @@
 @use "./ctr-variables.scss" as *;
 
+.svc-creator-popup,
 .svc-creator {
   --sjs-spacing-x2: calc(#{$spacing-unit} * 2);
   --sjs-spacing-x3: calc(#{$spacing-unit} * 3);

packages/survey-creator-core/src/lbr-font-sizes.scss

@@ -1,5 +1,6 @@
 @use "./lbr-variables.scss" as *;
 
+.svc-creator-popup,
 .svc-creator {
   --lbr-line-height-x8: calc(#{$lbr-line-height-unit} * 8);
   --lbr-line-height-x7: calc(#{$lbr-line-height-unit} * 7);

packages/survey-creator-core/src/lbr-sizes.scss

@@ -1,5 +1,6 @@
 @use "./lbr-variables.scss" as *;
 
+.svc-creator-popup,
 .svc-creator {
   --lbr-spacing-x16: calc(#{$lbr-spacing-unit} * 16);
   --lbr-spacing-x15: calc(#{$lbr-spacing-unit} * 15);

visualRegressionTests/tests/designer/side-bar.ts

@@ -1,5 +1,5 @@
 import { Selector, ClientFunction } from "testcafe";
-import { url, objectSelectorButton, propertyGridSelector, expandButtonSelector, setJSON, takeElementScreenshot, wrapVisualTest, pageNavigator, getListItemByText, changeToolboxSearchEnabled, getAddNewQuestionButton, getTabbedMenuItemByText, creatorTabTranslationName } from "../../helper";
+import { url, objectSelectorButton, propertyGridSelector, expandButtonSelector, setJSON, takeElementScreenshot, wrapVisualTest, pageNavigator, getListItemByText, changeToolboxSearchEnabled, getAddNewQuestionButton, getTabbedMenuItemByText, creatorTabTranslationName, creatorTabThemeName } from "../../helper";
 import { largeSurvey } from "./surveys/large-survey";
 
 const title = "Sidebar Screenshot";
@@ -132,7 +132,7 @@ test.page(themeTabUrl)("tabbed mode", async (t) => {
     await t.click(getAddNewQuestionButton());
     await takeElementScreenshot("side-bar-tabbed-property-grid.png", ".svc-side-bar", t, comparer);
 
-    await t.click(getTabbedMenuItemByText("Themes"));
+    await t.click(getTabbedMenuItemByText(creatorTabThemeName));
     await takeElementScreenshot("side-bar-tabbed-property-grid-theme-general.png", ".svc-side-bar", t, comparer);
 
     await t.click(Selector(".svc-menu-action__button").filterVisible().nth(4));
@@ -155,7 +155,7 @@ test.page(themeTabUrl)("boolean switch", async (t) => {
       window["creator"].showOneCategoryInPropertyGrid = true;
     })();
 
-    await t.click(getTabbedMenuItemByText("Themes"));
+    await t.click(getTabbedMenuItemByText(creatorTabThemeName));
 
     await t.click(Selector(".svc-menu-action__button").filterVisible().nth(4));
     await takeElementScreenshot("boolean-switch-default.png", ".spg-boolean-switch", t, comparer);

visualRegressionTests/tests/designer/theme-tab.ts

@@ -1,5 +1,5 @@
 import { ClientFunction, Selector } from "testcafe";
-import { getPropertyGridCategory, getTabbedMenuItemByText, setJSON, takeElementScreenshot, themeSettingsButtonSelector, wrapVisualTest, url } from "../../helper";
+import { getPropertyGridCategory, getTabbedMenuItemByText, setJSON, takeElementScreenshot, themeSettingsButtonSelector, wrapVisualTest, url, creatorTabThemeName } from "../../helper";
 
 const themeTabUrl = url.replace(/\/testcafe$/, "/testcafe-theme-tab");
 const title = "Themes tab";
@@ -15,7 +15,7 @@ test("Check boxshadow settings", async (t) => {
     await setJSON(json);
     const root = Selector("div[data-name='--sjs-shadow-small']");
     await t.resizeWindow(2000, 2000)
-      .click(getTabbedMenuItemByText("Themes"))
+      .click(getTabbedMenuItemByText(creatorTabThemeName))
       .click(getPropertyGridCategory("Appearance"))
       .click(advancedModeSwitcher)
       .scrollIntoView(root);
@@ -32,7 +32,7 @@ test("Check sidebar header", async (t) => {
     const json = {};
     const root = Selector(".svc-side-bar__container-header ").filterVisible();
     await t.resizeWindow(2000, 2000)
-      .click(getTabbedMenuItemByText("Themes"));
+      .click(getTabbedMenuItemByText(creatorTabThemeName));
     await takeElementScreenshot("theme-editor-header.png", root, t, comparer);
     await ClientFunction(() => { window["creator"].allowCollapseSidebar = false; })();
     await takeElementScreenshot("theme-editor-header-no-collapse-button.png", root, t, comparer);
@@ -49,7 +49,7 @@ test("toolbar view", async (t) => {
         { elements: [{ type: "text", name: "question2" }] }
       ]
     });
-    await t.click(getTabbedMenuItemByText("Themes"));
+    await t.click(getTabbedMenuItemByText(creatorTabThemeName));
 
     await t.resizeWindow(380, 600);
     await takeElementScreenshot("theme-tab-toolbar_responsive.png", Selector(".svc-footer-bar .svc-toolbar-wrapper"), t, comparer);
@@ -69,7 +69,7 @@ test("theme setting property grid", async (t) => {
         { elements: [{ type: "text", name: "question2" }] }
       ]
     });
-    await t.click(getTabbedMenuItemByText("Themes"));
+    await t.click(getTabbedMenuItemByText(creatorTabThemeName));
     const westResizer = Selector(".svc-resizer-west");
     await t.drag(westResizer, -150, 0);
 
@@ -119,4 +119,19 @@ test("theme setting property grid mobile", async (t) => {
     await ClientFunction(() => document.body.focus())();
     await takeElementScreenshot("theme-editor-property-grid-general-group-mobile.png", expandedGroup, t, comparer);
   });
+});
+
+test("Reset theme popup dialog view", async (t) => {
+  await wrapVisualTest(t, async (t, comparer) => {
+    await t.resizeWindow(1280, 900);
+    await t.click(getTabbedMenuItemByText(creatorTabThemeName));
+
+    const expandedGroup = Selector(".spg-theme-builder-root .spg-panel.sd-element--expanded");
+    await t
+      .click(getPropertyGridCategory("General"))
+      .click(expandedGroup.find(".spg-button-group__item-caption").withText("Dark"))
+      .click(Selector("#svc-reset-theme .svc-toolbar__item"));
+
+    await takeElementScreenshot("theme-tab-reset-popup-dialog.png", Selector(".sv-popup__body-content").filterVisible(), t, comparer);
+  });
 });