From 8b6d2d5f331f9286c510d708595788094ce7451e Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 13 Jul 2020 23:48:19 +0200
Subject: [PATCH] fix storybook typography display

---
 .storybook/preview.js                                 |  1 +
 .../organisms/AssetActions/Compute.stories.tsx        |  2 +-
 src/global/Typography.stories.tsx                     | 11 ++++++-----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 896863fac..12d812ddf 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -7,6 +7,7 @@ import {
 } from '@reach/router'
 
 // Import global css with custom properties once for all stories.
+import '@oceanprotocol/typographies/css/ocean-typo.css'
 import '../src/global/styles.css'
 
 // Wrapper for all stories previews
diff --git a/src/components/organisms/AssetActions/Compute.stories.tsx b/src/components/organisms/AssetActions/Compute.stories.tsx
index e3a18d1ba..68cb1878b 100644
--- a/src/components/organisms/AssetActions/Compute.stories.tsx
+++ b/src/components/organisms/AssetActions/Compute.stories.tsx
@@ -6,7 +6,7 @@ import squidMock from '../../../../tests/unit/__mocks__/@oceanprotocol/squid'
 import { context } from '../../../../tests/unit/__mocks__/web3provider'
 
 export default {
-  title: 'Organisms/Consume',
+  title: 'Organisms/Compute',
   decorators: [
     (storyFn: () => React.FC): ReactElement => (
       <div style={{ maxWidth: '40rem', margin: 'auto' }}>{storyFn()}</div>
diff --git a/src/global/Typography.stories.tsx b/src/global/Typography.stories.tsx
index 588c6a7b7..7d8153d4f 100644
--- a/src/global/Typography.stories.tsx
+++ b/src/global/Typography.stories.tsx
@@ -7,10 +7,11 @@ export default {
 export const Body = () => (
   <div style={{ maxWidth: '600px' }}>
     <p>
-      Montserrat 400 Ummm…to eBay? Oh sure! <a href="">Blame the wizards!</a>{' '}
-      Hello, little man. <strong>I will destroy you!</strong> I’ve been there.
-      My folks were always on me to groom myself and <em>wear underpants</em>.
-      What am I, the pope? Leela’s gonna kill me.
+      Sharp Sans Medium. Ummm…to eBay? Oh sure!{' '}
+      <a href="">Blame the wizards!</a> Hello, little man.{' '}
+      <strong>I will destroy you!</strong> I’ve been there. My folks were always
+      on me to groom myself and <em>wear underpants</em>. What am I, the pope?
+      Leela’s gonna kill me.
     </p>
     <p>
       Yes, I saw. You were doing well, until everyone died. Check it out, y’all.
@@ -22,7 +23,7 @@ export const Body = () => (
 
 export const Headings = () => (
   <>
-    <h1>Montserrat 600</h1>
+    <h1>Sharp Sans Display No.1 Bold</h1>
     <h1>Heading 1</h1>
     <h2>Heading 2</h2>
     <h3>Heading 3</h3>