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

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

diff --git a/apps/theming/src/AdminTheming.vue b/apps/theming/src/AdminTheming.vue
index daef18ebdcea7c2b4b5080595a58abde2a270b93..2face1629ef570855d9c64fc71fcdeb141c5c0a9 100644 (file)
--- a/apps/theming/src/AdminTheming.vue
+++ b/apps/theming/src/AdminTheming.vue
@@ -51,7 +51,6 @@
                                        :default-value="colorPickerField.defaultValue"
                                        :display-name="colorPickerField.displayName"
                                        :value.sync="colorPickerField.value"
-                                       data-admin-theming-setting-primary-color
                                        @update:theming="$emit('update:theming')" />
 
                                <!-- Default background picker -->

diff --git a/apps/theming/src/components/admin/ColorPickerField.vue b/apps/theming/src/components/admin/ColorPickerField.vue
index 7885bfeb23394c57140ae02cc30f8046c5fc0fa6..fad40408b37afba94439238e01b658ee2acad75d 100644 (file)
--- a/apps/theming/src/components/admin/ColorPickerField.vue
+++ b/apps/theming/src/components/admin/ColorPickerField.vue
@@ -26,15 +26,17 @@
                <div class="field__row">
                        <NcColorPicker :value.sync="localValue"
                                :advanced-fields="true"
+                               data-admin-theming-setting-primary-color-picker
                                @update:value="debounceSave">
-                               <NcButton class="field__button"
-                                       type="primary"
-                                       :id="id"
-                                       :aria-label="t('theming', 'Select a custom color')"
-                                       data-admin-theming-setting-primary-color-picker>
-                                       {{ value }}
+                               <NcButton type="secondary"
+                                       :id="id">
+                                       <template #icon>
+                                               <Palette :size="20" />
+                                       </template>
+                                       {{ t('theming', 'Change color') }}
                                </NcButton>
                        </NcColorPicker>
+                       <div class="field__color-preview" data-admin-theming-setting-primary-color />
                        <NcButton v-if="value !== defaultValue"
                                type="tertiary"
                                :aria-label="t('theming', 'Reset to default')"
@@ -60,6 +62,7 @@ import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcColorPicker from '@nextcloud/vue/dist/Components/NcColorPicker.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import Undo from 'vue-material-design-icons/UndoVariant.vue'
+import Palette from 'vue-material-design-icons/Palette.vue'
 
 import TextValueMixin from '../../mixins/admin/TextValueMixin.js'
 
@@ -71,6 +74,7 @@ export default {
                NcColorPicker,
                NcNoteCard,
                Undo,
+               Palette,
        },
 
        mixins: [
@@ -108,28 +112,10 @@ export default {
 @import './shared/field.scss';
 
 .field {
-       // Override default NcButton styles
-       &__button {
-               width: 230px !important;
-               border-radius: var(--border-radius-large) !important;
-               background-color: var(--color-primary-default) !important;
-
-               // emulated hover state because it would not make sense
-               // to create a dedicated global variable for the color-primary-default
-               &:hover::after {
-                       background-color: white;
-                       content: "";
-                       position: absolute;
-                       width: 100%;
-                       height: 100%;
-                       opacity: .2;
-                       filter: var(--primary-invert-if-bright);
-               }
-
-               // Above the ::after
-               &::v-deep * {
-                       z-index: 1;
-               }
+       &__color-preview {
+               width: var(--default-clickable-area);
+               border-radius: var(--border-radius-large);
+               background-color: var(--color-primary-default);
        }
 }
 </style>