feat: add initial copilot instructions and enhance input styles for better UI consistency

Author: guigui42

.github/copilot-instructions.md

@@ -0,0 +1,4 @@
+The application is meant to be used by solutions engineers to build demoflows.
+Demoflows contain a customer/prospect, a product that will be demoed, a theme for colors, personas that will be used and steps during the demo.
+Use vanila js with webpack.
+For the UI, use standard Daisy UI components.

css/input.css

@@ -2,38 +2,42 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Your custom styles here */
+@layer components {
+    /* Editor layout */
 
-/* Ensure the icon-dropdown and icon-item have appropriate dark mode styles */
+    .tab-content {
+        @apply block;
+    }
 
-.icon-dropdown {
-    background-color: #ffffff;
-    border: 1px solid #d1d5db;
-}
 
-.dark .icon-dropdown {
-    background-color: #1f2937; /* Dark gray */
-    border-color: #374151;
-}
+    /* Form controls */
+    .custom-select {
+        @apply relative w-full;
+    }
 
-.icon-item {
-    color: #000000;
-    padding: 0.5rem;
-    cursor: pointer;
-}
+    .custom-select button {
+        @apply select select-bordered w-full flex items-center space-x-2;
+    }
 
-.dark .icon-item {
-    color: #ffffff;
-}
+    .dropdown-options {
+        @apply absolute left-0 top-full w-full mt-1 max-h-60 overflow-y-auto 
+               bg-base-200 border border-base-300 rounded-lg shadow-lg z-50;
+    }
 
-.icon-item:hover {
-    background-color: #f3f4f6;
-}
+    /* Icon selector */
+    .icon-dropdown {
+        @apply bg-base-200 border border-base-300 rounded-lg;
+    }
 
-.dark .icon-item:hover {
-    background-color: #4b5563;
+    .icon-item {
+        @apply text-base-content p-2 cursor-pointer hover:bg-base-300 flex items-center gap-2;
+    }
 }
 
+/* Your custom styles here */
+
+/* Ensure the icon-dropdown and icon-item have appropriate dark mode styles */
+
 .icon-preview {
     font-size: 24px;
     color: #555555;
@@ -43,8 +47,6 @@
     color: #d1d5db;
 }
 
-
-
 /* Logo Management Styles */
 .logo-grid {
     display: grid;