Codetab, layout, further color refinements

Author: bettistein

package.json

@@ -12,6 +12,7 @@
     "@mdx-js/loader": "^1.5.5",
     "@next/mdx": "^8.1.0",
     "@octokit/graphql-schema": "^7.4.0",
+    "@rescript/react": "^0.10.1",
     "@ryyppy/rescript-promise": "^0.0.2",
     "@zeit/next-css": "^1.0.1",
     "bs-fetch": "^0.3.1",
@@ -29,7 +30,6 @@
     "prettier": "^1.18.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "@rescript/react": "^0.10.1",
     "remark-parse": "^7.0.1",
     "remark-slug": "^5.1.2",
     "remark-stringify": "^7.0.3",

src/Playground.js

@@ -219,7 +219,7 @@ module Statusbar = {
         if Array.length(warnings) === 0 {
           "bg-turtle-dark"
         } else {
-          "bg-orange-dark"
+          "bg-orange"
         }
       }
 
@@ -243,7 +243,7 @@ module ResultPane = {
   let compactErrorLine = (~highlight=false, ~prefix: prefix, locMsg: Api.LocMsg.t) => {
     let {Api.LocMsg.row: row, column, shortMsg} = locMsg
     let prefixColor = switch prefix {
-    | #W => "text-orange-dark"
+    | #W => "text-orange"
     | #E => "text-fire"
     }
 
@@ -255,7 +255,7 @@ module ResultPane = {
     let highlightClass = switch (highlight, prefix) {
     | (false, _) => ""
     | (true, #W) => "bg-orange-15"
-    | (true, #E) => "bg-fire-10 rounded"
+    | (true, #E) => "bg-fire-90 rounded"
     }
 
     <div className="font-mono mb-4 pb-6 last:mb-0 last:pb-0 last:border-0 border-b border-gray-80 ">
@@ -450,7 +450,7 @@ module ResultPane = {
 
   let renderTitle = result => {
     let errClass = "text-fire"
-    let warnClass = "text-orange-dark"
+    let warnClass = "text-orange"
     let okClass = "text-turtle-dark"
 
     let (className, text) = switch result {

src/Playground.res

@@ -1,20 +1,21 @@
 open Markdown
-
+/*
 module H1 = {
   @react.component
   let make = (~children) =>
     <h1 className="text-42 tracking-tight leading-1 mb-2 font-sans font-medium text-gray-95"> children </h1>
-}
+}*/
 
 module H2 = {
   // We will currently hide the headline, to keep the structure,
   // but having an Elm like documentation
   @react.component
   let make = (~id, ~children) => <>
-    <div className="border-b border-gray-10 mb-10 mt-20" /> <Markdown.H2 id> children </Markdown.H2>
+    <div className="mb-10 mt-20" /> <Markdown.H2 id> children </Markdown.H2>
   </>
 }
 
+
 let default = Mdx.Components.t(
   ~intro=Intro.make,
   ~p=P.make,

src/components/ApiMarkdown.js

@@ -14,17 +14,17 @@ let make = (~highlightedLines=[], ~code: string, ~showLabel=true, ~lang="text")
 
   let label = if showLabel {
     let label = langShortname(lang)
-    <div className="flex self-end font-sans mb-4 text-12 font-bold text-gray-60 px-4">
+    <div className="absolute right-0 px-4 pb-4 bg-gray-5 font-sans text-12 font-bold text-gray-60 ">
       {//RES or JS Label
       Js.String2.toUpperCase(label)->React.string}
     </div>
   } else {
-    <div className="mt-4" />
+    React.null
   }
 
   <div //normal code-text without tabs
-    className="flex w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-10 bg-gray-5 py-2 text-gray-90">
-    label <div className="px-4 text-14 pb-2 overflow-x-auto -mt-2"> children </div>
+    className="relative w-full flex-col rounded-none xs:rounded border-t border-b xs:border border-gray-10 bg-gray-5 py-2 text-gray-90">
+    label <div className="px-4 text-14 pt-4 pb-2 overflow-x-auto -mt-2"> children </div>
   </div>
 }
 
@@ -62,9 +62,9 @@ module Toggle = {
         }
 
         let activeClass = if selected === i {
-          "font-semibold text-gray-90 bg-gray-5 border border-b-0 border-gray-10"
+          "font-medium text-gray-90 bg-gray-5 border-t-2 border-l border-r"
         } else {
-          "border-gray-10 border-b bg-gray-10 hover:cursor-pointer"
+          "font-medium hover:text-gray-60 border-t-2 border-gray-20 bg-gray-10 hover:cursor-pointer"
         }
 
         let onClick = evt => {
@@ -75,14 +75,22 @@ module Toggle = {
 
         let paddingX = switch numberOfItems {
         | 1
-        | 2 => "sm:px-16"
+        | 2 => "sm:px-4"
         | 3 => "lg:px-8"
         | _ => ""
         }
+
+        let style = if selected === i {
+          ReactDOM.Style.make(~borderColor="#f4646a #EDF0F2", ())->Some
+        } else {
+          None
+        }
+        
         <span
           key
+          ?style
           className={paddingX ++
-          (" flex-none px-4 inline-block p-2 rounded-tl rounded-tr " ++
+          (" flex-none px-4 first:ml-6 xs:first:ml-0 inline-block p-1 rounded-tl rounded-tr " ++
           activeClass)}
           onClick>
           {React.string(label)}
@@ -97,14 +105,14 @@ module Toggle = {
         })
         ->Belt.Option.getWithDefault(React.null)
 
-      <div className="flex w-full flex-col rounded-none text-gray-80">
+      <div className="relative pt-6 w-full rounded-none text-gray-80"> //text within code-box
         <div
-          className="flex w-full overflow-auto scrolling-touch font-sans bg-transparent text-sm text-gray-60-tr">
-          <div className="flex"> {React.array(tabElements)} </div>
+          className="absolute flex w-full overflow-auto scrolling-touch font-sans bg-transparent text-14 text-gray-40 " style={ReactDOM.Style.make(~marginTop="-30px", ())}>
+          <div className="flex space-x-2" > {React.array(tabElements)} </div>
           <div className="flex-1 border-b border-gray-10"> {React.string(j`\\u00A0`)} </div>
         </div>
         <div
-          className="px-4 text-14 pb-4 pt-4 overflow-x-auto bg-gray-5 border-gray-10 xs:rounded-b border border-t-0">
+          className="px-4 text-14 pb-4 pt-4 overflow-x-auto bg-gray-5 border-gray-10 xs:rounded-b border border-t-1">
           <pre> children </pre>
         </div>
       </div>

src/components/ApiMarkdown.res

@@ -218,7 +218,7 @@ module GutterMarker = {
     let marker = createElement("div")
     let colorClass = switch kind {
     | #Warning => "text-orange bg-orange-15"
-    | #Error => "text-fire bg-fire-10"
+    | #Error => "text-fire bg-fire-100"
     }
 
     let (row, col) = rowCol