updated interface

assets/tailwind.config.js

@@ -12,29 +12,18 @@ module.exports = {
 		extend: {
 			colors: {
 				primary: '#6495ED', // cornflowerblue
+				highlight: '#74A0EF',
 				bg: {
-					light: '#F0F8FF', // aliceblue
+					light: '#D1DFFA',
-					dark: '#1C1F26', // near black
+					dark: '#1E2D47',
 				},
 				fg: {
-					light: '#222222',
+					light: '#1E2D47',
-					dark: '#E0E6ED',
+					dark: '#D1DFFA',
 				},
 				secondary: {
-					light: '#B0C4DE',
+					light: '#64D9ED',
-					dark: '#3A4A5E',
+					dark: '#324B77',
-				},
-				accent: {
-					light: '#7B68EE',
-					dark: '#9CAEFF',
-				},
-				danger: {
-					light: '#F08080',
-					dark: '#FF6B6B',
-				},
-				success: {
-					light: '#3CB371',
-					dark: '#4CAF50',
 				},
 			},
 		},

lib/labelmaker_web/live/home.ex

@@ -23,36 +23,91 @@ defmodule LabelmakerWeb.Home do
 
   def render(assigns) do
     ~H"""
-    <div>
+    <div class="max-w-xl mx-auto p-4 space-y-6">
-      <h1>Label Maker</h1>
+      <h1 class="text-2xl font-bold text-center">Labelmaker</h1>
-      <form phx-change="update_label" phx-submit="make_label">
+
-        <input type="text" name="label" value={@label} placeholder="Enter text" />
+      <form phx-change="update_label" phx-submit="make_label" class="space-y-4">
-        <div style={
+        <div
-          "color: #{@color}; font-family: #{@font}; font-size: #{@size}px;"
+          class="flex justify-center items-center h-[72px] bg-gradient-to-r from-black to-white border rounded border-primary"
-        }>
+          style={"color: #{@color}; font-family: #{@font}; font-size: #{@size}px;"}
+        >
           {@label}
         </div>
-        <select name="font" value={@font}>
+
+        <div>
+          <label for="label" class="block text-sm font-medium">Label</label>
+          <input
+            type="text"
+            id="label"
+            name="label"
+            value={@label}
+            placeholder="Enter text"
+            class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 bg-secondary-light text-fg-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 focus:ring-primary dark:placeholder-gray-400/50"
+          />
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label for="font" class="block text-sm font-medium">Font</label>
+            <select
+              id="font"
+              name="font"
+              class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 bg-secondary-light text-fg-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 focus:ring-primary"
+            >
               <%= for font <- Constants.fonts() do %>
                 <option value={font} selected={@font == font}>{font}</option>
               <% end %>
             </select>
-        <select name="color" value={@color}>
+          </div>
+
+          <div>
+            <label for="color" class="block text-sm font-medium">Color</label>
+            <select
+              id="color"
+              name="color"
+              class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 bg-secondary-light text-fg-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 focus:ring-primary"
+            >
               <%= for color <- Constants.colors() do %>
                 <option value={color} selected={@color == color}>{color}</option>
               <% end %>
             </select>
-        <select name="outline" value={@outline}>
+          </div>
+
+          <div>
+            <label for="outline" class="block text-sm font-medium">Outline</label>
+            <select
+              id="outline"
+              name="outline"
+              class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 bg-secondary-light text-fg-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 focus:ring-primary"
+            >
               <%= for outline <- Constants.outlines() do %>
                 <option value={outline} selected={@outline == outline}>{outline}</option>
               <% end %>
             </select>
-        <select name="size" value={@size}>
+          </div>
+
+          <div>
+            <label for="size" class="block text-sm font-medium">Size</label>
+            <select
+              id="size"
+              name="size"
+              class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 bg-secondary-light text-fg-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 focus:ring-primary"
+            >
               <%= for size <- Constants.sizes() do %>
                 <option value={size} selected={@size == size}>{size}</option>
               <% end %>
             </select>
-        <button type="submit">Create</button>
+          </div>
+        </div>
+
+        <div class="text-center">
+          <button
+            type="submit"
+            class="inline-block bg-primary text-fg-light dark:text-fg-dark px-4 py-2 rounded hover:bg-highlight focus:ring-fg-light focus:dark:ring-fg-dark"
+          >
+            Create
+          </button>
+        </div>
       </form>
     </div>
     """