restyle tags

lib/cannery/tags.ex

@@ -108,4 +108,18 @@ defmodule Cannery.Tags do
   def change_tag(tag, attrs \\ %{}) do
     Tag.changeset(tag, attrs)
   end
+
+  @doc """
+  Get a random tag bg_color in `#ffffff` hex format
+
+  ## Examples
+
+      iex> random_color()
+      "#cc0066"
+  """
+  @spec random_bg_color() :: <<_::7>>
+  def random_bg_color do
+    ["#cc0066", "#ff6699", "#6666ff", "#0066cc", "#00cc66", "#669900", "#ff9900", "#996633"]
+    |> Enum.random()
+  end
 end

lib/cannery_web/live/tag_live/form_component.ex

@@ -38,7 +38,7 @@ defmodule CanneryWeb.TagLive.FormComponent do
   def render(assigns) do
     ~H"""
     <div>
-      <h2 class="title text-xl text-primary-500">
+      <h2 class="text-center title text-xl text-primary-500">
         <%= @title %>
       </h2>
       <.form
@@ -48,23 +48,23 @@ defmodule CanneryWeb.TagLive.FormComponent do
         class="grid grid-cols-3 justify-center items-center space-y-4"
         phx-target={@myself}
         phx-change="validate"
-        phx-submit="save">
+        phx-submit="save"
-
+      >
-        <%= label f, :name, class: "title text-lg text-primary-500" %>
+        <%= label(f, :name, class: "title text-lg text-primary-500") %>
-        <%= text_input f, :name, class: "input input-primary col-span-2" %>
+        <%= text_input(f, :name, class: "input input-primary col-span-2") %>
         <span class="col-span-3">
           <%= error_tag(f, :name) %>
         </span>
         <%= label(f, :bg_color, class: "title text-lg text-primary-500") %>
         <span class="mx-auto col-span-2" phx-update="ignore">
-          <%= color_input(f, :bg_color, value: random_color()) %>
+          <%= color_input(f, :bg_color) %>
         </span>
         <span class="col-span-3">
           <%= error_tag(f, :bg_color) %>
         </span>
         <%= label(f, :text_color, class: "title text-lg text-primary-500") %>
         <span class="mx-auto col-span-2" phx-update="ignore">
-          <%= color_input(f, :text_color, value: "#ffffff") %>
+          <%= color_input(f, :text_color) %>
         </span>
         <span class="col-span-3">
           <%= error_tag(f, :text_color) %>
@@ -102,13 +102,5 @@ defmodule CanneryWeb.TagLive.FormComponent do
       {:error, %Ecto.Changeset{} = changeset} ->
         {:noreply, socket |> assign(changeset: changeset)}
     end
-  end-
-  @doc """
-  Returns a random tag color in `#ffffff` hex format
-  """
-  @spec random_color() :: String.t()
-  def random_color do
-    ["#cc0066", "#ff6699", "#6666ff", "#0066cc", "#00cc66", "#669900", "#ff9900", "#996633"]
-    |> Enum.random()
   end
 end

lib/cannery_web/live/tag_live/index.ex

@@ -27,7 +27,7 @@ defmodule CanneryWeb.TagLive.Index do
   defp apply_action(socket, :new, _params) do
     socket
     |> assign(:page_title, "New Tag")
-    |> assign(:tag, %Tag{})
+    |> assign(:tag, %Tag{bg_color: Tags.random_bg_color(), text_color: "#ffffff"})
   end
 
   defp apply_action(socket, :index, _params) do

lib/cannery_web/live/tag_live/index.html.heex

@@ -0,0 +1,63 @@
+<div class="flex flex-col space-y-8 justify-center items-center">
+  <h1 class="title text-2xl title-primary-500">
+    Listing Tags
+  </h1>
+  <p class="title text-md text-primary-500">
+    Tags can be added to your containers to help you organize
+  </p>
+  <%= if @tags |> Enum.empty?() do %>
+    <div class="flex flex-col space-y-4 justify-center items-center">
+      <h1 class="title text-xl text-primary-500">
+        No tags
+      </h1>
+      <%= live_patch("Create your first tag!",
+        to: Routes.tag_index_path(@socket, :new),
+        class: "btn btn-primary"
+      ) %>
+    </div>
+  <% else %>
+    <%= live_patch("New Tag",
+      to: Routes.tag_index_path(@socket, :new),
+      class: "btn btn-primary"
+    ) %>
+  <% end %>
+  <div class="flex flex-row flex-wrap">
+    <%= for tag <- @tags do %>
+      <div
+        id={"tag-#{tag.id}"}
+        class="mx-4 my-2 px-8 py-4 space-x-4 flex justify-center items-center
+        border border-gray-400 rounded-lg shadow-lg hover:shadow-md"
+      >
+        <h1
+          class="px-4 py-2 rounded-lg title text-xl"
+          style={"color: #{tag.text_color}; background-color: #{tag.bg_color}"}
+        >
+          <%= tag.name %>
+        </h1>
+        <%= live_patch to: Routes.tag_index_path(@socket, :edit, tag),
+                   class: "text-primary-500 link" do %>
+          <i class="fa-fw fa-lg fas fa-edit">
+          </i>
+        <% end %>
+        <%= link to: "#",
+             class: "text-primary-500 link",
+             phx_click: "delete",
+             phx_value_id: tag.id,
+             data: [confirm: "Are you sure you want to delete #{tag.name}?"] do %>
+          <i class="fa-fw fa-lg fas fa-trash">
+          </i>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>
+<%= if @live_action in [:new, :edit] do %>
+  <%= live_modal(CanneryWeb.TagLive.FormComponent,
+    id: @tag.id || :new,
+    title: @page_title,
+    action: @live_action,
+    tag: @tag,
+    return_to: Routes.tag_index_path(@socket, :index),
+    current_user: @current_user
+  ) %>
+<% end %>

lib/cannery_web/live/tag_live/index.html.leex

@@ -1,62 +0,0 @@
-<div class="flex flex-col space-y-8 justify-center items-center">
-  <h1 class="title text-2xl title-primary-500">
-    Listing Tags
-  </h1>
-
-  <p class="title text-md text-primary-500">
-    Tags can be added to your containers to help you organize
-  </p>
-
-  <%= if @tags |> Enum.empty?() do %>
-    <div class="flex flex-col space-y-4 justify-center items-center">
-      <h1 class="title text-xl text-primary-500">
-        No tags
-      </h1>
-
-      <%= live_patch to: Routes.tag_index_path(@socket, :new),
-        class: "btn btn-primary" do %>
-        Create your first tag!
-      <% end %>
-    </div>
-  <% else %>
-    <%= live_patch to: Routes.tag_index_path(@socket, :new),
-      class: "btn btn-primary" do %>
-      New Tag
-    <% end %>
-  <% end %>
-
-  <div class="flex flex-row flex-wrap space-x-4 space-y-4">
-    <%= for tag <- @tags do %>
-      <div id="tag-<%= tag.id %>"
-        class="px-8 py-4 flex flex-col justify-center items-center space-y-4
-        border border-gray-400 rounded-lg shadow-lg hover:shadow-md">
-
-        <h1 class="px-4 py-2 rounded-lg title text-xl"
-          style="color: <%= tag.text_color %>; background-color: <%= tag.bg_color %>">
-          <%= tag.name %>
-        </h1>
-
-        <div class="flex space-x-4 justify-center items-center">
-          <%= live_patch "Edit", to: Routes.tag_index_path(@socket, :edit, tag),
-            class: "text-primary-500 link" %>
-
-          <%= link "Delete", to: "#",
-            class: "text-primary-500 link",
-            phx_click: "delete",
-            phx_value_id: tag.id,
-            data: [confirm: "Are you sure you want to delete #{tag.name}?"] %>
-        </div>
-      </div>
-    <% end %>
-  </div>
-</div>
-
-<%= if @live_action in [:new, :edit] do %>
-  <%= live_modal CanneryWeb.TagLive.FormComponent,
-    id: @tag.id || :new,
-    title: @page_title,
-    action: @live_action,
-    tag: @tag,
-    return_to: Routes.tag_index_path(@socket, :index),
-    current_user: @current_user %>
-<% end %>