style(pieces jointes): update UI

app/assets/stylesheets/gallery.scss

@@ -13,10 +13,6 @@
     object-fit: cover;
   }
 
-  .champ-updated {
-    width: 100%;
-  }
-
   .thumbnail {
     position: relative;
     display: flex;
@@ -56,7 +52,15 @@
   flex-wrap: wrap;
 
   .gallery-item {
-    margin: 0 2rem 1.5rem 0;
+    margin: 0 2rem 3rem 0;
+
+    .fr-download {
+      margin-bottom: 0;
+    }
+
+    .fr-text--sm {
+      margin-bottom: 0;
+    }
   }
 }
 

app/components/attachment/gallery_item_component.rb

@@ -62,7 +62,7 @@ class Attachment::GalleryItemComponent < ApplicationComponent
   def badge_updated_class
     class_names(
       "fr-badge fr-badge--sm" => true,
-      "fr-badge--new" => seen_at.present? && updated_at&.>(seen_at)
+      "highlighted" => seen_at.present? && updated_at&.>(seen_at)
     )
   end
 

app/components/attachment/gallery_item_component/gallery_item_component.html.haml

@@ -1,10 +1,6 @@
 .gallery-item
   - if !gallery_demande?
-    .fr-mb-1v
-      .fr-tag
-        = origin
-    .fr-mb-2v.champ-updated{ class: badge_updated_class }
-      = t(updated? ? '.updated_at' : '.created_at', datetime: helpers.try_format_datetime(updated_at, format: :veryshort))
+    %p.fr-tag.fr-tag--sm.fr-mb-3v= origin
   - if displayable_pdf?(blob) || displayable_image?(blob)
     = gallery_link(blob) do
       .thumbnail
@@ -12,13 +8,19 @@
         .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button }
           Visualiser
     - if !gallery_demande?
-      .champ-libelle
+      .fr-text--sm.fr-mt-2v.fr-mb-1v
         = libelle.truncate(25)
     = render Attachment::ShowComponent.new(attachment:, truncate: true, new_tab: gallery_demande?)
+    - if !gallery_demande?
+      .fr-mt-2v.fr-mb-2v{ class: badge_updated_class }
+        = t(updated? ? '.updated_at' : '.created_at', datetime: helpers.try_format_datetime(updated_at, format: :veryshort))
   - else
     .thumbnail
       = image_tag('apercu-indisponible.png')
     - if !gallery_demande?
-      .champ-libelle
+      .fr-text--sm.fr-mt-2v.fr-mb-1v
         = libelle.truncate(25)
     = render Attachment::ShowComponent.new(attachment:, truncate: true, new_tab: gallery_demande?)
+    - if !gallery_demande?
+      .fr-mt-2v.fr-mb-2v{ class: badge_updated_class }
+        = t(updated? ? '.updated_at' : '.created_at', datetime: helpers.try_format_datetime(updated_at, format: :veryshort))

spec/components/attachment/gallery_item_component_spec.rb

@@ -36,7 +36,7 @@ RSpec.describe Attachment::GalleryItemComponent, type: :component do
 
     it "displays when gallery item has been added" do
       expect(subject).to have_text('Ajoutée le')
-      expect(subject).not_to have_css('.fr-badge--new')
+      expect(subject).not_to have_css('.highlighted')
       expect(subject).to have_text(component.helpers.try_format_datetime(attachment.record.created_at, format: :veryshort))
     end
 
@@ -78,7 +78,7 @@ RSpec.describe Attachment::GalleryItemComponent, type: :component do
         end
 
         it 'displays datetime in the right style' do
-          expect(subject).to have_css('.fr-badge--new')
+          expect(subject).to have_css('.highlighted')
         end
       end
 
@@ -90,7 +90,7 @@ RSpec.describe Attachment::GalleryItemComponent, type: :component do
         end
 
         it 'displays datetime in the right style' do
-          expect(subject).not_to have_css('.fr-badge--new')
+          expect(subject).not_to have_css('.highlighted')
         end
       end
     end