Update SDG header component

* Add a header element as component markup wrapper
* Allow component to receive an optional block
* Add reusable styles for header links

Co-autored-by: Javi Martín <javim@elretirao.net>

app/assets/stylesheets/admin.scss

@@ -614,6 +614,16 @@ code {
   }
 }
 
+.admin-content > header {
+  align-items: flex-start;
+  display: flex;
+
+  a {
+    @include hollow-button;
+    margin-left: auto;
+  }
+}
+
 .admin-content .select-geozone,
 .admin-content .select-heading {
 

app/assets/stylesheets/mixins.scss

@@ -198,3 +198,14 @@
     transform: translateX(-50%);
   }
 }
+
+@mixin hollow-button($color: $link) {
+  @include button($style: hollow, $background: $color);
+  font-size: $base-font-size;
+  margin-bottom: 0;
+
+  &:focus,
+  &:hover {
+    text-decoration: none;
+  }
+}

app/components/sdg_management/header.rb

@@ -1,11 +1,17 @@
 module SDGManagement::Header
   extend ActiveSupport::Concern
 
-  def header
+  def header(&block)
     provide(:title) do
       "#{t("sdg_management.header.title")} - #{title}"
     end
 
-    tag.h2 title
+    tag.header do
+      if block_given?
+        tag.h2(title) + capture(&block)
+      else
+        tag.h2(title)
+      end
+    end
   end
 end