Make sharing options more obvious

app/javascript/retrospring/features/inbox/entry/options.ts

@@ -4,4 +4,13 @@ export default function optionsEntryHandler(event: Event): void {
 
   const options = document.querySelector(`#ib-options-${inboxId}`);
   options.classList.toggle('d-none');
+
+  const buttonIcon = button.getElementsByTagName('i')[0];
+  if (buttonIcon.classList.contains('fa-chevron-down')) {
+    buttonIcon.classList.remove('fa-chevron-down');
+    buttonIcon.classList.add('fa-chevron-up');
+  } else {
+    buttonIcon.classList.remove('fa-chevron-up');
+    buttonIcon.classList.add('fa-chevron-down');
+  }
 }

app/views/inbox/_entry.html.haml

@@ -30,8 +30,8 @@
       %button.btn.btn-danger{ name: "ib-destroy", data: { ib_id: i.id } }
         = t("voc.delete")
       %button.btn.btn-default{ name: "ib-options", data: { ib_id: i.id, state: :hidden } }
-        %i.fa.fa-cog
-        %span.visually-hidden= t(".options")
+        %i.fa.fa-chevron-down
+        %span.pe-none= t(".options")
     .card-footer.d-none{ id: "ib-options-#{i.id}" }
       %h4= t(".sharing.heading")
       - if current_user.services.count.positive?

config/locales/views.en.yml

@@ -211,7 +211,7 @@ en:
       answers:
         one: "1 answer"
         other: "%{count} answers"
-      options: "Options"
+      options: "Sharing Options"
       placeholder: "Write your answer here…"
       sharing:
         heading: "Sharing"