Fix design of announcements in admin UI (#12989)

3 files changed, 60 insertions, 27 deletions

diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index 89c45cab6..b0307fb71 100644
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -887,3 +887,46 @@ a.name-tag,
 .center-text {
   text-align: center;
 }
+
+.announcements-list {
+  border: 1px solid lighten($ui-base-color, 4%);
+  border-radius: 4px;
+
+  &__item {
+    padding: 15px 0;
+    background: $ui-base-color;
+    border-bottom: 1px solid lighten($ui-base-color, 4%);
+
+    &__title {
+      padding: 0 15px;
+      display: block;
+      font-weight: 500;
+      font-size: 18px;
+      line-height: 1.5;
+      color: $secondary-text-color;
+      text-decoration: none;
+      margin-bottom: 10px;
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: $primary-text-color;
+      }
+    }
+
+    &__meta {
+      padding: 0 15px;
+      color: $dark-text-color;
+    }
+
+    &__action-bar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+  }
+}
diff --git a/app/views/admin/announcements/_announcement.html.haml b/app/views/admin/announcements/_announcement.html.haml
index f8a6c66de..1c7f89ef2 100644
--- a/app/views/admin/announcements/_announcement.html.haml
+++ b/app/views/admin/announcements/_announcement.html.haml
@@ -1,21 +1,19 @@
-%tr
-  %td
+.announcements-list__item
+  = link_to edit_admin_announcement_path(announcement), class: 'announcements-list__item__title' do
     = truncate(announcement.text)
-  %td
-    = time_range(announcement) if announcement.time_range?
-  %td
-    - if announcement.scheduled_at.present?
-      = fa_icon('clock-o') if announcement.scheduled_at > Time.now.utc
-      = l(announcement.scheduled_at)
-    - else
-      = l(announcement.created_at)
-  %td
-    - if can?(:update, announcement)
-      - if announcement.published?
-        = table_link_to 'pause', t('admin.announcements.unpublish'), unpublish_admin_announcement_path(announcement), method: :post, data: { confirm: t('admin.accounts.are_you_sure') }
+
+  .announcements-list__item__action-bar
+    .announcements-list__item__meta
+      - if announcement.scheduled_at.present?
+        = t('admin.announcements.scheduled_for', time: l(announcement.scheduled_at))
       - else
-        = table_link_to 'play', t('admin.announcements.publish'), publish_admin_announcement_path(announcement), method: :post, data: { confirm: t('admin.accounts.are_you_sure') }
+        = l(announcement.created_at)
 
-      = table_link_to 'pencil', t('generic.edit'), edit_admin_announcement_path(announcement)
+    %div
+      - if can?(:update, announcement)
+        - if announcement.published?
+          = table_link_to 'toggle-off', t('admin.announcements.unpublish'), unpublish_admin_announcement_path(announcement), method: :post, data: { confirm: t('admin.accounts.are_you_sure') }
+        - else
+          = table_link_to 'toggle-on', t('admin.announcements.publish'), publish_admin_announcement_path(announcement), method: :post, data: { confirm: t('admin.accounts.are_you_sure') }
 
-    = table_link_to 'trash', t('generic.delete'), admin_announcement_path(announcement), method: :delete, data: { confirm: t('admin.accounts.are_you_sure') } if can?(:destroy, announcement)
+      = table_link_to 'trash', t('generic.delete'), admin_announcement_path(announcement), method: :delete, data: { confirm: t('admin.accounts.are_you_sure') } if can?(:destroy, announcement)
diff --git a/app/views/admin/announcements/index.html.haml b/app/views/admin/announcements/index.html.haml
index 634f586fb..40f02b914 100644
--- a/app/views/admin/announcements/index.html.haml
+++ b/app/views/admin/announcements/index.html.haml
@@ -15,16 +15,8 @@
   %div.muted-hint.center-text
     = t 'admin.announcements.empty'
 - else
-  .table-wrapper
-    %table.table
-      %thead
-        %tr
-          %th= t('simple_form.labels.announcement.text')
-          %th= t('admin.announcements.time_range')
-          %th= t('admin.announcements.published')
-          %th
-      %tbody
-        = render partial: 'announcement', collection: @announcements
+  .announcements-list
+    = render partial: 'announcement', collection: @announcements
 
 = paginate @announcements