Skip to content

Commit cc3423e

Browse files
bettisteinryyppy
bettistein
and
ryyppy
authored
Typography improvements (#450)
* several markdown style improvements * nested lists styling refinement * sidebar: drop down, divider; markdown: codebox icons & toast * bullet points fixed Co-authored-by: Bettina Steinbrecher <[email protected]> Co-authored-by: Patrick Ecker <[email protected]>
1 parent f1503c3 commit cc3423e

17 files changed

+191
-133
lines changed

‎package-lock.json

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,4 @@
5050
"rescript": "9.1.2",
5151
"tailwindcss": "^2.1.4"
5252
}
53-
}
53+
}

‎pages/docs/manual/latest/let-binding.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ separate compilation units and also they're better for documentation.
179179

180180
Still, `%%private` is useful in the following scenarios:
181181

182-
- Code generators. Some code generators want to hide some values but it is sometimes very hard or time consuming for code generators to synthesize the types for public fields.
182+
- **Code generators.** Some code generators want to hide some values but it is sometimes very hard or time consuming for code generators to synthesize the types for public fields.
183183

184-
- Quick prototyping. During prototyping, we still want to hide some values, but the interface file is not stable yet, `%%private` provide you such convenience.
184+
- **Quick prototyping.** During prototyping, we still want to hide some values, but the interface file is not stable yet, `%%private` provide you such convenience.
185185

‎src/components/CodeExample.mjs

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,8 @@ function CodeExample$CopyButton(Props) {
7575
}
7676
var buttonEl = Belt_Option.getExn(Caml_option.nullable_to_opt(buttonRef.current));
7777
var bannerEl = document.createElement("div");
78-
bannerEl.className = "foobar opacity-0 absolute top-0 -mt-1 -mr-1 px-2 rounded text-12 right-0 bg-turtle text-gray-80-tr transition-all duration-500 ease-in-out ";
79-
var textNode = document.createTextNode("Copied!");
78+
bannerEl.className = "opacity-0 absolute -top-6 right-0 -mt-5 -mr-4 px-4 py-2 w-40 rounded-lg captions text-white bg-gray-100 text-gray-80-tr transition-all duration-1000 ease-in-out ";
79+
var textNode = document.createTextNode("Copied to clipboard");
8080
bannerEl.appendChild(textNode);
8181
buttonEl.appendChild(bannerEl);
8282
var nextFrameId = window.requestAnimationFrame(function (param) {
@@ -89,7 +89,7 @@ function CodeExample$CopyButton(Props) {
8989
return Curry._1(setState, (function (param) {
9090
return /* Init */0;
9191
}));
92-
}), 2000);
92+
}), 3000);
9393
return (function (param) {
9494
window.cancelAnimationFrame(nextFrameId);
9595
clearTimeout(timeoutId);
@@ -101,8 +101,8 @@ function CodeExample$CopyButton(Props) {
101101
className: "relative",
102102
disabled: state === /* Copied */1,
103103
onClick: onClick
104-
}, React.createElement(Icon.Copy.make, {
105-
className: "text-gray-40 mt-px hover:cursor-pointer hover:text-gray-60"
104+
}, React.createElement(Icon.Clipboard.make, {
105+
className: "text-gray-30 mt-px hover:cursor-pointer hover:text-gray-60 hover:bg-gray-30 w-6 h-6 p-1 rounded transition-all duration-300 ease-in-out"
106106
}));
107107
}
108108

@@ -119,7 +119,7 @@ function CodeExample(Props) {
119119
if (showLabel) {
120120
var label$1 = langShortname(lang);
121121
label = React.createElement("div", {
122-
className: "absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-60 "
122+
className: "absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30"
123123
}, label$1.toUpperCase());
124124
} else {
125125
label = null;
@@ -149,7 +149,7 @@ function CodeExample$Toggle(Props) {
149149
var lang = tab.lang;
150150
label$1 = lang !== undefined ? langShortname(lang).toUpperCase() : String(i);
151151
}
152-
var activeClass = selected === i ? "font-medium text-gray-80 bg-gray-5 border-t-2 first:border-l" : "font-medium hover:text-gray-60 border-t-2 bg-gray-20 hover:cursor-pointer";
152+
var activeClass = selected === i ? "font-medium text-12 text-gray-40 bg-gray-5 border-t-2 first:border-l" : "font-medium text-12 hover:text-gray-60 border-t-2 bg-gray-20 hover:cursor-pointer";
153153
var onClick = function (evt) {
154154
evt.preventDefault();
155155
return Curry._1(setSelected, (function (param) {
@@ -162,10 +162,10 @@ function CodeExample$Toggle(Props) {
162162
) : (
163163
numberOfItems > 0 ? "sm:px-4" : ""
164164
);
165-
var borderColor = selected === i ? "#f4646a #EDF0F2" : "transparent";
165+
var borderColor = selected === i ? "#696B7D #EDF0F2" : "transparent";
166166
return React.createElement("span", {
167167
key: key,
168-
className: paddingX + (" flex-none px-4 inline-block p-1 first:rounded-tl " + activeClass),
168+
className: paddingX + (" flex-none px-5 inline-block p-1 first:rounded-tl " + activeClass),
169169
style: {
170170
borderColor: borderColor
171171
},
@@ -196,24 +196,24 @@ function CodeExample$Toggle(Props) {
196196
children: React.createElement("a", {
197197
target: "_blank"
198198
}, React.createElement(Icon.ExternalLink.make, {
199-
className: "text-gray-40 hover:cursor-pointer hover:text-gray-60"
199+
className: "text-gray-30 mt-px hover:cursor-pointer hover:text-gray-60 hover:bg-gray-30 w-6 h-6 p-1 rounded transition-all duration-300 ease-in-out"
200200
}))
201201
});
202202
var copyButton = React.createElement(CodeExample$CopyButton, {
203203
code: tab.code
204204
});
205205
buttonDiv = React.createElement("div", {
206-
className: "flex items-center justify-end h-full pr-4 space-x-3"
206+
className: "flex items-center justify-end h-full pr-4 space-x-2"
207207
}, playgroundLinkButton, copyButton);
208208
} else {
209209
buttonDiv = null;
210210
}
211211
return React.createElement("div", {
212212
className: "relative pt-6 w-full rounded-none text-gray-80"
213213
}, React.createElement("div", {
214-
className: "absolute flex w-full overflow-auto font-sans bg-transparent text-14 text-gray-40 ",
214+
className: "absolute flex w-full font-sans bg-transparent text-14 text-gray-40 ",
215215
style: {
216-
marginTop: "-30px"
216+
marginTop: "-26px"
217217
}
218218
}, React.createElement("div", {
219219
className: "flex ml-2 xs:ml-0"

‎src/components/CodeExample.res

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -86,9 +86,9 @@ module CopyButton = {
8686
// If we don't do that, the banner will essentially pop up without any animation
8787
let bannerEl = createElement("div")
8888
bannerEl->setClassName(
89-
"foobar opacity-0 absolute top-0 -mt-1 -mr-1 px-2 rounded text-12 right-0 bg-turtle text-gray-80-tr transition-all duration-500 ease-in-out ",
89+
"opacity-0 absolute -top-6 right-0 -mt-5 -mr-4 px-4 py-2 w-40 rounded-lg captions text-white bg-gray-100 text-gray-80-tr transition-all duration-1000 ease-in-out ",
9090
)
91-
let textNode = createTextNode("Copied!")
91+
let textNode = createTextNode("Copied to clipboard")
9292

9393
bannerEl->appendChild(textNode)
9494
buttonEl->appendChild(bannerEl)
@@ -101,7 +101,7 @@ module CopyButton = {
101101
let timeoutId = Js.Global.setTimeout(() => {
102102
buttonEl->removeChild(bannerEl)
103103
setState(_ => Init)
104-
}, 2000)
104+
}, 3000)
105105

106106
Some(
107107
() => {
@@ -112,10 +112,10 @@ module CopyButton = {
112112
| _ => None
113113
}
114114
}, [state])
115-
115+
//Copy-Button
116116
<button
117117
ref={ReactDOM.Ref.domRef(buttonRef)} disabled={state === Copied} className="relative" onClick>
118-
<Icon.Copy className="text-gray-40 mt-px hover:cursor-pointer hover:text-gray-60" />
118+
<Icon.Clipboard className="text-gray-30 mt-px hover:cursor-pointer hover:text-gray-60 hover:bg-gray-30 w-6 h-6 p-1 rounded transition-all duration-300 ease-in-out" />
119119
</button>
120120
}
121121
}
@@ -126,7 +126,7 @@ let make = (~highlightedLines=[], ~code: string, ~showLabel=true, ~lang="text")
126126

127127
let label = if showLabel {
128128
let label = langShortname(lang)
129-
<div className="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-60 ">
129+
<div className="absolute right-0 px-4 pb-4 font-sans text-12 font-bold text-gray-30">
130130
{
131131
//RES or JS Label
132132
Js.String2.toUpperCase(label)->React.string
@@ -176,9 +176,9 @@ module Toggle = {
176176
}
177177

178178
let activeClass = if selected === i {
179-
"font-medium text-gray-80 bg-gray-5 border-t-2 first:border-l"
179+
"font-medium text-12 text-gray-40 bg-gray-5 border-t-2 first:border-l"
180180
} else {
181-
"font-medium hover:text-gray-60 border-t-2 bg-gray-20 hover:cursor-pointer"
181+
"font-medium text-12 hover:text-gray-60 border-t-2 bg-gray-20 hover:cursor-pointer"
182182
}
183183

184184
let onClick = evt => {
@@ -195,7 +195,7 @@ module Toggle = {
195195
}
196196

197197
let borderColor = if selected === i {
198-
"#f4646a #EDF0F2"
198+
"#696B7D #EDF0F2"
199199
} else {
200200
"transparent"
201201
}
@@ -204,7 +204,7 @@ module Toggle = {
204204
key
205205
style={ReactDOM.Style.make(~borderColor, ())}
206206
className={paddingX ++
207-
(" flex-none px-4 inline-block p-1 first:rounded-tl " ++
207+
(" flex-none px-5 inline-block p-1 first:rounded-tl " ++
208208
activeClass)}
209209
onClick>
210210
{React.string(label)}
@@ -229,14 +229,14 @@ module Toggle = {
229229
| Some(tab) =>
230230
let playgroundLinkButton =
231231
<Next.Link href={`/try?code=${LzString.compressToEncodedURIComponent(tab.code)}}`}>
232-
<a target="_blank">
233-
<Icon.ExternalLink className="text-gray-40 hover:cursor-pointer hover:text-gray-60" />
232+
<a target="_blank"> // ICON Link to PLAYGROUND
233+
<Icon.ExternalLink className="text-gray-30 mt-px hover:cursor-pointer hover:text-gray-60 hover:bg-gray-30 w-6 h-6 p-1 rounded transition-all duration-300 ease-in-out" />
234234
</a>
235235
</Next.Link>
236236

237237
let copyButton = <CopyButton code={tab.code} />
238238

239-
<div className="flex items-center justify-end h-full pr-4 space-x-3">
239+
<div className="flex items-center justify-end h-full pr-4 space-x-2">
240240
playgroundLinkButton copyButton
241241
</div>
242242
| None => React.null
@@ -245,8 +245,8 @@ module Toggle = {
245245
<div className="relative pt-6 w-full rounded-none text-gray-80">
246246
//text within code-box
247247
<div
248-
className="absolute flex w-full overflow-auto font-sans bg-transparent text-14 text-gray-40 "
249-
style={ReactDOM.Style.make(~marginTop="-30px", ())}>
248+
className="absolute flex w-full font-sans bg-transparent text-14 text-gray-40 "
249+
style={ReactDOM.Style.make(~marginTop="-26px", ())}>
250250
<div className="flex ml-2 xs:ml-0"> {React.array(tabElements)} </div>
251251
<div className="flex-1 w-full bg-gray-20 border-b rounded-tr border-gray-20 items-center">
252252
buttonDiv

‎src/components/Icon.mjs

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -315,30 +315,18 @@ function Icon$ExternalLink(Props) {
315315
var className = classNameOpt !== undefined ? classNameOpt : "";
316316
return React.createElement("svg", {
317317
className: "stroke-current " + className,
318-
height: "16.122",
319-
width: "16.098",
320-
viewBox: "0 0 16.098 16.122",
318+
height: "16",
319+
width: "16",
320+
fill: "none",
321+
stroke: "currentColor",
322+
strokeLinecap: "round",
323+
strokeLinejoin: "round",
324+
strokeWidth: "2",
325+
viewBox: "0 0 24 24",
321326
xmlns: "http://www.w3.org/2000/svg"
322-
}, React.createElement("g", {
323-
transform: "translate(-1046.283 -564.299)"
324-
}, React.createElement("path", {
325-
d: "M1987.235-1783.927h-4.849v11.17h11.164v-5.113",
326-
fill: "none",
327-
strokeWidth: "1.5",
328-
transform: "translate(-935.353 2352.43)"
329-
}), React.createElement("g", {
330-
transform: "translate(1051.72 570.607) rotate(-45)"
331-
}, React.createElement("path", {
332-
d: "M0,0H7.467",
333-
fill: "none",
334-
strokeWidth: "1.5",
335-
transform: "translate(0 3.128)"
336-
}), React.createElement("path", {
337-
d: "M0,0,3.078,3.078,0,6.156",
338-
fill: "none",
339-
strokeWidth: "1.5",
340-
transform: "translate(4.252 0)"
341-
}))));
327+
}, React.createElement("path", {
328+
d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"
329+
}));
342330
}
343331

344332
var ExternalLink = {
@@ -374,6 +362,35 @@ var Copy = {
374362
make: Icon$Copy
375363
};
376364

365+
function Icon$Clipboard(Props) {
366+
var classNameOpt = Props.className;
367+
var className = classNameOpt !== undefined ? classNameOpt : "";
368+
return React.createElement("svg", {
369+
className: "stroke-current " + className,
370+
height: "16",
371+
width: "16",
372+
fill: "none",
373+
strokeLinecap: "round",
374+
strokeLinejoin: "round",
375+
strokeWidth: "2",
376+
viewBox: "0 0 24 24",
377+
xmlns: "http://www.w3.org/2000/svg"
378+
}, React.createElement("path", {
379+
d: "M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"
380+
}), React.createElement("rect", {
381+
height: "4",
382+
width: "8",
383+
rx: "1",
384+
ry: "1",
385+
x: "8",
386+
y: "2"
387+
}));
388+
}
389+
390+
var Clipboard = {
391+
make: Icon$Clipboard
392+
};
393+
377394
export {
378395
Github ,
379396
Npm ,
@@ -390,6 +407,7 @@ export {
390407
TriangleDown ,
391408
ExternalLink ,
392409
Copy ,
410+
Clipboard ,
393411

394412
}
395413
/* react Not a pure module */

0 commit comments

Comments
 (0)