Fix the ColorsPicker to use the new palette

src/views/profile/creators/ColorsPicker.vue

@@ -8,50 +8,99 @@ const props = defineProps({
   },
   colorName: {
     type: String,
-    default: 'bannerTop'
+    default: 'primary'
   }
 });
 
 const emits = defineEmits(['closeRequested']);
 
-const bannerTopColor = ref(props.creator.colors.bannerTop)
-const bannerBottomColor = ref(props.creator.colors.bannerBottom)
-const accentColor = ref(props.creator.colors.accent)
-const menuColor = ref(props.creator.colors.menu)
+const primaryColor = ref(props.creator.colors.primary)
+const secondaryColor = ref(props.creator.colors.secondary)
+const backgroundColor = ref(props.creator.colors.background)
+const errorColor = ref(props.creator.colors.error)
+const surfaceColor = ref(props.creator.colors.surface)
+const onPrimaryColor = ref(props.creator.colors.onPrimary)
+const onSecondaryColor = ref(props.creator.colors.onSecondary)
+const onBackgroundColor = ref(props.creator.colors.onBackground)
+const onErrorColor = ref(props.creator.colors.onError)
+const onSurfaceColor = ref(props.creator.colors.onSurface)
 
 const selectedColorName = ref(props.colorName);
-const selectedColor = computed({
+const selectedBackgroundColor = computed({
   get() {
     switch (selectedColorName.value) {
-      case 'bannerTop':
-        return bannerTopColor.value;
-      case 'bannerBottom':
-        return bannerBottomColor.value;
-      case 'accent':
-        return accentColor.value;
-      case 'menu':
-        return menuColor.value;
+      case 'primary':
+        return primaryColor.value
+      case 'secondary':
+        return secondaryColor.value
+      case 'background':
+        return backgroundColor.value
+      case 'error':
+        return errorColor.value
+      case 'surface':
+        return surfaceColor.value
       default:
-        return bannerTopColor.value;
+        return '#e42aad';
     }
   },
   set(value) {
     switch (selectedColorName.value) {
-      case 'bannerTop':
-        bannerTopColor.value = value;
-        break;
-      case 'bannerBottom':
-        bannerBottomColor.value = value;
-        break;
-      case 'accent':
-        accentColor.value = value;
-        break;
-      case 'menu':
-        menuColor.value = value;
-        break;
+      case 'primary':
+        primaryColor.value = value
+        break
+      case 'secondary':
+        secondaryColor.value = value
+        break
+      case 'background':
+        backgroundColor.value = value
+        break
+      case 'error':
+        errorColor.value = value
+        break
+      case 'surface':
+        surfaceColor.value = value
+        break      
     }
   }
-});
+})
+const selectedTextColor = computed({
+  get() {
+    switch (selectedColorName.value) {
+      case 'primary':
+        return onPrimaryColor.value
+      case 'secondary':
+        return onSecondaryColor.value
+      case 'background':
+        return onBackgroundColor.value
+      case 'error':
+        return onErrorColor.value
+      case 'surface':
+        return onSurfaceColor.value
+      default:
+        return '#e42aad';
+    }
+  },
+  set(value) {
+    switch (selectedColorName.value) {
+      case 'primary':
+        onPrimaryColor.value = value
+        break
+      case 'secondary':
+        onSecondaryColor.value = value
+        break
+      case 'background':
+        onBackgroundColor.value = value
+        break
+      case 'error':
+        onErrorColor.value = value
+        break
+      case 'surface':
+        onSurfaceColor.value = value
+        break
+    }
+  }
+})
+
 
 const selectColor = (colorName) => {
   selectedColorName.value = colorName;
@@ -63,16 +112,28 @@ const save = async () => {
     await client.post(
         `/api/creators/${props.creator.id}/colors`,
         {
-          "bannerTop": bannerTopColor.value || null,
-          "bannerBottom": bannerBottomColor.value || null,
-          "accent": accentColor.value || null,
-          "menu": menuColor.value || null
+          'primary': primaryColor.value,
+          'secondary': secondaryColor.value,
+          'background': backgroundColor.value,
+          'error': errorColor.value,
+          'surface': surfaceColor.value,
+          'onPrimary': onPrimaryColor.value,
+          'onSecondary': onSecondaryColor.value,
+          'onBackground': onBackgroundColor.value,
+          'onError': onErrorColor.value,
+          'onSurface': onSurfaceColor.value,
         });
 
-    props.creator.colors.bannerTop = bannerTopColor.value;
-    props.creator.colors.bannerBottom = bannerBottomColor.value;
-    props.creator.colors.accent = accentColor.value;
-    props.creator.colors.menu = menuColor.value;
+    props.creator.colors.primary = primaryColor.value
+    props.creator.colors.secondary = secondaryColor.value
+    props.creator.colors.background = backgroundColor.value
+    props.creator.colors.error = errorColor.value
+    props.creator.colors.surface = surfaceColor.value
+    props.creator.colors.onPrimary = onPrimaryColor.value
+    props.creator.colors.onSecondary = onSecondaryColor.value
+    props.creator.colors.onBackground = onBackgroundColor.value
+    props.creator.colors.onError = onErrorColor.value
+    props.creator.colors.onSurface = onSurfaceColor.value
 
     emits('closeRequested');
   } catch (error) {
@@ -90,50 +151,76 @@ const cancel = () => {
     Palette de Couleurs
   </h2>
 
-  <div class="flex gap-6 justify-center items-start mt-5">
+  <div class="flex flex-column gap-6 justify-center items-start mt-5">
 
-    <div class="grid grid-cols-2 grid-rows-2 gap-4">
+    <div class="grid grid-cols-5 grid-rows-1 gap-4">
       <div
           class="color-square"
-          :class="{ selected: selectedColorName === 'bannerTop' }"
-          :style="{ backgroundColor: bannerTopColor }"
-          @click="selectColor('bannerTop')"
+          :class="{ selected: selectedColorName === 'primary' }"
+          :style="{ backgroundColor: primaryColor }"
+          @click="selectColor('primary')"
       >
-        <span class="color-name">Haut Banniere</span>
+        <span class="color-name"
+              :style="{ color: onPrimaryColor }">
+          Primary
+        </span>
       </div>
 
       <div
           class="color-square"
-          :class="{ selected: selectedColorName === 'bannerBottom' }"
-          :style="{ backgroundColor: bannerBottomColor }"
-          @click="selectColor('bannerBottom')"
+          :class="{ selected: selectedColorName === 'secondary' }"
+          :style="{ backgroundColor: secondaryColor }"
+          @click="selectColor('secondary')"
       >
-        <span class="color-name">Bas Banniere</span>
+        <span class="color-name"
+              :style="{ color: onSecondaryColor }">
+          Secondary
+        </span>
       </div>
 
       <div
           class="color-square"
-          :class="{ selected: selectedColorName === 'accent' }"
-          :style="{ backgroundColor: accentColor }"
-          @click="selectColor('accent')"
+          :class="{ selected: selectedColorName === 'surface' }"
+          :style="{ backgroundColor: surfaceColor }"
+          @click="selectColor('surface')"
       >
-        <span class="color-name">Accent</span>
+        <span class="color-name"
+              :style="{ color: onSurfaceColor }">
+          Surface
+        </span>
       </div>
 
       <div
           class="color-square"
-          :class="{ selected: selectedColorName === 'menu' }"
-          :style="{ backgroundColor: menuColor }"
-          @click="selectColor('menu')"
+          :class="{ selected: selectedColorName === 'background' }"
+          :style="{ backgroundColor: backgroundColor }"
+          @click="selectColor('background')"
       >
-        <span class="color-name">Menu</span>
+        <span class="color-name"
+              :style="{ color: onBackgroundColor }">
+          Background
+        </span>
+      </div>
+
+      <div
+          class="color-square"
+          :class="{ selected: selectedColorName === 'error' }"
+          :style="{ backgroundColor: errorColor }"
+          @click="selectColor('error')"
+      >
+        <span class="color-name"
+              :style="{ color: onErrorColor }"
+        >
+          Error
+        </span>
       </div>
     </div>
 
-    <div class="w-px bg-gray-300 h-full"></div>
-    
-    <div class="flex-grow">
-      <v-color-picker v-model="selectedColor"></v-color-picker>
+    <div class=" flex flex-row flex-grow">
+      <span>TEXT</span>
+      <v-color-picker v-model="selectedTextColor"></v-color-picker>
+      <span>Background</span>
+      <v-color-picker v-model="selectedBackgroundColor"></v-color-picker>
     </div>
   </div>
 
@@ -148,7 +235,7 @@ const cancel = () => {
   @apply w-[150px] h-[150px];
   @apply flex rounded-md cursor-pointer relative;
   @apply items-center justify-center;
-  @apply font-bold text-white;
+  @apply font-bold text-2xl;
 }
 
 .color-square.selected {