fix: activities styling

Author: enricoprazeres

assets/js/app.js

@@ -24,15 +24,14 @@ import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import "../vendor/alpine.js";
 import topbar from "../vendor/topbar"
-import { QrScanner, InitSorting, StickyScroll, ScrollToTop, AutoFocus } from "./hooks";
+import { QrScanner, InitSorting, StickyScroll, ScrollToTop } from "./hooks";
 import phxFeedbackDom from "./shims/phx_feedback_dom.js"
 
 let Hooks = {
   QrScanner: QrScanner,
   InitSorting: InitSorting,
   StickyScroll: StickyScroll,
   ScrollToTop: ScrollToTop,
-  AutoFocus: AutoFocus,
 };
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")

assets/js/hooks/auto_focus.js

@@ -35,10 +35,10 @@ defmodule AtomicWeb.ActivityLive.Components.ActivityCard do
                 <% end %>
               </div>
             </div>
-            <object>
+            <object class="w-2/3">
               <.link navigate={~p"/organizations/#{@activity.organization.id}"} class="group flex max-w-min pt-2">
                 <.icon name="hero-building-office" class="mr-1.5 h-5 w-5 text-zinc-400" />
-                <span class="text-sm text-zinc-500 focus:outline-none group-hover:underline">
+                <span class="text-sm text-zinc-500 focus:outline-none group-hover:underline truncate">
                   {@activity.organization.name}
                 </span>
               </.link>

lib/atomic_web/live/activity_live/components/activity_card.ex

@@ -54,7 +54,7 @@
           phx-target={@myself}
         >
           <%= if not @has_description? do %>
-            <label class="cursor-pointer text-left text-gray-500">
+            <label class="cursor-pointer text-left font-normal text-gray-500 py-[2px]">
               Add description
             </label>
           <% end %>
@@ -110,7 +110,7 @@
             />
           <% else %>
             <.field
-              class="cursor-pointer border-none bg-transparent p-0 text-sm text-gray-900 shadow-none focus:border-transparent focus:outline-none focus:ring-0"
+              class="cursor-pointer border-none bg-transparent p-0 text-sm text-gray-900 shadow-none focus:border-transparent focus:outline-none focus:ring-0 font-normal"
               type="number"
               field={@form[:maximum_entries]}
               label="Maximum entries"
@@ -139,9 +139,9 @@
         </div>
       </div>
     </div>
-    <.modal :if={@description_modal} id="description-modal" show on_cancel={JS.push("toggle_description_modal", target: @myself)}>
+    <.modal :if={@description_modal} id="description-modal" show on_cancel={JS.push("toggle_description_modal", target: @myself)} class="textarea">
       <div class="mt-4 flex-grow">
-        <.field class="\-h-10 resize-none" type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required />
+        <.field id="description-input" class="\-h-10 resize-none" type="textarea" field={@form[:description]} label="Description" placeholder="Choose description" rows={15} required phx-hook="AutoFocus"/>
         <div class="flex w-full justify-end">
           <.button class="text" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
             <span>{gettext("Done")}</span>

lib/atomic_web/live/activity_live/form_component.html.heex

@@ -66,7 +66,7 @@
                     {pretty_display_date(@activity.start)}
                   </p>
                   <p>
-                    {"#{display_time(@activity.start)}-#{display_time(@activity.finish)}"}
+                    {"#{display_time(@activity.start)} - #{display_time(@activity.finish)}"}
                   </p>
                 </div>
               <% else %>
@@ -75,7 +75,7 @@
                     {pretty_display_date(@activity.start)} - {pretty_display_date(@activity.finish)}
                   </p>
                   <p>
-                    {"#{display_time(@activity.start)}-#{display_time(@activity.finish)}"}
+                    {"#{display_time(@activity.start)} - #{display_time(@activity.finish)}"}
                   </p>
                 </div>
               <% end %>