global styling amends, change logo, search, header, footer WIP

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",

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",

site.config.js

@@ -1,9 +1,9 @@
 module.exports = {
-  title: 'Logistics Data Marketplace',
+  title: 'Data Marketplace',
-  description: `Easily buy and sell logistics data from around the world.`,
+  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.'

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);
 }

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);
+}

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} />
+}

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,

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 {

src/components/molecules/SearchBar.module.css

@@ -13,28 +13,30 @@
   margin-top: -1px;
   width: 100%;
   border-width: 1px;
-  background-color: var(--brand-grey-light);
+  background-color: var(--brand-pink);
-  border-color: var(--brand-grey-light);
+  border-color: var(--brand-pink);
-  color: var(--color-secondary);
+  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);
+  background-color: var(--brand-pink);
-  border-color: var(--color-primary);
+  border-color: var(--brand-pink);
 }
 
 .inputGroup .input:focus + button {
-  border-color: var(--color-secondary);
+  border-color: var(--brand-pink);
-  background-color: var(--color-secondary);
+  background-color: var(--brand-pink);
 }
 
 @media screen and (min-width: 30rem) {

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;

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;
+  width: 4rem;
-  height: 40px;
+  height: 4rem;
   margin-right: calc(var(--spacer) / 2);
 }
 
+.logoUnit path {
+  fill: var(--brand-black);
+}
+.logoUnit:hover path {
+  fill: var(--brand-pink);
+}
+
 .title {
   display: none;
 }

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 (

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;
+}

src/styles/_variables.css

@@ -1,5 +1,5 @@
 :root {
-  --color-primary: #ffffff;
+  --color-primary: #ff4092;
   --color-secondary: #141414;
 
   --brand-grey: #41474e;

src/styles/global.css

@@ -20,18 +20,20 @@ html {
 }
 
 body {
-  background-color: var(--brand-grey-lighter);
+  color: var(--brand-grey);
-  color: var(--brand-grey-dark);
   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';