From c7b9be3ee4ad986c37e0486ba00dc5e667c4654f Mon Sep 17 00:00:00 2001
From: Nikos Papadakis <nikos@papadakis.xyz>
Date: Thu, 23 Nov 2023 15:45:33 +0200
Subject: [PATCH] app: new button component

---
 app/lib/prymn_web.ex                          |   2 +
 app/lib/prymn_web/components/button.ex        |  81 +++++++++
 .../prymn_web/components/core_components.ex   |  54 ++----
 app/lib/prymn_web/components/create_app.ex    |   2 +-
 .../components/layouts/auth.html.heex         |   2 +-
 app/lib/prymn_web/components/system_info.ex   |   2 +-
 .../prymn_web/controllers/page_controller.ex  |   6 +-
 app/lib/prymn_web/controllers/page_html.ex    |  22 ++-
 app/lib/prymn_web/live/app_index_live.ex      |   9 +-
 .../live/server_live/index.html.heex          |   2 +-
 .../prymn_web/live/server_live/new_server.ex  |   2 +-
 app/lib/prymn_web/live/server_live/show.ex    | 163 ++++++++++++++++++
 .../prymn_web/live/server_live/show.html.heex | 120 -------------
 .../prymn_web/live/user_confirmation_live.ex  |   8 +-
 .../live/user_forgot_password_live.ex         |   4 +-
 app/lib/prymn_web/live/user_login_live.ex     |   2 +-
 .../prymn_web/live/user_registration_live.ex  |   4 +-
 .../live/user_reset_password_live.ex          |   4 +-
 app/lib/prymn_web/live/user_settings_live.ex  |   4 +-
 app/lib/prymn_web/router.ex                   |   1 +
 20 files changed, 308 insertions(+), 186 deletions(-)
 create mode 100644 app/lib/prymn_web/components/button.ex
 delete mode 100644 app/lib/prymn_web/live/server_live/show.html.heex

diff --git a/app/lib/prymn_web.ex b/app/lib/prymn_web.ex
index 583d4ed..2a5ba60 100644
--- a/app/lib/prymn_web.ex
+++ b/app/lib/prymn_web.ex
@@ -90,6 +90,8 @@ defmodule PrymnWeb do
       # Shortcut for generating JS commands
       alias Phoenix.LiveView.JS
 
+      alias PrymnWeb.Button
+
       # Routes generation with the ~p sigil
       unquote(verified_routes())
     end
diff --git a/app/lib/prymn_web/components/button.ex b/app/lib/prymn_web/components/button.ex
new file mode 100644
index 0000000..a9e9c18
--- /dev/null
+++ b/app/lib/prymn_web/components/button.ex
@@ -0,0 +1,81 @@
+defmodule PrymnWeb.Button do
+  use Phoenix.Component
+
+  @doc """
+  Render a primary variant button.
+
+  ## Examples
+
+      <.primary>Click me</.primary>
+      <.primary href="/a/path" size="sm">Link button</.primary>
+  """
+  attr :size, :string, default: "md", values: ~w(sm md lg)
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(href navigate patch)
+  slot :inner_block, required: true
+
+  def primary(assigns), do: button(assign(assigns, :variant, "primary"))
+
+  @doc """
+  Render a secondary variant button.
+
+  ## Examples
+
+      <.secondary>Click me</.secondary>
+      <.secondary href="/a/path" size="sm">Link button</.secondary>
+  """
+  attr :size, :string, default: "md", values: ~w(sm md lg)
+  attr :class, :string, default: nil
+  attr :rest, :global, include: ~w(href navigate patch)
+  slot :inner_block, required: true
+
+  def secondary(assigns), do: button(assign(assigns, :variant, "secondary"))
+
+  defp button_assigns(assigns) do
+    assign(
+      assigns,
+      :style,
+      [
+        "inline-flex justify-center items-end rounded-2xl shadow transition-colors active:shadow-sm",
+        by_variant(assigns.variant),
+        by_size(assigns.size),
+        assigns[:class]
+      ]
+    )
+  end
+
+  defp button(%{rest: %{href: _}} = assigns), do: link_button(assigns)
+  defp button(%{rest: %{navigate: _}} = assigns), do: link_button(assigns)
+  defp button(%{rest: %{patch: _}} = assigns), do: link_button(assigns)
+
+  defp button(assigns) do
+    assigns = button_assigns(assigns)
+
+    ~H"""
+    <button class={@style} {@rest}>
+      <%= render_slot(@inner_block) %>
+    </button>
+    """
+  end
+
+  defp link_button(assigns) do
+    assigns = button_assigns(assigns)
+
+    ~H"""
+    <Phoenix.Component.link class={@style} {@rest}>
+      <%= render_slot(@inner_block) %>
+    </Phoenix.Component.link>
+    """
+  end
+
+  defp by_size("sm"), do: "text-sm px-3 py-1"
+  defp by_size("md"), do: "text-base px-5 py-2"
+  defp by_size("lg"), do: "text-lg px-7 py-3"
+
+  defp by_variant("primary"),
+    do: "font-medium bg-black text-white hover:bg-slate-800 active:text-white/80"
+
+  defp by_variant("secondary"),
+    do:
+      "font-medium bg-transparent border border-slate-800 text-slate-800 hover:bg-slate-800 hover:text-white active:text-white/80"
+end
diff --git a/app/lib/prymn_web/components/core_components.ex b/app/lib/prymn_web/components/core_components.ex
index 51faa0d..adf7fc3 100644
--- a/app/lib/prymn_web/components/core_components.ex
+++ b/app/lib/prymn_web/components/core_components.ex
@@ -172,7 +172,7 @@ defmodule PrymnWeb.CoreComponents do
         <.input field={@form[:email]} label="Email"/>
         <.input field={@form[:username]} label="Username" />
         <:actions>
-          <.button>Save</.button>
+          <Button.primary>Save</Button.primary>
         </:actions>
       </.simple_form>
   """
@@ -199,48 +199,6 @@ defmodule PrymnWeb.CoreComponents do
     """
   end
 
-  @doc """
-  Renders a button.
-
-  ## Examples
-
-      <.button>Send!</.button>
-      <.button type="link" href="/foo/bar">Navigate</.button>
-      <.button phx-click="go" class="ml-2">Send!</.button>
-  """
-  attr :type, :string, default: nil
-  attr :class, :string, default: nil
-  attr :rest, :global, include: ~w(disabled form name value patch navigate)
-
-  slot :inner_block, required: true
-
-  def button(assigns) do
-    assigns =
-      assign(assigns, :style, [
-        "inline-flex items-center rounded-lg bg-zinc-900 hover:bg-zinc-700 py-2 px-3",
-        "font-semibold leading-6 text-sm text-white active:text-white/80",
-        "phx-submit-loading:opacity-75 phx-click-loading:opacity-75 disabled:cursor-not-allowed",
-        assigns.class
-      ])
-
-    case assigns.type do
-      "link" ->
-        ~H"""
-        <.link class={@style} {@rest}>
-          <%= render_slot(@inner_block) %>
-        </.link>
-        """
-
-      _ ->
-        ~H"""
-        <button type={@type} class={@style} {@rest}>
-          <span><%= render_slot(@inner_block) %></span>
-          <.spinner class="ml-2 hidden w-6 text-white phx-click-loading:inline-block phx-submit-loading:inline-block" />
-        </button>
-        """
-    end
-  end
-
   @doc """
   Renders an input with label and error messages.
 
@@ -601,11 +559,19 @@ defmodule PrymnWeb.CoreComponents do
   Renders a spinner.
   """
   attr :class, :string, default: nil
+  attr :size, :string, default: "sm", values: ~w(sm md lg)
   attr :rest, :global
 
   def spinner(assigns) do
+    assigns =
+      case assigns.size do
+        "sm" -> assign(assigns, :width, "w-6")
+        "md" -> assign(assigns, :width, "w-8")
+        "lg" -> assign(assigns, :width, "w-10")
+      end
+
     ~H"""
-    <div class={["animate-spin", assigns.class]} {@rest}>
+    <div class={["animate-spin h-auto", assigns.width, assigns.class]} {@rest}>
       <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <path
           fill="currentColor"
diff --git a/app/lib/prymn_web/components/create_app.ex b/app/lib/prymn_web/components/create_app.ex
index cfeb448..2b84949 100644
--- a/app/lib/prymn_web/components/create_app.ex
+++ b/app/lib/prymn_web/components/create_app.ex
@@ -71,7 +71,7 @@ defmodule PrymnWeb.CreateApp do
       <.input type="email" name="admin_email" value={nil} label="Admin Email" />
       <.input type="password" name="admin_password" value={nil} label="Admin Password" />
 
-      <.button type="submit">Create</.button>
+      <Button.primary type="submit">Create</Button.primary>
     </.simple_form>
     """
   end
diff --git a/app/lib/prymn_web/components/layouts/auth.html.heex b/app/lib/prymn_web/components/layouts/auth.html.heex
index 01bee1f..c3830f0 100644
--- a/app/lib/prymn_web/components/layouts/auth.html.heex
+++ b/app/lib/prymn_web/components/layouts/auth.html.heex
@@ -1,6 +1,6 @@
 <main class="grid h-screen items-center">
   <.flash_group flash={@flash} />
-  <div class="mb-32">
+  <div class="m-5 pb-64">
     <%= @inner_content %>
   </div>
 </main>
diff --git a/app/lib/prymn_web/components/system_info.ex b/app/lib/prymn_web/components/system_info.ex
index 92d7226..87a11a1 100644
--- a/app/lib/prymn_web/components/system_info.ex
+++ b/app/lib/prymn_web/components/system_info.ex
@@ -23,7 +23,7 @@ defmodule PrymnWeb.SystemInfo do
       <.async_result :let={sys_info} assign={@sys_info}>
         <:loading>
           <div>
-            <.spinner class="h-5 w-5" />
+            <.spinner size="sm" />
             <p class="text-xl">Loading system statistics...</p>
           </div>
         </:loading>
diff --git a/app/lib/prymn_web/controllers/page_controller.ex b/app/lib/prymn_web/controllers/page_controller.ex
index 49200bd..5de66bd 100644
--- a/app/lib/prymn_web/controllers/page_controller.ex
+++ b/app/lib/prymn_web/controllers/page_controller.ex
@@ -1,8 +1,10 @@
 defmodule PrymnWeb.PageController do
   use PrymnWeb, :controller
 
-  def home(conn, _params) do
-    render(conn, :home)
+  def ui(conn, _params) do
+    conn
+    |> put_layout(html: :root)
+    |> render(:ui_dev)
   end
 
   def install(conn, _params) do
diff --git a/app/lib/prymn_web/controllers/page_html.ex b/app/lib/prymn_web/controllers/page_html.ex
index 5d553b4..27e02e5 100644
--- a/app/lib/prymn_web/controllers/page_html.ex
+++ b/app/lib/prymn_web/controllers/page_html.ex
@@ -1,5 +1,25 @@
 defmodule PrymnWeb.PageHTML do
   use PrymnWeb, :html
 
-  embed_templates "page_html/*"
+  def ui_dev(assigns) do
+    ~H"""
+    <div class="m-5">
+      <!-- Buttons -->
+      <div class="flex items-center gap-2">
+        <Button.primary type="button" size="sm">Click me</Button.primary>
+        <Button.primary type="button" size="md">Click me</Button.primary>
+        <Button.primary type="button" size="lg">Click me</Button.primary>
+        <Button.secondary size="sm">Click me</Button.secondary>
+        <Button.secondary size="md">Click me</Button.secondary>
+        <Button.secondary size="lg">Click me</Button.secondary>
+        <Button.primary href="#" size="sm">Link me</Button.primary>
+        <Button.primary href="#" size="md">Link me</Button.primary>
+        <Button.primary href="#" size="lg">Link me</Button.primary>
+        <Button.secondary href="#" size="sm">Link me</Button.secondary>
+        <Button.secondary href="#" size="md">Link me</Button.secondary>
+        <Button.secondary href="#" size="lg">Link me</Button.secondary>
+      </div>
+    </div>
+    """
+  end
 end
diff --git a/app/lib/prymn_web/live/app_index_live.ex b/app/lib/prymn_web/live/app_index_live.ex
index 76ad2d7..8c05669 100644
--- a/app/lib/prymn_web/live/app_index_live.ex
+++ b/app/lib/prymn_web/live/app_index_live.ex
@@ -53,10 +53,11 @@ defmodule PrymnWeb.AppIndexLive do
   defp onboarding(assigns) do
     ~H"""
     <div class="mx-auto max-w-2xl text-center">
-      <h1 class="mb-5 text-3xl font-medium">You have no Apps.</h1>
-      <.button type="link" patch={~p"/apps/new"}>
-        <.icon class="mr-2 h-6 w-6" name="hero-plus" /> Create your first App!
-      </.button>
+      <h1 class="text-3xl font-medium">You have no Apps.</h1>
+      <h2 class="text-xl">Create your first App here!</h2>
+      <Button.primary class="mt-10" size="lg" patch={~p"/apps/new"}>
+        Create a new App
+      </Button.primary>
     </div>
     """
   end
diff --git a/app/lib/prymn_web/live/server_live/index.html.heex b/app/lib/prymn_web/live/server_live/index.html.heex
index afee90f..9ff329d 100644
--- a/app/lib/prymn_web/live/server_live/index.html.heex
+++ b/app/lib/prymn_web/live/server_live/index.html.heex
@@ -5,7 +5,7 @@
       <%= "#{Enum.count(@servers)} servers" %>
     </small>
     <:actions>
-      <.button type="link" patch={~p"/servers/new"}>Connect a Server</.button>
+      <Button.primary patch={~p"/servers/new"}>Connect a Server</Button.primary>
     </:actions>
   </.header>
 
diff --git a/app/lib/prymn_web/live/server_live/new_server.ex b/app/lib/prymn_web/live/server_live/new_server.ex
index 3cf9d7b..96761c6 100644
--- a/app/lib/prymn_web/live/server_live/new_server.ex
+++ b/app/lib/prymn_web/live/server_live/new_server.ex
@@ -32,7 +32,7 @@ defmodule PrymnWeb.ServerLive.NewServer do
         />
         <.provider id="provider" provider={@form[:provider]} />
         <:actions>
-          <.button>Connect</.button>
+          <Button.primary>Connect</Button.primary>
         </:actions>
       </.simple_form>
     </div>
diff --git a/app/lib/prymn_web/live/server_live/show.ex b/app/lib/prymn_web/live/server_live/show.ex
index bcb9f80..378eaf1 100644
--- a/app/lib/prymn_web/live/server_live/show.ex
+++ b/app/lib/prymn_web/live/server_live/show.ex
@@ -1,4 +1,5 @@
 defmodule PrymnWeb.ServerLive.Show do
+  alias DBConnection.App
   use PrymnWeb, :live_view
 
   require Logger
@@ -9,6 +10,144 @@ defmodule PrymnWeb.ServerLive.Show do
     {:ok, socket}
   end
 
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div class="mx-auto max-w-2xl">
+      <.header>
+        <span id="server-name" class="relative flex items-center">
+          <button title="Select a different server">
+            Server <%= @server.name %>
+            <.icon name="hero-chevron-down" />
+          </button>
+          <button class="ml-4" title="Edit server name" phx-click={show_edit_server_name()}>
+            <.icon class="h-3 w-3" name="hero-pencil" />
+          </button>
+          <span
+            role="tooltip"
+            class={[
+              "absolute -left-6 inline-flex h-3 w-3 before:-translate-x-1/2 before:-translate-y-full",
+              "before:-top-2 before:left-1/2 before:absolute before:text-sm before:text-white",
+              "before:font-normal before:content-[attr(data-tip)] before:opacity-0",
+              "hover:before:opacity-100 before:py-1 before:px-2 before:bg-black",
+              "before:rounded before:pointer-events-none before:transition-opacity"
+            ]}
+            data-tip={@health.message}
+          >
+            <%= case @health.message do %>
+              <% "Connected" -> %>
+                <span class="absolute top-0 left-0 h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
+                <span class="h-3 w-3 rounded-full bg-green-500" />
+              <% "Disconnected" -> %>
+                <span class="h-3 w-3 rounded-full bg-red-500" />
+              <% _ -> %>
+                <span class="h-3 w-3 rounded-full bg-yellow-500" />
+            <% end %>
+          </span>
+        </span>
+        <form class="hidden" id="server-name-edit" phx-submit={submit_edit_server_name()}>
+          <input
+            class="border-0 border-b border-gray-500"
+            type="text"
+            name="name"
+            value={@server.name}
+            required
+          />
+          <button type="submit" title="Confirm" class="ml-4">
+            <.icon class="h-4 w-4" name="hero-check" />
+          </button>
+        </form>
+        <:subtitle>
+          <%= @server.public_ip %>
+        </:subtitle>
+        <:actions>
+          <Button.primary size="sm">New App</Button.primary>
+          <Button.secondary size="sm">
+            Quick actions <.icon name="hero-chevron-down" class="ml-1" />
+          </Button.secondary>
+        </:actions>
+      </.header>
+      <div class="my-3 text-sm text-slate-700">
+        <%= for {name, task} <- @health.tasks do %>
+          Background task in progress: <%= name %>
+          <p><%= task.progress %> complete</p>
+        <% end %>
+      </div>
+      <div :if={@server.status == :unregistered} class="my-10">
+        <p class="mb-9">
+          Connect to your server using root credentials and execute the following command:
+        </p>
+        <div class="group inline-flex items-center rounded-lg bg-gray-800 p-4 pl-6 text-white">
+          <code class="flex gap-4">
+            <span class="select-none text-gray-500">#</span>
+            <span class="flex-1">
+              <%= @registration_command %>
+            </span>
+          </code>
+          <button type="button" tabindex="-1">
+            <.icon
+              name="hero-document-duplicate-solid"
+              class="invisible ml-4 animate-bounce text-gray-500 group-hover:visible"
+            />
+          </button>
+        </div>
+      </div>
+      <div :if={@server.status == :registered} class="my-10">
+        <.live_component
+          id={"system_info-#{@server.name}"}
+          module={PrymnWeb.SystemInfo}
+          ip={@server.public_ip}
+        />
+        <section class="mt-4">
+          <form phx-change="change_dry_run">
+            <.input type="checkbox" name="dry_run" value={@dry_run} label="Enable dry-run operations" />
+          </form>
+        </section>
+        <section class="mt-4">
+          <h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">System</h2>
+          <p class="mt-4">
+            Updates: <%= 0 %> pending updates.
+            <Button.primary type="button" class="ml-4" phx-click="system_update">
+              Update now
+            </Button.primary>
+            <p :for={output <- assigns.update_output}>
+              <%= output %>
+            </p>
+          </p>
+        </section>
+        <section class="mt-4">
+          <h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">
+            Backups
+          </h2>
+          <.table id="backups" rows={[%{date: "2023-10-11"}, %{date: "2023-10-10"}]}>
+            <:col :let={backup} label="Date"><%= backup.date %></:col>
+            <:action>
+              <Button.primary>Restore</Button.primary>
+            </:action>
+          </.table>
+        </section>
+        <section class="mt-4">
+          <h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">
+            Manage Services
+          </h2>
+          <.table
+            id="services"
+            rows={[%{name: "mariadb", status: "Active"}, %{name: "php8.0", status: "Disabled"}]}
+          >
+            <:col :let={service} label="Service"><%= service.name %></:col>
+            <:col :let={service} label="Status"><%= service.status %></:col>
+            <:action>
+              <Button.primary>Activate</Button.primary>
+              <Button.secondary>Deactivate</Button.secondary>
+            </:action>
+          </.table>
+        </section>
+      </div>
+      <.back navigate={~p"/servers"}>Back to servers</.back>
+    </div>
+    """
+  end
+
   @impl true
   def handle_params(%{"id" => id}, _, socket) do
     server = Servers.get_server!(id)
@@ -62,8 +201,32 @@ defmodule PrymnWeb.ServerLive.Show do
     {:noreply, socket}
   end
 
+  def handle_event("edit_server_name", %{"name" => name}, socket) do
+    server =
+      socket.assigns.server
+      |> Servers.update_server(%{"name" => name})
+      |> case do
+        {:ok, server} -> server
+        {:error, _} -> raise "Oops"
+      end
+
+    {:noreply, assign(socket, :server, server)}
+  end
+
   def handle_event("change_dry_run", %{"dry_run" => enabled}, socket) do
     enabled = (enabled == "true" && true) || false
     {:noreply, assign(socket, :dry_run, enabled)}
   end
+
+  defp show_edit_server_name() do
+    JS.hide(to: "#server-name")
+    |> JS.show(to: "#server-name-edit")
+    |> JS.focus_first(to: "#server-name-edit")
+  end
+
+  defp submit_edit_server_name() do
+    JS.push("edit_server_name")
+    |> JS.hide()
+    |> JS.show(to: "#server-name", display: "flex")
+  end
 end
diff --git a/app/lib/prymn_web/live/server_live/show.html.heex b/app/lib/prymn_web/live/server_live/show.html.heex
deleted file mode 100644
index c97cb76..0000000
--- a/app/lib/prymn_web/live/server_live/show.html.heex
+++ /dev/null
@@ -1,120 +0,0 @@
-<div class="mx-auto max-w-2xl">
-  <.header>
-    <span class="relative flex items-center">
-      <button>
-        Server <%= @server.name %>
-        <.icon name="hero-chevron-down" />
-      </button>
-      <button class="ml-4">
-        <.icon class="h-3 w-3" name="hero-pencil" />
-      </button>
-      <span
-        role="tooltip"
-        class={[
-          "absolute -left-6 inline-flex h-3 w-3 before:-translate-x-1/2 before:-translate-y-full",
-          "before:-top-2 before:left-1/2 before:absolute before:text-sm before:text-white",
-          "before:font-normal before:content-[attr(data-tip)] before:opacity-0",
-          "hover:before:opacity-100 before:py-1 before:px-2 before:bg-black",
-          "before:rounded before:pointer-events-none before:transition-opacity"
-        ]}
-        data-tip={@health.message}
-      >
-        <%= case @health.message do %>
-          <% "Connected" -> %>
-            <span class="absolute top-0 left-0 h-full w-full animate-ping rounded-full bg-green-400 opacity-75" />
-            <span class="h-3 w-3 rounded-full bg-green-500" />
-          <% "Disconnected" -> %>
-            <span class="h-3 w-3 rounded-full bg-red-500" />
-          <% _ -> %>
-            <span class="h-3 w-3 rounded-full bg-yellow-500" />
-        <% end %>
-      </span>
-    </span>
-    <:subtitle>
-      <%= @server.public_ip %>
-    </:subtitle>
-    <:actions>
-      <.button>+ New App</.button>
-      <.button class="border border-black bg-transparent text-black hover:text-white">
-        Quick actions <.icon name="hero-chevron-down" />
-      </.button>
-    </:actions>
-  </.header>
-  <div class="my-3 text-sm text-slate-700">
-    <%= for {name, task} <- @health.tasks do %>
-      Background task in progress: <%= name %>
-      <p><%= task.progress %> complete</p>
-    <% end %>
-  </div>
-  <div :if={@server.status == :unregistered} class="my-10">
-    <p class="mb-9">
-      Connect to your server using root credentials and execute the following command:
-    </p>
-    <div class="group inline-flex items-center rounded-lg bg-gray-800 p-4 pl-6 text-white">
-      <code class="flex gap-4">
-        <span class="select-none text-gray-500">#</span>
-        <span class="flex-1">
-          <%= @registration_command %>
-        </span>
-      </code>
-      <button type="button" tabindex="-1">
-        <.icon
-          name="hero-document-duplicate-solid"
-          class="invisible ml-4 animate-bounce text-gray-500 group-hover:visible"
-        />
-      </button>
-    </div>
-  </div>
-  <div :if={@server.status == :registered} class="my-10">
-    <.live_component
-      id={"system_info-#{@server.name}"}
-      module={PrymnWeb.SystemInfo}
-      ip={@server.public_ip}
-    />
-    <section class="mt-4">
-      <form phx-change="change_dry_run">
-        <.input type="checkbox" name="dry_run" value={@dry_run} label="Enable dry-run operations" />
-      </form>
-    </section>
-    <section class="mt-4">
-      <h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">System</h2>
-      <p class="mt-4">
-        Updates: <%= 0 %> pending updates.
-        <.button type="button" class="ml-4" phx-click="system_update">
-          Update now
-        </.button>
-        <p :for={output <- assigns.update_output}>
-          <%= output %>
-        </p>
-      </p>
-    </section>
-    <section class="mt-4">
-      <h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">
-        Backups
-      </h2>
-      <.table id="backups" rows={[%{date: "2023-10-11"}, %{date: "2023-10-10"}]}>
-        <:col :let={backup} label="Date"><%= backup.date %></:col>
-        <:action>
-          <.button>Restore</.button>
-        </:action>
-      </.table>
-    </section>
-    <section class="mt-4">
-      <h2 class="border-b border-solid border-gray-500 pb-1 text-2xl font-medium">
-        Manage Services
-      </h2>
-      <.table
-        id="services"
-        rows={[%{name: "mariadb", status: "Active"}, %{name: "php8.0", status: "Disabled"}]}
-      >
-        <:col :let={service} label="Service"><%= service.name %></:col>
-        <:col :let={service} label="Status"><%= service.status %></:col>
-        <:action>
-          <.button>Activate</.button>
-          <.button>Deactivate</.button>
-        </:action>
-      </.table>
-    </section>
-  </div>
-  <.back navigate={~p"/servers"}>Back to servers</.back>
-</div>
diff --git a/app/lib/prymn_web/live/user_confirmation_live.ex b/app/lib/prymn_web/live/user_confirmation_live.ex
index 88a580e..2b449c7 100644
--- a/app/lib/prymn_web/live/user_confirmation_live.ex
+++ b/app/lib/prymn_web/live/user_confirmation_live.ex
@@ -12,7 +12,9 @@ defmodule PrymnWeb.UserConfirmationLive do
       <.simple_form for={@form} id="confirmation_form" phx-submit="confirm_account">
         <.input field={@form[:token]} type="hidden" />
         <:actions>
-          <.button phx-disable-with="Confirming..." class="w-full">Confirm my email</.button>
+          <Button.primary phx-disable-with="Confirming..." class="w-full">
+            Confirm my email
+          </Button.primary>
         </:actions>
       </.simple_form>
     </div>
@@ -31,9 +33,9 @@ defmodule PrymnWeb.UserConfirmationLive do
       <.simple_form for={@form} id="confirmation_form" phx-submit="send_instructions">
         <.input field={@form[:email]} type="email" placeholder="Email" required />
         <:actions>
-          <.button phx-disable-with="Sending..." class="w-full">
+          <Button.primary phx-disable-with="Sending..." class="w-full">
             Resend confirmation instructions
-          </.button>
+          </Button.primary>
         </:actions>
       </.simple_form>
 
diff --git a/app/lib/prymn_web/live/user_forgot_password_live.ex b/app/lib/prymn_web/live/user_forgot_password_live.ex
index 9d0d575..c19349c 100644
--- a/app/lib/prymn_web/live/user_forgot_password_live.ex
+++ b/app/lib/prymn_web/live/user_forgot_password_live.ex
@@ -18,9 +18,9 @@ defmodule PrymnWeb.UserForgotPasswordLive do
       <.simple_form for={@form} id="reset_password_form" phx-submit="send_email">
         <.input field={@form[:email]} type="email" placeholder="Email" required />
         <:actions>
-          <.button phx-disable-with="Sending..." class="w-full">
+          <Button.primary phx-disable-with="Sending..." class="w-full">
             Send password reset instructions
-          </.button>
+          </Button.primary>
         </:actions>
       </.simple_form>
 
diff --git a/app/lib/prymn_web/live/user_login_live.ex b/app/lib/prymn_web/live/user_login_live.ex
index 26a3d93..0693279 100644
--- a/app/lib/prymn_web/live/user_login_live.ex
+++ b/app/lib/prymn_web/live/user_login_live.ex
@@ -37,7 +37,7 @@ defmodule PrymnWeb.UserLoginLive do
           </.link>
         </:actions>
         <:actions>
-          <.button phx-disable-with="Signing in..." class="w-full">Sign in</.button>
+          <Button.primary phx-disable-with="Signing in..." class="w-full">Sign in</Button.primary>
         </:actions>
       </.simple_form>
     </div>
diff --git a/app/lib/prymn_web/live/user_registration_live.ex b/app/lib/prymn_web/live/user_registration_live.ex
index f7c569e..2a202b0 100644
--- a/app/lib/prymn_web/live/user_registration_live.ex
+++ b/app/lib/prymn_web/live/user_registration_live.ex
@@ -36,7 +36,9 @@ defmodule PrymnWeb.UserRegistrationLive do
         <.input field={@form[:password]} type="password" label="Password" phx-debounce required />
 
         <:actions>
-          <.button phx-disable-with="Creating account..." class="w-full">Create an account</.button>
+          <Button.primary phx-disable-with="Creating account..." class="w-full">
+            Create an account
+          </Button.primary>
         </:actions>
       </.simple_form>
     </div>
diff --git a/app/lib/prymn_web/live/user_reset_password_live.ex b/app/lib/prymn_web/live/user_reset_password_live.ex
index efb971e..5133511 100644
--- a/app/lib/prymn_web/live/user_reset_password_live.ex
+++ b/app/lib/prymn_web/live/user_reset_password_live.ex
@@ -28,7 +28,9 @@ defmodule PrymnWeb.UserResetPasswordLive do
           required
         />
         <:actions>
-          <.button phx-disable-with="Resetting..." class="w-full">Reset Password</.button>
+          <Button.primary phx-disable-with="Resetting..." class="w-full">
+            Reset Password
+          </Button.primary>
         </:actions>
       </.simple_form>
 
diff --git a/app/lib/prymn_web/live/user_settings_live.ex b/app/lib/prymn_web/live/user_settings_live.ex
index 1906e89..f9a4a4d 100644
--- a/app/lib/prymn_web/live/user_settings_live.ex
+++ b/app/lib/prymn_web/live/user_settings_live.ex
@@ -30,7 +30,7 @@ defmodule PrymnWeb.UserSettingsLive do
             required
           />
           <:actions>
-            <.button phx-disable-with="Changing...">Change Email</.button>
+            <Button.primary phx-disable-with="Changing...">Change Email</Button.primary>
           </:actions>
         </.simple_form>
       </div>
@@ -66,7 +66,7 @@ defmodule PrymnWeb.UserSettingsLive do
             required
           />
           <:actions>
-            <.button phx-disable-with="Changing...">Change Password</.button>
+            <Button.primary phx-disable-with="Changing...">Change Password</Button.primary>
           </:actions>
         </.simple_form>
       </div>
diff --git a/app/lib/prymn_web/router.ex b/app/lib/prymn_web/router.ex
index ef30200..f0c1a52 100644
--- a/app/lib/prymn_web/router.ex
+++ b/app/lib/prymn_web/router.ex
@@ -86,6 +86,7 @@ defmodule PrymnWeb.Router do
   scope "/dev" do
     pipe_through [:browser, :dev]
 
+    get "/ui", PrymnWeb.PageController, :ui
     live_dashboard "/dashboard", metrics: PrymnWeb.Telemetry
     forward "/mailbox", Plug.Swoosh.MailboxPreview
   end