Merge pull request #45 from pixie-git/feature/PIX-54_create-implementation-ui-pixel-art-editor

Feature/pix 54 create implementation UI pixel art editor

Author: AndreaZavatta

client/src/components/editor/ColorSelector.vue

@@ -26,33 +26,58 @@ const selectColor = (index: number) => {
 
 <style scoped>
 .color-picker {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  padding: 8px;
-  background: #2c2c2c;
-  border-radius: 8px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* 2 columns like in the design */
+  gap: 8px;
+  padding: 12px;
+  background: #fff; /* White background as per design */
+  border-radius: 12px;
   width: fit-content;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  border: 1px solid #e0e0e0;
 }
 
 .color-swatch {
-  width: 24px;
-  height: 24px;
-  border: 2px solid transparent;
+  width: 32px;
+  height: 32px;
+  border: 2px solid rgba(0,0,0,0.1);
   cursor: pointer;
-  border-radius: 4px;
-  transition: transform 0.1s;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
 }
 
 .color-swatch:hover {
   transform: scale(1.1);
-  border-color: rgba(255, 255, 255, 0.5);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
 
 .color-swatch.active {
-  border-color: white;
-  box-shadow: 0 0 4px rgba(0,0,0,0.5);
+  border-color: #333;
+  box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
   transform: scale(1.15);
   z-index: 1;
 }
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+  .color-picker {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    max-width: 100%;
+    overflow-x: auto;
+    padding: 8px;
+    gap: 12px;
+    border: none;
+    box-shadow: none;
+    background: transparent;
+    justify-content: center; /* Center if few colors, or start if scrolling */
+  }
+
+  .color-swatch {
+    width: 36px;
+    height: 36px;
+  }
+}
 </style>

client/src/components/lobbies/LobbyHeader.vue

@@ -3,7 +3,7 @@
     <div class="logo-section">
       <img src="@/assets/PixieLogo.png" alt="Pixie" class="mini-logo" />
     </div>
-    <h1>Join a Canvas</h1>
+    <h1>{{ title }}</h1>
 
     <div class="user-actions">
       <button class="icon-btn" title="Notifications">
@@ -18,7 +18,12 @@
 </template>
 
 <script setup lang="ts">
-// Pure presentation component
+defineProps({
+  title: {
+    type: String,
+    default: 'Join a Canvas'
+  }
+});
 </script>
 
 <style scoped>

client/src/views/LobbiesView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="lobbies-container">
-    <LobbyHeader />
+    <LobbyHeader title="Join a Canvas" />
 
     <main class="main-content">
       <LobbyFilters