Improve styling + switch section headings for tags

frontend/src/app/components/docs/api-docs.component.scss

@@ -124,6 +124,37 @@ li.nav-item {
   float: right;
 }
 
+.endpoint-container .section-header {
+  display: block;
+  background-color: #2d3348;
+  color: #1bd8f4;
+  padding: 1rem 1.3rem 1rem 1.3rem;
+  font-weight: bold;
+  border-radius: 0.25rem;
+  margin: 40px 0 20px 0;
+  font-size: 24px;
+  position: relative;
+}
+.endpoint-container .section-header:first-child {
+  margin-top: 20px;
+}
+.endpoint-container .section-header:hover {
+  text-decoration: none;
+}
+
+.endpoint-container .section-header span {
+  color: #fff;
+  background-color: #653b9c;
+  font-size: 12px;
+  text-transform: uppercase;
+  font-weight: 400;
+  padding: 8px 10px;
+  letter-spacing: 1px;
+  border-radius: 0.25rem;
+  font-family: monospace;
+  float: right;
+}
+
 @media (max-width: 992px){
   .doc-nav-desktop {
     display: none;
@@ -133,12 +164,17 @@ li.nav-item {
   .doc-content {
     width: 100%;
   }
+
+  .endpoint-container .section-header {
+    margin: 40px 0 70px 0;
+  }
+
+  .endpoint-container .section-header span {
+    float: none;
+    position: absolute;
+    top: unset;
+    left: 0;
+    bottom: -50px;
+  }
 }
 
-#restAPI .api-category {
-  margin: 30px 0;
-}
-
-.api-category h4 {
-  margin-bottom: 15px;
-}