feat: Style the method name and description

newrelic · Jun 4, 2020 · 6529f3f · 6529f3f
1 parent 9c7674d
commit 6529f3f
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 14 deletions.
diff --git a/src/components/FunctionDefinition.module.scss b/src/components/FunctionDefinition.module.scss
@@ -30,6 +30,6 @@
 }
 
 .type {
-  color: var(--color-green-6);
-  background: var(--color-green-1);
+  color: var(--color-green-500);
+  background: var(--color-green-050);
 }
diff --git a/src/components/styles.scss b/src/components/styles.scss
@@ -35,16 +35,27 @@
   --color-red-800: #390000;
   --color-red-900: #1b0000;
 
-  --color-green-1: #f1fdf2;
-  --color-green-2: #d1f7d9;
-  --color-green-3: #7fe898;
-  --color-green-4: #22e749;
-  --color-green-5: #00d100;
-  --color-green-6: #00a500;
-  --color-green-7: #008200;
-  --color-green-8: #004d00;
-  --color-green-9: #0d290a;
-  --color-green-10: #021200;
+  --color-green-050: #f1fdf2;
+  --color-green-100: #d1f7d9;
+  --color-green-200: #7fe898;
+  --color-green-300: #22e749;
+  --color-green-400: #00d100;
+  --color-green-500: #00a500;
+  --color-green-600: #008200;
+  --color-green-700: #004d00;
+  --color-green-800: #0d290a;
+  --color-green-900: #021200;
+
+  --color-teal-050: #f1fbfc;
+  --color-teal-100: #d2f3f6;
+  --color-teal-200: #85e0e7;
+  --color-teal-300: #70ccd3;
+  --color-teal-400: #00b3c3;
+  --color-teal-500: #008c99;
+  --color-teal-600: #006c75;
+  --color-teal-700: #00484e;
+  --color-teal-800: #003539;
+  --color-teal-900: #002123;
 
   --boxshadow: 0px 2.76726px 2.21381px rgba(0, 85, 90, 0.0168687),
     0px 6.6501px 5.32008px rgba(0, 85, 90, 0.0242336),

diff --git a/src/templates/ReferenceTemplate.js b/src/templates/ReferenceTemplate.js
@@ -67,8 +67,11 @@ const ReferenceTemplate = ({ data }) => {
               <h2>Methods</h2>
               {methods.map((method, i) => (
                 <Fragment key={i}>
-                  <h3>{method.name}</h3>
-                  <ReactMarkdown source={method.description} />
+                  <h3 className={styles.methodName}>{method.name}</h3>
+                  <ReactMarkdown
+                    className={styles.methodDescription}
+                    source={method.description}
+                  />
                   <FunctionDefinition
                     params={method.params}
                     returnValue={method.returnValue}

diff --git a/src/templates/ReferenceTemplate.module.scss b/src/templates/ReferenceTemplate.module.scss
@@ -53,3 +53,15 @@
   z-index: 200;
   min-height: 9999px;
 }
+
+.methodDescription {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.methodName {
+  padding: 0.125rem 0.25rem;
+  display: inline;
+  color: var(--color-teal-500);
+  background: var(--color-teal-050);
+}