From 3b11761ef83a54b573b17f74b23d03164802a4d1 Mon Sep 17 00:00:00 2001
From: maxieprotocol <max@bigchaindb.com>
Date: Tue, 12 May 2020 15:12:44 +0200
Subject: [PATCH] global styling amends, change logo, search, header, footer
 WIP

---
 package-lock.json                             |  5 ++++
 package.json                                  |  1 +
 site.config.js                                |  6 ++---
 src/components/atoms/Box.module.css           |  2 +-
 src/components/atoms/Logo.module.css          | 13 ++++++++++
 src/components/atoms/Logo.tsx                 |  7 +++++
 .../molecules/Form/FieldTemplate.module.css   |  4 +--
 src/components/molecules/Menu.module.css      |  6 ++---
 src/components/molecules/SearchBar.module.css | 16 +++++++-----
 src/components/organisms/Footer.module.css    |  1 -
 src/components/organisms/Header.module.css    | 12 ++++++---
 src/components/organisms/Header.tsx           |  2 +-
 src/styles/_code.css                          | 26 +++++++++++++++++++
 src/styles/_variables.css                     |  2 +-
 src/styles/global.css                         | 26 ++++++-------------
 15 files changed, 89 insertions(+), 40 deletions(-)
 create mode 100644 src/components/atoms/Logo.module.css
 create mode 100644 src/components/atoms/Logo.tsx
 create mode 100644 src/styles/_code.css

diff --git a/package-lock.json b/package-lock.json
index bc65bcdb3..9978cd5d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3007,6 +3007,11 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@oceanprotocol/art": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@oceanprotocol/art/-/art-2.2.0.tgz",
+      "integrity": "sha512-p2n505t2K0zD1ZvGPhI6EsSviEVLCB7BYowhf/ONmVaWED138PaG4Z9nY6YuHU383uOoIWT+Lq3dLkFzDzstXw=="
+    },
     "@oceanprotocol/keeper-contracts": {
       "version": "0.13.2",
       "resolved": "https://registry.npmjs.org/@oceanprotocol/keeper-contracts/-/keeper-contracts-0.13.2.tgz",
diff --git a/package.json b/package.json
index 4e633dff3..106b8bbe1 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "storybook:build": "build-storybook -c .storybook -o public/storybook"
   },
   "dependencies": {
+    "@oceanprotocol/art": "^2.2.0",
     "@oceanprotocol/squid": "2.0.0-beta.4",
     "@oceanprotocol/typographies": "^0.1.0",
     "axios": "^0.19.2",
diff --git a/site.config.js b/site.config.js
index 904e3d5e4..a58c79d46 100644
--- a/site.config.js
+++ b/site.config.js
@@ -1,9 +1,9 @@
 module.exports = {
-  title: 'Logistics Data Marketplace',
-  description: `Easily buy and sell logistics data from around the world.`,
+  title: 'Data Marketplace',
+  description: `A marketplace to find and publish open data sets in the Ocean Network.`,
   url: 'https://dexfreight.oceanprotocol.com',
   copyright:
-    'All Rights Reserved. Powered by [dexFreight](https://dexfreight.io) & [Ocean Protocol](https://oceanprotocol.com)',
+    'All Rights Reserved. Powered by [Ocean Protocol](https://oceanprotocol.com)',
   refundPolicy: [
     'Data can be challenged within 2 days after purchase.',
     'The marketplace decides if you are eligible for refund.'
diff --git a/src/components/atoms/Box.module.css b/src/components/atoms/Box.module.css
index 798737a4a..f2a489494 100644
--- a/src/components/atoms/Box.module.css
+++ b/src/components/atoms/Box.module.css
@@ -9,7 +9,7 @@
 a.box:hover,
 a.box:focus {
   outline: 0;
-  border-color: var(--brand-grey);
+  border-color: var(--brand-pink);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
   transform: translate3d(0, -2px, 0);
 }
diff --git a/src/components/atoms/Logo.module.css b/src/components/atoms/Logo.module.css
new file mode 100644
index 000000000..c45215760
--- /dev/null
+++ b/src/components/atoms/Logo.module.css
@@ -0,0 +1,13 @@
+.logo {
+  width: 4rem;
+  height: 4rem;
+  margin: 0;
+}
+
+.logo path {
+  fill: var(--brand-black);
+}
+
+a > .logo:hover path {
+  fill: var(--brand-pink);
+}
diff --git a/src/components/atoms/Logo.tsx b/src/components/atoms/Logo.tsx
new file mode 100644
index 000000000..4921bccdf
--- /dev/null
+++ b/src/components/atoms/Logo.tsx
@@ -0,0 +1,7 @@
+import React, { ReactElement } from 'react'
+import { ReactComponent as LogoAsset } from '@oceanprotocol/art/logo/logo.svg'
+import styles from './Logo.module.css'
+
+export default function Logo(): ReactElement {
+  return <LogoAsset className={styles.logo} />
+}
diff --git a/src/components/molecules/Form/FieldTemplate.module.css b/src/components/molecules/Form/FieldTemplate.module.css
index d441754fd..cb7065f38 100644
--- a/src/components/molecules/Form/FieldTemplate.module.css
+++ b/src/components/molecules/Form/FieldTemplate.module.css
@@ -11,7 +11,7 @@
   font-weight: var(--font-weight-bold);
   /* font-weight: var(--font-weight-bold); */
   color: var(--brand-grey-dark);
-  border: 1px solid var(--brand-grey-light);
+  border: 2px solid var(--brand-pink);
   box-shadow: none;
   width: 100%;
   background: var(--brand-white);
@@ -29,7 +29,7 @@
 .row textarea:focus {
   box-shadow: none;
   outline: 0;
-  border-color: var(--color-secondary);
+  border-color: var(--brand-pink);
 }
 
 .input::placeholder,
diff --git a/src/components/molecules/Menu.module.css b/src/components/molecules/Menu.module.css
index 3647ee6cc..fa10aff2a 100644
--- a/src/components/molecules/Menu.module.css
+++ b/src/components/molecules/Menu.module.css
@@ -3,7 +3,7 @@
 
 .link {
   display: inline-block;
-  color: var(--color-secondary);
+  color: var(--brand-grey);
   font-weight: var(--font-weight-bold);
   margin: calc(var(--spacer) / 4) var(--spacer);
 }
@@ -11,11 +11,11 @@
 .link:hover,
 .link:focus,
 .link:active {
-  color: var(--brand-grey-dark);
+  color: var(--brand-pink);
 }
 
 .link.active {
-  color: var(--color-primary);
+  color: var(--brand-pink);
 }
 
 .link:first-child {
diff --git a/src/components/molecules/SearchBar.module.css b/src/components/molecules/SearchBar.module.css
index c0c9d0115..02251010c 100644
--- a/src/components/molecules/SearchBar.module.css
+++ b/src/components/molecules/SearchBar.module.css
@@ -13,28 +13,30 @@
   margin-top: -1px;
   width: 100%;
   border-width: 1px;
-  background-color: var(--brand-grey-light);
-  border-color: var(--brand-grey-light);
-  color: var(--color-secondary);
+  background-color: var(--brand-pink);
+  border-color: var(--brand-pink);
+  color: var(--brand-grey-lighter);
+  text-transform: uppercase;
 }
 
 .inputGroup button:hover,
 .inputGroup button:focus,
 .inputGroup .input:focus + button {
   color: var(--brand-white);
+  background-color: var(--brand-pink);
 }
 
 .inputGroup button:hover,
 .inputGroup button:focus,
 .inputGroup .input:focus + button:hover,
 .inputGroup .input:focus + button:focus {
-  background-color: var(--color-primary);
-  border-color: var(--color-primary);
+  background-color: var(--brand-pink);
+  border-color: var(--brand-pink);
 }
 
 .inputGroup .input:focus + button {
-  border-color: var(--color-secondary);
-  background-color: var(--color-secondary);
+  border-color: var(--brand-pink);
+  background-color: var(--brand-pink);
 }
 
 @media screen and (min-width: 30rem) {
diff --git a/src/components/organisms/Footer.module.css b/src/components/organisms/Footer.module.css
index 910c56986..6c551048e 100644
--- a/src/components/organisms/Footer.module.css
+++ b/src/components/organisms/Footer.module.css
@@ -1,5 +1,4 @@
 .footer {
-  background-color: var(--brand-grey-dark);
   color: var(--brand-grey-light);
   font-size: var(--font-size-small);
   text-align: center;
diff --git a/src/components/organisms/Header.module.css b/src/components/organisms/Header.module.css
index 2e4bdf3ed..064018783 100644
--- a/src/components/organisms/Header.module.css
+++ b/src/components/organisms/Header.module.css
@@ -1,6 +1,5 @@
 .header {
   background-color: var(--brand-white);
-  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
 }
 
 .content {
@@ -20,11 +19,18 @@
 
 .logoUnit svg {
   fill: var(--color-primary);
-  width: 70px;
-  height: 40px;
+  width: 4rem;
+  height: 4rem;
   margin-right: calc(var(--spacer) / 2);
 }
 
+.logoUnit path {
+  fill: var(--brand-black);
+}
+.logoUnit:hover path {
+  fill: var(--brand-pink);
+}
+
 .title {
   display: none;
 }
diff --git a/src/components/organisms/Header.tsx b/src/components/organisms/Header.tsx
index 7564e1de7..2bb1cf12c 100644
--- a/src/components/organisms/Header.tsx
+++ b/src/components/organisms/Header.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link'
 import Menu from '../molecules/Menu'
 import styles from './Header.module.css'
 import { title } from '../../../site.config'
-import Logo from '../../images/logo.svg'
+import Logo from '@oceanprotocol/art/logo/logo.svg'
 
 export default function Header() {
   return (
diff --git a/src/styles/_code.css b/src/styles/_code.css
new file mode 100644
index 000000000..af5a0467c
--- /dev/null
+++ b/src/styles/_code.css
@@ -0,0 +1,26 @@
+code {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-small);
+  color: var(--brand-grey-light);
+  text-shadow: none;
+}
+
+:not(pre) > code {
+  display: inline-block;
+  padding-left: 0.3rem;
+  padding-right: 0.3rem;
+}
+
+pre {
+  display: block;
+  margin: calc(var(--spacer) / 2) 0;
+  padding: 0;
+  border: 1px solid var(--brand-grey-dark);
+  border-radius: var(--border-radius);
+}
+
+pre code {
+  padding: calc(var(--spacer) / 2);
+  display: block;
+  white-space: pre-wrap;
+}
diff --git a/src/styles/_variables.css b/src/styles/_variables.css
index e56e9eea9..a90b7369f 100644
--- a/src/styles/_variables.css
+++ b/src/styles/_variables.css
@@ -1,5 +1,5 @@
 :root {
-  --color-primary: #ffffff;
+  --color-primary: #ff4092;
   --color-secondary: #141414;
 
   --brand-grey: #41474e;
diff --git a/src/styles/global.css b/src/styles/global.css
index 2be7cb075..926020ead 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -20,18 +20,20 @@ html {
 }
 
 body {
-  background-color: var(--brand-grey-lighter);
-  color: var(--brand-grey-dark);
+  color: var(--brand-grey);
   font-size: var(--font-size-base);
   font-family: var(--font-family-base);
   font-weight: var(--font-weight-base);
   line-height: var(--line-height);
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
 }
 
 a {
   text-decoration: none;
-  color: var(--color-primary);
+  color: var(--brand-pink);
   transition: 0.2s ease-out;
 }
 
@@ -50,10 +52,9 @@ h3,
 h4,
 h5 {
   font-family: var(--font-family-title);
-  color: var(--brand-grey-dark);
+  color: var(--brand-black);
   line-height: 1.2;
   font-weight: var(--font-weight-bold);
-  margin-top: 0;
 }
 
 h1 {
@@ -99,19 +100,6 @@ ul li {
   display: block;
 }
 
-code,
-kbd,
-pre,
-samp {
-  font-family: var(--font-family-monospace);
-  font-size: var(--font-size-small);
-  color: var(--color-secondary);
-  text-shadow: none;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-all;
-}
-
 form,
 fieldset {
   border: 0;
@@ -131,3 +119,5 @@ input[type='radio']:checked,
 input[type='checkbox']:checked {
   background: var(--color-primary);
 }
+
+@import '_code.css';