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

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

diff --git a/apps/theming/src/components/BackgroundSettings.vue b/apps/theming/src/components/BackgroundSettings.vue
index 0a8c49be45e34b6ac53e3466b9441eb4c20cb968..deb0a93a51a9ae022d6d209bb3e329d2e34c898b 100644 (file)
--- a/apps/theming/src/components/BackgroundSettings.vue
+++ b/apps/theming/src/components/BackgroundSettings.vue
@@ -58,16 +58,15 @@
                </button>
 
                <!-- Custom color picker -->
-               <NcColorPicker v-model="Theming.color" @input="debouncePickColor">
-                       <button class="background background__color"
-                               :data-color="Theming.color"
-                               :data-color-bright="invertTextColor(Theming.color)"
-                               :style="{ backgroundColor: Theming.color, '--border-color': Theming.color}"
-                               data-user-theming-background-color
-                               tabindex="0">
-                               {{ t('theming', 'Change color') }}
-                       </button>
-               </NcColorPicker>
+               <div class="background-color"
+                       data-user-theming-background-color>
+                       <NcColorPicker v-model="Theming.color"
+                               @input="debouncePickColor">
+                               <NcButton type="ternary">
+                                       {{ t('theming', 'Change color') }}
+                               </NcButton>
+                       </NcColorPicker>
+               </div>
 
                <!-- Remove background -->
                <button :aria-pressed="isBackgroundDisabled"
@@ -113,6 +112,7 @@ import { Palette } from 'node-vibrant/lib/color.js'
 import axios from '@nextcloud/axios'
 import debounce from 'debounce'
 import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import Vibrant from 'node-vibrant'
 
 import Check from 'vue-material-design-icons/Check.vue'
@@ -133,6 +133,7 @@ export default {
                Check,
                Close,
                ImageEdit,
+               NcButton,
                NcColorPicker,
        },
 
@@ -341,6 +342,17 @@ export default {
        flex-wrap: wrap;
        justify-content: center;
 
+       .background-color {
+               display: flex;
+               justify-content: center;
+               align-items: center;
+               width: 176px;
+               height: 96px;
+               margin: 8px;
+               border-radius: var(--border-radius-large);
+               background-color: var(--color-primary);
+       }
+
        .background {
                overflow: hidden;
                width: 176px;
@@ -368,11 +380,6 @@ export default {
                        border-color: var(--color-border);
                }
 
-               &__color {
-                       color: var(--color-primary-text);
-                       background-color: var(--color-primary-default);
-               }
-
                // Over a background image
                &__default,
                &__shipped {

diff --git a/cypress/e2e/theming/themingUtils.ts b/cypress/e2e/theming/themingUtils.ts
index 532cee46911b1e05229b9b608b1d2cf7b1ce894c..1cbab439012ec6b387dafb886515cba05c7a534b 100644 (file)
--- 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 7597047895ef4be3485eedc6b59990eba2c01371..ce8a50821ef4f14dc503099ba480a5ab6c112bc7 100644 (file)
--- 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