From c2d71aa4d7ae2efcd32939e9c88fb86ed568c091 Mon Sep 17 00:00:00 2001
From: tarafanlin <35607644+tarafanlin@users.noreply.github.com>
Date: Tue, 8 Sep 2020 17:16:03 -0700
Subject: [PATCH] fixes: design system image link breaks

---
 pages/_/system/index.js | 43 +++++++++++++----------------------------
 1 file changed, 13 insertions(+), 30 deletions(-)

diff --git a/pages/_/system/index.js b/pages/_/system/index.js
index 643fcf72..6fc9a589 100644
--- a/pages/_/system/index.js
+++ b/pages/_/system/index.js
@@ -14,7 +14,7 @@ export default class SystemPageRoot extends React.Component {
         url="https://slate.host/_/system"
       >
         <img
-          src="/public/static/art-v2-system.png"
+          src="https://bafybeidu5v3ytcy3ynghrmu7zftfinpt3s5pghqmpytrohmpk57ba4suye.ipfs.slate.textile.io/"
           style={{
             display: "inline-flex",
             width: "100%",
@@ -26,23 +26,18 @@ export default class SystemPageRoot extends React.Component {
         <System.H1>SDS {Constants.values.sds}</System.H1>
         <br />
         <System.P>
-          The <strong>Slate Design System</strong> is an open source resource
-          with examples of components, constants, and experiences. Any code
-          changes made to the components in the Design System will change the
-          appearance and function of{" "}
+          The <strong>Slate Design System</strong> is an open source resource with examples of components, constants,
+          and experiences. Any code changes made to the components in the Design System will change the appearance and
+          function of{" "}
           <a href="https://slate.host" target="_blank">
             Slate
           </a>{" "}
           in production. <br />
           <br />
-          We wanted to build product out in the open, so other Filecoin & IPFS
-          developers could freely use the code to make their own applications on
-          top of the <a href="https://filecoin.io">Filecoin Network</a>. A lot
-          of the functionality of Slate is made possible by{" "}
-          <a
-            href="https://github.com/textileio/js-powergate-client"
-            target="_blank"
-          >
+          We wanted to build product out in the open, so other Filecoin & IPFS developers could freely use the code to
+          make their own applications on top of the <a href="https://filecoin.io">Filecoin Network</a>. A lot of the
+          functionality of Slate is made possible by{" "}
+          <a href="https://github.com/textileio/js-powergate-client" target="_blank">
             Textile's Powergate
           </a>{" "}
           and{" "}
@@ -56,12 +51,8 @@ export default class SystemPageRoot extends React.Component {
         <System.H2>slate-react-system</System.H2>
         <br />
         <System.P>
-          You can use these components, experiences, and constants in your own
-          React projects. First, install the{" "}
-          <a
-            href="https://github.com/filecoin-project/slate-react-system"
-            target="_blank"
-          >
+          You can use these components, experiences, and constants in your own React projects. First, install the{" "}
+          <a href="https://github.com/filecoin-project/slate-react-system" target="_blank">
             npm module
           </a>
           :
@@ -116,25 +107,17 @@ class Example extends React.Component {
           Whats next?
         </System.P>
         <System.UL>
-          <System.LI>
-            Try using some components or experiences in your React projects.
-          </System.LI>
+          <System.LI>Try using some components or experiences in your React projects.</System.LI>
           <System.LI>
             Start a new project using an{" "}
-            <a
-              href="https://github.com/filecoin-project/slate-react-system/tree/master/example"
-              target="_blank"
-            >
+            <a href="https://github.com/filecoin-project/slate-react-system/tree/master/example" target="_blank">
               example
             </a>
             .
           </System.LI>
           <System.LI>
             Try using slate-react-system in a{" "}
-            <a
-              href="https://github.com/jimmylee/next-express-emotion"
-              target="_blank"
-            >
+            <a href="https://github.com/jimmylee/next-express-emotion" target="_blank">
               starter React boilerplate
             </a>
             .