fix(theming): change color button contrast on user settings

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

2 files changed, 9 insertions, 9 deletions

diff --git a/cypress/e2e/theming/themingUtils.ts b/cypress/e2e/theming/themingUtils.ts
index 532cee46911..1cbab439012 100644
--- a/cypress/e2e/theming/themingUtils.ts
+++ b/cypress/e2e/theming/themingUtils.ts
@@ -54,13 +54,13 @@ export const validateBodyThemingCss = function(expectedColor = defaultPrimary, e
  */
 export const validateUserThemingDefaultCss = function(expectedColor = defaultPrimary, expectedBackground: string|null = defaultBackground) {
 	const defaultSelectButton = Cypress.$('[data-user-theming-background-default]')
-	const customColorSelectButton = Cypress.$('[data-user-theming-background-color]')
-	if (defaultSelectButton.length === 0 || customColorSelectButton.length === 0) {
+	const customColor = Cypress.$('[data-user-theming-background-color]')
+	if (defaultSelectButton.length === 0 || customColor.length === 0) {
 		return false
 	}
 
 	const defaultOptionBackground = defaultSelectButton.css('background-image')
-	const colorPickerOptionColor = customColorSelectButton.css('background-color')
+	const colorPickerOptionColor = customColor.css('background-color')
 
 	const isValidBackgroundImage = !expectedBackground
 		? defaultOptionBackground === 'none'
@@ -71,15 +71,15 @@ export const validateUserThemingDefaultCss = function(expectedColor = defaultPri
 	return isValidBackgroundImage && colord(colorPickerOptionColor).isEqual(expectedColor)
 }
 
-export const pickRandomColor = function(pickerSelector: string): Cypress.Chainable<string> {
+export const pickRandomColor = function(): Cypress.Chainable<string> {
 	// Pick one of the first 8 options
 	const randColour = Math.floor(Math.random() * 8)
 
 	// Open picker
-	cy.get(pickerSelector).click()
+	cy.get('button').contains('Change color').click()
 
 	// Return selected colour
-	return cy.get(pickerSelector).get('.color-picker__simple-color-circle').eq(randColour).then(($el) => {
+	return cy.get('.color-picker__simple-color-circle').eq(randColour).then(($el) => {
 		$el.trigger('click')
 		return $el.css('background-color')
 	})
diff --git a/cypress/e2e/theming/user-background.cy.ts b/cypress/e2e/theming/user-background.cy.ts
index 7597047895e..ce8a50821ef 100644
--- a/cypress/e2e/theming/user-background.cy.ts
+++ b/cypress/e2e/theming/user-background.cy.ts
@@ -129,7 +129,7 @@ describe('User select a custom color', function() {
 	it('Select a custom color', function() {
 		cy.intercept('*/apps/theming/background/color').as('setColor')
 
-		pickRandomColor('[data-user-theming-background-color]')
+		pickRandomColor()
 
 		// Validate custom colour change
 		cy.wait('@setColor')
@@ -168,7 +168,7 @@ describe('User select a bright custom color and remove background', function() {
 		cy.intercept('*/apps/theming/background/color').as('setColor')
 
 		// Pick one of the bright color preset
-		cy.get('[data-user-theming-background-color]').click()
+		cy.get('button').contains('Change color').click()
 		cy.get('.color-picker__simple-color-circle:eq(4)').click()
 
 		// Validate custom colour change
@@ -286,7 +286,7 @@ describe('User changes settings and reload the page', function() {
 	it('Select a custom color', function() {
 		cy.intercept('*/apps/theming/background/color').as('setColor')
 
-		cy.get('[data-user-theming-background-color]').click()
+		cy.get('button').contains('Change color').click()
 		cy.get('.color-picker__simple-color-circle:eq(5)').click()
 
 		// Validate clear background