fix layout

2022-02-25 21:39:22 -05:00 · 2022-02-25 21:39:22 -05:00 · c3f5744ad6
commit c3f5744ad6
parent 95a339fe02
13 changed files with 436 additions and 231 deletions
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@ -10,6 +10,30 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";

@import "components";

+/* fix firefox scrollbars */
+* {
+  scrollbar-width: auto;
+  scrollbar-color: rgba(161, 161, 170, var(--tw-bg-opacity)) white;
+}
+
+.fa-fade {
+  animation: pulse 1s ease-in-out 0s infinite alternate;
+}
+
+@keyframes pulse {
+  0% { scale: 0.95; opacity: 0.5; }
+  100% { scale: 1.0; opacity: 1; }
+}
+
+.phx-connected > #disconnect, #loading {
+  opacity: 0 !important;
+  pointer-events: none;
+}
+
+.phx-loading:not(.phx-error) > #loading, .phx-error > #disconnect {
+  opacity: 0.95 !important;
+}
+
 /* Alerts and form errors used by phx.new */
 .alert {
  padding: 15px;
--- a/assets/css/components.scss
+++ b/assets/css/components.scss
@ -1,15 +1,15 @@
@layer components {
  .input {
-    @apply rounded-lg px-4 py-2 border;
+    @apply rounded-lg px-4 py-2 border focus:outline-none;
    @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);
@ -17,25 +17,41 @@
    -o-transform: scale(1.5);
    transform: scale(1.5);
    padding: 10px;
+    margin: 1em auto;
  }
-  
+
  .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 border-primary-500 focus:border-primary-600 active:border-primary-600;
    @apply text-white;
  }
-  
-  .hr {
-    @apply border border-primary-500 w-full max-w-2xl;
+
+  .btn-alert {
+    @apply bg-red-600 focus:bg-red-700 active:bg-red-800;
+    @apply border-red-600 focus:border-red-700 active:border-red-800;
+    @apply text-white;
  }
-}
+
+  .hr {
+    @apply border border-primary-300 w-full max-w-2xl;
+  }
+
+  .hr-light {
+    @apply border border-white w-full max-w-2xl;
+  }
+
+  .link {
+    @apply hover:underline;
+    @apply transition-colors duration-500 ease-in-out;
+  }
+}
--- a/lib/lokal_web/templates/error/error.html.heex
+++ b/lib/lokal_web/templates/error/error.html.heex
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" class="m-0 p-0 w-full h-full">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>
+      <%= dgettext("errors", "Error") %>| Lokal
+    </title>
+    <link rel="stylesheet" href="/css/app.css" />
+    <script defer type="text/javascript" src="/js/app.js"></script>
+  </head>
+  <body class="pb-8 m-0 p-0 w-full h-full">
+    <header>
+      <.topbar current_user={assigns[:current_user]}></.topbar>
+    </header>
+
+    <div class="pb-8 w-full flex flex-col justify-center items-center text-center">
+      <div
+        class="p-8 sm:p-16 w-full flex flex-col justify-center items-center space-y-4 max-w-3xl"
+      >
+        <h1 class="title text-primary-600 text-3xl">
+          <%= @error_string %>
+        </h1>
+
+        <hr class="w-full hr" />
+
+        <a href={Routes.live_path(Endpoint, PageLive)} class="link title text-primary-600 text-lg">
+          <%= dgettext("errors", "Go back home") %>
+        </a>
+      </div>
+    </div>
+  </body>
+</html>
--- a/lib/lokal_web/templates/layout/app.html.heex
+++ b/lib/lokal_web/templates/layout/app.html.heex
@ -1,17 +1,22 @@
-<main class="m-0 p-0 w-full h-full">
+<main role="main" class="min-h-full min-w-full">
  <header>
-    <.topbar current_user={assigns[:current_user]}>
-    </.topbar>
-    <%= 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 %>
+    <.topbar current_user={assigns[:current_user]}></.topbar>
+
+    <div class="mx-8 my-2 flex flex-col space-y-4 text-center">
+      <%= 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 %>
+    </div>
  </header>
-  <%= @inner_content %>
+
+  <div class="mx-4 sm:mx-8 md:mx-16">
+    <%= @inner_content %>
+  </div>
 </main>
--- a/lib/lokal_web/templates/layout/live.html.heex
+++ b/lib/lokal_web/templates/layout/live.html.heex
@ -1,17 +1,54 @@
-<main class="m-0 p-0 w-full h-full">
+<main class="mb-8 min-w-full">
  <header>
-    <.topbar current_user={assigns[:current_user]}>
-    </.topbar>
-    <%= if @flash && @flash |> Map.has_key?(:info) do %>
-      <p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info">
-        <%= live_flash(@flash, :info) %>
-      </p>
-    <% end %>
-    <%= if @flash && @flash |> Map.has_key?(:error) do %>
-      <p class="alert alert-danger" role="alert" phx-click="lv:clear-flash" phx-value-key="error">
-        <%= live_flash(@flash, :error) %>
-      </p>
-    <% end %>
+    <.topbar current_user={assigns[:current_user]}></.topbar>
+
+    <div class="mx-8 my-2 flex flex-col space-y-4 text-center">
+      <%= if @flash && @flash |> Map.has_key?("info") do %>
+        <p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info">
+          <%= live_flash(@flash, "info") %>
+        </p>
+      <% end %>
+
+      <%= if @flash && @flash |> Map.has_key?("error") do %>
+        <p
+          class="alert alert-danger"
+          role="alert"
+          phx-click="lv:clear-flash"
+          phx-value-key="error"
+        >
+          <%= live_flash(@flash, "error") %>
+        </p>
+      <% end %>
+    </div>
  </header>
-  <%= @inner_content %>
+
+  <div class="mx-4 sm:mx-8 md:mx-16">
+    <%= @inner_content %>
+  </div>
 </main>
+
+<div
+  id="loading"
+  class="fixed opacity-0 top-0 left-0 w-screen h-screen bg-white z-50
+  flex flex-col justify-center items-center space-y-4
+  transition-opacity ease-in-out duration-500"
+>
+  <h1 class="title text-2xl title-primary-500">
+    <%= gettext("Loading...") %>
+  </h1>
+
+  <i class="fas fa-3x fa-spin fa-cog"></i>
+</div>
+
+<div
+  id="disconnect"
+  class="fixed opacity-0 top-0 left-0 w-screen h-screen bg-white z-50
+  flex flex-col justify-center items-center space-y-4
+  transition-opacity ease-in-out duration-500"
+>
+  <h1 class="title text-2xl title-primary-500">
+    <%= gettext("Reconnecting...") %>
+  </h1>
+
+  <i class="fas fa-3x fa-fade fa-satellite-dish"></i>
+</div>
--- a/lib/lokal_web/templates/layout/root.html.heex
+++ b/lib/lokal_web/templates/layout/root.html.heex
@ -5,7 +5,8 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <%= csrf_meta_tag() %>
-    <%= live_title_tag(assigns[:page_title] || "Lokal", suffix: "") %>
+    <%= if(assigns |> Map.has_key?(:page_title), do: @page_title, else: "Lokal")
+    |> live_title_tag(suffix: " | Lokal") %>
    <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/css/app.css")} />
    <script
      defer
@ -15,6 +16,7 @@
    >
    </script>
  </head>
+
  <body class="m-0 p-0 w-full h-full">
    <%= @inner_content %>
  </body>
--- a/lib/lokal_web/templates/user_confirmation/new.html.heex
+++ b/lib/lokal_web/templates/user_confirmation/new.html.heex
@ -1,26 +1,35 @@
-<div class="flex flex-col justify-center items-center space-y-4">
-  <h1 class="title text-primary-500 text-xl">
-    Resend confirmation instructions
+<div class="mx-auto mb-8 max-w-2xl flex flex-col justify-center items-center space-y-4">
+  <h1 class="title text-primary-600 text-xl">
+    <%= dgettext("actions", "Resend confirmation instructions") %>
  </h1>
+
  <%= form_for :user,
           Routes.user_confirmation_path(@conn, :create),
-           [class: "flex flex-col justify-center items-center space-y-4"],
+           [
+             class:
+               "flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+           ],
           fn f -> %>
-    <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") %>
-      <%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
-    </div>
-    <%= submit("Resend confirmation instructions", 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("Log in",
-          to: Routes.user_session_path(@conn, :new),
-          class: "btn btn-primary"
-        ) %>
-      </div>
+    <%= label(f, :email, class: "title text-lg text-primary-600") %>
+    <%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
+
+    <%= submit(dgettext("actions", "Resend confirmation instructions"),
+      class: "mx-auto btn btn-primary col-span-3"
+    ) %>
+  <% end %>
+
+  <hr class="hr" />
+
+  <div class="flex flex-row justify-center items-center space-x-4">
+    <%= if Accounts.allow_registration?() do %>
+      <%= link(dgettext("actions", "Register"),
+        to: Routes.user_registration_path(@conn, :new),
+        class: "btn btn-primary"
+      ) %>
    <% end %>
+    <%= link(dgettext("actions", "Log in"),
+      to: Routes.user_session_path(@conn, :new),
+      class: "btn btn-primary"
+    ) %>
  </div>
+</div>
--- a/lib/lokal_web/templates/user_registration/new.html.heex
+++ b/lib/lokal_web/templates/user_registration/new.html.heex
@ -1,37 +1,48 @@
-<div class="flex flex-col justify-center items-center space-y-4">
-  <h1 class="title text-primary-500 text-xl">
-    Register
+<div class="mx-auto mb-8 max-w-2xl flex flex-col justify-center items-center space-y-4">
+  <h1 class="title text-primary-600 text-xl">
+    <%= dgettext("actions", "Register") %>
  </h1>
+
  <%= form_for @changeset,
           Routes.user_registration_path(@conn, :create),
-           [class: "flex flex-col justify-center items-center space-y-4"],
+           [
+             class:
+               "flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+           ],
           fn f -> %>
    <%= if @changeset.action && not @changeset.valid? do %>
-      <div class="alert alert-danger">
-        <p>Oops, something went wrong! Please check the errors below.</p>
+      <div class="alert alert-danger col-span-3">
+        <p>
+          <%= dgettext("errors", "Oops, something went wrong! Please check the errors below.") %>
+        </p>
      </div>
    <% end %>
-    <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") %>
-      <%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
-    </div>
-    <%= error_tag(f, :email) %>
-    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-      <%= 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) %>
-    <%= submit("Register", class: "btn btn-primary") %>
-    <hr class="hr">
-      <div class="flex flex-row justify-center items-center space-x-4">
-        <%= 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>
+
+    <%= if @invite do %>
+      <%= hidden_input(f, :invite_token, value: @invite.token) %>
    <% end %>
+
+    <%= label(f, :email, class: "title text-lg text-primary-600") %>
+    <%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
+    <%= error_tag(f, :email, "col-span-3") %>
+
+    <%= label(f, :password, class: "title text-lg text-primary-600") %>
+    <%= password_input(f, :password, required: true, class: "input input-primary col-span-2") %>
+    <%= error_tag(f, :password, "col-span-3") %>
+
+    <%= submit(dgettext("actions", "Register"), class: "mx-auto btn btn-primary col-span-3") %>
+  <% end %>
+
+  <hr class="hr" />
+
+  <div class="flex flex-row justify-center items-center space-x-4">
+    <%= link(dgettext("actions", "Log in"),
+      to: Routes.user_session_path(@conn, :new),
+      class: "btn btn-primary"
+    ) %>
+    <%= link(dgettext("actions", "Forgot your password?"),
+      to: Routes.user_reset_password_path(@conn, :new),
+      class: "btn btn-primary"
+    ) %>
  </div>
+</div>
--- a/lib/lokal_web/templates/user_reset_password/edit.html.heex
+++ b/lib/lokal_web/templates/user_reset_password/edit.html.heex
@ -1,37 +1,53 @@
-<div class="flex flex-col justify-center items-center space-y-4">
-  <h1 class="title text-primary-500 text-xl">
-    Reset password
+<div class="mx-auto mb-8 max-w-2xl flex flex-col justify-center items-center space-y-4">
+  <h1 class="title text-primary-600 text-xl">
+    <%= dgettext("actions", "Reset password") %>
  </h1>
+
  <%= form_for @changeset,
           Routes.user_reset_password_path(@conn, :update, @token),
-           [class: "flex flex-col justify-center items-center space-y-4"],
+           [
+             class:
+               "flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+           ],
           fn f -> %>
    <%= if @changeset.action && not @changeset.valid? do %>
-      <div class="alert alert-danger">
-        <p>Oops, something went wrong! Please check the errors below.</p>
+      <div class="alert alert-danger col-span-3">
+        <p>
+          <%= dgettext("errors", "Oops, something went wrong! Please check the errors below.") %>
+        </p>
      </div>
    <% end %>
-    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-      <%= 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) %>
-    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-      <%= 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) %>
-    <%= submit("Reset password", 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("Log in",
-          to: Routes.user_session_path(@conn, :new),
-          class: "btn btn-primary"
-        ) %>
-      </div>
+
+    <%= label(f, :password, "New password", class: "title text-lg text-primary-600") %>
+    <%= password_input(f, :password, required: true, class: "input input-primary col-span-2") %>
+    <%= error_tag(f, :password, "col-span-3") %>
+
+    <%= label(f, :password_confirmation, "Confirm new password",
+      class: "title text-lg text-primary-600"
+    ) %>
+    <%= password_input(f, :password_confirmation,
+      required: true,
+      class: "input input-primary col-span-2"
+    ) %>
+    <%= error_tag(f, :password_confirmation, "col-span-3") %>
+
+    <%= submit(dgettext("actions", "Reset password"),
+      class: "mx-auto btn btn-primary col-span-3"
+    ) %>
+  <% end %>
+
+  <hr class="hr" />
+
+  <div class="flex flex-row justify-center items-center space-x-4">
+    <%= if Accounts.allow_registration?() do %>
+      <%= link(dgettext("actions", "Register"),
+        to: Routes.user_registration_path(@conn, :new),
+        class: "btn btn-primary"
+      ) %>
    <% end %>
+    <%= link(dgettext("actions", "Log in"),
+      to: Routes.user_session_path(@conn, :new),
+      class: "btn btn-primary"
+    ) %>
  </div>
+</div>
--- a/lib/lokal_web/templates/user_reset_password/new.html.heex
+++ b/lib/lokal_web/templates/user_reset_password/new.html.heex
@ -1,26 +1,35 @@
-<div class="flex flex-col justify-center items-center space-y-4">
-  <h1 class="title text-primary-500 text-xl">
-    Forgot your password?
+<div class="mx-auto mb-8 max-w-2xl flex flex-col justify-center items-center space-y-4">
+  <h1 class="title text-primary-600 text-xl">
+    <%= dgettext("actions", "Forgot your password?") %>
  </h1>
+
  <%= form_for :user,
           Routes.user_reset_password_path(@conn, :create),
-           [class: "flex flex-col justify-center items-center space-y-4"],
+           [
+             class:
+               "flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+           ],
           fn f -> %>
-    <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") %>
-      <%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
-    </div>
-    <%= submit("Send instructions to reset password", 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("Log in",
-          to: Routes.user_session_path(@conn, :new),
-          class: "btn btn-primary"
-        ) %>
-      </div>
+    <%= label(f, :email, class: "title text-lg text-primary-600") %>
+    <%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
+
+    <%= submit(dgettext("actions", "Send instructions to reset password"),
+      class: "mx-auto btn btn-primary col-span-3"
+    ) %>
+  <% end %>
+
+  <hr class="hr" />
+
+  <div class="flex flex-row justify-center items-center space-x-4">
+    <%= if Accounts.allow_registration?() do %>
+      <%= link(dgettext("actions", "Register"),
+        to: Routes.user_registration_path(@conn, :new),
+        class: "btn btn-primary"
+      ) %>
    <% end %>
+    <%= link(dgettext("actions", "Log in"),
+      to: Routes.user_session_path(@conn, :new),
+      class: "btn btn-primary"
+    ) %>
  </div>
+</div>
--- a/lib/lokal_web/templates/user_session/new.html.heex
+++ b/lib/lokal_web/templates/user_session/new.html.heex
@ -1,41 +1,50 @@
-<div class="flex flex-col justify-center items-center space-y-4">
-  <h1 class="title text-primary-500 text-xl">
-    Log in
+<div class="mx-auto mb-8 max-w-2xl flex flex-col justify-center items-center space-y-4">
+  <h1 class="title text-primary-600 text-xl">
+    <%= dgettext("actions", "Log in") %>
  </h1>
+
  <%= form_for @conn,
           Routes.user_session_path(@conn, :create),
-           [as: :user, class: "flex flex-col justify-center items-center space-y-4"],
+           [
+             as: :user,
+             class:
+               "flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+           ],
           fn f -> %>
    <%= if @error_message do %>
-      <div class="alert alert-danger">
+      <div class="alert alert-danger col-span-3">
        <p>
          <%= @error_message %>
        </p>
      </div>
    <% end %>
-    <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") %>
-      <%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
-    </div>
-    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-      <%= label(f, :password, class: "title text-lg text-primary-500") %>
-      <%= password_input(f, :password, required: true, class: "input input-primary col-span-2") %>
-    </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>
+
+    <%= label(f, :email, class: "title text-lg text-primary-600") %>
+    <%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
+
+    <%= label(f, :password, class: "title text-lg text-primary-600") %>
+    <%= password_input(f, :password, required: true, class: "input input-primary col-span-2") %>
+
+    <%= label(f, :remember_me, gettext("Keep me logged in for 60 days"),
+      class: "title text-lg text-primary-600"
+    ) %>
+    <%= checkbox(f, :remember_me, class: "checkbox col-span-2") %>
+
+    <%= submit(dgettext("actions", "Log in"), class: "mx-auto btn btn-primary col-span-3") %>
+  <% end %>
+
+  <hr class="hr" />
+
+  <div class="flex flex-row justify-center items-center space-x-4">
+    <%= if Accounts.allow_registration?() do %>
+      <%= link(dgettext("actions", "Register"),
+        to: Routes.user_registration_path(@conn, :new),
+        class: "btn btn-primary"
+      ) %>
    <% end %>
+    <%= link(dgettext("actions", "Forgot your password?"),
+      to: Routes.user_reset_password_path(@conn, :new),
+      class: "btn btn-primary"
+    ) %>
  </div>
+</div>
--- a/lib/lokal_web/templates/user_settings/edit.html.heex
+++ b/lib/lokal_web/templates/user_settings/edit.html.heex
@ -1,82 +1,114 @@
-<div class="flex flex-col justify-center items-center space-y-4">
-  <h1 class="title text-primary-500 text-xl">
-    Settings
+<div class="mx-auto mb-8 max-w-2xl flex flex-col justify-center items-center space-y-4">
+  <h1 class="pb-4 title text-primary-600 text-xl">
+    <%= gettext("Settings") %>
  </h1>
-  <h3 class="title text-primary-500 text-lg">
-    Change email
-  </h3>
+
+  <hr class="hr" />
+
  <%= form_for @email_changeset,
           Routes.user_settings_path(@conn, :update),
-           [class: "flex flex-col justify-center items-center space-y-4"],
+           [
+             class:
+               "flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+           ],
           fn f -> %>
-    <%= if @email_changeset.action do %>
-      <div class="alert alert-danger">
-        <p>Oops, something went wrong! Please check the errors below.</p>
+    <h3 class="title text-primary-600 text-lg col-span-3">
+      <%= dgettext("actions", "Change email") %>
+    </h3>
+
+    <%= if @email_changeset.action && not @email_changeset.valid? do %>
+      <div class="alert alert-danger col-span-3">
+        <p>
+          <%= dgettext("errors", "Oops, something went wrong! Please check the errors below.") %>
+        </p>
      </div>
    <% end %>
+
    <%= hidden_input(f, :action, name: "action", value: "update_email") %>
-    <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") %>
-      <%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
-    </div>
-    <%= error_tag(f, :email) %>
-    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-      <%= 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) %>
-    <%= submit("Change email", class: "btn btn-primary") %>
+
+    <%= label(f, :email, class: "title text-lg text-primary-600") %>
+    <%= email_input(f, :email, required: true, class: "mx-2 my-1 input input-primary col-span-2") %>
+    <%= error_tag(f, :email, "col-span-3") %>
+
+    <%= label(f, :current_password, gettext("Current password"),
+      for: "current_password_for_email",
+      class: "mx-2 my-1 title text-lg text-primary-600"
+    ) %>
+    <%= password_input(f, :current_password,
+      required: true,
+      name: "current_password",
+      id: "current_password_for_email",
+      class: "mx-2 my-1 input input-primary col-span-2"
+    ) %>
+    <%= error_tag(f, :current_password, "col-span-3") %>
+
+    <%= submit(dgettext("actions", "Change email"),
+      class: "mx-auto btn btn-primary col-span-3"
+    ) %>
  <% end %>
-  <h3 class="title text-primary-500 text-lg">
-    Change password
-  </h3>
+
+  <hr class="hr" />
+
  <%= form_for @password_changeset,
           Routes.user_settings_path(@conn, :update),
-           [class: "flex flex-col justify-center items-center space-y-4"],
+           [
+             class:
+               "flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
+           ],
           fn f -> %>
-    <%= if @password_changeset.action do %>
-      <div class="alert alert-danger">
-        <p>Oops, something went wrong! Please check the errors below.</p>
+    <h3 class="title text-primary-600 text-lg col-span-3">
+      <%= dgettext("actions", "Change password") %>
+    </h3>
+
+    <%= if @password_changeset.action && not @password_changeset.valid? do %>
+      <div class="alert alert-danger col-span-3">
+        <p>
+          <%= dgettext("errors", "Oops, something went wrong! Please check the errors below.") %>
+        </p>
      </div>
    <% end %>
+
    <%= hidden_input(f, :action, name: "action", value: "update_password") %>
-    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-      <%= 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) %>
-    <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-      <%= 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 class="grid grid-cols-3 justify-center items-center text-center space-x-4">
-      <%= 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) %>
-    <%= submit("Change password", class: "btn btn-primary") %>
+
+    <%= label(f, :password, gettext("New password"), class: "title text-lg text-primary-600") %>
+    <%= password_input(f, :password,
+      required: true,
+      class: "mx-2 my-1 input input-primary col-span-2"
+    ) %>
+    <%= error_tag(f, :password, "col-span-3") %>
+
+    <%= label(f, :password_confirmation, gettext("Confirm new password"),
+      class: "title text-lg text-primary-600"
+    ) %>
+    <%= password_input(f, :password_confirmation,
+      required: true,
+      class: "mx-2 my-1 input input-primary col-span-2"
+    ) %>
+    <%= error_tag(f, :password_confirmation, "col-span-3") %>
+
+    <%= label(f, :current_password, gettext("Current password"),
+      for: "current_password_for_password",
+      class: "title text-lg text-primary-600"
+    ) %>
+    <%= password_input(f, :current_password,
+      required: true,
+      name: "current_password",
+      id: "current_password_for_password",
+      class: "mx-2 my-1 input input-primary col-span-2"
+    ) %>
+    <%= error_tag(f, :current_password, "col-span-3") %>
+
+    <%= submit(dgettext("actions", "Change password"),
+      class: "mx-auto btn btn-primary col-span-3"
+    ) %>
  <% end %>
+
+  <hr class="hr" />
+
+  <%= link(dgettext("actions", "Delete User"),
+    to: Routes.user_settings_path(@conn, :delete, @current_user),
+    method: :delete,
+    class: "btn btn-alert",
+    data: [confirm: dgettext("prompts", "Are you sure you want to delete your account?")]
+  ) %>
 </div>
--- a/lib/lokal_web/views/layout_view.ex
+++ b/lib/lokal_web/views/layout_view.ex
@ -1,6 +1,7 @@
 defmodule LokalWeb.LayoutView do
  use LokalWeb, :view
  import LokalWeb.Components.Topbar
+  alias LokalWeb.{Endpoint, PageLive}

  # Phoenix LiveDashboard is available only in development by default,
  # so we instruct Elixir to not warn if the dashboard route is missing.