From 6529f3fcc33da26c79bdf61ca91cee24d7507644 Mon Sep 17 00:00:00 2001 From: Jerel Miller <jmiller@newrelic.com> Date: Wed, 3 Jun 2020 17:47:18 -0700 Subject: [PATCH] feat: Style the method name and description --- src/components/FunctionDefinition.module.scss | 4 +-- src/components/styles.scss | 31 +++++++++++++------ src/templates/ReferenceTemplate.js | 7 +++-- src/templates/ReferenceTemplate.module.scss | 12 +++++++ 4 files changed, 40 insertions(+), 14 deletions(-) diff --git a/src/components/FunctionDefinition.module.scss b/src/components/FunctionDefinition.module.scss index 77a55047d..bf7751adc 100644 --- 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 index 89b4365dd..7fe6580af 100644 --- 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 index ffd9fa578..f83351367 100644 --- 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 index 1e21bd266..2279cec8d 100644 --- 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); +}