updates

Author: zcesur

lib/algora_web/components/layouts/user.html.heex

@@ -135,64 +135,6 @@
         </ul>
       <% end %>
     </nav>
-    <%= if main_contract_form = Map.get(assigns, :main_contract_form) do %>
-      <div class="mt-auto mx-auto">
-        <.button
-          phx-click="open_main_contract_form"
-          class="h-9 w-9 rounded-md flex items-center justify-center relative"
-        >
-          <.icon name="tabler-user-dollar" class="h-6 w-6 shrink-0" />
-          <.icon
-            name="tabler-plus"
-            class="h-[0.8rem] w-[0.8rem] shrink-0 absolute bottom-[0.2rem] right-[0.2rem]"
-          />
-        </.button>
-        <.drawer
-          show={@main_contract_form_open?}
-          direction="right"
-          on_cancel="close_main_contract_form"
-        >
-          <.drawer_header>
-            <.drawer_title>Create new contract</.drawer_title>
-            <.drawer_description>
-              Engage a developer for ongoing work
-            </.drawer_description>
-          </.drawer_header>
-          <.drawer_content class="mt-4">
-            <AlgoraWeb.Forms.ContractForm.contract_form form={main_contract_form} />
-          </.drawer_content>
-        </.drawer>
-      </div>
-    <% end %>
-    <%= if main_bounty_form = Map.get(assigns, :main_bounty_form) do %>
-      <div class="mt-auto mx-auto">
-        <.button
-          phx-click="open_main_bounty_form"
-          class="h-9 w-9 rounded-md flex items-center justify-center relative"
-        >
-          <.icon name="tabler-diamond" class="h-6 w-6 shrink-0" />
-          <.icon
-            name="tabler-plus"
-            class="h-[0.8rem] w-[0.8rem] shrink-0 absolute bottom-[0.2rem] right-[0.2rem]"
-          />
-        </.button>
-        <.drawer
-          show={@main_bounty_form_open?}
-          direction="right"
-          on_cancel="close_main_bounty_form"
-        >
-          <.drawer_header>
-            <.drawer_title>Create new bounty</.drawer_title>
-            <.drawer_description>
-              Create and fund a bounty for an issue
-            </.drawer_description>
-          </.drawer_header>
-          <.drawer_content class="mt-4">
-            <AlgoraWeb.Forms.BountyForm.bounty_form form={main_bounty_form} />
-          </.drawer_content>
-        </.drawer>
-      </div>
-    <% end %>
   </div>
 
   <div class="lg:pl-16">
@@ -266,26 +208,60 @@
           </div>
         </.link>
         <%= if @current_user do %>
-          <.button
-            phx-click="open_main_contract_form"
-            class="h-9 w-9 rounded-md flex items-center justify-center relative"
-          >
-            <.icon name="tabler-user-dollar" class="h-6 w-6 shrink-0" />
-            <%!-- <.icon
-              name="tabler-plus"
-              class="h-[0.8rem] w-[0.8rem] shrink-0 absolute bottom-[0.2rem] right-[0.2rem]"
-            /> --%>
-          </.button>
-          <.button
-            phx-click="open_main_bounty_form"
-            class="h-9 w-9 rounded-md flex items-center justify-center relative"
-          >
-            <.icon name="tabler-diamond" class="h-6 w-6 shrink-0" />
-            <.icon
-              name="tabler-plus"
-              class="h-[0.8rem] w-[0.8rem] shrink-0 absolute bottom-[0.2rem] right-[0.2rem]"
-            />
-          </.button>
+          <%= if main_contract_form = Map.get(assigns, :main_contract_form) do %>
+            <div>
+              <.button
+                phx-click="open_main_contract_form"
+                class="h-9 w-9 rounded-md flex items-center justify-center relative"
+              >
+                <.icon name="tabler-user-dollar" class="h-6 w-6 shrink-0" />
+              </.button>
+              <.drawer
+                show={@main_contract_form_open?}
+                direction="right"
+                on_cancel="close_main_contract_form"
+              >
+                <.drawer_header>
+                  <.drawer_title>Create new contract</.drawer_title>
+                  <.drawer_description>
+                    Engage a developer for ongoing work
+                  </.drawer_description>
+                </.drawer_header>
+                <.drawer_content class="mt-4">
+                  <AlgoraWeb.Forms.ContractForm.contract_form form={main_contract_form} />
+                </.drawer_content>
+              </.drawer>
+            </div>
+          <% end %>
+          <%= if main_bounty_form = Map.get(assigns, :main_bounty_form) do %>
+            <div>
+              <.button
+                phx-click="open_main_bounty_form"
+                class="h-9 w-9 rounded-md flex items-center justify-center relative"
+              >
+                <.icon name="tabler-diamond" class="h-6 w-6 shrink-0" />
+                <.icon
+                  name="tabler-plus"
+                  class="h-[0.8rem] w-[0.8rem] shrink-0 absolute bottom-[0.2rem] right-[0.2rem]"
+                />
+              </.button>
+              <.drawer
+                show={@main_bounty_form_open?}
+                direction="right"
+                on_cancel="close_main_bounty_form"
+              >
+                <.drawer_header>
+                  <.drawer_title>Create new bounty</.drawer_title>
+                  <.drawer_description>
+                    Create and fund a bounty for an issue
+                  </.drawer_description>
+                </.drawer_header>
+                <.drawer_content class="mt-4">
+                  <AlgoraWeb.Forms.BountyForm.bounty_form form={main_bounty_form} />
+                </.drawer_content>
+              </.drawer>
+            </div>
+          <% end %>
           <%!-- {live_render(@socket, AlgoraWeb.Activity.UserNavTimelineLive,
             id: "activity-timeline",
             session: %{},

lib/algora_web/forms/contract_form.ex

@@ -49,6 +49,11 @@ defmodule AlgoraWeb.Forms.ContractForm do
       phx-change="validate_contract_main"
     >
       <div class="space-y-4">
+        <.input label="Title" field={@form[:title]} />
+        <.input label="Description (optional)" field={@form[:description]} type="textarea" />
+        <label class="block text-sm font-semibold leading-6 text-foreground mb-2">
+          Payment
+        </label>
         <div class="grid grid-cols-2 gap-4" phx-update="ignore" id="main-contract-form-tabs">
           <%= for {label, value} <- type_options() do %>
             <label class={[
@@ -80,17 +85,14 @@ defmodule AlgoraWeb.Forms.ContractForm do
           <% end %>
         </div>
 
-        <.input label="Title" field={@form[:title]} placeholder="Brief description of the contract" />
-        <.input
-          label="Description (optional)"
-          field={@form[:description]}
-          type="textarea"
-          placeholder="Requirements and acceptance criteria"
-        />
-        <.input label="Amount" icon="tabler-currency-dollar" field={@form[:amount]} />
-
+        <div data-tab="fixed">
+          <.input label="Amount" icon="tabler-currency-dollar" field={@form[:amount]} />
+        </div>
         <div data-tab="hourly" class="hidden">
-          <.input label="Hours per week" field={@form[:hours_per_week]} />
+          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <.input label="Hourly rate" icon="tabler-currency-dollar" field={@form[:amount]} />
+            <.input label="Hours per week" field={@form[:hours_per_week]} />
+          </div>
         </div>
 
         <div class="relative">