Use icons in admin table actions

The planned budget investments redesign includes using icons in some
tables, so we might as well use them everywhere.

The original design used Foundation to show the tooltips. We're using
CSS in order to keep the ERB/HTML code simple. One advantage of using
CSS is we can show the tooltip on focus as well, just like accessibility
guidelines recommend [1]. On the other hand, Foundation tooltips appear
on the sides when the link is at the bottom of the page, making sure
they're visible in this case, while CSS tooltips do not. Neither CSS
tooltips nor Foundation tooltips are dismissable, which might be an
accessibility issue.

Note we aren't changing any ERB files in order to replace links with
icons; we're only changing CSS and one line of Ruby code.

[1] https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus

app/assets/stylesheets/_consul_settings.scss

@@ -122,3 +122,4 @@ $pagination-radius: $global-radius;
 
 $show-header-for-stacked: true;
 
+$tooltip-background-color: $brand;

app/assets/stylesheets/admin/table_actions.scss

@@ -1,25 +1,128 @@
 .admin .table-actions {
-  align-items: baseline;
   display: flex;
 
   > :not(:first-child) {
-    margin-left: $line-height / 2;
+    margin-left: rem-calc(10);
-  }
-
-  > p {
-    align-self: flex-start;
   }
 
   a {
-    @include button($style: hollow);
+    position: relative;
-    border-color: $link !important;
-    color: $link !important;
-    font-size: $base-font-size;
-    margin-bottom: 0;
 
-    &.destroy-link {
+    > :first-child {
-      border-color: $alert-color !important;
+      @include bottom-tooltip;
-      color: $alert-color !important;
+      left: -10000px;
+      opacity: 0;
+      transform: translateX(-50%);
+      transition: opacity 0.3s, left 0s 0.3s;
+    }
+
+    &:hover,
+    &:focus {
+      color: $link-hover;
+
+      > :first-child {
+        left: 50%;
+        opacity: 1;
+        transition: opacity 0.4s 0.2s;
+      }
+    }
+
+    &:not(:focus) > :first-child:hover {
+      left: -10000px;
+    }
+
+    &::before {
+      font-size: rem-calc(18);
     }
   }
+
+  .edit-link {
+    @include has-fa-icon(edit, regular);
+  }
+
+  .destroy-link {
+    @include has-fa-icon(trash-alt, regular);
+    color: $alert-color;
+  }
+
+  .show-link,
+  .preview-link {
+    @include has-fa-icon(eye, regular);
+  }
+
+  .new-link,
+  .assign-booth-link {
+    @include has-fa-icon(plus-circle, solid);
+    color: $color-success;
+  }
+
+  .create-role-link,
+  .create-officer-link {
+    @include has-fa-icon(user-plus, solid);
+    color: $color-success;
+  }
+
+  .destroy-role-link,
+  .destroy-officer-link,
+  .reject-link {
+    @include has-fa-icon(user-times, solid);
+    color: $alert-color;
+  }
+
+  .restore-link {
+    @include has-fa-icon(undo, solid);
+    color: $warning-color;
+  }
+
+  .confirm-hide-link {
+    @include has-fa-icon(flag, regular);
+    color: $alert-color;
+  }
+
+  .verify-link {
+    @include has-fa-icon(user-check, solid);
+    color: $color-success;
+  }
+
+  .preview-pending-link {
+    @include has-fa-icon(search, solid);
+  }
+
+  .send-pending-link {
+    @include has-fa-icon(share-square, regular);
+    color: $color-success;
+  }
+
+  .configure-link,
+  .answers-link {
+    @include has-fa-icon(tools, solid);
+  }
+
+  .download-link {
+    @include has-fa-icon(download, solid);
+  }
+
+  .shifts-link {
+    @include has-fa-icon(clock, regular);
+  }
+
+  .investments-link {
+    @include has-fa-icon(coins, solid);
+    color: $warning-color;
+  }
+
+  .groups-link,
+  .headings-link {
+    @include has-fa-icon(chart-pie, solid);
+    color: $color-success;
+  }
+
+  .manage-link,
+  .ballots-link {
+    @include has-fa-icon(archive, solid);
+  }
+
+  .cards-link {
+    @include has-fa-icon(images, regular);
+  }
 }

app/assets/stylesheets/mixins.scss

@@ -176,3 +176,17 @@
     }
   }
 }
+
+@mixin bottom-tooltip {
+  @include tooltip;
+  line-height: $global-lineheight;
+  margin-top: $line-height / 8;
+  white-space: nowrap;
+
+  &::before {
+    @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}

app/components/concerns/table_action_link.rb

@@ -2,6 +2,6 @@ module TableActionLink
   extend ActiveSupport::Concern
 
   def link_to(text, url, **options)
-    super(text, url, options)
+    super(tag.span(text), url, options)
   end
 end