From 2db85128c8658c1d3e9949f233b95209dd9499e2 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 10 Nov 2018 15:40:06 +0100
Subject: [PATCH] frontpage sections color coding

---
 data/sections.yml           |  4 +++-
 package.json                |  1 +
 src/pages/index.js          | 35 +++++++++++++++++++++++++----------
 src/pages/index.module.scss | 23 ++++++++++++++++++++++-
 src/styles/global.scss      |  2 +-
 5 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/data/sections.yml b/data/sections.yml
index 165e2457..1700c8d6 100644
--- a/data/sections.yml
+++ b/data/sections.yml
@@ -1,12 +1,14 @@
 - title: Core Concepts
   description: Understand the fundamentals of Ocean Protocol.
   link: /concepts/introduction/
-  color: $brand-purple
+  color: purple
 
 - title: Setup Guides
   description: Setting up the Ocean Protocol components.
   link: /setup/marketplace/
+  color: blue
 
 - title: Tutorials
   description: Browse tutorials for most common setup and development use-cases.
   link: /tutorials/jupyter/
+  color: orange
diff --git a/package.json b/package.json
index 4ce9985d..59a5d5c5 100755
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "author": "Ocean Protocol <devops@oceanprotocol.com>",
   "dependencies": {
     "@oceanprotocol/art": "^1.0.2",
+    "classnames": "^2.2.6",
     "gatsby": "^2.0.45",
     "gatsby-image": "^2.0.20",
     "gatsby-plugin-catch-links": "^2.0.8",
diff --git a/src/pages/index.js b/src/pages/index.js
index 40587a06..9976ddc4 100755
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Link, graphql } from 'gatsby'
 import Helmet from 'react-helmet'
+import classnames from 'classnames'
 import Layout from '../components/Layout'
 import Content from '../components/Content'
 import HeaderHome from '../components/HeaderHome'
@@ -9,19 +10,28 @@ import Repositories from '../components/Repositories'
 import { ReactComponent as Arrow } from '../images/arrow.svg'
 import styles from './index.module.scss'
 
-const SectionLink = ({ to, title, children }) => (
-    <Link to={to} className={styles.link}>
-        <h3 className={styles.sectionTitle}>{title}</h3>
-        <p className={styles.sectionText}>{children}</p>
-        <span className={styles.sectionMore}>
-            Learn More <Arrow />
-        </span>
-    </Link>
-)
+const SectionLink = ({ to, title, color, children }) => {
+    let classNames = classnames(styles.link, {
+        [styles.purple]: color === 'purple',
+        [styles.blue]: color === 'blue',
+        [styles.orange]: color === 'orange'
+    })
+
+    return (
+        <Link to={to} className={classNames}>
+            <h3 className={styles.sectionTitle}>{title}</h3>
+            <p className={styles.sectionText}>{children}</p>
+            <span className={styles.sectionMore}>
+                Learn More <Arrow />
+            </span>
+        </Link>
+    )
+}
 
 SectionLink.propTypes = {
     to: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
+    color: PropTypes.string,
     children: PropTypes.any
 }
 
@@ -38,7 +48,11 @@ const IndexPage = ({ data, location }) => (
                 <ul className={styles.sections}>
                     {data.allSectionsYaml.edges.map(({ node }) => (
                         <li key={node.title} className={styles.section}>
-                            <SectionLink to={node.link} title={node.title}>
+                            <SectionLink
+                                to={node.link}
+                                title={node.title}
+                                color={node.color}
+                            >
                                 {node.description}
                             </SectionLink>
                         </li>
@@ -72,6 +86,7 @@ export const IndexQuery = graphql`
                     title
                     description
                     link
+                    color
                 }
             }
         }
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 0cf6b3a5..6bf6e291 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -47,7 +47,6 @@
 
     &:hover,
     &:focus {
-        color: $brand-grey;
         box-shadow: rgba($brand-black, .1) 0 12px 20px;
 
         svg {
@@ -56,6 +55,27 @@
     }
 }
 
+.purple {
+    .sectionTitle,
+    .sectionMore {
+        color: $brand-purple;
+    }
+}
+
+.blue {
+    .sectionTitle,
+    .sectionMore {
+        color: $brand-blue;
+    }
+}
+
+.orange {
+    .sectionTitle,
+    .sectionMore {
+        color: $orange;
+    }
+}
+
 .sectionTitle {
     margin-top: 0;
     margin-bottom: $spacer / $line-height;
@@ -64,6 +84,7 @@
 
 .sectionText {
     margin-bottom: 0;
+    color: $brand-grey;
 }
 
 .sectionMore {
diff --git a/src/styles/global.scss b/src/styles/global.scss
index a117ec7d..d89a9264 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -137,7 +137,7 @@ h4,
 h5 {
     font-family: $font-family-title;
     color: inherit;
-    line-height: 1.25;
+    line-height: 1.2;
     font-weight: 600;
 }