feat: Add initial styling from design

assets/tailwind.config.js

@@ -15,10 +15,11 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        brand: "#B8EB86",
+        brand: "#0A8390",
         "brand-active": "#93BC6B",
-        link: "#BCBCBC",
-        "link-active": "#D6D6D6",
+        "type-black-primary": "#202020",
+        "type-black-tertiary": "#202020B2",
+        "button-deactivated-background": "#010101",
       },
       fontFamily: {
         sans: ["Poppins", ...defaultTheme.fontFamily.sans],

lib/medical_transcription_web/components/components.ex

@@ -1,32 +1,46 @@
 defmodule MedicalTranscriptionWeb.Components do
   use Phoenix.Component
   import MedicalTranscriptionWeb.CoreComponents
+  alias AudioTagger.Classifier.TagResult
+  use MedicalTranscriptionWeb, :verified_routes
 
-  def tag_result_chip(assigns) do
+  def result_list(assigns) do
     ~H"""
-    <div
-      class="group flex flex-col gap-1 px-1.5 py-0.5 rounded text-slate-800 text-sm bg-slate-200 border border-slate-300"
-      title={"Similarity score: #{trunc(@score * 100) / 100}"}
-    >
-      <div class="flex items-start">
-        <strong><%= @code %>:</strong>&nbsp;<%= @label %>
+    <div class="flex flex-col gap-14">
+      <%= for {_dom_id, row} <- @rows do %>
+        <div class="flex gap-12 pb-10 border-b border-[#444444]/20">
+          <div class="flex-1 flex flex-col gap-4">
+            <p class="text-[32px] leading-normal font-semibold">
+              <%= row.start_mark %> - <%= row.end_mark %>
+            </p>
+            <p class="text-[28px] leading-normal text-type-black-tertiary"><%= row.text %></p>
+          </div>
+
+          <div class="flex-1 flex flex-col items-stretch gap-3">
+            <%= for %TagResult{code: code, label: label, score: score} <- row.tags do %>
+              <.tag_result code={code} label={label} score={score} text={row.text} />
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+    """
+  end
+
+  def tag_result(assigns) do
+    ~H"""
+    <div class="flex items-center gap-4 px-[14px] py-3 text-sm">
+      <div class="flex gap-3">
+        <.feedback_button code={@code} text={@text} response="true" />
+        <.feedback_button code={@code} text={@text} response="false" class="" />
       </div>
 
-      <div class="w-fit flex items-stretch border border-slate-300 rounded overflow-hidden">
-        <.feedback_button
-          code={@code}
-          text={@text}
-          response="true"
-          icon_name="hero-check-circle"
-          class="border-r border-slate-300"
-        />
-        <.feedback_button
-          code={@code}
-          text={@text}
-          response="false"
-          icon_name="hero-x-circle"
-          class=""
-        />
+      <div
+        class="flex flex-col gap-1 font-secondary text-type-black-primary border-l border-[#444444]/20 pl-4"
+        title={"Similarity score: #{trunc(@score * 100) / 100}"}
+      >
+        <p class="text-lg font-bold leading-[22.97px]"><%= @code %></p>
+        <p class="text-base leading-[20.42px]"><%= @label %></p>
       </div>
     </div>
     """
@@ -40,9 +54,13 @@ defmodule MedicalTranscriptionWeb.Components do
       phx-value-text={@text}
       phx-value-response={@response}
       type="button"
-      class={"px-1 py-0.5 hover:bg-slate-300 #{@class}"}
+      class="p-2 border border-button-deactivated-background rounded-lg hover:bg-slate-200"
     >
-      <.icon name={@icon_name} />
+      <%= if @response == "true" do %>
+        <img src={~p"/images/thumbs-up.svg"} width="20" height="20" />
+      <% else %>
+        <img src={~p"/images/thumbs-down.svg"} width="20" height="20" />
+      <% end %>
     </button>
     """
   end

lib/medical_transcription_web/components/layouts/app.html.heex

@@ -1,29 +1,23 @@
-<header class="px-4 sm:px-6 lg:px-8 border-b border-slate-500">
-  <div class="flex items-center justify-between py-3 text-sm">
-    <div class="flex items-center gap-4">
+<div class="flex gap-5">
+  <header class="w-[335px] min-w-[335px] pt-6 border-r border-gray-200 flex flex-col gap-12">
+    <div class="flex items-center gap-[10.5px]">
       <a href="/">
-        <img src={~p"/images/logo.svg"} width="36" />
+        <img src={~p"/images/logo.svg"} width="48" />
       </a>
-      <p class="bg-brand/5 text-white rounded-full px-2 font-medium leading-6">
+      <h1 class="text-lg leading-normal px-2 font-semibold">
         Medical Code Transcriber
-      </p>
+      </h1>
     </div>
-    <div class="flex items-center gap-4 font-semibold leading-6 text-link">
-      <a href="https://twitter.com/headwayio" class="hover:text-link-active">
-        @headwayio
-      </a>
-      <a
-        href="https://github.com/headwayio/medical_transcription"
-        class="rounded-lg font-light text-zinc-900 bg-brand px-2 py-1 hover:bg-brand-active"
-      >
-        GitHub <span aria-hidden="true">&rarr;</span>
-      </a>
+
+    <div class="px-6">
+      <p class="text-xs leading-normal tracking-[0.2em] font-semibold uppercase">Today</p>
+    </div>
+  </header>
+
+  <main class="pl-16 pr-16 pt-[25px]">
+    <div class="mx-auto max-w-5xl">
+      <.flash_group flash={@flash} />
+      <%= @inner_content %>
     </div>
-  </div>
-</header>
-<main class="px-4 py-20 sm:px-6 lg:px-8">
-  <div class="mx-auto max-w-5xl">
-    <.flash_group flash={@flash} />
-    <%= @inner_content %>
-  </div>
-</main>
+  </main>
+</div>

lib/medical_transcription_web/components/layouts/root.html.heex

@@ -11,7 +11,7 @@
     <script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
     </script>
   </head>
-  <body class="bg-white antialiased">
+  <body class="bg-white antialiased px-5 py-7">
     <%= @inner_content %>
   </body>
 </html>

lib/medical_transcription_web/live/home_live/index.ex

@@ -1,6 +1,5 @@
 defmodule MedicalTranscriptionWeb.HomeLive.Index do
   use MedicalTranscriptionWeb, :live_view
-  alias AudioTagger.Classifier.TagResult
   alias MedicalTranscriptionWeb.HomeLive.Index.SampleResults
 
   @impl Phoenix.LiveView
@@ -25,18 +24,19 @@ defmodule MedicalTranscriptionWeb.HomeLive.Index do
 
     ~H"""
     <form id="audio-form" phx-submit="save" phx-change="validate">
-      <div class="flex flex-col space-y-4">
-        <h1 class="text-lg font-bold">Upload Transcription Audio</h1>
-        <.live_file_input
-          class="file:text-sm file:rounded-full file:px-4 file:py-2 file:border-0 file:bg-brand file:hover:bg-brand-active pb-4 border-b border-slate-200"
-          upload={@uploads.audio}
-        />
-        <button
-          name="submit-btn"
-          class="rounded-full bg-brand hover:bg-brand-active py-2 px-4 font-light text-black w-fit max-w-48"
-        >
-          Transcribe and Tag Audio <span aria-hidden="true">&rarr;</span>
-        </button>
+      <div class="flex flex-col space-y-6">
+        <div class="flex items-center pb-4 border-b border-[#444444]/20">
+          <.live_file_input
+            class="file:text-sm file:rounded-full file:px-4 file:py-2 file:border-0 file:bg-brand file:hover:bg-brand-active file:text-white"
+            upload={@uploads.audio}
+          />
+          <button
+            name="submit-btn"
+            class="rounded-full bg-brand hover:bg-brand-active text-white py-2 px-4 font-light text-black"
+          >
+            Submit <span aria-hidden="true">&rarr;</span>
+          </button>
+        </div>
 
         <%= if @transcription_in_progress do %>
           <div class="flex gap-2 items-center p-2 rounded-md text-slate-800 text-sm bg-slate-200 border border-slate-300">
@@ -45,22 +45,7 @@ defmodule MedicalTranscriptionWeb.HomeLive.Index do
           </div>
         <% end %>
 
-        <.table
-          id="streamed_result"
-          rows={@streams.transcription_rows}
-          row_item={fn {dom_id, row} -> Map.put(row, :dom_id, dom_id) end}
-        >
-          <:col :let={row} label="Start"><%= row.start_mark %></:col>
-          <:col :let={row} label="End"><%= row.end_mark %></:col>
-          <:col :let={row} label="Text"><%= row.text %></:col>
-          <:col :let={row} label="Codes">
-            <div class="min-w-[18rem] max-w-md flex flex-col items-stretch gap-2">
-              <%= for %TagResult{code: code, label: label, score: score} <- row.tags do %>
-                <.tag_result_chip code={code} label={label} score={score} text={row.text} />
-              <% end %>
-            </div>
-          </:col>
-        </.table>
+        <.result_list rows={@streams.transcription_rows} />
       </div>
     </form>
     """