style: hourly rate and hours per week inputs to draw attention if empty

Author: zcesur

assets/tailwind.config.js

@@ -109,8 +109,8 @@ module.exports = {
       },
       keyframes: {
         wiggle: {
-          "0%, 100%": { transform: "rotate(-3deg)" },
-          "50%": { transform: "rotate(3deg)" },
+          "0%, 100%": { transform: "rotate(-12deg)" },
+          "50%": { transform: "rotate(12deg)" },
         },
         "accordion-down": {
           from: { height: 0 },

lib/algora_web/components/core_components.ex

@@ -703,6 +703,7 @@ defmodule AlgoraWeb.CoreComponents do
   attr :label, :string, default: nil
   attr :helptext, :string, default: nil
   attr :icon, :string, default: nil
+  attr :icon_class, :string, default: nil
   attr :value, :any
   attr :class, :string, default: nil
 
@@ -838,7 +839,7 @@ defmodule AlgoraWeb.CoreComponents do
       <p :if={@helptext} class="-mt-2 mb-2 text-sm text-muted-foreground">{@helptext}</p>
       <div class="relative">
         <div :if={@icon} class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-          <.icon name={@icon} class="h-5 w-5 text-muted-foreground" />
+          <.icon name={@icon} class={classes(["h-5 w-5 text-muted-foreground", @icon_class])} />
         </div>
         <input
           type={@type}

lib/algora_web/live/user/dashboard_live.ex

@@ -209,25 +209,43 @@ defmodule AlgoraWeb.User.DashboardLive do
         >
           <.input
             field={@availability_form[:hourly_rate_min]}
-            label="Hourly Rate (USD)"
+            label="Hourly rate (USD)"
             icon="tabler-currency-dollar"
+            icon_class={
+              if !@current_user.hourly_rate_min,
+                do: "text-success-400 animate-[wiggle_2s_ease-in-out_infinite]"
+            }
+            class={
+              if !@current_user.hourly_rate_min,
+                do:
+                  "ring-1 ring-success-400 border-success-400 focus:border-success-400 focus:ring-success-400"
+            }
           />
           <.input
             field={@availability_form[:hours_per_week]}
-            label="Hours per Week"
+            label="Hours per week"
             icon="tabler-clock"
+            icon_class={
+              if !@current_user.hours_per_week,
+                do: "text-success-400 animate-[wiggle_2s_ease-in-out_infinite]"
+            }
+            class={
+              if !@current_user.hours_per_week,
+                do:
+                  "ring-1 ring-success-400 border-success-400 focus:border-success-400 focus:ring-success-400"
+            }
           />
           <.button :if={@availability_form.source.changes != %{}} type="submit" class="lg:col-span-2">
             Save
           </.button>
         </.form>
         <!-- Tech Stack Section -->
         <div class="mt-4">
-          <h2 class="mb-2 text-xl font-semibold">
+          <label class="block text-sm font-semibold leading-6 text-foreground mb-2">
             Tech stack
-          </h2>
+          </label>
           <.TechStack
-            classes="mt-4"
+            classes="-mt-2"
             tech={get_field(@settings_form.source, :tech_stack)}
             socket={@socket}
             form="settings_form"