migrate core components to latest (#1)

* upgrade core components to latest

* adapt styles for dark mode

* restore custom components

* use new components & patterns

* delete icon component

* update tailwind config

* delete phoenix.css

* add ::selection style

* delete obsolete title_bar comp

assets/css/app.css

@@ -3,6 +3,11 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+::selection {
+  background: #4338ca;
+  color: #fff;
+}
+
 @layer base {
   :root {
     --radius: 0.5rem;

assets/tailwind.config.js

@@ -1,32 +1,62 @@
 // See the Tailwind configuration guide for advanced usage
 // https://tailwindcss.com/docs/configuration
 
+const plugin = require("tailwindcss/plugin");
 const colors = require("tailwindcss/colors");
 
+const gray = {
+  50: "#f8f9fc",
+  100: "#f1f2f9",
+  200: "#e1e2ef",
+  300: "#cbcee1",
+  400: "#9497b8",
+  500: "#65688b",
+  600: "#484b6a",
+  700: "#343756",
+  800: "#1d1e3a",
+  900: "#100f29",
+  950: "#050217",
+};
+
 module.exports = {
   content: ["./js/**/*.js", "../lib/*_web.ex", "../lib/*_web/**/*.*ex"],
   theme: {
     extend: {
       colors: {
-        white: colors.white,
+        gray,
         green: colors.emerald,
         purple: colors.indigo,
         yellow: colors.amber,
-        gray: {
-          50: "#f8f9fc",
-          100: "#f1f2f9",
-          200: "#e1e2ef",
-          300: "#cbcee1",
-          400: "#9497b8",
-          500: "#65688b",
-          600: "#484b6a",
-          700: "#343756",
-          800: "#1d1e3a",
-          900: "#100f29",
-          950: "#050217",
-        },
       },
     },
   },
-  plugins: [require("@tailwindcss/forms")],
+  plugins: [
+    require("@tailwindcss/forms"),
+    // Allows prefixing tailwind classes with LiveView classes to add rules
+    // only when LiveView classes are applied, for example:
+    //
+    //     <div class="phx-click-loading:animate-ping">
+    //
+    plugin(({ addVariant }) =>
+      addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])
+    ),
+    plugin(({ addVariant }) =>
+      addVariant("phx-click-loading", [
+        ".phx-click-loading&",
+        ".phx-click-loading &",
+      ])
+    ),
+    plugin(({ addVariant }) =>
+      addVariant("phx-submit-loading", [
+        ".phx-submit-loading&",
+        ".phx-submit-loading &",
+      ])
+    ),
+    plugin(({ addVariant }) =>
+      addVariant("phx-change-loading", [
+        ".phx-change-loading&",
+        ".phx-change-loading &",
+      ])
+    ),
+  ],
 };

lib/algora/accounts/user.ex

@@ -80,8 +80,8 @@ defmodule Algora.Accounts.User do
 
   def settings_changeset(%User{} = user, params) do
     user
-    |> cast(params, [:handle, :channel_tagline])
-    |> validate_required([:handle, :channel_tagline])
+    |> cast(params, [:handle, :name, :channel_tagline])
+    |> validate_required([:handle, :name, :channel_tagline])
     |> validate_handle()
   end
 

lib/algora_web/live/home_live.ex

@@ -7,12 +7,19 @@ defmodule AlgoraWeb.HomeLive do
   def render(assigns) do
     ~H"""
     <div class="lg:mr-[20rem]">
-      <.title_bar :if={!@current_user}>
+      <.header :if={!@current_user}>
         <.logo />
         <:actions>
-          <.button primary patch="/auth/login">Login</.button>
+          <.link
+            navigate="/auth/login"
+            class="flex rounded px-5 py-2.5 overflow-hidden group bg-purple-500 relative hover:bg-gradient-to-r hover:from-purple-500 hover:to-purple-400 text-white hover:ring-2 hover:ring-offset-2 hover:ring-purple-400 transition-all ease-out duration-300"
+          >
+            <span class="absolute right-0 w-8 h-32 -mt-12 transition-all duration-1000 transform translate-x-12 bg-white opacity-10 rotate-12 group-hover:-translate-x-40 ease">
+            </span>
+            <span class="relative font-semibold">Login</span>
+          </.link>
         </:actions>
-      </.title_bar>
+      </.header>
       <.playlist id="playlist" videos={@streams.videos} />
     </div>
     """

lib/algora_web/live/layout_component.ex

@@ -35,14 +35,7 @@ defmodule AlgoraWeb.LayoutComponent do
     ~H"""
     <div class={unless @show, do: "hidden"}>
       <%= if @show do %>
-        <.modal
-          show
-          id={@id}
-          navigate={@show.navigate}
-          patch={@show.patch}
-          on_cancel={@show.on_cancel}
-          on_confirm={@show.on_confirm}
-        >
+        <.modal show id={@id} on_cancel={@show.on_cancel} on_confirm={@show.on_confirm}>
           <:title><%= @show.title %></:title>
           <.live_component module={@show.module} {@show} />
           <:cancel>Cancel</:cancel>

lib/algora_web/live/settings_live.ex

@@ -5,96 +5,34 @@ defmodule AlgoraWeb.SettingsLive do
 
   def render(assigns) do
     ~H"""
-    <.title_bar>
+    <.header>
       Settings
-    </.title_bar>
+      <:subtitle>
+        Update your account details
+      </:subtitle>
+    </.header>
 
-    <div class="max-w-3xl px-4 sm:px-6 lg:px-8 mt-6">
-      <.form
-        :let={f}
-        id="settings-form"
-        for={@changeset}
-        phx-change="validate"
-        phx-submit="save"
-        class="space-y-8 divide-y divide-gray-700"
-      >
-        <div class="space-y-8 divide-y divide-gray-700">
-          <div>
-            <div class="mt-6 flex flex-col gap-y-6">
-              <div class="sm:col-span-4">
-                <label for="handle" class="block text-sm font-medium text-gray-200">
-                  Handle
-                </label>
-                <div class="mt-1 flex rounded-md shadow-sm">
-                  <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-600 bg-gray-900 text-gray-400 sm:text-sm">
-                    <%= URI.parse(AlgoraWeb.Endpoint.url()).host %>/
-                  </span>
-                  <%= text_input(f, :handle,
-                    class:
-                      "bg-gray-950 text-white flex-1 focus:ring-purple-400 focus:border-purple-400 block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-600"
-                  ) %>
-                </div>
-                <.error field={:handle} input_name="user[handle]" errors={f.errors} />
-              </div>
-
-              <div class="sm:col-span-4">
-                <label for="handle" class="block text-sm font-medium text-gray-200">
-                  Email
-                </label>
-                <div class="mt-1 flex rounded-md shadow-sm">
-                  <%= text_input(f, :email,
-                    disabled: true,
-                    class:
-                      "bg-gray-950 text-white flex-1 focus:ring-purple-400 focus:border-purple-400 block w-full min-w-0 rounded-md sm:text-sm border-gray-600 bg-gray-900"
-                  ) %>
-                </div>
-              </div>
-
-              <div class="sm:col-span-4">
-                <label for="about" class="block text-sm font-medium text-gray-200">
-                  Stream title
-                </label>
-                <div class="mt-1">
-                  <%= text_input(f, :channel_tagline,
-                    class:
-                      "bg-gray-950 text-white flex-1 focus:ring-purple-400 focus:border-purple-400 block w-full min-w-0 rounded-md sm:text-sm border-gray-600"
-                  ) %>
-                  <.error
-                    field={:channel_tagline}
-                    input_name="user[channel_tagline]"
-                    errors={f.errors}
-                  />
-                </div>
-              </div>
-
-              <div class="sm:col-span-4">
-                <label for="about" class="block text-sm font-medium text-gray-200">
-                  Stream URL
-                </label>
-                <div class="mt-1">
-                  <div class="py-2 border px-3 border-1 bg-gray-950 text-white flex-1 focus:ring-purple-400 focus:border-purple-400 block w-full min-w-0 rounded-md sm:text-sm border-gray-600">
-                    <%= "rtmp://#{URI.parse(AlgoraWeb.Endpoint.url()).host}:#{Algora.config([:rtmp_port])}/#{@current_user.stream_key}" %>
-                  </div>
-                </div>
-                <p class="mt-2 text-sm text-gray-400">
-                  <%= "Paste into OBS Studio > File > Settings > Stream > Server" %>
-                </p>
-              </div>
-            </div>
-          </div>
+    <div class="max-w-3xl px-4 sm:px-6 lg:px-8 mt-4">
+      <.simple_form for={@form} phx-change="validate" phx-submit="save">
+        <.input field={@form[:handle]} label="Handle" />
+        <.input field={@form[:name]} label="Name" />
+        <.input label="Email" name="email" value={@current_user.email} disabled />
+        <.input field={@form[:channel_tagline]} label="Stream tagline" />
+        <div>
+          <.input
+            label="Stream URL"
+            name="stream_url"
+            value={"rtmp://#{URI.parse(AlgoraWeb.Endpoint.url()).host}:#{Algora.config([:rtmp_port])}/#{@current_user.stream_key}"}
+            disabled
+          />
+          <p class="mt-2 text-sm text-gray-400">
+            <%= "Paste into OBS Studio > File > Settings > Stream > Server" %>
+          </p>
         </div>
-
-        <div class="pt-5">
-          <div class="flex justify-end">
-            <button
-              type="submit"
-              class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-400"
-            >
-              Save
-            </button>
-          </div>
-        </div>
-      </.form>
+        <:actions>
+          <.button>Save</.button>
+        </:actions>
+      </.simple_form>
     </div>
     """
   end
@@ -110,12 +48,20 @@ defmodule AlgoraWeb.SettingsLive do
       end
 
     changeset = Accounts.change_settings(current_user, %{})
-    {:ok, assign(socket, current_user: current_user, changeset: changeset)}
+
+    {:ok,
+     socket
+     |> assign(current_user: current_user)
+     |> assign_form(changeset)}
   end
 
   def handle_event("validate", %{"user" => params}, socket) do
-    changeset = Accounts.change_settings(socket.assigns.current_user, params)
-    {:noreply, assign(socket, changeset: Map.put(changeset, :action, :validate))}
+    changeset =
+      socket.assigns.current_user
+      |> Accounts.change_settings(params)
+      |> Map.put(:action, :validate)
+
+    {:noreply, assign_form(socket, changeset)}
   end
 
   def handle_event("save", %{"user" => params}, socket) do
@@ -124,10 +70,10 @@ defmodule AlgoraWeb.SettingsLive do
         {:noreply,
          socket
          |> assign(current_user: user)
-         |> put_flash(:info, "settings updated!")}
+         |> put_flash(:info, "Settings updated!")}
 
       {:error, changeset} ->
-        {:noreply, assign(socket, changeset: changeset)}
+        {:noreply, assign_form(socket, changeset)}
     end
   end
 
@@ -138,4 +84,8 @@ defmodule AlgoraWeb.SettingsLive do
   defp apply_action(socket, :edit, _params) do
     socket |> assign(:page_title, "Settings")
   end
+
+  defp assign_form(socket, %Ecto.Changeset{} = changeset) do
+    assign(socket, :form, to_form(changeset))
+  end
 end