refactor: Updated to use more of a pill style

phac-nml · Sep 17, 2024 · a4ff97c · a4ff97c
1 parent 232e269
commit a4ff97c
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 27 deletions.
diff --git a/app/components/clipboard_component.html.erb b/app/components/clipboard_component.html.erb
@@ -13,7 +13,7 @@
     aria-label="<%= t("components.clipboard.title") %>"
     data-clipboard-target="button"
     class="
-      p-1 text-sm font-medium bg-white border rounded-lg text-slate-900
+      p-1 text-sm font-medium bg-white border rounded-full text-slate-900
       border-slate-200 focus:outline-none hover:bg-slate-100 hover:text-primary-700
       focus:z-10 focus:ring-4 focus:ring-slate-100 dark:focus:ring-slate-700
       dark:bg-slate-800 dark:text-slate-400 dark:border-slate-600

diff --git a/app/components/namespace_tree/row/row_contents_component.html.erb b/app/components/namespace_tree/row/row_contents_component.html.erb
@@ -26,31 +26,41 @@
   <div class="flex flex-col namespace-text">
     <div class="namespace-text grow shrink">
       <div class="flex flex-wrap items-center mr-3 font-semibold title">
-        <div class="flex flex-col space-y-1.5">
-          <div class="space-x-2">
-            <% if @namespace.type == "Group" %>
-              <%= link_to @namespace.name, group_path(@namespace), data: { turbo: false } %>
-            <% else %>
-              <%= link_to @namespace.name,
-              project_samples_path(@namespace.project),
-              data: {
-                turbo: false,
-              } %>
-            <% end %>
-            <%= viral_pill(
-              text:
-                t(
-                  :"members.access_levels.level_#{Member.effective_access_level(@namespace, Current.user)}",
-                ),
-              color: "transparent",
-              border: true,
-              classes: "ml-2",
-            ) %></div>
-          <%= render ClipboardComponent.new(value: @namespace.puid) do %>
-            <p class="text-sm text-slate-500 dark:text-slate-300"><%= @namespace.puid %></p>
+        <div class="flex items-center space-x-2">
+          <% if @namespace.type == "Group" %>
+            <%= link_to @namespace.name, group_path(@namespace), data: { turbo: false } %>
+          <% else %>
+            <%= link_to @namespace.name,
+            project_samples_path(@namespace.project),
+            data: {
+              turbo: false,
+            } %>
           <% end %>
+          <span
+            class="
+              pl-2 text-xs font-medium text-indigo-800 bg-indigo-100 border border-indigo-300
+              rounded-full dark:bg-indigo-900 dark:text-indigo-300
+            "
+          >
+            <%= render ClipboardComponent.new(value: @namespace.puid) do %>
+              <p class="text-sm text-slate-500 dark:text-slate-300"><%= @namespace.puid %></p>
+            <% end %>
+          </span>
+          <%= viral_pill(
+            text:
+              t(
+                :"members.access_levels.level_#{Member.effective_access_level(@namespace, Current.user)}",
+              ),
+            color: "transparent",
+            border: true,
+            classes: "ml-2",
+          ) %>
         </div>
+
       </div>
+      <p class="text-sm text-gray-500 dark:text-gray-400">
+        <%= @namespace.description %>
+      </p>
     </div>
   </div>
 </div>

diff --git a/app/components/viral/page_header_component.html.erb b/app/components/viral/page_header_component.html.erb
@@ -6,15 +6,22 @@
 
     <div>
       <% if @id %>
-        <div class="flex items-center">
+        <div class="flex items-center space-x-2">
           <h1
             class="
               inline text-2xl font-medium leading-tight text-slate-900 dark:text-white
             "
           ><%= title %></h1>
-          <%= render ClipboardComponent.new(value: id) do %>
-            <%= viral_pill(text: id, color: id_color, classes: "ml-2") %>
-          <% end %>
+          <span
+            class="
+              pl-2 text-xs font-medium text-indigo-800 bg-indigo-100 border border-indigo-300
+              rounded-full dark:bg-indigo-900 dark:text-indigo-300
+            "
+          >
+            <%= render ClipboardComponent.new(value: id) do %>
+              <p class="text-sm text-slate-500 dark:text-slate-300"><%= id %></p>
+            <% end %>
+          </span>
         </div>
       <% else %>
         <h1