Merge pull request #480 from slovensko-digital/GO-24/add_labels_to_cr…

…eating_new_label GO-24 Add labels to creating new tag
slovensko-digital · Oct 17, 2024 · b553b91 · b553b91
2 parents 4827c12 + e842594
commit b553b91
Showing 1 changed file with 18 additions and 10 deletions.
diff --git a/app/components/admin/tags/tag_form_component.html.erb b/app/components/admin/tags/tag_form_component.html.erb
@@ -3,28 +3,36 @@
     <div class="fixed inset-0 transition-opacity bg-gray-400 bg-opacity-75" aria-hidden="true"></div>
     <div class="relative flex items-center justify-center h-full">
       <div class="flex flex-col justify-start items-start overflow-hidden rounded-lg bg-white border border-gray-300" style="box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.1);">
-        <div class="flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 overflow-hidden gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
+        <div class="flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 overflow-hidden gap-4 p-6 border-t-0 border-r-0 border-b-0 border-l-0 border-gray-200">
           <div class="flex flex-col justify-start items-start flex-grow relative">
-            <p class="self-stretch flex-grow-0 flex-shrink-0 text-xl font-semibold text-left text-gray-900"><%= @tag.new_record? ? "Nový štítok" : "Úprava štítku" %></p>
-            <p class="flex-grow-0 flex-shrink-0 text-xs text-left text-gray-500">Názov štítku</p>
+            <h2 class="text-base font-semibold leading-7 text-gray-900"><%= @tag.new_record? ? "Nový štítok" : "Úprava štítku" %></h2>
           </div>
           <%= render Common::CloseButtonComponent.new(link_to: admin_tenant_tags_path(Current.tenant)) %>
         </div>
         <%= form_with model: @tag, url: (@tag.new_record? ? admin_tenant_tags_path(Current.tenant) : admin_tenant_tag_path(@tag.tenant, @tag)) do |form| %>
-          <div class="flex flex-col justify-start items-start self-stretch flex-grow-0 flex-shrink-0 w-400">
-            <div class="flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
+          <div class="flex flex-col justify-start items-start py-3 self-stretch flex-grow-0 flex-shrink-0 w-400">
+            <div class="flex justify-start items-center self-stretch flex-grow-0 flex-shrink-0 gap-4 px-6 py-3 border-t-0 border-r-0 border-b-0 border-l-0 border-gray-200">
               <div class="flex flex-col justify-start items-start self-stretch flex-grow overflow-hidden gap-2 rounded-md">
-                <%= form.text_field :name, placeholder: "Názov štítku", class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+                <%= form.label :name, "Názov štítku", class: "block text-sm font-medium leading-6 text-gray-900" %>
+                <div class="flex w-full rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
+                  <%= form.text_field :name, class: "block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" %>
+                </div>
               </div>
             </div>
-            <div class="flex justify-start items-center self-stretch gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
+            <div class="flex justify-start items-center self-stretch gap-4 px-6 py-3 border-t-0 border-r-0 border-b-0 border-l-0 border-gray-200">
               <div class="flex flex-col justify-start items-start self-stretch flex-grow overflow-hidden gap-2 rounded-md">
-                <%= form.select :color, helpers.color_select_options, {}, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+                <%= form.label :color, "Farba", class: "block text-sm font-medium leading-6 text-gray-900" %>
+                <div class="mt-2 w-full">
+                  <%= form.select :color, helpers.color_select_options, {}, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6" %>
+                </div>
               </div>
             </div>
-            <div class="flex justify-start items-center self-stretch gap-4 p-6 border-t-0 border-r-0 border-b border-l-0 border-gray-200">
+            <div class="flex justify-start items-center self-stretch gap-4 px-6 py-3 border-t-0 border-r-0 border-b-0 border-l-0 border-gray-200">
               <div class="flex flex-col justify-start items-start self-stretch flex-grow overflow-hidden gap-2 rounded-md">
-                <%= form.select :icon, helpers.icon_select_options, {}, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" %>
+                <%= form.label :icon, "Ikonka", class: "block text-sm font-medium leading-6 text-gray-900" %>
+                <div class="mt-2 w-full">
+                  <%= form.select :icon, helpers.icon_select_options, {}, class: "block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6" %>
+                </div>
               </div>
             </div>
           </div>