spina-admin-conferences-fork 2.1.2 → 3.0.0.rc1

data/app/views/spina/admin/conferences/delegates/_form.html.haml

@@ -1,24 +1,28 @@
-- if @delegate.errors.any?
-  - content_for :notifications do
-    = render 'errors', errors: @delegate.errors
+%div{ data: { controller: 'tabs',
+              tabs: { active: 'cursor-default text-gray-900 bg-spina-dark bg-opacity-10',
+                      inactive: 'cursor-pointer bg-transparent text-gray-400 border-transparent' } } }
+  = render Spina::UserInterface::HeaderComponent.new do |header|
+    - header.actions do
+      - if @delegate.persisted?
+        = render Spina::UserInterface::DropdownComponent.new do |dropdown|
+          - dropdown.button(classes: "btn btn-default px-3") do
+            = heroicon('dots-horizontal', style: :solid, class: "w-5 h-5 text-gray-600")
 
-= form_for [:admin_conferences, @delegate], html: { autocomplete: 'off' } do |f|
-  %header#header
-    = render partial: 'spina/admin/shared/breadcrumbs'
+          - dropdown.menu do
+            = button_to t('spina.permanently_delete'), admin_conferences_delegate_path(@delegate), method: :delete, class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100 hover:bg-opacity-50 hover:text-red-500 focus:outline-none focus:bg-gray-100 focus:text-gray-900", form: {data: { controller: 'confirm', confirm_message: t('.delete_confirmation', delegate: @delegate.full_name) } }
 
-    #header_actions
-      %button.button.button-primary{ type: 'submit' }
-        = icon('check')
+      = button_tag type: :submit, form: dom_id(@delegate), class: 'btn btn-primary', data: { controller: 'button', action: 'button#loading', loading_message: t('spina.ui.saving')} do
+        = heroicon('check', style: :solid, class: 'w-5 h-5 mr-1 -ml-2')
         = t '.save'
 
-      = link_to t('spina.cancel'), admin_conferences_delegates_path, class: 'button', style: 'margin-right: 0'
+    - header.navigation do
+      %nav.-mb-3.mt-4
+        %ul.inline-flex.w-auto.rounded-md.bg-white
+          - @tabs.each do |tab|
+            %button.block.px-3.leading-relaxed.py-1.hover:text-gray-800.rounded-md.text-gray-400.font-medium.text-sm.flex.items-center.whitespace-nowrap{ type: 'button', data: { action: 'tabs#show', 'tabs-target': 'button', 'pane-id': "#{tab}" } }
+              = t ".#{tab}"
 
-    %nav#secondary.tabs
-      %ul
-        - @tabs.each_with_index do |tab, i|
-          %li{ class: ('active' if i == 0) }
-            = link_to t(".#{tab}"), "##{tab}"
-
-  #delegate_details.tab-content.active= render 'form_delegate_details', f: f
-  #conferences.tab-content= render partial: 'conferences', object: @delegate.conferences
-  #presentations.tab-content= render partial: 'presentations', object: @delegate.presentations
+  .p-4.md:p-8
+    - @tabs.each_with_index do |tab, i|
+      %div{ 'data-tabs-target': 'pane', id: tab, hidden: i != 0 }
+        = render "form_#{tab}"

data/app/views/spina/admin/conferences/delegates/_form_conferences.html.haml

@@ -0,0 +1 @@
+= render partial: 'conferences', object: @delegate.conferences

data/app/views/spina/admin/conferences/delegates/_form_delegate_details.html.haml

@@ -1,53 +1,29 @@
-.page-form
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Delegate.human_attribute_name :name
-    .page-form-control
-      .input-group
-        = f.text_field :first_name, placeholder: Spina::Admin::Conferences::Delegate.human_attribute_name(:first_name), required: true, class: 'input-large'
-        = f.text_field :last_name, placeholder: Spina::Admin::Conferences::Delegate.human_attribute_name(:last_name), required: true, class: 'input-large'
-
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Delegate.human_attribute_name :institution
-    .page-form-control
-      .select-dropdown= f.collection_select :institution_id, Spina::Admin::Conferences::Institution.all, :id, :name, {}, required: true
-
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Delegate.human_attribute_name :email_address
-    .page-form-control= f.email_field :email_address, placeholder: Spina::Admin::Conferences::Delegate.human_attribute_name(:email_address), required: true
-
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Delegate.human_attribute_name :url
-    .page-form-control= f.url_field :url, placeholder: Spina::Admin::Conferences::Delegate.human_attribute_name(:url)
-
-  .page-form-group
-    .page-form-label
-      = Spina::Admin::Conferences::Delegate.human_attribute_name :dietary_requirements
-    .page-form-content
-      .well{ style: 'margin: 0' }
-        .table-container
-          %table.table{ style: 'margin: 0' }
-            %tbody
-              = f.collection_check_boxes :dietary_requirement_ids, Spina::Admin::Conferences::DietaryRequirement.all, :id, :name do |builder|
-                %tr
-                  %td{ style: "padding-left: 16px" }
-                    .form-checkbox
-                      = builder.check_box
-                      = builder.label
-
-  .page-form-group
-    .page-form-label
-      = Spina::Admin::Conferences::Delegate.human_attribute_name :conferences
-    .page-form-content
-      .well{ style: 'margin: 0' }
-        .table-container
-          %table.table{ style: 'margin: 0' }
-            %tbody
-              = f.collection_check_boxes :conference_ids, Spina::Admin::Conferences::Conference.all, :id, :name, {} do |builder|
-                %tr
-                  %td{ style: "padding-left: 16px" }
-                    .form-checkbox
-                      = builder.check_box
-                      = builder.label
-
-- unless @delegate.new_record?
-  .pull-right= link_to t('spina.permanently_delete'), admin_conferences_delegate_path(@delegate), method: :delete, data: { confirm: t('.delete_confirmation', delegate: @delegate.full_name) }, class: %w[button button-link button-danger]
+= form_with model: [spina, :admin_conferences, @delegate], id: dom_id(@delegate), html: { autocomplete: 'off' } do |f|
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Delegate.human_attribute_name(:first_name)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :first_name)
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Delegate.human_attribute_name(:last_name)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :last_name)
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Room.human_attribute_name(:institution)) do
+    = f.collection_select :institution_id, Spina::Admin::Conferences::Institution.all, :id, :name, {}, class: 'form-select'
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Room.human_attribute_name(:email_address)) do
+    = f.email_field :email_address, class: 'form-input block w-full max-w-5xl sm:text-sm sm:leading-5'
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Room.human_attribute_name(:url)) do
+    = f.url_field :url, class: 'form-input block w-full max-w-5xl sm:text-sm sm:leading-5'
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Delegate.human_attribute_name(:dietary_requirements)) do
+    %table.table{ style: 'margin: 0' }
+      %tbody.collection-check-boxes
+        = f.collection_check_boxes :dietary_requirement_ids, Spina::Admin::Conferences::DietaryRequirement.all, :id, :name do |builder|
+          %tr
+            %td{ style: "padding-left: 16px" }
+              .form-checkbox
+                = builder.check_box
+                = builder.label
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Delegate.human_attribute_name(:conferences)) do
+    %table.table{ style: 'margin: 0' }
+      %tbody.collection-check-boxes
+        = f.collection_check_boxes :conference_ids, Spina::Admin::Conferences::Conference.all, :id, :name do |builder|
+          %tr
+            %td{ style: "padding-left: 16px" }
+              .form-checkbox
+                = builder.check_box
+                = builder.label

data/app/views/spina/admin/conferences/delegates/_form_presentations.html.haml

@@ -0,0 +1 @@
+= render partial: 'presentations', object: @delegate.presentations

data/app/views/spina/admin/conferences/delegates/index.html.haml

@@ -1,13 +1,17 @@
-- content_for(:header_actions) do
-  %label.button{ for: 'file' }
-    = icon 'cog'
-    = t '.import'
-    = form_with url: import_admin_conferences_delegates_path do |f|
-      = f.submit style: 'display: none'
-      = f.file_field :file, multiple: false, style: 'display: none'
-  = link_to new_admin_conferences_delegate_path, class: %w[button button-primary], style: 'margin-right: 0' do
-    = icon 'plus'
-    = t '.new'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    .ml-3
+      %label.btn.btn-primary.w-full{ for: 'file' }
+        = heroicon 'cog', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.import'
+        = form_with url: import_admin_conferences_delegates_path do |f|
+          = f.submit style: 'display: none'
+          = f.file_field :file, multiple: false, style: 'display: none'
+
+    .ml-3
+      = link_to new_admin_conferences_delegate_path, class: 'btn btn-primary w-full' do
+        = heroicon 'plus', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.new'
 
 = render partial: 'delegates', object: @delegates
 = link_to_next_page @delegates, 'Next'

data/app/views/spina/admin/conferences/dietary_requirements/_dietary_requirement.html.haml

@@ -1,6 +1,7 @@
-%tr{ data: { dietary_requirement_id: dietary_requirement.id } }
-  %td= link_to dietary_requirement.name, edit_admin_conferences_dietary_requirement_path(dietary_requirement)
-  %td.align-right
-    = link_to edit_admin_conferences_dietary_requirement_path(dietary_requirement), class: %w[button button-small button-link] do
-      = icon 'pencil-outline'
-      = t 'spina.edit'
+%tr.border-b{ data: { dietary_requirement_id: dietary_requirement.id } }
+  %td= link_to dietary_requirement.name, edit_admin_conferences_dietary_requirement_path(dietary_requirement), class: 'block text-spina font-medium text-sm p-4 hover:text-spina-dark'
+  %td
+    = link_to edit_admin_conferences_dietary_requirement_path(dietary_requirement), class: 'btn btn-default mx-4 w-max' do
+      .flex.flex-nowrap.items-center.px-8.py-1
+        = heroicon 'pencil-alt', style: :outline, class: 'w-4 h-4'
+        .ml-2= t 'spina.edit'

data/app/views/spina/admin/conferences/dietary_requirements/_form.html.haml

@@ -1,23 +1,28 @@
-- if @dietary_requirement.errors.any?
-  - content_for :notifications do
-    = render 'errors', errors: @dietary_requirement.errors
+%div{ data: { controller: 'tabs',
+              tabs: { active: 'cursor-default text-gray-900 bg-spina-dark bg-opacity-10',
+                      inactive: 'cursor-pointer bg-transparent text-gray-400 border-transparent' } } }
+  = render Spina::UserInterface::HeaderComponent.new do |header|
+    - header.actions do
+      - if @dietary_requirement.persisted?
+        = render Spina::UserInterface::DropdownComponent.new do |dropdown|
+          - dropdown.button(classes: "btn btn-default px-3") do
+            = heroicon('dots-horizontal', style: :solid, class: "w-5 h-5 text-gray-600")
 
-= form_for [:admin_conferences, @dietary_requirement], html: { autocomplete: 'off' } do |f|
-  %header#header
-    = render partial: 'spina/admin/shared/breadcrumbs'
+          - dropdown.menu do
+            = button_to t('spina.permanently_delete'), admin_conferences_dietary_requirement_path(@dietary_requirement), method: :delete, class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100 hover:bg-opacity-50 hover:text-red-500 focus:outline-none focus:bg-gray-100 focus:text-gray-900", form: {data: { controller: 'confirm', confirm_message: t('.delete_confirmation', dietary_requirement: @dietary_requirement.name) } }
 
-    #header_actions
-      %button.button.button-primary{ type: 'submit' }
-        = icon 'check'
+      = button_tag type: :submit, form: dom_id(@dietary_requirement), class: 'btn btn-primary', data: { controller: 'button', action: 'button#loading', loading_message: t('spina.ui.saving')} do
+        = heroicon('check', style: :solid, class: 'w-5 h-5 mr-1 -ml-2')
         = t '.save'
 
-      = link_to t('spina.cancel'), admin_conferences_dietary_requirements_path, class: 'button', style: 'margin-right: 0'
+    - header.navigation do
+      %nav.-mb-3.mt-4
+        %ul.inline-flex.w-auto.rounded-md.bg-white
+          - @tabs.each do |tab|
+            %button.block.px-3.leading-relaxed.py-1.hover:text-gray-800.rounded-md.text-gray-400.font-medium.text-sm.flex.items-center.whitespace-nowrap{ type: 'button', data: { action: 'tabs#show', 'tabs-target': 'button', 'pane-id': "#{tab}" } }
+              = t ".#{tab}"
 
-    %nav#secondary.tabs
-      %ul
-        - @tabs.each_with_index do |tab, i|
-          %li{ class: ('active' if i == 0) }
-            = link_to t(".#{tab}"), "##{tab}"
-
-  #dietary_requirement_details.tab-content.active= render 'form_dietary_requirement_details', f: f
-  #delegates.tab-content= render partial: 'delegates', object: @dietary_requirement.delegates
+  .p-4.md:p-8
+    - @tabs.each_with_index do |tab, i|
+      %div{ 'data-tabs-target': 'pane', id: tab, hidden: i != 0 }
+        = render "form_#{tab}"

data/app/views/spina/admin/conferences/dietary_requirements/_form_delegates.html.haml

@@ -0,0 +1 @@
+= render partial: 'delegates', object: @dietary_requirement.delegates

data/app/views/spina/admin/conferences/dietary_requirements/_form_dietary_requirement_details.html.haml

@@ -1,8 +1,3 @@
-%div{ style: 'margin-top: 40px' }
-  .horizontal-form
-    .horizontal-form-group
-      .horizontal-form-label= Spina::Admin::Conferences::DietaryRequirement.human_attribute_name :name
-      .horizontal-form-content= f.text_field :name, placeholder: Spina::Admin::Conferences::DietaryRequirement.human_attribute_name(:name), required: true
-
-- unless @dietary_requirement.new_record?
-  .pull-right= link_to t('spina.permanently_delete'), admin_conferences_dietary_requirement_path(@dietary_requirement), method: :delete, data: { confirm: t('.delete_confirmation', dietary_requirement: @dietary_requirement.name) }, class: %w[button button-link button-danger]
+= form_with model: [spina, :admin_conferences, @dietary_requirement], id: dom_id(@dietary_requirement), html: { autocomplete: 'off' } do |f|
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::DietaryRequirement.human_attribute_name(:name)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :name)

data/app/views/spina/admin/conferences/dietary_requirements/index.html.haml

@@ -1,7 +1,9 @@
-- content_for(:header_actions) do
-  = link_to new_admin_conferences_dietary_requirement_path, class: %w[button button-primary], style: 'margin-right: 0' do
-    = icon 'plus'
-    = t '.new'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    .ml-3
+      = link_to new_admin_conferences_dietary_requirement_path, class: 'btn btn-primary w-full' do
+        = heroicon 'plus', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.new'
 
 = render partial: 'dietary_requirements', object: @dietary_requirements
 = link_to_next_page @dietary_requirements, 'Next'

data/app/views/spina/admin/conferences/institutions/_form.html.haml

@@ -1,24 +1,28 @@
-- if @institution.errors.any?
-  - content_for :notifications do
-    = render 'errors', errors: @institution.errors
+%div{ data: { controller: 'tabs',
+              tabs: { active: 'cursor-default text-gray-900 bg-spina-dark bg-opacity-10',
+                      inactive: 'cursor-pointer bg-transparent text-gray-400 border-transparent' } } }
+  = render Spina::UserInterface::HeaderComponent.new do |header|
+    - header.actions do
+      - if @institution.persisted?
+        = render Spina::UserInterface::DropdownComponent.new do |dropdown|
+          - dropdown.button(classes: "btn btn-default px-3") do
+            = heroicon('dots-horizontal', style: :solid, class: "w-5 h-5 text-gray-600")
 
-= form_for [:admin_conferences, @institution], html: { autocomplete: 'off' } do |f|
-  %header#header
-    = render partial: 'spina/admin/shared/breadcrumbs'
+          - dropdown.menu do
+            = button_to t('spina.permanently_delete'), admin_conferences_institution_path(@institution), method: :delete, class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100 hover:bg-opacity-50 hover:text-red-500 focus:outline-none focus:bg-gray-100 focus:text-gray-900", form: {data: { controller: 'confirm', confirm_message: t('.delete_confirmation', institution: @institution.name) } }
 
-    #header_actions
-      %button.button.button-primary{ type: 'submit' }
-        = icon 'check'
+      = button_tag type: :submit, form: dom_id(@institution), class: 'btn btn-primary', data: { controller: 'button', action: 'button#loading', loading_message: t('spina.ui.saving')} do
+        = heroicon('check', style: :solid, class: 'w-5 h-5 mr-1 -ml-2')
         = t '.save'
 
-      = link_to t('spina.cancel'), admin_conferences_institutions_path, class: 'button', style: 'margin-right: 0'
+    - header.navigation do
+      %nav.-mb-3.mt-4
+        %ul.inline-flex.w-auto.rounded-md.bg-white
+          - @tabs.each do |tab|
+            %button.block.px-3.leading-relaxed.py-1.hover:text-gray-800.rounded-md.text-gray-400.font-medium.text-sm.flex.items-center.whitespace-nowrap{ type: 'button', data: { action: 'tabs#show', 'tabs-target': 'button', 'pane-id': "#{tab}" } }
+              = t ".#{tab}"
 
-    %nav#secondary.tabs
-      %ul
-        - @tabs.each_with_index do |tab, i|
-          %li{ class: ('active' if i == 0) }
-            = link_to t(".#{tab}"), "##{tab}"
-
-  #institution_details.tab-content.active= render 'form_institution_details', f: f
-  #rooms.tab-content= render partial: 'rooms', object: @institution.rooms
-  #delegates.tab-content= render partial: 'delegates', object: @institution.delegates
+  .p-4.md:p-8
+    - @tabs.each_with_index do |tab, i|
+      %div{ 'data-tabs-target': 'pane', id: tab, hidden: i != 0 }
+        = render "form_#{tab}"

data/app/views/spina/admin/conferences/institutions/_form_delegates.html.haml

@@ -0,0 +1 @@
+= render partial: 'delegates', object: @institution.delegates

data/app/views/spina/admin/conferences/institutions/_form_institution_details.html.haml

@@ -1,29 +1,28 @@
-.page-form
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Institution.human_attribute_name :name
-    .page-form-control= f.text_field :name, placeholder: Spina::Admin::Conferences::Institution.human_attribute_name(:name), required: true, class: 'input-large'
+= form_with model: [spina, :admin_conferences, @institution], id: dom_id(@institution), html: { autocomplete: 'off' } do |f|
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Institution.human_attribute_name(:name)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :name)
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::Institution.human_attribute_name(:city)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :city)
 
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Institution.human_attribute_name :city
-    .page-form-control= f.text_field :city, placeholder: Spina::Admin::Conferences::Institution.human_attribute_name(:city), required: true
 
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::Institution.human_attribute_name :logo
-    .page-form-content{ data: { controller: 'image-form' } }
-      .page-form-media-picker
-        %div{ style: 'width: 100%' }
-          = link_to admin_media_picker_path(selected_ids: [f.object.logo_id], input: "media_picker_#{f.object.object_id}", mode: 'single'), remote: true, class: 'image', data: { target: 'image-form.image' } do
-            .page-form-media-picker-placeholder= t 'spina.images.choose_image'
-            %div{ id: "media_picker_#{f.object.object_id}" }
-              = f.hidden_field :logo_id, data: { target: 'image-form.imageId' }
-              = f.hidden_field :logo_signed_blob_id, value: f.object.logo&.file&.signed_id, data: {target: 'image-form.signedBlobId'}
-              = f.hidden_field :logo_filename, value: f.object.logo&.file&.filename, data: {target: 'image-form.filename'}
-            %div{ style: 'width: 200px; height: 150px; overflow: hidden' }
-              - if f.object.logo.present?
-                = image_tag main_app.url_for(f.object.logo.variant(resize: '400x300^', crop: '400x300+0+0')), width: 200, height: 150
+  %div(class="mt-6 relative" data-controller="media-picker unique-id" data-unique-id="#{dom_id(f.object, f.object.object_id)}" data-action="media-picker:done->media-picker#handleDone")
+    %label(class="block text-sm leading-5 font-medium text-gray-700")
+      = Spina::Admin::Conferences::Institution.human_attribute_name :logo
 
-        = button_tag type: :default, class: 'button button-small button-default', data: { action: 'image-form#remove' } do
-          %i.icon.icon-cross{ style: 'margin: 0; font-size: 10px' }
+    = f.hidden_field :logo_signed_blob_id, data: { media_picker_target: 'signedBlobId' }
+    = f.hidden_field :logo_filename, data: { media_picker_target: 'filename' }
+    = f.hidden_field :logo_id, data: { media_picker_target: 'imageId' }
 
-- unless @institution.new_record?
-  .pull-right= link_to t('spina.permanently_delete'), admin_conferences_institution_path(@institution), method: :delete, data: { confirm: t('.delete_confirmation', institution: @institution.name) }, class: %w[button button-link button-danger]
+    %button(class="absolute mt-3 ml-2 z-10 cursor-pointer flex items-center h-9 px-2 rounded-md bg-gray-700 bg-opacity-50 border-gray-300 active:shadow-inner text-gray-200 hover:text-white text-sm font-medium leading-none leading-none shadow-sm" data-action="media-picker#removeImage" data-media-picker-target="clearButton" type="button")
+      %svg(class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor")
+        %path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16")
+    
+    = link_to spina.admin_media_picker_path(target: dom_id(f.object, f.object.object_id)), class: "block relative mt-1 w-full", data: {turbo_frame: "modal"} do
+      %div{class:"w-36 h-36 bg-transparent border-2 border-dashed border-gray-300 rounded-lg flex items-center flex-col justify-center"}
+        %svg.mx-auto.h-12.w-12.text-gray-400{ stroke: 'currentColor', fill:'none', viewBox: '0 0 48 48' }
+          %path{d: 'M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round'}
+        .text-gray-400.font-medium.text-sm= t 'spina.images.choose_image'
+      
+      %div(class="border absolute inset-0 w-36 h-36 bg-gray-100 rounded-lg shadow-md overflow-hidden" data-media-picker-target="thumbnail")
+        - if f.object.logo.present?
+          = image_tag thumbnail_url(f.object.logo), class: 'object-contain h-36 w-full', data: { controller: 'image-fade-in' }

data/app/views/spina/admin/conferences/institutions/_form_rooms.html.haml

@@ -0,0 +1 @@
+= render partial: 'rooms', object: @institution.rooms

data/app/views/spina/admin/conferences/institutions/_institution.html.haml

@@ -1,7 +1,9 @@
-%tr{ data: { institution_id: institution.id } }
-  %td= link_to institution.name, edit_admin_conferences_institution_path(institution)
-  %td= institution.city
-  %td.align-right
-    = link_to edit_admin_conferences_institution_path(institution), class: %w[button button-small button-link] do
-      = icon 'pencil-outline'
-      = t 'spina.edit'
+%tr.border-b{ data: { institution_id: institution.id } }
+  %td= link_to institution.name, edit_admin_conferences_institution_path(institution), class: 'block text-spina font-medium text-sm p-4 hover:text-spina-dark'
+  %td
+    .block.font-light.text-sm.p-4= institution.city
+  %td
+    = link_to edit_admin_conferences_institution_path(institution), class: 'btn btn-default mx-4 w-max' do
+      .flex.flex-nowrap.items-center.px-8.py-1
+        = heroicon 'pencil-alt', style: :outline, class: 'w-4 h-4'
+        .ml-2= t 'spina.edit'

data/app/views/spina/admin/conferences/institutions/index.html.haml

@@ -1,7 +1,22 @@
-- content_for(:header_actions) do
-  = link_to new_admin_conferences_institution_path, class: %w[button button-primary], style: 'margin-right: 0' do
-    = icon 'plus'
-    = t '.new'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    .ml-3
+      = link_to new_admin_conferences_institution_path, class: 'btn btn-primary w-full' do
+        = heroicon 'plus', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.new'
+
+  - header.navigation do
+    %nav.-mb-1.md:-mb-3.mt-4
+      %ul.inline-flex.w-auto.rounded-md.bg-white
+        %li
+          = render Spina::UserInterface::TabLinkComponent.new(Spina::Admin::Conferences::Institution.model_name.human(count: 0),
+                                                              admin_conferences_institutions_path,
+                                                              active: controller_name == 'institutions')
+        %li
+          = render Spina::UserInterface::TabLinkComponent.new(Spina::Admin::Conferences::Room.model_name.human(count: 0),
+                                                              admin_conferences_rooms_path,
+                                                              active: controller_name == 'rooms')
+        
 
 = render partial: 'institutions', object: @institutions
 = link_to_next_page @institutions, 'Next'

data/app/views/spina/admin/conferences/presentation_attachment_types/_form.html.haml

@@ -1,23 +1,18 @@
-- if @presentation_attachment_type.errors.any?
-  - content_for :notifications do
-    = render 'errors', errors: @presentation_attachment_type.errors
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    - if @presentation_attachment_type.persisted?
+      = render Spina::UserInterface::DropdownComponent.new do |dropdown|
+        - dropdown.button(classes: "btn btn-default px-3") do
+          = heroicon('dots-horizontal', style: :solid, class: "w-5 h-5 text-gray-600")
 
-= form_for [:admin_conferences, @presentation_attachment_type], html: { autocomplete: 'off' } do |f|
-  %header#header
-    = render partial: 'spina/admin/shared/breadcrumbs'
+        - dropdown.menu do
+          = button_to t('spina.permanently_delete'), admin_conferences_presentation_attachment_type_path(@presentation_attachment_type), method: :delete, class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100 hover:bg-opacity-50 hover:text-red-500 focus:outline-none focus:bg-gray-100 focus:text-gray-900", form: {data: { controller: 'confirm', confirm_message: t('.delete_confirmation', presentation_attachment_type: @presentation_attachment_type.name) } }
 
-    #header_actions
-      %button.button.button-primary{ type: 'submit' }
-        = icon 'check'
-        = t '.save'
+    = button_tag type: :submit, form: dom_id(@presentation_attachment_type), class: 'btn btn-primary', data: { controller: 'button', action: 'button#loading', loading_message: t('spina.ui.saving')} do
+      = heroicon('check', style: :solid, class: 'w-5 h-5 mr-1 -ml-2')
+      = t '.save'
 
-      = link_to t('spina.cancel'), admin_conferences_presentation_attachment_types_path, class: 'button', style: 'margin-right: 0'
-
-  %div{ style: 'margin-top: 40px' }
-    .horizontal-form
-      .horizontal-form-group
-        .horizontal-form-label= Spina::Admin::Conferences::DietaryRequirement.human_attribute_name :name
-        .horizontal-form-content= f.text_field :name, placeholder: Spina::Admin::Conferences::DietaryRequirement.human_attribute_name(:name), required: true
-
-  - unless @presentation_attachment_type.new_record?
-    .pull-right= link_to t('spina.permanently_delete'), admin_conferences_presentation_attachment_type_path(@presentation_attachment_type), method: :delete, data: { confirm: t('.delete_confirmation', presentation_attachment_type: @presentation_attachment_type.name) }, class: %w[button button-link button-danger]
+.p-4.md:p-8
+  = form_with model: [spina, :admin_conferences, @presentation_attachment_type], id: dom_id(@presentation_attachment_type), html: { autocomplete: 'off' } do |f|
+    = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::DietaryRequirement.human_attribute_name(:name)) do
+      = render Spina::Forms::TextFieldComponent.new(f, :name)

data/app/views/spina/admin/conferences/presentation_attachment_types/_presentation_attachment_type.html.haml

@@ -1,6 +1,7 @@
-%tr{ data: { presentation_attachment_type_id: presentation_attachment_type.id } }
-  %td= link_to presentation_attachment_type.name, edit_admin_conferences_presentation_attachment_type_path(presentation_attachment_type)
-  %td.align-right
-    = link_to edit_admin_conferences_presentation_attachment_type_path(presentation_attachment_type), class: %w[button button-small button-link] do
-      = icon 'pencil-outline'
-      = t 'spina.edit'
+%tr.border-b{ data: { presentation_attachment_type_id: presentation_attachment_type.id } }
+  %td= link_to presentation_attachment_type.name, edit_admin_conferences_presentation_attachment_type_path(presentation_attachment_type), class: 'block text-spina font-medium text-sm p-4 hover:text-spina-dark'
+  %td
+    = link_to edit_admin_conferences_presentation_attachment_type_path(presentation_attachment_type), class: 'btn btn-default mx-4 w-max' do
+      .flex.flex-nowrap.items-center.px-8.py-1
+        = heroicon 'pencil-alt', style: :outline, class: 'w-4 h-4'
+        .ml-2= t 'spina.edit'

data/app/views/spina/admin/conferences/presentation_attachment_types/index.html.haml

@@ -1,7 +1,9 @@
-- content_for(:header_actions) do
-  = link_to new_admin_conferences_presentation_attachment_type_path, class: %w[button button-primary], style: 'margin-right: 0' do
-    = icon 'plus'
-    = t '.new'
+= render Spina::UserInterface::HeaderComponent.new do |header|
+  - header.actions do
+    .ml-3
+      = link_to new_admin_conferences_presentation_attachment_type_path, class: 'btn btn-primary w-full' do
+        = heroicon 'plus', style: :solid, class: 'w-7 h-7 -m1-2'
+        = t '.new'
 
 = render partial: 'presentation_attachment_types', object: @presentation_attachment_types
 = link_to_next_page @presentation_attachment_types, 'Next'

data/app/views/spina/admin/conferences/presentation_types/_form.html.haml

@@ -1,24 +1,28 @@
-- if @presentation_type.errors.any?
-  - content_for :notifications do
-    = render 'errors', errors: @presentation_type.errors
+%div{ data: { controller: 'tabs',
+              tabs: { active: 'cursor-default text-gray-900 bg-spina-dark bg-opacity-10',
+                      inactive: 'cursor-pointer bg-transparent text-gray-400 border-transparent' } } }
+  = render Spina::UserInterface::HeaderComponent.new do |header|
+    - header.actions do
+      - if @presentation_type.persisted?
+        = render Spina::UserInterface::DropdownComponent.new do |dropdown|
+          - dropdown.button(classes: "btn btn-default px-3") do
+            = heroicon('dots-horizontal', style: :solid, class: "w-5 h-5 text-gray-600")
 
-= form_for [:admin_conferences, @presentation_type], html: { autocomplete: 'off' } do |f|
-  %header#header
-    = render partial: 'spina/admin/shared/breadcrumbs'
+          - dropdown.menu do
+            = button_to t('spina.permanently_delete'), admin_conferences_presentation_type_path(@presentation_type), method: :delete, class: "block w-full text-left px-4 py-2 text-sm leading-5 font-medium text-red-500 cursor-pointer bg-white hover:bg-red-100 hover:bg-opacity-50 hover:text-red-500 focus:outline-none focus:bg-gray-100 focus:text-gray-900", form: {data: { controller: 'confirm', confirm_message: t('.delete_confirmation', presentation_type: @presentation_type.name) } }
 
-    #header_actions
-      %button.button.button-primary{ type: 'submit' }
-        = icon 'check'
+      = button_tag type: :submit, form: dom_id(@presentation_type), class: 'btn btn-primary', data: { controller: 'button', action: 'button#loading', loading_message: t('spina.ui.saving')} do
+        = heroicon('check', style: :solid, class: 'w-5 h-5 mr-1 -ml-2')
         = t '.save'
 
-      = link_to t('spina.cancel'), admin_conferences_presentation_types_path, class: 'button', style: 'margin-right: 0'
+    - header.navigation do
+      %nav.-mb-3.mt-4
+        %ul.inline-flex.w-auto.rounded-md.bg-white
+          - @tabs.each do |tab|
+            %button.block.px-3.leading-relaxed.py-1.hover:text-gray-800.rounded-md.text-gray-400.font-medium.text-sm.flex.items-center.whitespace-nowrap{ type: 'button', data: { action: 'tabs#show', 'tabs-target': 'button', 'pane-id': "#{tab}" } }
+              = t ".#{tab}"
 
-    %nav#secondary.tabs
-      %ul
-        - @tabs.each_with_index do |tab, i|
-          %li{ class: ('active' if i == 0) }
-            = link_to t(".#{tab}"), "##{tab}"
-
-  #presentation_type_details.tab-content.active= render 'form_presentation_type_details', f: f
-  #sessions.tab-content= render partial: 'sessions', object: @presentation_type.sessions
-  #presentations.tab-content= render partial: 'presentations', object: @presentation_type.presentations
+  .p-4.md:p-8
+    - @tabs.each_with_index do |tab, i|
+      %div{ 'data-tabs-target': 'pane', id: tab, hidden: i != 0 }
+        = render "form_#{tab}"

data/app/views/spina/admin/conferences/presentation_types/_form_presentation_type_details.html.haml

@@ -1,16 +1,7 @@
-.page-form
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::PresentationType.human_attribute_name :conference
-    .page-form-control
-      .select-dropdown= f.collection_select :conference_id, Spina::Admin::Conferences::Conference.order(:dates).reverse_order, :id, :name, {}, required: true, data: { action: 'spina--admin--conferences--select-options#updateFilteredData' }
-
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::PresentationType.human_attribute_name :name
-    .page-form-control= f.text_field :name, placeholder: Spina::Admin::Conferences::PresentationType.human_attribute_name(:name), required: true, class: 'input-large'
-
-  .page-form-group
-    .page-form-label= Spina::Admin::Conferences::PresentationType.human_attribute_name :duration
-    .page-form-control= f.number_field :minutes, value: @presentation_type.minutes, placeholder: Spina::Admin::Conferences::PresentationType.human_attribute_name(:duration), required: true, step: 5, min: 5
-
-- unless @presentation_type.new_record?
-  .pull-right= link_to t('spina.permanently_delete'), admin_conferences_presentation_type_path(@presentation_type), method: :delete, data: { confirm: t('.delete_confirmation', presentation_type: @presentation_type.name) }, class: %w[button button-link button-danger]
+= form_with model: [spina, :admin_conferences, @presentation_type], id: dom_id(@presentation_type), html: { autocomplete: 'off' } do |f|
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::PresentationType.human_attribute_name(:conference)) do
+    = f.collection_select :conference_id, Spina::Admin::Conferences::Conference.order(:dates).reverse_order, :id, :name
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::PresentationType.human_attribute_name(:name)) do
+    = render Spina::Forms::TextFieldComponent.new(f, :name)
+  = render Spina::Forms::GroupComponent.new(label: Spina::Admin::Conferences::PresentationType.human_attribute_name(:duration)) do
+    = f.number_field :minutes, value: @presentation_type.minutes, placeholder: Spina::Admin::Conferences::PresentationType.human_attribute_name(:duration), required: true, step: 5, min: 5

data/app/views/spina/admin/conferences/presentation_types/_form_presentations.html.haml

@@ -0,0 +1 @@
+= render partial: 'presentations', object: @presentation_type.presentations

data/app/views/spina/admin/conferences/presentation_types/_form_sessions.html.haml

@@ -0,0 +1 @@
+= render partial: 'sessions', object: @presentation_type.sessions