chore: Highlight feedback buttons when clicked, ...

lib/medical_transcription_web/components/components.ex

@@ -4,6 +4,8 @@ defmodule MedicalTranscriptionWeb.Components do
   """
 
   use Phoenix.Component
+  alias Phoenix.LiveView.JS
+
   import MedicalTranscriptionWeb.CoreComponents
   alias MedicalTranscriptionWeb.Components.TranscriptionTextComponent
   use MedicalTranscriptionWeb, :verified_routes
@@ -154,10 +156,11 @@ defmodule MedicalTranscriptionWeb.Components do
         <.feedback_button code_vector_id={@code_vector_id} text={@text} response="false" />
       </div>
 
+      <div class="w-1 h-full border-l border-[#444444]/20"></div>
       <div
-        class={"flex flex-col gap-1 font-secondary text-type-black-primary border-l border-[#444444]/20 pl-4
-        #{if @response == true, do: "bg-emerald-200"}
-        #{if @response == false, do: "bg-red-200"}
+        class={"flex flex-col gap-1 font-secondary text-type-black-primary ml-4 p-1 rounded
+          #{if @response == true, do: "bg-emerald-200"}
+          #{if @response == false, do: "bg-red-200"}
         "}
         title={"Similarity score: #{trunc(@score * 100) / 100}"}
       >
@@ -171,7 +174,10 @@ defmodule MedicalTranscriptionWeb.Components do
   defp feedback_button(assigns) do
     ~H"""
     <button
-      phx-click="add_feedback"
+      phx-click={
+        JS.push("add_feedback")
+        |> JS.add_class("ring-2 ring-orange-500/40")
+      }
       phx-value-code_vector_id={@code_vector_id}
       phx-value-text={@text}
       phx-value-response={@response}