From 9de5904a134d95e9c867bdae7ea672b496871240 Mon Sep 17 00:00:00 2001
From: tarafanlin <35607644+tarafanlin@users.noreply.github.com>
Date: Thu, 22 Oct 2020 22:56:20 -0700
Subject: [PATCH 1/2] creating view all component and rearrange external slate
 view header

---
 components/core/ViewAll.js                    |  32 +++++
 .../core/WebsitePrototypeHeaderGeneric.js     | 126 +++++++-----------
 pages/_/slate.js                              |   9 +-
 3 files changed, 88 insertions(+), 79 deletions(-)
 create mode 100644 components/core/ViewAll.js

diff --git a/components/core/ViewAll.js b/components/core/ViewAll.js
new file mode 100644
index 00000000..b91d56f7
--- /dev/null
+++ b/components/core/ViewAll.js
@@ -0,0 +1,32 @@
+import * as React from "react";
+import * as Constants from "~/common/constants";
+
+import { css } from "@emotion/react";
+import { useState } from "react";
+
+const STYLES_VIEW_BUTTON = css`
+  color: ${Constants.system.grayBlack};
+  text-decoration: underline;
+  cursor: pointer;
+`;
+
+export const ViewAll = (props) => {
+  const [isTruncated, setTruncated] = useState(true);
+  const text = props.children;
+  const maxCharacter = props.maxCharacter;
+  const displayText = isTruncated ? text.slice(0, maxCharacter) : text;
+
+  return (
+    <React.Fragment>
+      <div>
+        {displayText}
+        <span>{isTruncated ? "... " : ""}</span>
+        <span css={STYLES_VIEW_BUTTON} onClick={() => setTruncated(!isTruncated)}>
+          {isTruncated ? "View All" : "View Less"}
+        </span>
+      </div>
+    </React.Fragment>
+  );
+};
+
+export default ViewAll;
diff --git a/components/core/WebsitePrototypeHeaderGeneric.js b/components/core/WebsitePrototypeHeaderGeneric.js
index 6f79f2da..462d93e6 100644
--- a/components/core/WebsitePrototypeHeaderGeneric.js
+++ b/components/core/WebsitePrototypeHeaderGeneric.js
@@ -4,41 +4,42 @@ import * as SVGLogo from "~/common/logo";
 
 import { css } from "@emotion/react";
 
-const STYLES_CONTAINER = css`
-  font-family: ${Constants.font.code};
-  font-size: 12px;
+const STYLES_ROOT = css`
+  padding: 24px 88px 24px 64px;
   width: 100%;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 16px 24px 16px 24px;
+  margin: 0 auto;
+  z-index: ${Constants.zindex.header};
 
   @media (max-width: ${Constants.sizes.mobile}px) {
-    display: block;
+    padding: 16px 24px;
   }
 `;
 
+const STYLES_CONTAINER = css`
+  max-width: 1440px;
+  margin: 0 auto;
+  font-family: ${Constants.font.text};
+  font-weight: 400;
+  font-size: ${Constants.typescale.lvl1};
+  width: 100%;
+`;
+
+const STYLES_NAV_CONTAINER = css`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+`;
+
 const STYLES_LINK = css`
-  font-family: ${Constants.font.medium};
-  color: ${Constants.system.pitchBlack};
+  color: ${Constants.system.grayBlack};
   text-decoration: none;
   transition: 200ms ease color;
-  overflow-wrap: break-word;
   text-align: left;
-
-  :visited {
-    color: ${Constants.system.black};
-  }
+  display: block;
 
   :hover {
     color: ${Constants.system.brand};
   }
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    display: block;
-    padding: 16px 0 0 0;
-    max-width: auto;
-  }
 `;
 
 const STYLES_PARAGRAPH = css`
@@ -47,38 +48,21 @@ const STYLES_PARAGRAPH = css`
   text-decoration: none;
   transition: 200ms ease color;
   overflow-wrap: break-word;
-  width: 100%;
+  max-width: 50%;
   min-width: 10%;
   text-align: left;
-
-  :visited {
-    color: ${Constants.system.black};
-  }
-
-  :hover {
-    color: ${Constants.system.brand};
-  }
+  margin-left: 30px;
+  display: block;
 
   @media (max-width: ${Constants.sizes.mobile}px) {
-    display: block;
-    padding: 16px 0 0 0;
-    max-width: auto;
+    max-width: 100%;
   }
 `;
 
 const STYLES_LEFT = css`
   flex-shrink: 0;
-  padding: 0 8px 0 8px;
   display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  width: 100%;
-  max-width: 588px;
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    display: block;
-    max-width: auto;
-  }
+  max-width: 70%;
 `;
 
 const STYLES_RIGHT = css`
@@ -86,44 +70,32 @@ const STYLES_RIGHT = css`
   width: 100%;
   display: flex;
   justify-content: flex-end;
-  padding: 0 8px 0 8px;
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    display: block;
-    text-align: left;
-  }
+  text-align: left;
 `;
 
 const WebsitePrototypeHeaderGeneric = (props) => {
   return (
-    <div css={STYLES_CONTAINER} style={props.style}>
-      <div css={STYLES_LEFT}>
-        <a css={STYLES_LINK} href={props.href} style={{ marginRight: 16 }}>
-          <SVGLogo.Symbol
-            height={`20px`}
-            style={{ transform: "translateY(-2px)" }}
-          />
-        </a>
-        <a
-          css={STYLES_LINK}
-          href={props.href}
-          style={{ flexShrink: 0, maxWidth: 212, marginRight: 16 }}
-        >
-          {props.title}
-        </a>
-        <span css={STYLES_PARAGRAPH}>{props.children}</span>
-      </div>
-      <div css={STYLES_RIGHT}>
-        <a
-          css={STYLES_LINK}
-          style={{
-            fontFamily: Constants.font.code,
-            textTransform: "uppercase",
-          }}
-          href="https://github.com/filecoin-project/slate"
-        >
-          View Source
-        </a>
+    <div css={STYLES_ROOT}>
+      <div css={STYLES_CONTAINER}>
+        <div css={STYLES_NAV_CONTAINER} style={props.style}>
+          <div css={STYLES_LEFT}>
+            <a css={STYLES_LINK} href={props.href} style={{ marginRight: 12 }}>
+              <SVGLogo.Symbol height={`20px`} style={{ transform: "translateY(-1px)" }} />
+            </a>
+            <a css={STYLES_LINK} href={props.href}>
+              {props.title}
+            </a>
+          </div>
+          <div css={STYLES_RIGHT}>
+            <a css={STYLES_LINK} href="/_" style={{ marginRight: 24 }}>
+              Sign up
+            </a>
+            <a css={STYLES_LINK} href="/_">
+              Sign in
+            </a>
+          </div>
+        </div>
+        <div css={STYLES_PARAGRAPH}>{props.children}</div>
       </div>
     </div>
   );
diff --git a/pages/_/slate.js b/pages/_/slate.js
index 9748aacf..6ddc13a1 100644
--- a/pages/_/slate.js
+++ b/pages/_/slate.js
@@ -7,6 +7,7 @@ import * as Actions from "~/common/actions";
 import { css } from "@emotion/react";
 import { ProcessedText } from "~/components/system/components/Typography";
 import { Alert } from "~/components/core/Alert";
+import { ViewAll } from "~/components/core/ViewAll";
 
 import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
 import WebsitePrototypeHeaderGeneric from "~/components/core/WebsitePrototypeHeaderGeneric";
@@ -25,10 +26,11 @@ const STYLES_ROOT = css`
   min-height: 100vh;
   text-align: center;
   font-size: 1rem;
+  background-color: ${Constants.system.white};
 `;
 
 const STYLES_SLATE = css`
-  padding: 0 88px 0 88px;
+  padding: 0 64px 0 64px;
   ${"" /* max-width: 1660px; */}
   display: block;
   width: 100%;
@@ -152,7 +154,10 @@ export default class SlatePage extends React.Component {
       <WebsitePrototypeWrapper title={title} description={body} url={url} image={image}>
         <div css={STYLES_ROOT}>
           <WebsitePrototypeHeaderGeneric href={headerURL} title={headerTitle}>
-            <ProcessedText text={this.props.slate.data.body} />
+            <ViewAll maxCharacter={208}>
+              {/* <ProcessedText text={this.props.slate.data.body} /> */}
+              {this.props.slate.data.body}
+            </ViewAll>
           </WebsitePrototypeHeaderGeneric>
           <div css={STYLES_SLATE}>
             <SlateLayout

From 85592e9c2eae277ec8c15e050b2c1b47d014ffe5 Mon Sep 17 00:00:00 2001
From: tarafanlin <35607644+tarafanlin@users.noreply.github.com>
Date: Thu, 22 Oct 2020 23:25:19 -0700
Subject: [PATCH 2/2] integrate ProcessedText and nits

---
 components/core/ViewAll.js | 22 ++++++++++------------
 pages/_/slate.js           |  9 ++++-----
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/components/core/ViewAll.js b/components/core/ViewAll.js
index b91d56f7..b150d335 100644
--- a/components/core/ViewAll.js
+++ b/components/core/ViewAll.js
@@ -10,23 +10,21 @@ const STYLES_VIEW_BUTTON = css`
   cursor: pointer;
 `;
 
-export const ViewAll = (props) => {
+export const ViewAllButton = (props) => {
   const [isTruncated, setTruncated] = useState(true);
-  const text = props.children;
+  const text = props.fullText;
   const maxCharacter = props.maxCharacter;
   const displayText = isTruncated ? text.slice(0, maxCharacter) : text;
 
   return (
-    <React.Fragment>
-      <div>
-        {displayText}
-        <span>{isTruncated ? "... " : ""}</span>
-        <span css={STYLES_VIEW_BUTTON} onClick={() => setTruncated(!isTruncated)}>
-          {isTruncated ? "View All" : "View Less"}
-        </span>
-      </div>
-    </React.Fragment>
+    <div>
+      {displayText}
+      <span>{isTruncated ? "... " : ""}</span>
+      <span css={STYLES_VIEW_BUTTON} onClick={() => setTruncated(!isTruncated)}>
+        {isTruncated ? "View All" : "View Less"}
+      </span>
+    </div>
   );
 };
 
-export default ViewAll;
+export default ViewAllButton;
diff --git a/pages/_/slate.js b/pages/_/slate.js
index 6ddc13a1..ab8db614 100644
--- a/pages/_/slate.js
+++ b/pages/_/slate.js
@@ -7,7 +7,7 @@ import * as Actions from "~/common/actions";
 import { css } from "@emotion/react";
 import { ProcessedText } from "~/components/system/components/Typography";
 import { Alert } from "~/components/core/Alert";
-import { ViewAll } from "~/components/core/ViewAll";
+import { ViewAllButton } from "~/components/core/ViewAll";
 
 import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
 import WebsitePrototypeHeaderGeneric from "~/components/core/WebsitePrototypeHeaderGeneric";
@@ -154,10 +154,9 @@ export default class SlatePage extends React.Component {
       <WebsitePrototypeWrapper title={title} description={body} url={url} image={image}>
         <div css={STYLES_ROOT}>
           <WebsitePrototypeHeaderGeneric href={headerURL} title={headerTitle}>
-            <ViewAll maxCharacter={208}>
-              {/* <ProcessedText text={this.props.slate.data.body} /> */}
-              {this.props.slate.data.body}
-            </ViewAll>
+            <ViewAllButton fullText={this.props.slate.data.body} maxCharacter={208}>
+              <ProcessedText text={this.props.slate.data.body} />
+            </ViewAllButton>
           </WebsitePrototypeHeaderGeneric>
           <div css={STYLES_SLATE}>
             <SlateLayout