Add and apply crayons link header style (#10368)

* Add and apply crayons link header style

* Add crayons-subheader style

app/assets/stylesheets/components/headers.scss

@@ -0,0 +1,7 @@
+.crayons-subheader {
+  color: var(--base-90);
+  font-size: var(--fs-base);
+  font-weight: var(--fw-bold);
+  padding-left: var(--su-2);
+  margin-bottom: var(--su-2);
+}

app/assets/stylesheets/components/navigation.scss

@@ -54,6 +54,14 @@
   }
 }
 
+.crayons-link--header {
+  color: var(--link-color);
+  font-size: var(--fs-base);
+  font-weight: var(--fw-bold);
+  padding-left: var(--su-2);
+  margin-bottom: var(--su-2);
+}
+
 .crayons-link--block {
   display: flex;
   align-items: center;

app/assets/stylesheets/crayons.scss

@@ -15,6 +15,7 @@
 @import 'components/comments';
 @import 'components/dropdowns';
 @import 'components/forms';
+@import 'components/headers';
 @import 'components/indicators';
 @import 'components/loaders';
 @import 'components/modals';

app/views/moderations/_mod_sidebar_left.html.erb

@@ -3,7 +3,7 @@
     Mod Center
   </h1>
   <nav class="mod-center--nav" aria-label="Mod center inbox navigation">
-    <h3 class="fw-bold fs-s mod-center--nav__title">
+    <h3 class="crayons-subheader">
       Inbox
     </h3>
     <div id="mod-center-inbox" class="mod-center-inbox">
@@ -24,7 +24,7 @@
     </div>
   </nav>
   <nav class="mod-center--nav" aria-label="Mod center resources navigation">
-    <h3 class="fw-bold fs-s mod-center--nav__title">
+    <h3 class="crayons-subheader">
       Resources
     </h3>
     <div id="mod-center-other-options">

app/views/notifications/_nav_menu.html.erb

@@ -1,9 +1,9 @@
 <nav class="notification-nav">
   <% if @organizations.present? %>
-    <header class="pl-2 mb-2">
-      <h4>
+    <header>
+      <h3 class="crayons-subheader">
         <%= @user.name %>
-      </h4>
+      </h3>
     </header>
   <% end %>
   <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:filter].blank? %>" href="/notifications">
@@ -19,10 +19,10 @@
 <nav class="notification-nav">
   <% if @organizations.present? %>
     <% @organizations.each do |org| %>
-      <header class="pl-2 mb-2">
-        <h4>
+      <header>
+        <h3 class="crayons-subheader">
           <%= org.name %>
-        </h4>
+        </h3>
       </header>
       <a class="crayons-link crayons-link--block <%= "crayons-link--current" if params[:filter].to_s.casecmp("org").zero? && params[:org_id].to_i == org.id %>" href="/notifications/org/<%= org.id %>">
         All