From e3c5e88fd7a29cde86fa411edfe9637b02bd4933 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C5=A1per=20Grom?= <gasper.grom@gmail.com>
Date: Tue, 10 Mar 2026 09:44:56 +0000
Subject: [PATCH] fix: collection color management
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>
---
 .../components/lf-collection-add.vue          | 134 +++++++++---------
 1 file changed, 70 insertions(+), 64 deletions(-)

diff --git a/frontend/src/modules/admin/modules/collections/components/lf-collection-add.vue b/frontend/src/modules/admin/modules/collections/components/lf-collection-add.vue
index 4424d844ab..a4b8403b78 100644
--- a/frontend/src/modules/admin/modules/collections/components/lf-collection-add.vue
+++ b/frontend/src/modules/admin/modules/collections/components/lf-collection-add.vue
@@ -56,70 +56,6 @@
                 </lf-field>
               </article>
 
-              <!-- Appearance section -->
-              <div class="mb-6">
-                <h6 class="text-sm font-semibold text-gray-500 mb-4 border-b border-gray-100 pb-2">
-                  Appearance
-                </h6>
-
-                <!-- Card image URL -->
-                <article class="mb-6">
-                  <lf-field label-text="Card image URL" :required="true">
-                    <lf-input
-                      v-model="form.imageUrl"
-                      class="h-10"
-                      placeholder="https://example.com/card-image.png"
-                      :invalid="$v.imageUrl.$invalid && $v.imageUrl.$dirty"
-                      @blur="$v.imageUrl.$touch()"
-                      @change="$v.imageUrl.$touch()"
-                    />
-                    <lf-field-messages
-                      :validation="$v.imageUrl"
-                      :error-messages="{ url: 'Please enter a valid URL' }"
-                    />
-                    <span class="text-2xs text-gray-400">Recommended image size: 800×240px</span>
-                  </lf-field>
-                </article>
-
-                <!-- Collection logo URL -->
-                <article class="mb-6">
-                  <lf-field label-text="Collection logo URL" :required="true">
-                    <lf-input
-                      v-model="form.logoUrl"
-                      class="h-10"
-                      placeholder="https://example.com/logo.png"
-                      :invalid="$v.logoUrl.$invalid && $v.logoUrl.$dirty"
-                      @blur="$v.logoUrl.$touch()"
-                      @change="$v.logoUrl.$touch()"
-                    />
-                    <lf-field-messages
-                      :validation="$v.logoUrl"
-                      :error-messages="{ url: 'Please enter a valid URL' }"
-                    />
-                    <span class="text-2xs text-gray-400">Recommended image size: 400×400px</span>
-                  </lf-field>
-                </article>
-
-                <!-- Collection color -->
-                <article class="mb-6">
-                  <lf-field label-text="Collection color">
-                    <div class="flex items-center gap-2">
-                      <span
-                        class="w-6 h-6 rounded-full flex-shrink-0 border border-gray-200"
-                        :style="{ backgroundColor: form.color || '#009AFF' }"
-                      />
-                      <lf-input
-                        v-model="form.color"
-                        class="h-10 flex-grow"
-                        placeholder="#FE9A00"
-                        type="color"
-                      />
-                    </div>
-                    <span class="text-2xs text-gray-400">Leave blank to use the default color #009AFF</span>
-                  </lf-field>
-                </article>
-              </div>
-
               <!-- Category -->
               <article class="mb-5">
                 <lf-field label-text="Category">
@@ -180,6 +116,76 @@
                   />
                 </lf-field>
               </article>
+
+              <!-- Appearance section -->
+              <div class="mb-6">
+                <div class="flex items-center gap-3">
+                  <h6 class="text-sm font-primary font-semibold text-gray-500 mb-4  pb-2">
+                    Appearance
+                  </h6>
+                  <div class="border-b border-gray-100 w-full" />
+                </div>
+
+                <!-- Card image URL -->
+                <article class="mb-6">
+                  <lf-field label-text="Card image URL" :required="true">
+                    <lf-input
+                      v-model="form.imageUrl"
+                      class="h-10"
+                      placeholder="https://example.com/card-image.png"
+                      :invalid="$v.imageUrl.$invalid && $v.imageUrl.$dirty"
+                      @blur="$v.imageUrl.$touch()"
+                      @change="$v.imageUrl.$touch()"
+                    />
+                    <lf-field-messages
+                      :validation="$v.imageUrl"
+                      :error-messages="{ url: 'Please enter a valid URL' }"
+                    />
+                    <span class="text-2xs text-gray-400">Recommended image size: 800×240px</span>
+                  </lf-field>
+                </article>
+
+                <!-- Collection logo URL -->
+                <article class="mb-6">
+                  <lf-field label-text="Collection logo URL" :required="true">
+                    <lf-input
+                      v-model="form.logoUrl"
+                      class="h-10"
+                      placeholder="https://example.com/logo.png"
+                      :invalid="$v.logoUrl.$invalid && $v.logoUrl.$dirty"
+                      @blur="$v.logoUrl.$touch()"
+                      @change="$v.logoUrl.$touch()"
+                    />
+                    <lf-field-messages
+                      :validation="$v.logoUrl"
+                      :error-messages="{ url: 'Please enter a valid URL' }"
+                    />
+                    <span class="text-2xs text-gray-400">Recommended image size: 400×400px</span>
+                  </lf-field>
+                </article>
+
+                <!-- Collection color -->
+                <article class="mb-6">
+                  <lf-field label-text="Collection color">
+                    <div class="flex items-center gap-2">
+                      <lf-input
+                        v-model="form.color"
+                        class="h-10 flex-grow"
+                        placeholder="Enter HEX code"
+                      >
+                        <template #prefix>
+                          <span
+                            v-if="form.color"
+                            class="w-6 h-6 rounded-full flex-shrink-0 border border-gray-200"
+                            :style="{ backgroundColor: form.color || '#009AFF' }"
+                          />
+                        </template>
+                      </lf-input>
+                    </div>
+                    <span class="text-2xs text-gray-400">Leave blank to use the default color #009AFF</span>
+                  </lf-field>
+                </article>
+              </div>
             </div>
             <lf-collection-add-projects-tab
               v-if="activeTab === 'projects'"