feat: add support for multi-day activities (to display date)

Author: enricoprazeres

lib/atomic_web/components/tabs.ex

@@ -85,7 +85,7 @@ defmodule AtomicWeb.Components.Tabs do
     underline_classes =
       if active,
         do: "bg-orange-100 text-orange-600",
-        else: "text-zinc-500 bg-zinc-100"
+        else: "text-zinc-300 bg-zinc-100"
 
     [base_classes, active_classes, underline_classes]
   end

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

@@ -49,7 +49,7 @@
         <label for="description_button" class="atomic-label atomic-label--required">
           Description
         </label>
-        <.button id="description_button" class="group atomic-button atomic-button--primary-outline flex flex-col items-start rounded-md border-gray-300 bg-white px-3 py-3 text-gray-300 focus-within:bg-white lg:w-full" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
+        <.button id="description_button" class="group atomic-button atomic-button--primary-outline flex flex-col items-start rounded-md border-gray-300 bg-white px-3 py-[10px] sm:py-2 text-gray-300 focus-within:bg-white lg:w-full" type="button" phx-click="toggle_description_modal" phx-target={@myself}>
           <%= if not @has_description? do %>
             <label class="cursor-pointer text-left text-gray-500">
               Add description
@@ -72,24 +72,24 @@
           </div>
         </.button>
 
-        <div class="mt-4 flex flex-col justify-center md:flex-row md:justify-start xl:justify-between">
+        <div class="flex flex-col justify-center md:flex-row md:justify-start xl:justify-between">
           <.inputs_for :let={fl} field={@form[:location]}>
-            <div class="flex flex-col gap-y-1">
+            <div class="mt-3 sm:mt-4 flex flex-col gap-y-1">
               <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="text" field={fl[:name]} label="Location" placeholder="Choose location name" required />
             </div>
-            <div class="mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
+            <div class="-mt-2 sm:-mt-2 md:mt-4 flex flex-col gap-y-1 sm:mt-0 md:ml-8">
               <.field class="atomic-button atomic-button--primary-outline text-gray-900" type="text" field={fl[:address]} label="Address" placeholder="Address" required />
             </div>
           </.inputs_for>
         </div>
 
-        <label for="capacity_button" class="atomic-label atomic-label--required">
+        <label for="capacity_button" class="atomic-label atomic-label--required -mt-2">
           Capacity
         </label>
-        <.button id="capacity_button" type="button" class="group atomic-button atomic-button--primary-outline flex flex-col items-start rounded-md border-gray-300 bg-white px-3 py-3 text-gray-300 focus-within:bg-white lg:w-full" phx-click="toggle_maximum_entries_modal" phx-target={@myself}>
+        <.button id="capacity_button" type="button" class="group atomic-button atomic-button--primary-outline flex flex-col items-start rounded-md border-gray-300 bg-white px-3 py-[10px] sm:py-2 text-gray-300 focus-within:bg-white lg:w-full" phx-click="toggle_maximum_entries_modal" phx-target={@myself}>
           <%= if @has_max_capacity? do %>
             <.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 atomic-text-input"
               type="number"
               field={@form[:maximum_entries]}
               label="Maximum entries"

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

@@ -72,6 +72,15 @@
                     <%= "#{display_time(@activity.start)}-#{display_time(@activity.finish)}" %>
                   </p>
                 </div>
+              <% else %>
+                <div class="flex flex-col">
+                  <p class="font-medium">
+                    <%= pretty_display_date(@activity.start) %> - <%= pretty_display_date(@activity.finish) %>
+                  </p>
+                  <p>
+                    <%= "#{display_time(@activity.start)}-#{display_time(@activity.finish)}" %>
+                  </p>
+                </div>
               <% end %>
               <!-- TODO: Support for multi-day activities -->
             </div>