style registration pages

assets/css/components.scss

@@ -1,5 +1,41 @@
 @layer components {
   .input {
-    @apply rounded-lg px-4 py-2;
+    @apply rounded-lg px-4 py-2 border;
+    @apply shadow-sm focus:shadow-lg;
+    @apply transition-all duration-300 ease-in-out;
+  }
+  
+  .input-primary {
+    @apply border-primary-500 hover:border-primary-600 active:border-primary-600;
+    @apply text-black;
+  }
+  
+  .checkbox {
+    -ms-transform: scale(1.5);
+    -moz-transform: scale(1.5);
+    -webkit-transform: scale(1.5);
+    -o-transform: scale(1.5);
+    transform: scale(1.5);
+    padding: 10px;
+  }
+  
+  .title {
+    @apply leading-5 tracking-wide;
+  }
+  
+  .btn {
+    @apply focus:outline-none px-4 py-2 rounded-lg;
+    @apply shadow-sm focus:shadow-lg;
+    @apply transition-all duration-300 ease-in-out;
+  }
+  
+  .btn-primary {
+    @apply bg-primary-500 focus:bg-primary-600 active:bg-primary-600;
+    @apply bg-primary-500 focus:bg-primary-600 active:bg-primary-600;
+    @apply text-white;
+  }
+  
+  .hr {
+    @apply border border-primary-500 w-full max-w-2xl;
   }
 }

assets/tailwind.config.js

@@ -25,7 +25,10 @@ module.exports = {
     extend: {},
   },
   variants: {
-    extend: {},
+    extend: {
+      backgroundColor: ['active'],
+      borderColor: ['active'],
+    },
   },
   plugins: [],
 }

lib/lokal_web/live/component/topbar.ex

@@ -1,20 +1,37 @@
 defmodule LokalWeb.Live.Component.Topbar do
   use LokalWeb, :live_component
   
-  def mount(socket), do: {:ok, socket |> assign(results: [])}
+  alias LokalWeb.{PageLive}
+  
+  def mount(socket) do
+    {:ok, socket |> assign(results: [], title_content: nil)}
+  end
+  
+  def update(assigns, socket) do
+    {:ok, socket |> assign(assigns)}
+  end
 
   def render(assigns) do
     ~L"""
-    <header class="mb-4 px-8 py-4 w-full bg-primary-400">
+    <header class="mb-8 px-8 py-4 w-full bg-primary-400">
       <nav role="navigation">
         <div class="flex flex-row justify-between items-center space-x-4">
-          <h1 class="leading-5 text-xl text-white">Lokal</h1>
+          <div class="flex flex-row justify-start items-center space-x-2">
+            <%= link to: Routes.page_path(LokalWeb.Endpoint, :index) do %>
+              <h1 class="leading-5 text-xl text-white hover:underline">Lokal</h1>
+            <% end %>
+            
+            <%= if @title_content do %>
+              <span>|</span>
+              <%= @title_content %>
+            <% end %>
+          </div>
         
           <ul class="flex flex-row flex-wrap justify-center items-center
             text-lg space-x-4 text-lg text-white">
             <%# search %>
             <form phx-change="suggest" phx-submit="search">
-              <input type="text" name="q" class="input"
+              <input type="text" name="q" class="input input-primary"
                 placeholder="Search" list="results" autocomplete="off"/>
               <datalist id="results">
                 <%= for {app, _vsn} <- @results do %>

lib/lokal_web/live/page_live.html.leex

@@ -1,5 +1,9 @@
-<div class="flex flex-col justify-center items-center text-center">
+<div class="flex flex-col justify-center items-center text-center space-y-4">
-  <p>
+  <h1 class="title text-primary-500 text-2xl">
-    Welcome to Lokal!
+    Welcome to Lokal
+  </h1>
+  
+  <p class="title  text-primary-500 text-lg">
+    Shop from your community
   </p>
 </div>

lib/lokal_web/templates/layout/app.html.eex

@@ -1,11 +1,19 @@
 <main role="main" class="container min-h-full min-w-full">
+  <header class="mb-4 px-8 py-4 w-full bg-primary-400">
+    <%= render "topbar.html", assigns %>
+  
+    <%= if get_flash(@conn, :info) do %>
       <p class="alert alert-info" role="alert">
         <%= get_flash(@conn, :info) %>
       </p>
+    <% end %>
     
+    <%= if get_flash(@conn, :error) do %>
       <p class="alert alert-danger" role="alert">
         <%= get_flash(@conn, :error) %>
       </p>
+    <% end %>
+  </header>
   
   <%= @inner_content %>
 </main>

lib/lokal_web/templates/layout/topbar.html.eex

@@ -0,0 +1,40 @@
+<nav role="navigation">
+  <div class="flex flex-row justify-between items-center space-x-4">
+    <%= link to: Routes.page_path(LokalWeb.Endpoint, :index) do %>
+      <h1 class="leading-5 text-xl text-white hover:underline">Lokal</h1>
+    <% end %>
+  
+    <ul class="flex flex-row flex-wrap justify-center items-center
+      space-x-4 text-lg text-white">
+      <%# user settings %>
+      <%= if assigns |> Map.has_key?(:current_user) && @current_user do %>
+        <li>
+          <%= @current_user.email %></li>
+        <li>
+          <%= link "Settings", class: "hover:underline",
+            to: Routes.user_settings_path(LokalWeb.Endpoint, :edit) %>
+        </li>
+        <li>
+          <%= link "Log out", class: "hover:underline",
+            to: Routes.user_session_path(LokalWeb.Endpoint, :delete), method: :delete %>
+        </li>
+
+        <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
+          <li>
+            <%= link "LiveDashboard", class: "hover:underline",
+              to: Routes.live_dashboard_path(LokalWeb.Endpoint, :home) %>
+          </li>
+        <% end %>
+      <% else %>
+        <li>
+          <%= link "Register", class: "hover:underline",
+            to: Routes.user_registration_path(LokalWeb.Endpoint, :new) %>
+        </li>
+        <li>
+          <%= link "Log in", class: "hover:underline",
+            to: Routes.user_session_path(LokalWeb.Endpoint, :new) %>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+</nav>

lib/lokal_web/templates/page/index.html.eex

@@ -1,4 +0,0 @@
-<div class="flex flex-col space-y-8 text-center">
-  <h1 class="">Welcome to Lokal</h1>
-  <p>Shop from your community</p>
-</div>

lib/lokal_web/templates/user_confirmation/new.html.eex

@@ -1,15 +1,24 @@
-<h1>Resend confirmation instructions</h1>
+<div class="flex flex-col justify-center items-center space-y-4">
+  <h1 class="title text-primary-500 text-xl">
+    Resend confirmation instructions
+  </h1>
 
-<%= form_for :user, Routes.user_confirmation_path(@conn, :create), fn f -> %>
+  <%= form_for :user, Routes.user_confirmation_path(@conn, :create),
-  <%= label f, :email %>
+    [class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
-  <%= email_input f, :email, required: true %>
+    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-
+      <%= label f, :email, class: "title text-lg text-primary-500" %>
-  <div>
+      <%= email_input f, :email, required: true, class: "input input-primary col-span-2" %>
-    <%= submit "Resend confirmation instructions" %>
     </div>
-<% end %>
 
-<p>
+    <%= submit "Resend confirmation instructions", class: "btn btn-primary" %>
-  <%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
+    
-  <%= link "Log in", to: Routes.user_session_path(@conn, :new) %>
+    <hr class="hr">
-</p>
+    
+    <div class="flex flex-row justify-center items-center space-x-4">
+      <%= link "Register", to: Routes.user_registration_path(@conn, :new),
+        class: "btn btn-primary" %>
+      <%= link "Log in", to: Routes.user_session_path(@conn, :new),
+        class: "btn btn-primary" %>
+    </div>
+  <% end %>
+</div>

lib/lokal_web/templates/user_registration/new.html.eex

@@ -1,26 +1,37 @@
-<h1>Register</h1>
+<div class="flex flex-col justify-center items-center space-y-4">
+  <h1 class="title text-primary-500 text-xl">
+    Register
+  </h1>
 
-<%= form_for @changeset, Routes.user_registration_path(@conn, :create), fn f -> %>
+  <%= form_for @changeset, Routes.user_registration_path(@conn, :create),
+    [class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
     <%= if @changeset.action do %>
       <div class="alert alert-danger">
         <p>Oops, something went wrong! Please check the errors below.</p>
       </div>
     <% end %>
 
-  <%= label f, :email %>
+    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-  <%= email_input f, :email, required: true %>
+      <%= label f, :email, class: "title text-lg text-primary-500" %>
+      <%= email_input f, :email, required: true, class: "input input-primary col-span-2" %>
+    </div>
     <%= error_tag f, :email %>
 
-  <%= label f, :password %>
+    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-  <%= password_input f, :password, required: true %>
+      <%= label f, :password, class: "title text-lg text-primary-500" %>
+      <%= password_input f, :password, required: true, class: "input input-primary col-span-2" %>
+    </div>
     <%= error_tag f, :password %>
 
-  <div>
+    <%= submit "Register", class: "btn btn-primary" %>
-    <%= submit "Register" %>
-  </div>
-<% end %>
     
-<p>
+    <hr class="hr">
-  <%= link "Log in", to: Routes.user_session_path(@conn, :new) %> |
+
-  <%= link "Forgot your password?", to: Routes.user_reset_password_path(@conn, :new) %>
+    <div class="flex flex-row justify-center items-center space-x-4">
-</p>
+      <%= link "Log in", to: Routes.user_session_path(@conn, :new),
+        class: "btn btn-primary" %>
+      <%= link "Forgot your password?", to: Routes.user_reset_password_path(@conn, :new),
+        class: "btn btn-primary" %>
+    </div>
+  <% end %>
+</div>

lib/lokal_web/templates/user_reset_password/edit.html.eex

@@ -1,26 +1,37 @@
-<h1>Reset password</h1>
+<div class="flex flex-col justify-center items-center space-y-4">
+  <h1 class="title text-primary-500 text-xl">
+    Reset password
+  </h1>
 
-<%= form_for @changeset, Routes.user_reset_password_path(@conn, :update, @token), fn f -> %>
+  <%= form_for @changeset, Routes.user_reset_password_path(@conn, :update, @token),
+    [class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
     <%= if @changeset.action do %>
       <div class="alert alert-danger">
         <p>Oops, something went wrong! Please check the errors below.</p>
       </div>
     <% end %>
 
-  <%= label f, :password, "New password" %>
+    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-  <%= password_input f, :password, required: true %>
+      <%= label f, :password, "New password", class: "title text-lg text-primary-500" %>
+      <%= password_input f, :password, required: true, class: "input input-primary col-span-2" %>
+    </div>
     <%= error_tag f, :password %>
 
-  <%= label f, :password_confirmation, "Confirm new password" %>
+    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-  <%= password_input f, :password_confirmation, required: true %>
+      <%= label f, :password_confirmation, "Confirm new password", class: "title text-lg text-primary-500" %>
+      <%= password_input f, :password_confirmation, required: true, class: "input input-primary col-span-2" %>
+    </div>
     <%= error_tag f, :password_confirmation %>
 
-  <div>
+    <%= submit "Reset password", class: "btn btn-primary" %>
-    <%= submit "Reset password" %>
-  </div>
-<% end %>
     
-<p>
+    <hr class="hr">
-  <%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
+    
-  <%= link "Log in", to: Routes.user_session_path(@conn, :new) %>
+    <div class="flex flex-row justify-center items-center space-x-4">
-</p>
+      <%= link "Register", to: Routes.user_registration_path(@conn, :new),
+        class: "btn btn-primary" %>
+      <%= link "Log in", to: Routes.user_session_path(@conn, :new),
+        class: "btn btn-primary" %>
+    </div>
+  <% end %>
+</div>

lib/lokal_web/templates/user_reset_password/new.html.eex

@@ -1,15 +1,25 @@
-<h1>Forgot your password?</h1>
+<div class="flex flex-col justify-center items-center space-y-4">
+  <h1 class="title text-primary-500 text-xl">
+    Forgot your password?
+  </h1>
 
-<%= form_for :user, Routes.user_reset_password_path(@conn, :create), fn f -> %>
+  <%= form_for :user, Routes.user_reset_password_path(@conn, :create),
-  <%= label f, :email %>
+    [class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
-  <%= email_input f, :email, required: true %>
     
-  <div>
+    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-    <%= submit "Send instructions to reset password" %>
+      <%= label f, :email, class: "title text-lg text-primary-500" %>
+      <%= email_input f, :email, required: true, class: "input input-primary col-span-2" %>
     </div>
-<% end %>
 
-<p>
+    <%= submit "Send instructions to reset password", class: "btn btn-primary" %>
-  <%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
+    
-  <%= link "Log in", to: Routes.user_session_path(@conn, :new) %>
+    <hr class="hr">
-</p>
+    
+    <div class="flex flex-row justify-center items-center space-x-4">
+      <%= link "Register", to: Routes.user_registration_path(@conn, :new),
+        class: "btn btn-primary" %>
+      <%= link "Log in", to: Routes.user_session_path(@conn, :new),
+        class: "btn btn-primary" %>
+    </div>
+  <% end %>
+</div>

lib/lokal_web/templates/user_session/new.html.eex

@@ -1,27 +1,41 @@
-<h1>Log in</h1>
+<div class="flex flex-col justify-center items-center space-y-4">
+  <h1 class="title text-primary-500 text-xl">
+    Log in
+  </h1>
 
-<%= form_for @conn, Routes.user_session_path(@conn, :create), [as: :user], fn f -> %>
+  <%= form_for @conn, Routes.user_session_path(@conn, :create), [as: :user,
+    class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
     <%= if @error_message do %>
       <div class="alert alert-danger">
         <p><%= @error_message %></p>
       </div>
     <% end %>
 
-  <%= label f, :email %>
+    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-  <%= email_input f, :email, required: true %>
+      <%= label f, :email, class: "title text-lg text-primary-500" %>
-
+      <%= email_input f, :email, required: true, class: "input input-primary col-span-2" %>
-  <%= label f, :password %>
-  <%= password_input f, :password, required: true %>
-
-  <%= label f, :remember_me, "Keep me logged in for 60 days" %>
-  <%= checkbox f, :remember_me %>
-
-  <div>
-    <%= submit "Log in" %>
     </div>
-<% end %>
 
-<p>
+    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-  <%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
+      <%= label f, :password, class: "title text-lg text-primary-500" %>
-  <%= link "Forgot your password?", to: Routes.user_reset_password_path(@conn, :new) %>
+      <%= password_input f, :password, required: true, class: "input input-primary col-span-2" %>
-</p>
+    </div>
+
+    <div class="flex flex-row justify-center items-center text-center space-x-4">
+      <%= label f, :remember_me, "Keep me logged in for 60 days",
+        class: "title text-lg text-primary-500" %>
+      <%= checkbox f, :remember_me, class: "checkbox" %>
+    </div>
+
+    <%= submit "Log in", class: "btn btn-primary" %>
+    
+    <hr class="hr">
+    
+    <div class="flex flex-row justify-center items-center space-x-4">
+      <%= link "Register", to: Routes.user_registration_path(@conn, :new),
+        class: "btn btn-primary" %>
+      <%= link "Forgot your password?", to: Routes.user_reset_password_path(@conn, :new),
+        class: "btn btn-primary" %>
+    </div>
+  <% end %>
+</div>

lib/lokal_web/templates/user_settings/edit.html.eex

@@ -1,8 +1,14 @@
-<h1>Settings</h1>
+<div class="flex flex-col justify-center items-center space-y-4">
+  <h1 class="title text-primary-500 text-xl">
+    Settings
+  </h1>
 
-<h3>Change email</h3>
+  <h3 class="title text-primary-500 text-lg">
+    Change email
+  </h3>
 
-<%= form_for @email_changeset, Routes.user_settings_path(@conn, :update), fn f -> %>
+  <%= form_for @email_changeset, Routes.user_settings_path(@conn, :update),
+    [class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
     <%= if @email_changeset.action do %>
       <div class="alert alert-danger">
         <p>Oops, something went wrong! Please check the errors below.</p>
@@ -11,22 +17,31 @@
 
     <%= hidden_input f, :action, name: "action", value: "update_email" %>
 
-  <%= label f, :email %>
+    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-  <%= email_input f, :email, required: true %>
+      <%= label f, :email, class: "title text-lg text-primary-500" %>
+      <%= email_input f, :email, required: true, class: "input input-primary col-span-2" %>
+    </div>
     <%= error_tag f, :email %>
     
-  <%= label f, :current_password, for: "current_password_for_email" %>
+    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-  <%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_email" %>
+      <%= label f, :current_password, for: "current_password_for_email", class: "title text-lg text-primary-500" %>
+      <%= password_input f, :current_password,
+        required: true,
+        name: "current_password",
+        id: "current_password_for_email",
+        class: "input input-primary col-span-2" %>
+    </div>
     <%= error_tag f, :current_password %>
 
-  <div>
+    <%= submit "Change email", class: "btn btn-primary" %>
-    <%= submit "Change email" %>
+  <% end %>
-  </div>
-<% end %>
 
-<h3>Change password</h3>
+  <h3 class="title text-primary-500 text-lg">
+    Change password
+  </h3>
 
-<%= form_for @password_changeset, Routes.user_settings_path(@conn, :update), fn f -> %>
+  <%= form_for @password_changeset, Routes.user_settings_path(@conn, :update),
+    [class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
     <%= if @password_changeset.action do %>
       <div class="alert alert-danger">
         <p>Oops, something went wrong! Please check the errors below.</p>
@@ -35,19 +50,36 @@
 
     <%= hidden_input f, :action, name: "action", value: "update_password" %>
 
-  <%= label f, :password, "New password" %>
+    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-  <%= password_input f, :password, required: true %>
+      <%= label f, :password, "New password",
+        class: "title text-lg text-primary-500" %>
+      <%= password_input f, :password,
+        required: true,
+        class: "input input-primary col-span-2" %>
+    </div>
     <%= error_tag f, :password %>
     
-  <%= label f, :password_confirmation, "Confirm new password" %>
+    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-  <%= password_input f, :password_confirmation, required: true %>
+      <%= label f, :password_confirmation, "Confirm new password",
+        class: "title text-lg text-primary-500" %>
+      <%= password_input f, :password_confirmation,
+        required: true,
+        class: "input input-primary col-span-2" %>
+    </div>
     <%= error_tag f, :password_confirmation %>
     
-  <%= label f, :current_password, for: "current_password_for_password" %>
+    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-  <%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_password" %>
+      <%= label f, :current_password,
+        for: "current_password_for_password",
+        class: "title text-lg text-primary-500" %>
+      <%= password_input f, :current_password,
+        required: true,
+        name: "current_password",
+        id: "current_password_for_password",
+        class: "input input-primary col-span-2" %>
+    </div>
     <%= error_tag f, :current_password %>
 
-  <div>
+    <%= submit "Change password", class: "btn btn-primary" %>
-    <%= submit "Change password" %>
+  <% end %>
-  </div>
+</div>
-<% end %>