Refactors prominent button styling and minor theme fixes

Replaces the "x-create-btn" theme with a more generic "standout" theme for prominent buttons.

This change improves consistency and allows for reuse of the style across different components, as demonstrated by its adoption in the upgrade premium button and date picker components.

Also, this commit adds dark mode support and improves overall theme integration for the DatePicker component by using Vuetify's theme context and applying corresponding styles.

assets/css/theme.scss

@@ -47,9 +47,9 @@
   color: rgb(var(--v-theme-on-info)) !important;
 }
 
-.theme-x-create-btn {
-  background-color: rgb(var(--v-theme-x-create-btn)) !important;
-  color: rgb(var(--v-theme-on-x-create-btn)) !important;
+.theme-standout {
+  background-color: rgb(var(--v-theme-standout)) !important;
+  color: rgb(var(--v-theme-on-standout)) !important;
 }
 
 .theme-artist {

assets/css/vue-date-picker.scss

@@ -1,28 +1,34 @@
 // @see https://vue3datepicker.com/customization/theming/
 // [!] Sass variables overriding does not work in scoped mode
-.dp__theme_light,
-.dp__theme_dark {
+
+.dp__theme_light, .dp__theme_dark {
+  --dp-primary-color: rgb(var(--v-theme-primary)) !important;
+  --dp-primary-text-color: rgb(var(--v-theme-on-primary)) !important;
+  --dp-secondary-color: rgb(var(--v-theme-neutral-strong)) !important;
+  --dp-success-color: rgb(var(--v-theme-success)) !important;
+  --dp-success-color-disabled: rgb(var(--v-theme-neutral-strong)) !important;
+}
+
+.dp__theme_light {
   --dp-background-color: #ffffff;
   --dp-text-color: #212121;
   --dp-hover-color: #f3f3f3;
   --dp-hover-text-color: #212121;
   --dp-hover-icon-color: #959595;
-  --dp-primary-color: rgb(var(--v-theme-primary)) !important;
-  --dp-primary-text-color: rgb(var(--v-theme-on-primary)) !important;
-  --dp-secondary-color: rgb(var(--v-theme-neutral-strong)) !important;
   --dp-border-color: #ddd;
   --dp-menu-border-color: #ddd;
   --dp-border-color-hover: #aaaeb7;
   --dp-disabled-color: #f6f6f6;
   --dp-scroll-bar-background: #f3f3f3;
   --dp-scroll-bar-color: #959595;
-  --dp-success-color: rgb(var(--v-theme-success)) !important;
-  --dp-success-color-disabled: rgb(var(--v-theme-neutral-strong)) !important;
   --dp-icon-color: #959595;
   --dp-danger-color: #ff6f60;
   --dp-highlight-color: rgba(25, 118, 210, 0.1);
 }
 
+.dp__theme_dark {
+}
+
 :root {
   --dp-action-button-height: 35px;
 }

components/Layout/Header.vue

@@ -19,7 +19,7 @@ Contient entre autres le nom de l'organisation, l'accès à l'aide et aux préf
       </LayoutHeaderTitle>
     </v-toolbar-title>
 
-    <LayoutThemeSwitcher v-if="false" />
+    <LayoutThemeSwitcher v-if="true" />
     <!-- En attente validation PO -->
 
     <LayoutHeaderUniversalCreationCreateButton

components/Layout/Header/UniversalCreation/CreateButton.vue

@@ -19,7 +19,7 @@
       v-else
       :elevation="2"
       height="30"
-      class="theme-x-create-btn"
+      class="theme-standout"
       @click="show"
     >
       <span>{{ $t('create') }}</span>

components/Layout/UpgradePremiumButton.vue

@@ -75,7 +75,7 @@ const trialAction = async () => {
 
 <style scoped lang="scss">
 .btn_trial {
-  background-color: rgb(var(--v-theme-x-create-btn));
+  background-color: rgb(var(--v-theme-standout));
   border-radius: 5px;
   border: 1px solid #fff;
   margin-left: 15px;

components/Ui/DatePicker.vue

@@ -5,28 +5,29 @@ Sélecteur de dates
 -->
 
 <template>
-    <VueDatePicker
-      :model-value="modelValue"
-      :locale="locale"
-      :format="dateFormatPattern"
-      :format-locale="fnsLocale"
-      :range="range"
-      :multi-calendars="range"
-      :enable-time-picker="withTimePicker"
-      :auto-apply="autoApply"
-      :auto-position="true"
-      :start-date="today"
-      close-on-scroll
-      text-input
-      :readonly="readonly"
-      position="left"
-      :teleport="true"
-      :select-text="$t('select')"
-      :cancel-text="$t('cancel')"
-      input-class-name="date-picker-input"
-      @update:model-value="emit('update:modelValue', $event)"
-    />
-  </template>
+  <VueDatePicker
+    :model-value="modelValue"
+    :locale="locale"
+    :format="dateFormatPattern"
+    :format-locale="fnsLocale"
+    :range="range"
+    :multi-calendars="range"
+    :enable-time-picker="withTimePicker"
+    :auto-apply="autoApply"
+    :auto-position="true"
+    :start-date="today"
+    close-on-scroll
+    text-input
+    :readonly="readonly"
+    position="left"
+    :teleport="true"
+    :dark="isDark"
+    :select-text="$t('select')"
+    :cancel-text="$t('cancel')"
+    input-class-name="date-picker-input"
+    @update:model-value="emit('update:modelValue', $event)"
+  />
+</template>
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
@@ -34,6 +35,7 @@ import type { PropType } from 'vue'
 import type { Locale } from 'date-fns'
 import type { supportedLocales } from '~/services/utils/dateUtils'
 import DateUtils from '~/services/utils/dateUtils'
+import { useTheme } from 'vuetify'
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -65,6 +67,10 @@ const i18n = useI18n()
 
 const locale: Ref<string> = i18n.locale
 
+const theme = useTheme()
+
+const isDark = computed(() => theme.global.current.value.dark)
+
 const fnsLocale: ComputedRef<Locale> = computed(() =>
   DateUtils.getFnsLocale(locale.value as supportedLocales),
 )
@@ -89,4 +95,40 @@ const today = new Date()
 :deep(.dp__action_button) {
   height: 32px;
 }
+
+:deep(.date-picker-input) {
+  background-color: rgb(var(--v-theme-surface)) !important;
+  color: rgb(var(--v-theme-on-surface)) !important;
+  border: 1px solid rgb(var(--v-theme-neutral)) !important;
+  border-radius: 4px !important;
+
+  &:hover {
+    border-color: rgb(var(--v-theme-on-surface)) !important;
+  }
+
+  &:focus {
+    border: 2px solid rgb(var(--v-theme-primary)) !important;
+    outline: none !important;
+  }
+}
+
+:deep(.dp__menu) {
+  background-color: rgb(var(--v-theme-surface)) !important;
+  color: rgb(var(--v-theme-on-surface)) !important;
+  border: 1px solid rgb(var(--v-theme-neutral)) !important;
+}
+
+:deep(.dp__calendar_header) {
+  background-color: rgb(var(--v-theme-surface)) !important;
+  color: rgb(var(--v-theme-on-surface)) !important;
+}
+
+:deep(.dp__cell_inner) {
+  color: rgb(var(--v-theme-on-surface)) !important;
+}
+
+:deep(.dp__action_cancel) {
+  background-color: rgb(var(--v-theme-neutral)) !important;
+  color: rgb(var(--v-theme-on-neutral)) !important;
+}
 </style>

components/Ui/Input/DatePicker.vue

@@ -141,10 +141,10 @@ onBeforeUnmount(() => {
 
 .label {
   position: absolute;
-  color: #8e8e8e;
+  color: rgb(var(--v-theme-on-neutral));
   top: -0.7rem;
   left: 0.75rem;
-  background-color: rgb(var(--v-theme-surface));
+  background-color: rgb(var(--v-theme-neutral-very-soft));
   padding: 0 0.3rem;
   font-size: 0.8rem;
   z-index: 1;
@@ -154,23 +154,20 @@ onBeforeUnmount(() => {
     top 0.2s;
 }
 
-.date-picker:hover {
-  :deep(.dp__input) {
-    border-color: #333333;
-  }
+:deep(.dp__input) {
+  background-color: rgb(var(--v-theme-neutral-very-soft));
+  color: rgb(var(--v-theme-on-neutral-very-soft));
+  border: 1px solid rgba(var(--v-theme-on-neutral-very-soft), 0.4);
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 14px;
+  min-height: 40px;
+  box-sizing: border-box;
 }
 
-.container:focus-within {
-  .label {
-    color: #333333;
-  }
-
-  :deep(.dp__input_focus) {
-    border: solid 2px #333333;
-  }
-
-  :deep(.dp__input_icon) {
-    color: #333333;
+.date-picker:hover {
+  :deep(.dp__input) {
+    border: 0.5px solid rgb(var(--v-theme-on-neutral-very-soft));
   }
 }
 

config/theme.ts

@@ -36,11 +36,8 @@ interface Theme {
     'on-info': string
     artist: string
     school: string
-
-    // Special cases
-    // TODO: voir ceux dont on peut se passer
-    'x-create-btn': string
-    'on-x-create-btn': string
+    'standout': string
+    'on-standout': string
   }
 }
 
@@ -91,8 +88,8 @@ export const lightTheme: Theme = {
     info: '#3c8dbc',
     'on-info': '#ffffff',
 
-    'x-create-btn': '#f39c12',
-    'on-x-create-btn': '#ffffff',
+    'standout': '#f39c12',
+    'on-standout': '#ffffff',
 
     artist: '#fac20a',
     school: '#1893bf',
@@ -146,8 +143,8 @@ export const darkTheme: Theme = {
     info: '#3c8dbc',
     'on-info': '#ffffff',
 
-    'x-create-btn': '#f39c12',
-    'on-x-create-btn': '#ffffff',
+    'standout': '#f39c12',
+    'on-standout': '#ffffff',
 
     artist: '#fac20a',
     school: '#1893bf',

pages/freemium/dashboard.vue

@@ -197,7 +197,7 @@ onUnmounted(() => {
 
 .v-card {
   margin-bottom: 16px;
-  color: rgb(var(--v-theme-on-primary-alt));
+  color: rgb(var(--v-theme-on-neutral));
 }
 
 .v-card-text{
@@ -225,7 +225,7 @@ onUnmounted(() => {
 }
 .btn_trial {
   height: 55px;
-  background-color: rgb(var(--v-theme-x-create-btn));
+  background-color: rgb(var(--v-theme-standout));
   color: #000;
 
   span {
@@ -240,8 +240,8 @@ onUnmounted(() => {
   }
 }
 
-.btn_edit_orga{
-  color: rgb(var(--v-theme-on-primary-alt)) !important;
+.btn_edit_orga {
+  color: rgb(var(--v-theme-on-neutral)) !important;
 }
 
 .no_event{