From 25b6e388bbdf701972d357171f4a1199af50a92a Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 28 Nov 2018 14:27:33 +0100
Subject: [PATCH] color concept for method names

---
 src/templates/ApiSwagger.jsx         | 53 +++++++++++++---------------
 src/templates/ApiSwagger.module.scss | 31 +++++++++++++++-
 2 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/src/templates/ApiSwagger.jsx b/src/templates/ApiSwagger.jsx
index 04ee805f..ea78f73f 100644
--- a/src/templates/ApiSwagger.jsx
+++ b/src/templates/ApiSwagger.jsx
@@ -23,6 +23,23 @@ const toc = api => {
     return `<ul>${items}</ul>`
 }
 
+const Method = ({ keyName, value }) => (
+    <div className={styles.method}>
+        <h3 className={styles.pathMethod} data-type={keyName}>
+            {keyName}
+        </h3>
+
+        <p>{value['summary']}</p>
+
+        {value['description'] && <p>{value['description']}</p>}
+    </div>
+)
+
+Method.propTypes = {
+    keyName: PropTypes.string,
+    value: PropTypes.object
+}
+
 export default class ApiSwaggerTemplate extends Component {
     static propTypes = {
         data: PropTypes.object.isRequired,
@@ -83,9 +100,8 @@ export default class ApiSwaggerTemplate extends Component {
 
                                 {Object.entries(api.paths).map(
                                     ([key, value]) => (
-                                        <>
+                                        <div key={key}>
                                             <h2
-                                                key={key}
                                                 id={slugify(key)}
                                                 className={styles.pathName}
                                             >
@@ -94,35 +110,14 @@ export default class ApiSwaggerTemplate extends Component {
 
                                             {Object.entries(value).map(
                                                 ([key, value]) => (
-                                                    <>
-                                                        <h3
-                                                            key={key}
-                                                            className={
-                                                                styles.pathMethod
-                                                            }
-                                                        >
-                                                            <code>{key}</code>
-                                                        </h3>
-
-                                                        <p>
-                                                            {value['summary']}
-                                                        </p>
-
-                                                        {value[
-                                                            'description'
-                                                        ] && (
-                                                            <p>
-                                                                {
-                                                                    value[
-                                                                        'description'
-                                                                    ]
-                                                                }
-                                                            </p>
-                                                        )}
-                                                    </>
+                                                    <Method
+                                                        key={key}
+                                                        keyName={key}
+                                                        value={value}
+                                                    />
                                                 )
                                             )}
-                                        </>
+                                        </div>
                                     )
                                 )}
                             </article>
diff --git a/src/templates/ApiSwagger.module.scss b/src/templates/ApiSwagger.module.scss
index 8b702c51..a5884f82 100644
--- a/src/templates/ApiSwagger.module.scss
+++ b/src/templates/ApiSwagger.module.scss
@@ -2,8 +2,37 @@
 
 .pathName {
     font-size: $font-size-h2;
+    border-bottom: 1px solid $brand-grey-lighter;
+    padding-bottom: $spacer / 2;
+    margin-bottom: $spacer / 2;
 }
 
 .pathMethod {
-    font-size: $font-size-h5;
+    font-size: $font-size-base;
+    font-family: $font-family-monospace;
+    margin-bottom: $spacer / 4;
+    display: inline-block;
+    padding: $spacer / 8 $spacer / 4;
+    border-radius: $border-radius;
+
+    &[data-type='get'] {
+        background: rgba($green, .4);
+    }
+
+    &[data-type='post'] {
+        background: rgba($brand-blue, .4);
+    }
+
+    &[data-type='put'] {
+        background: rgba($brand-violet, .3);
+    }
+
+    &[data-type='delete'] {
+        background: rgba($red, .4);
+    }
+}
+
+.method {
+    padding-top: $spacer / 4;
+    padding-bottom: $spacer / 4;
 }