more styling updates

Author: Alban Bailly

src/components/2_molecules/ResponseItem.js

@@ -1,4 +1,5 @@
 import React from "react";
+import Markdown from "react-markdown/with-html";
 
 export const ResponseItem = props => {
   const { response, r, m } = props;
@@ -27,7 +28,7 @@ export const ResponseItem = props => {
                 const l = r.content.application_json.schema.properties[p];
                 return (
                   l && (
-                    <div key={i}>
+                    <div key={i} className="response-wrapper">
                       <div className={`flex mb-2 pt-2 initResponse`}>
                         <div className="w-1/4">
                           <div>
@@ -123,7 +124,9 @@ export const ResponseItem = props => {
                                     </div>
                                     {data.enum && (
                                       <div className="flex flex-wrap mb-2">
-                                        <span className="text-sm">Enum: </span>
+                                        <span className="text-sm mr-2">
+                                          Enum:
+                                        </span>
                                         {data.enum.map((e, i) => {
                                           return (
                                             <span
@@ -167,8 +170,8 @@ export const ResponseItem = props => {
                                         </div>
                                         {data.enum && (
                                           <div className="flex flex-wrap mb-2">
-                                            <span className="text-sm">
-                                              Enum:{" "}
+                                            <span className="text-sm mr-2">
+                                              Enum:
                                             </span>
                                             {data.enum.map((e, i) => {
                                               return (

src/components/5_templates/api.js

@@ -4,6 +4,7 @@ import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { atomDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import Clipboard from "react-clipboard.js";
+import Markdown from "react-markdown/with-html";
 import "react-tabs/style/react-tabs.css";
 
 import Layout from "../../components/4_layouts/layout";
@@ -65,7 +66,13 @@ const apiPage = ({ data }) => {
                       </span>
                       <span>https://api.linode.com/v4{n.name}</span>
                     </div>
-                    {m.description}
+
+                    <Markdown
+                      source={m.description}
+                      escapeHtml={false}
+                      className="mt-8 api-desc"
+                    />
+
                     {m.parameters && (
                       <p className="mb-2">
                         <b>Query Parameters</b>

src/css/components/0_utilities/typography.css

@@ -22,6 +22,13 @@ input[type="text"] {
   @apply p-2 mt-2 mb-4 bg-ThemeBeige block;
 }
 
+.api-desc code {
+  @apply font-normal px-1 bg-ThemeTagGrey inline text-sm;
+  padding-top: 4px;
+  padding-bottom: 3px;
+  width: fit-content;
+}
+
 .api-body table {
   width: 100%;
   @apply border border-BaseGrey;

src/css/components/1_atoms/tag.css

@@ -1,7 +1,7 @@
 .tag {
-  @apply font-normal px-2 bg-ThemeTagGrey text-BaseBlackFull text-sm;
-  padding-top: 6px;
-  padding-bottom: 5px;
+  @apply font-normal inline-block px-1 bg-ThemeTagGrey text-BaseBlackFull text-sm;
+  padding-top: 4px;
+  padding-bottom: 3px;
   width: fit-content;
   transition: background-color 225ms ease-in-out, color 225ms ease-in-out;
   line-height: 1;

src/css/components/4_pages/api-page.css

@@ -72,8 +72,12 @@
 }
 
 .initResponse {
-  border-top-width: 1px;
-  @apply border-grey-light;
+  /* border-top-width: 1px;
+  @apply border-grey-light; */
+}
+
+.response-wrapper .initResponse:first-child {
+  /* border: 0; */
 }
 
 .subResponse {