Remove colors

frontend/src/views/profile/CreatorPage.vue

@@ -3,8 +3,7 @@ import XIcon from '@/assets/icons/x.svg';
 import {useCreatorProfileStore} from '@/stores/creatorProfileStore.js';
 import ChangeStripeID from '@/views/profile/creators/ChangeStripeID.vue';
 import ChangeTitle from '@/views/profile/creators/ChangeTitle.vue';
-import {computed, ref} from 'vue';
-import ColorsPicker from './creators/ColorsPicker.vue';
+import {ref} from 'vue';
 import LogoPicker from '../creators/CreatorLogoEditor.vue';
 import Socials from './creators/Socials.vue';
 
@@ -16,7 +15,6 @@ const currentComponent = ref('');
 const componentsMap = {
   LogoPicker,
   Socials,
-  ColorsPicker,
   ChangeTitle,
   ChangeStripeID,
 };
@@ -55,7 +53,7 @@ const closeDialog = () => {
   </v-dialog>
 
   <!--  Lorsque l'utilisateur n'a pas de creator name-->
-  <v-card rounded="xl" class="w-full">>
+  <v-card rounded="xl" class="w-full">
     <h1 class="uppercase">
       {{ $t('creatorinfopage.informations') }}
     </h1>
@@ -89,7 +87,7 @@ const closeDialog = () => {
             <span class="flex-none pa-2 min-w-32 text-left">{{
                 $t('creatorinfopage.title')
               }}</span>
-        <span class="flex-auto text-left pr-6 capitalize">{{
+        <span class="flex-auto text-left pr-6 capitalize">`{{
             creatorProfileStore.creator.title
           }}</span>
         <span class="flex-none">
@@ -119,26 +117,6 @@ const closeDialog = () => {
 
   </v-card>
 
-  <v-card rounded="xl" class="w-full">
-    <div class="py-5 uppercase ml-4">
-      {{ $t('creatorinfopage.banner&profile') }}
-    </div>
-
-    <div class="flex flex-col w-full">
-      <button
-          @click="openDialog('ColorsPicker')"
-          class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
-      >
-            <span class="flex-auto text-left pr-6 capitalize">
-              Choisissez votre palette de couleurs.
-            </span>
-        <span class="flex-none">
-              <v-icon>mdi-chevron-right</v-icon>
-            </span>
-      </button>
-    </div>
-  </v-card>
-
   <v-card rounded="xl" class="w-full">
     <div class="uppercase">
       {{ $t('creatorinfopage.socialnetwork') }}
@@ -276,8 +254,4 @@ const closeDialog = () => {
   @apply bg-[#A6147D] text-white;
   @apply hover:opacity-90;
 }
-
-.custom-border {
-  border: 3px solid;
-}
 </style>

frontend/src/views/profile/ProfilePage.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div class="bg-red flex flex-col gap-8 p-8">
+  <div class="flex flex-col gap-8 p-8">
     <account-page></account-page>
     <creator-page></creator-page>
   </div>

frontend/src/views/profile/creators/ColorsPicker.vue

@@ -1,250 +0,0 @@
-<script setup>
-import {ref, computed} from 'vue';
-import {useClient} from "@/plugins/api.js";
-
-const props = defineProps({
-  creator: {
-    required: true
-  }
-});
-
-const emits = defineEmits(['closeRequested']);
-
-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('primary');
-const selectedBackgroundColor = computed({
-  get() {
-    switch (selectedColorName.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 '#e42aad';
-    }
-  },
-  set(value) {
-    switch (selectedColorName.value) {
-      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;
-};
-
-const client = useClient();
-const save = async () => {
-  try {
-    await client.post(
-        `/api/creators/${props.creator.id}/colors`,
-        {
-          '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.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) {
-    console.error(error);
-  }
-};
-
-const cancel = () => {
-  emits('closeRequested');
-};
-</script>
-
-<template>
-  <h2 class="text-2xl font-semibold mb-4 flex justify-center">
-    Palette de Couleurs
-  </h2>
-
-  <div class="flex flex-column gap-6 justify-center items-start mt-5">
-
-    <div class="grid grid-cols-5 grid-rows-1 gap-4">
-      <div
-          class="color-square"
-          :class="{ selected: selectedColorName === 'primary' }"
-          :style="{ backgroundColor: primaryColor }"
-          @click="selectColor('primary')"
-      >
-        <span class="color-name"
-              :style="{ color: onPrimaryColor }">
-          Primary
-        </span>
-      </div>
-
-      <div
-          class="color-square"
-          :class="{ selected: selectedColorName === 'secondary' }"
-          :style="{ backgroundColor: secondaryColor }"
-          @click="selectColor('secondary')"
-      >
-        <span class="color-name"
-              :style="{ color: onSecondaryColor }">
-          Secondary
-        </span>
-      </div>
-
-      <div
-          class="color-square"
-          :class="{ selected: selectedColorName === 'surface' }"
-          :style="{ backgroundColor: surfaceColor }"
-          @click="selectColor('surface')"
-      >
-        <span class="color-name"
-              :style="{ color: onSurfaceColor }">
-          Surface
-        </span>
-      </div>
-
-      <div
-          class="color-square"
-          :class="{ selected: selectedColorName === 'background' }"
-          :style="{ backgroundColor: backgroundColor }"
-          @click="selectColor('background')"
-      >
-        <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="flex row justify-center space-x-12 mx-auto">
-      <div class="flex flex-col items-center">
-        <span class="mb-2 font-weight-bold">Text</span>
-        <v-color-picker v-model="selectedTextColor"></v-color-picker>
-      </div>
-
-      <div class="flex flex-col items-center">
-        <span class="mb-2 font-weight-bold">Background</span>
-        <v-color-picker v-model="selectedBackgroundColor"></v-color-picker>
-      </div>
-    </div>
-
-  </div>
-
-  <div class="flex justify-end space-x-4 mt-4">
-    <v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
-    <v-btn color="#A6147D" @click="save">Enregistrer</v-btn>
-  </div>
-</template>
-
-<style scoped>
-.color-square {
-  @apply w-[150px] h-[150px];
-  @apply flex rounded-md cursor-pointer relative;
-  @apply items-center justify-center;
-  @apply font-bold text-2xl;
-}
-
-.color-square.selected {
-  @apply border-4 border-solid border-[crimson];
-}
-
-.color-name {
-  text-align: center;
-}
-</style>