2 UI 2 Polish (#577)

Fixes: #561
Fixes: #562

* add borders to tables

* footer polish

* unset shadow and rounding on cards

* update studio card styling

* update discover page styling

* hide divider if view switcher isn't shown

* update auth layout

* add alt text to studio card image

* add label prop to icon component

* add alt text to avatar images

* update nav styling

* accessibility fixes

* polish banner images and studio layout

* formatting

* studio layout fixes

* replace a bunch of icons

* update more icons

* add placeholders

* remove shadows and polish menus

* update more backgrounds

* more consistent layouts

lib/banchan/utils.ex

@@ -22,4 +22,24 @@ defmodule Banchan.Utils do
         amount
     end
   end
+
+  # credo:disable-for-next-line Credo.Check.Refactor.CyclomaticComplexity
+  def has_socials?(entity) do
+    !(is_nil(entity.website_url) &&
+        is_nil(entity.twitter_handle) &&
+        is_nil(entity.instagram_handle) &&
+        is_nil(entity.facebook_url) &&
+        is_nil(entity.furaffinity_handle) &&
+        is_nil(entity.discord_handle) &&
+        is_nil(entity.artstation_handle) &&
+        is_nil(entity.deviantart_handle) &&
+        is_nil(entity.tumblr_handle) &&
+        is_nil(entity.mastodon_handle) &&
+        is_nil(entity.twitch_channel) &&
+        is_nil(entity.picarto_channel) &&
+        is_nil(entity.pixiv_url) &&
+        is_nil(entity.pixiv_handle) &&
+        is_nil(entity.tiktok_handle) &&
+        is_nil(entity.artfight_handle))
+  end
 end

lib/banchan_web/components/avatar.ex

@@ -26,18 +26,18 @@ defmodule BanchanWeb.Components.Avatar do
         {#elseif @link}
           <LiveRedirect to={~p"/denizens/#{@user.handle}"}>
             {#if @thumb && @user.pfp_thumb_id}
-              <img src={~p"/images/user_pfp_thumb/#{@user.pfp_thumb_id}"}>
+              <img src={~p"/images/user_pfp_thumb/#{@user.pfp_thumb_id}"} alt={"#{@user.handle}'s avatar"}>
             {#elseif !@thumb && @user.pfp_img_id}
-              <img src={~p"/images/user_pfp_img/#{@user.pfp_img_id}"}>
+              <img src={~p"/images/user_pfp_img/#{@user.pfp_img_id}"} alt={"#{@user.handle}'s avatar"}>
             {#else}
-              <img src={~p"/images/denizen_default_icon.png"}>
+              <img src={~p"/images/denizen_default_icon.png"} alt={"#{@user.handle}'s avatar"}>
             {/if}
           </LiveRedirect>
         {#else}
           {#if @user.pfp_thumb_id}
-            <img src={~p"/images/user_pfp_thumb/#{@user.pfp_thumb_id}"}>
+            <img src={~p"/images/user_pfp_thumb/#{@user.pfp_thumb_id}"} alt={"#{@user.handle}'s avatar"}>
           {#else}
-            <img src={~p"/images/denizen_default_icon.png"}>
+            <img src={~p"/images/denizen_default_icon.png"} alt={"#{@user.handle}'s avatar"}>
           {/if}
         {/if}
       </div>

lib/banchan_web/components/card.ex

@@ -27,15 +27,15 @@ defmodule BanchanWeb.Components.Card do
 
   def render(assigns) do
     ~F"""
-    <div class={"shadow-xl bg-base-200 card card-compact flex flex-col flex-grow", @class}>
+    <div class={"bg-base-200 card card-compact flex flex-col flex-grow rounded-none", @class}>
       {#if slot_assigned?(:image)}
-        <figure class={@image_class}>
+        <figure class={@image_class, "rounded-none"}>
           <#slot {@image} />
         </figure>
       {/if}
-      <div class="card-body flex flex-col flex-grow">
+      <div class="flex flex-col flex-grow py-4">
         {#if slot_assigned?(:header)}
-          <header class="card-title flex flex-row items-center">
+          <header class="flex flex-row items-center card-title">
             <div class="grow">
               <#slot {@header} />
             </div>
@@ -48,7 +48,7 @@ defmodule BanchanWeb.Components.Card do
           <#slot />
         </div>
         {#if slot_assigned?(:footer)}
-          <footer class="card-actions justify-end">
+          <footer class="justify-end card-actions">
             <#slot {@footer} />
           </footer>
         {/if}

lib/banchan_web/components/collapse.ex

@@ -4,6 +4,8 @@ defmodule BanchanWeb.Components.Collapse do
   """
   use BanchanWeb, :live_component
 
+  alias BanchanWeb.Components.Icon
+
   prop class, :css_class
   prop show_arrow, :boolean, default: true
 
@@ -30,7 +32,7 @@ defmodule BanchanWeb.Components.Collapse do
             <#slot {@header} />
           </div>
           {#if @show_arrow}
-            <i class={"fas", "fa-chevron-up": @open, "fa-chevron-down": !@open} />
+            <Icon name={(@open && "chevron-up") || "chevron-down"} size="4" />
           {/if}
         </div>
       {/if}

lib/banchan_web/components/flash.ex

@@ -4,62 +4,64 @@ defmodule BanchanWeb.Components.Flash do
   """
   use BanchanWeb, :component
 
+  alias BanchanWeb.Components.Icon
+
   prop flashes, :any, required: true
 
   def render(assigns) do
     ~F"""
     <div class="flash-container">
       {#if live_flash(@flashes, :success)}
         <div
-          class="alert alert-success shadow-lg p-2 hover:cursor-pointer"
+          class="p-2 alert alert-success hover:cursor-pointer"
           role="alert"
           :on-click="lv:clear-flash"
           :values={key: "success"}
         >
           <div>
-            <i class="fas fa-check-circle" />
+            <Icon name="check-circle-2" size="4" />
             <span>{live_flash(@flashes, :success)}</span>
           </div>
         </div>
       {/if}
 
       {#if live_flash(@flashes, :info)}
         <div
-          class="alert alert-info shadow-lg p-2 hover:cursor-pointer"
+          class="p-2 alert alert-info hover:cursor-pointer"
           role="alert"
           :on-click="lv:clear-flash"
           :values={key: "info"}
         >
           <div>
-            <i class="fas fa-info-circle" />
+            <Icon name="info" size="4" />
             <span>{live_flash(@flashes, :info)}</span>
           </div>
         </div>
       {/if}
 
       {#if live_flash(@flashes, :warning)}
         <div
-          class="alert alert-warning shadow-lg p-2 hover:cursor-pointer"
+          class="p-2 alert alert-warning hover:cursor-pointer"
           role="alert"
           :on-click="lv:clear-flash"
           :values={key: "warning"}
         >
           <div>
-            <i class="fas fa-exclamation-triangle" />
+            <Icon name="alert-triangle" size="4" />
             <span>{live_flash(@flashes, :warning)}</span>
           </div>
         </div>
       {/if}
 
       {#if live_flash(@flashes, :error)}
         <div
-          class="alert alert-error shadow-lg p-2 hover:cursor-pointer"
+          class="p-2 alert alert-error hover:cursor-pointer"
           role="alert"
           :on-click="lv:clear-flash"
           :values={key: "error"}
         >
           <div>
-            <i class="fas fa-exclamation-circle" />
+            <Icon name="x-circle" size="4" />
             <span>{live_flash(@flashes, :error)}</span>
           </div>
         </div>

lib/banchan_web/components/form/checkbox.ex

@@ -4,6 +4,8 @@ defmodule BanchanWeb.Components.Form.Checkbox do
   """
   use BanchanWeb, :component
 
+  alias BanchanWeb.Components.Icon
+
   alias Surface.Components.Form
   alias Surface.Components.Form.{Checkbox, ErrorTag, Field, Label}
 
@@ -32,11 +34,11 @@ defmodule BanchanWeb.Components.Form.Checkbox do
           }
           opts={@opts}
         />
-        <div class="px-2 label-text">
+        <div class="px-2 label-text flex flex-row items-center gap-1">
           <#slot>{@label}</#slot>
           {#if @info}
             <div class="tooltip" data-tip={@info}>
-              <i class="fas fa-info-circle" />
+              <Icon name="info" size="4" label="tooltip" />
             </div>
           {/if}
         </div>

lib/banchan_web/components/form/date_time_local_input.ex

@@ -4,6 +4,8 @@ defmodule BanchanWeb.Components.Form.DateTimeLocalInput do
   """
   use BanchanWeb, :component
 
+  alias BanchanWeb.Components.Icon
+
   alias Surface.Components.Form
   alias Surface.Components.Form.{DateTimeLocalInput, ErrorTag, Field, Label}
 
@@ -21,11 +23,11 @@ defmodule BanchanWeb.Components.Form.DateTimeLocalInput do
     <Field class="field" name={@name}>
       {#if @show_label}
         <Label class="label">
-          <span class="label-text">
+          <span class="flex flex-row items-center gap-1 label-text">
             {@label || Phoenix.Naming.humanize(@name)}
             {#if @info}
               <div class="tooltip" data-tip={@info}>
-                <i class="fas fa-info-circle" />
+                <Icon name="info" size="4" label="tooltip" />
               </div>
             {/if}
           </span>
@@ -34,11 +36,9 @@ defmodule BanchanWeb.Components.Form.DateTimeLocalInput do
       <div class="flex flex-col">
         <div class="flex flex-row gap-2">
           {#if @icon}
-            <span class="icon text-2xl my-auto">
-              <i class={"fas fa-#{@icon}"} />
-            </span>
+            <Icon name={"#{@icon}"} size="4" />
           {/if}
-          <div class="control w-full">
+          <div class="w-full control">
             <DateTimeLocalInput
               class={
                 "input",

lib/banchan_web/components/form/email_input.ex

@@ -4,6 +4,8 @@ defmodule BanchanWeb.Components.Form.EmailInput do
   """
   use BanchanWeb, :component
 
+  alias BanchanWeb.Components.Icon
+
   alias Surface.Components.Form
   alias Surface.Components.Form.{EmailInput, ErrorTag, Field, Label}
 
@@ -22,11 +24,11 @@ defmodule BanchanWeb.Components.Form.EmailInput do
     <Field class="field" name={@name}>
       {#if @show_label}
         <Label class="label">
-          <span class="label-text">
+          <span class="flex flex-row items-center gap-1 label-text">
             {@label || Phoenix.Naming.humanize(@name)}
             {#if @info}
               <div class="tooltip" data-tip={@info}>
-                <i class="fas fa-info-circle" />
+                <Icon name="info" size="4" label="tooltip" />
               </div>
             {/if}
           </span>
@@ -38,9 +40,7 @@ defmodule BanchanWeb.Components.Form.EmailInput do
           @wrapper_class
         }>
           {#if @icon}
-            <span class="my-auto text-2xl icon">
-              <i class={"fas fa-#{@icon}"} />
-            </span>
+            <Icon name={"#{@icon}"} size="4" />
           {/if}
           <EmailInput
             class={

lib/banchan_web/components/form/fancy_select/fancy_select.ex

@@ -75,7 +75,7 @@ defmodule BanchanWeb.Components.Form.FancySelect do
             {/if}
           </button>
           <ul
-            class="absolute left-0 z-30 mt-2 w-72 origin-top-right divide-y divide-neutral divide-opacity-50 overflow-hidden rounded-box bg-base-200 shadow-lg ring-1 ring-base-300 ring-opacity-5 focus:outline-none"
+            class="absolute left-0 z-30 mt-2 w-72 origin-top-right divide-y divide-neutral divide-opacity-50 overflow-hidden rounded-box bg-base-200 ring-1 ring-base-300 ring-opacity-5 focus:outline-none"
             tabindex="-1"
             style="display: none;"
             role="listbox"

lib/banchan_web/components/form/multiple_select.ex

@@ -4,6 +4,8 @@ defmodule BanchanWeb.Components.Form.MultipleSelect do
   """
   use BanchanWeb, :component
 
+  alias BanchanWeb.Components.Icon
+
   alias Surface.Components.Form
   alias Surface.Components.Form.{ErrorTag, Field, Label, MultipleSelect}
 
@@ -23,11 +25,11 @@ defmodule BanchanWeb.Components.Form.MultipleSelect do
     <Field class="field" name={@name}>
       {#if @show_label}
         <Label class="label">
-          <span class="label-text">
+          <span class="flex flex-row items-center gap-1 label-text">
             {@label || Phoenix.Naming.humanize(@name)}
             {#if @info}
               <div class="tooltip" data-tip={@info}>
-                <i class="fas fa-info-circle" />
+                <Icon name="info" size="4" label="tooltip" />
               </div>
             {/if}
           </span>
@@ -36,11 +38,9 @@ defmodule BanchanWeb.Components.Form.MultipleSelect do
       <div class="flex flex-col">
         <div class="flex flex-row gap-2">
           {#if @icon}
-            <span class="icon text-2xl my-auto">
-              <i class={"fas fa-#{@icon}"} />
-            </span>
+            <Icon name={"#{@icon}"} size="4" />
           {/if}
-          <div class="control w-full">
+          <div class="w-full control">
             <MultipleSelect
               class={
                 "textarea",

lib/banchan_web/components/form/number_input.ex

@@ -4,6 +4,8 @@ defmodule BanchanWeb.Components.Form.NumberInput do
   """
   use BanchanWeb, :component
 
+  alias BanchanWeb.Components.Icon
+
   alias Surface.Components.Form
   alias Surface.Components.Form.{ErrorTag, Field, Label, NumberInput}
 
@@ -21,11 +23,11 @@ defmodule BanchanWeb.Components.Form.NumberInput do
     <Field class="field" name={@name}>
       {#if @show_label}
         <Label class="label">
-          <span class="label-text">
+          <span class="flex flex-row items-center gap-1 label-text">
             {@label || Phoenix.Naming.humanize(@name)}
             {#if @info}
               <div class="tooltip" data-tip={@info}>
-                <i class="fas fa-info-circle" />
+                <Icon name="info" size="4" label="tooltip" />
               </div>
             {/if}
           </span>
@@ -34,9 +36,7 @@ defmodule BanchanWeb.Components.Form.NumberInput do
       <div class="flex flex-col">
         <div class="flex flex-row w-full gap-2 control input input-bordered focus-within:ring ring-primary">
           {#if @icon}
-            <span class="my-auto text-2xl icon">
-              <i class={"fas fa-#{@icon}"} />
-            </span>
+            <Icon name={"#{@icon}"} size="4" />
           {/if}
           <NumberInput
             class={

lib/banchan_web/components/form/quill_input/quill_input.ex

@@ -4,6 +4,7 @@ defmodule BanchanWeb.Components.Form.QuillInput do
   """
   use BanchanWeb, :live_component
 
+  alias BanchanWeb.Components.Icon
   alias Surface.Components.Form.{ErrorTag, Field, Label, TextArea}
   alias Surface.Components.LiveFileInput
 
@@ -99,11 +100,11 @@ defmodule BanchanWeb.Components.Form.QuillInput do
     <Field class="field" name={@name}>
       {#if @show_label}
         <Label class="label">
-          <span class="label-text">
+          <span class="flex flex-row items-center gap-1 label-text">
             {@label || Phoenix.Naming.humanize(@name)}
             {#if @info}
               <div class="tooltip" data-tip={@info}>
-                <i class="fas fa-info-circle" />
+                <Icon name="info" size="4" label="tooltip" />
               </div>
             {/if}
           </span>
@@ -118,18 +119,18 @@ defmodule BanchanWeb.Components.Form.QuillInput do
             :hook="QuillInput"
             id={@id <> "_hook"}
           >
-            <div id={@id <> "-editor"} phx-update="ignore" class="object-cover editor h-full w-full" />
+            <div id={@id <> "-editor"} phx-update="ignore" class="object-cover w-full h-full editor" />
             <TextArea form={@form} field={@name} class="hidden input-textarea" opts={@opts} />
           </div>
           {#if @upload}
             <LiveFileInput
-              class="file-input file-input-xs w-full file-input-bordered rounded-t-none"
+              class="w-full rounded-t-none file-input file-input-xs file-input-bordered"
               upload={@upload}
             />
             {#if @dragging}
-              <div class="absolute h-full w-full opacity-25 bg-neutral border-dashed border-2" />
-              <div class="absolute h-full w-full text-center my-auto">
-                Drop Files Here <i class="fas fa-file-upload" />
+              <div class="absolute w-full h-full border-2 border-dashed opacity-25 bg-neutral" />
+              <div class="absolute w-full h-full my-auto text-center">
+                Drop Files Here <Icon name="file-up" size="4" label="upload file" />
               </div>
             {/if}
           {/if}