Groups and headings CRUD from budget view

Before, users needed to navigate to the list of groups in order to
add, edit or delete a group.

Also, they need to navigate to the list of groups first, and then to
the list of headings for that group in order to add, edit or delete a
heading.

Now, it's possible to do all these actions for any group or heading
from the participatory budget view to bring simplicity and to reduce
the number of clicks from a user perspective.

Co-Authored-By: Javi Martín <javim@elretirao.net>

app/assets/stylesheets/admin/budgets/groups_and_headings.scss

@@ -0,0 +1,92 @@
+.admin .groups-and-headings {
+  $gap: rem-calc(map-get($grid-column-gutter, medium));
+
+  > section + section {
+    margin-top: $line-height * 1.5;
+  }
+
+  > section {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  h4 {
+    margin-#{$global-right}: $gap;
+  }
+
+  dl,
+  .callout {
+    width: 100%;
+  }
+
+  dt,
+  dd {
+    display: inline;
+  }
+
+  dt {
+    font-weight: normal;
+  }
+
+  dd {
+    font-weight: bold;
+  }
+
+  th:last-child {
+    text-align: $global-right;
+  }
+
+  .table-actions {
+    justify-content: flex-end;
+  }
+
+  .groups-actions {
+    @include flex-with-gap($gap);
+    align-items: flex-start;
+    flex: 1;
+    margin-bottom: $line-height / 2;
+
+    .edit-link,
+    .destroy-link {
+      @include icon-on-top;
+    }
+
+    .edit-link {
+      @include has-fa-icon(edit, regular);
+    }
+
+    .destroy-link {
+      @include has-fa-icon(trash-alt, regular);
+      color: darken($alert-color, 5%);
+    }
+
+    .new-link {
+      @include hollow-button;
+      flex-shrink: 0;
+    }
+
+    > :nth-last-child(2) {
+      margin-#{$global-right}: $gap;
+    }
+
+    > :last-child {
+      margin-#{$global-left}: auto;
+    }
+
+    button {
+      cursor: pointer;
+    }
+  }
+
+  .new-link {
+    @include has-fa-icon(plus-square, solid);
+
+    &::before {
+      margin-#{$global-right}: $font-icon-margin;
+    }
+  }
+
+  > .new-link {
+    @include regular-button;
+  }
+}

app/assets/stylesheets/admin/budgets/show.scss

@@ -9,4 +9,8 @@
       }
     }
   }
+
+  h4 {
+    @include header-font-size(h3);
+  }
 }

app/assets/stylesheets/admin/table_actions.scss

@@ -5,22 +5,7 @@
 
   a,
   button {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    font-size: 0.9em;
-    line-height: $global-lineheight;
-    text-align: center;
-
-    &:hover,
-    &:focus {
-      color: $link-hover;
-      text-decoration: none;
-    }
-
-    &::before {
-      font-size: 1.6em;
-    }
+    @include icon-on-top;
   }
 
   button {
@@ -114,7 +99,6 @@
     @include has-fa-icon(coins, solid);
   }
 
-  .groups-link,
   .headings-link {
     @include has-fa-icon(chart-pie, solid);
     color: $color-success;