From 25cadaea3ad0e29764d1f46318a5d884b8f3fd73 Mon Sep 17 00:00:00 2001
From: Brandon Kase <bkase@o1labs.org>
Date: Wed, 23 Sep 2020 11:41:07 +0300
Subject: [PATCH 1/2] Improves docs styles

---
 .../website-redesign/pages/docs/index.mdx     |  2 ++
 frontend/website-redesign/src/Theme.re        | 18 ++++++++++--
 .../website-redesign/src/components/Alert.re  |  2 +-
 .../src/components/DocsComponents.re          | 28 ++++++++++++++-----
 frontend/website-redesign/src/pages/Docs.re   | 20 ++++++++-----
 5 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/frontend/website-redesign/pages/docs/index.mdx b/frontend/website-redesign/pages/docs/index.mdx
index a61fd338d45..8e7b83020a8 100644
--- a/frontend/website-redesign/pages/docs/index.mdx
+++ b/frontend/website-redesign/pages/docs/index.mdx
@@ -3,6 +3,8 @@ export default Page({title: "Overview"});
 
 # Overview
 
+Here's where you'll find all the documentation for the whole process of getting up and running with Coda.
+
 ## What is Coda?
 
 Coda is the first cryptocurrency protocol with a succinct blockchain. Current cryptocurrencies like Bitcoin and Ethereum store hundreds of gigabytes of data, and as time goes on, their blockchains will only increase in size. With Coda however, no matter how much the usage grows, the blockchain always stays the same size - about ~20 kilobytes (the size of a few tweets). This means Coda can be accessed trustlessly from any device, including phones and browsers, and enables frictionless integration of cryptocurrency into applications for developers.
diff --git a/frontend/website-redesign/src/Theme.re b/frontend/website-redesign/src/Theme.re
index 5fa4d4ad2ca..d484e92a16b 100644
--- a/frontend/website-redesign/src/Theme.re
+++ b/frontend/website-redesign/src/Theme.re
@@ -13,6 +13,7 @@ module Colors = {
   let digitalGray = `hex("575757");
   let error = `hex("e93939");
   let status = `hex("ffb13b");
+  let codeHighlight = `hex("e9eaf3");
 };
 
 module Typeface = {
@@ -274,8 +275,7 @@ module Type = {
       ),
     ]);
 
-  let sectionSubhead =
-    style([
+  let sectionSubhead_ = [
       Typeface.monumentGrotesk,
       fontSize(`rem(1.)),
       lineHeight(`rem(1.5)),
@@ -286,7 +286,8 @@ module Type = {
         MediaQuery.tablet,
         [fontSize(`rem(1.25)), lineHeight(`rem(1.875))],
       ),
-    ]);
+    ];
+  let sectionSubhead = style(sectionSubhead_);
 
   let paragraph =
     style([
@@ -312,6 +313,17 @@ module Type = {
       ),
     ]);
 
+  let inlineCode_ =[
+      Typeface.monumentGroteskMono,
+      fontSize(`rem(0.9375)),
+      lineHeight(`rem(1.5)),
+      color(Colors.digitalBlack),
+      backgroundColor(Colors.codeHighlight),
+      padding2(~v=`zero, ~h=`rem(0.625)),
+      borderRadius(`px(3))
+    ];
+  let inlineCode = style(inlineCode_);
+
   let paragraphMono =
     style([
       Typeface.monumentGrotesk,
diff --git a/frontend/website-redesign/src/components/Alert.re b/frontend/website-redesign/src/components/Alert.re
index 712f15942ed..c2d58aa800a 100644
--- a/frontend/website-redesign/src/components/Alert.re
+++ b/frontend/website-redesign/src/components/Alert.re
@@ -3,7 +3,7 @@ module Styles = {
 
   let main =
     style([
-      border(px(1), `solid, Theme.Colors.digitalBlack),
+      border(px(1), `solid, Theme.Colors.digitalBlackA(0.25)),
       borderRadius(px(4)),
       overflow(`hidden),
     ]);
diff --git a/frontend/website-redesign/src/components/DocsComponents.re b/frontend/website-redesign/src/components/DocsComponents.re
index 39076353968..2803b8cd835 100644
--- a/frontend/website-redesign/src/components/DocsComponents.re
+++ b/frontend/website-redesign/src/components/DocsComponents.re
@@ -14,6 +14,20 @@ module Styles = {
       backgroundSize(`cover),
       backgroundImage(url("/static/img/link.svg")),
     ]);
+
+  let h1Spacing = style([
+    marginBottom(`rem(1.))
+  ]);
+
+  let headerSpacing = merge([
+                            h1Spacing,
+                            style([
+    marginTop(`rem(3.))
+  ])]);
+
+  let paragraphSpacing = style([
+    marginBottom(`rem(1.))
+  ]);
 };
 
 module type Component = {let element: React.element;};
@@ -52,27 +66,27 @@ open Css;
 
 module H1 =
   WrapHeader({
-    let element = <h1 className=Theme.Type.h1 />;
+    let element = <h1 className=merge([Styles.headerSpacing, Theme.Type.h1]) />;
   });
 
 module H2 =
   WrapHeader({
-    let element = <h2 className=Theme.Type.h2 />;
+    let element = <h2 className=merge([Styles.headerSpacing, Theme.Type.h2]) />;
   });
 
 module H3 =
   WrapHeader({
-    let element = <h3 className=Theme.Type.h3 />;
+    let element = <h3 className=merge([Styles.headerSpacing, Theme.Type.h3]) />;
   });
 
 module H4 =
   WrapHeader({
-    let element = <h4 className=Theme.Type.h4 />;
+    let element = <h4 className=merge([Styles.headerSpacing, Theme.Type.h4]) />;
   });
 
 module P =
   Wrap({
-    let element = <p className=Theme.Type.paragraph />;
+    let element = <p className=merge([Styles.paragraphSpacing, Theme.Type.paragraph]) />;
   });
 
 module A =
@@ -128,7 +142,7 @@ module Pre = {
           borderRadius(`px(4)),
           padding2(~v=`rem(1.), ~h=`rem(1.)),
           overflow(`scroll),
-          // selector("code", [Theme.Type.paragraphMono]),
+          selector("code", [color(Theme.Colors.white)]),
         ])}>
         children
       </pre>
@@ -138,7 +152,7 @@ module Pre = {
 
 module Code =
   Wrap({
-    let element = <code className=Theme.Type.paragraphMono />;
+    let element = <code className=Theme.Type.inlineCode />;
   });
 
 module Ul =
diff --git a/frontend/website-redesign/src/pages/Docs.re b/frontend/website-redesign/src/pages/Docs.re
index 5ddbbd045d6..70b098f8cce 100644
--- a/frontend/website-redesign/src/pages/Docs.re
+++ b/frontend/website-redesign/src/pages/Docs.re
@@ -6,16 +6,16 @@ module Style = {
   let content =
     style([
       maxWidth(`rem(53.)),
+      marginBottom(`rem(2.875)),
       media(Theme.MediaQuery.notMobile, [marginLeft(`rem(1.))]),
       selector(
         "p > code, li > code",
-        [
-          boxSizing(`borderBox),
-          padding2(~v=`px(2), ~h=`px(6)),
-          backgroundColor(Theme.Colors.black),
-          borderRadius(`px(4)),
-        ],
+        Theme.Type.inlineCode_,
       ),
+      selector(
+        "h1 + p",
+        [ marginBottom(`rem(3.)) ] @ Theme.Type.sectionSubhead_
+      )
     ]);
 
   let page =
@@ -29,6 +29,10 @@ module Style = {
       media(Theme.MediaQuery.notMobile, [padding2(~v=`zero, ~h=`rem(3.))]),
     ]);
 
+  let eyebrow = style([
+    marginBottom(`rem(1.))
+  ])
+
   let editLink =
     style([
       media(Theme.MediaQuery.tablet, [position(`relative), float(`right)]),
@@ -91,8 +95,10 @@ let make = (~metadata, ~children) => {
     <div className=Style.page>
       <DocsSideNav currentSlug />
       <div className=Style.content>
+        <div className=Style.eyebrow>
+          <LabelEyebrow copy="Documentation"/>
+        </div>
         <EditLink route={router.route} />
-        // <Next.MDXProvider components={DocsComponents.allComponents()}>
         <Next.MDXProvider components={DocsComponents.allComponents()}>
           children
         </Next.MDXProvider>

From a0991be8eacee3a0e5fb55fc788c8d4cbb051716 Mon Sep 17 00:00:00 2001
From: Brandon Kase <bkase@o1labs.org>
Date: Wed, 23 Sep 2020 19:21:17 +0300
Subject: [PATCH 2/2] Makes docs much nicer

---
 .../website-redesign/src/components/Alert.re  |  6 +++-
 .../src/components/DocsComponents.re          | 30 +++++++++++++++----
 .../src/components/LabelEyebrow.re            | 23 ++++++++++++++
 .../src/components/SideNav.re                 |  2 +-
 frontend/website-redesign/src/pages/Docs.re   |  2 +-
 5 files changed, 55 insertions(+), 8 deletions(-)
 create mode 100644 frontend/website-redesign/src/components/LabelEyebrow.re

diff --git a/frontend/website-redesign/src/components/Alert.re b/frontend/website-redesign/src/components/Alert.re
index c2d58aa800a..152098b762b 100644
--- a/frontend/website-redesign/src/components/Alert.re
+++ b/frontend/website-redesign/src/components/Alert.re
@@ -9,7 +9,11 @@ module Styles = {
     ]);
 
   let inner =
-    merge([style([margin(`zero), padding2(~v=`rem(0.), ~h=`rem(1.))])]);
+    merge([style([
+                 margin(`zero),
+                 padding2(~v=`rem(1.), ~h=`rem(1.)),
+                 selector("p", [ margin(`zero) ])
+    ])]);
 
   let title = c =>
     merge([
diff --git a/frontend/website-redesign/src/components/DocsComponents.re b/frontend/website-redesign/src/components/DocsComponents.re
index 2803b8cd835..dfb428a1c1b 100644
--- a/frontend/website-redesign/src/components/DocsComponents.re
+++ b/frontend/website-redesign/src/components/DocsComponents.re
@@ -28,6 +28,26 @@ module Styles = {
   let paragraphSpacing = style([
     marginBottom(`rem(1.))
   ]);
+
+  let code = style([
+    Theme.Typeface.monumentGroteskMono,
+    fontSize(`rem(1.)),
+    lineHeight(`rem(1.5))
+  ]);
+
+  let list = style([
+    color(Theme.Colors.digitalBlack),
+    Theme.Typeface.monumentGrotesk,
+    fontSize(`rem(1.125)),
+    lineHeight(`rem(1.6875)),
+    marginTop(`rem(0.5)),
+    marginBottom(`rem(1.)),
+    marginLeft(`rem(2.6875)),
+  ]);
+
+  let link = style([
+    textDecoration(`none)
+  ]);
 };
 
 module type Component = {let element: React.element;};
@@ -66,7 +86,7 @@ open Css;
 
 module H1 =
   WrapHeader({
-    let element = <h1 className=merge([Styles.headerSpacing, Theme.Type.h1]) />;
+    let element = <h1 className=merge([Styles.h1Spacing, Theme.Type.h1]) />;
   });
 
 module H2 =
@@ -91,7 +111,7 @@ module P =
 
 module A =
   Wrap({
-    let element = <a className=Theme.Type.link />;
+    let element = <a className=merge([Styles.link, Theme.Type.link]) />;
   });
 
 module Strong =
@@ -152,17 +172,17 @@ module Pre = {
 
 module Code =
   Wrap({
-    let element = <code className=Theme.Type.inlineCode />;
+    let element = <code className=Styles.code />;
   });
 
 module Ul =
   Wrap({
-    let element = <ul className="" /* TODO */ />;
+    let element = <ul className=Styles.list />;
   });
 
 module Ol =
   Wrap({
-    let element = <ol className="" /* TODO */ />;
+    let element = <ol className=Styles.list />;
   });
 
 module Img =
diff --git a/frontend/website-redesign/src/components/LabelEyebrow.re b/frontend/website-redesign/src/components/LabelEyebrow.re
new file mode 100644
index 00000000000..fc5ded839c6
--- /dev/null
+++ b/frontend/website-redesign/src/components/LabelEyebrow.re
@@ -0,0 +1,23 @@
+module Styles = {
+  open Css;
+  let link =
+    style([
+      Theme.Typeface.monumentGrotesk,
+      cursor(`pointer),
+      color(Theme.Colors.orange),
+      display(`flex),
+      marginTop(`rem(1.)),
+    ]);
+
+  let text =
+    style([
+      marginRight(`rem(0.2)),
+      cursor(`pointer),
+      marginBottom(`rem(2.)),
+    ]);
+};
+
+[@react.component]
+let make = (~copy) => {
+  <h4 className=Theme.Type.h4>{React.string(copy)}</h4>
+};
diff --git a/frontend/website-redesign/src/components/SideNav.re b/frontend/website-redesign/src/components/SideNav.re
index fd0e91c15a4..355ece2c8e2 100644
--- a/frontend/website-redesign/src/components/SideNav.re
+++ b/frontend/website-redesign/src/components/SideNav.re
@@ -11,7 +11,7 @@ module Styles = {
         Theme.MediaQuery.notMobile,
         [
           marginRight(rem(2.)),
-          marginTop(rem(2.)),
+          marginTop(`zero),
           position(`sticky),
           top(rem(2.5)),
         ],
diff --git a/frontend/website-redesign/src/pages/Docs.re b/frontend/website-redesign/src/pages/Docs.re
index 70b098f8cce..fab3ad679e8 100644
--- a/frontend/website-redesign/src/pages/Docs.re
+++ b/frontend/website-redesign/src/pages/Docs.re
@@ -14,7 +14,7 @@ module Style = {
       ),
       selector(
         "h1 + p",
-        [ marginBottom(`rem(3.)) ] @ Theme.Type.sectionSubhead_
+        Theme.Type.sectionSubhead_
       )
     ]);