Skip to content

Commit 60626ad

Browse files
author
Alban Bailly
committed
more styling updates
1 parent 857c1ca commit 60626ad

File tree

10 files changed

+74
-24
lines changed

10 files changed

+74
-24
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"postcss-easy-import": "^3.0.0",
2727
"prop-types": "^15.6.2",
2828
"react": "^16.7.0",
29+
"react-clipboard.js": "^2.0.7",
2930
"react-dom": "^16.7.0",
3031
"react-helmet": "^5.2.0",
3132
"react-markdown": "^4.0.8",

‎src/components/2_molecules/ResponseItem.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const ResponseItem = props => {
2828
return (
2929
l && (
3030
<div key={i}>
31-
<div className="flex mb-4">
31+
<div className={`flex mb-2 pt-2 initResponse`}>
3232
<div className="w-1/4">
3333
<div>
3434
<b>{p}</b>

‎src/components/2_molecules/Security.js

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
1-
import React from 'react';
1+
import React from "react";
22

3-
export const Security = (props) => {
3+
export const Security = props => {
44
const { oauth } = props;
55
return (
6-
<>
7-
<div className="mt-4">
8-
<b>Authorizations</b>
6+
<div class="flex items-start mt-4">
7+
<div className="mr-4">
8+
<b>Authorizations:</b>
99
</div>
10-
<div>personalAccessToken</div>
11-
<div>
12-
<span>oAuth:</span>
13-
<span>({ oauth })</span>
10+
<div class="flex flex-col">
11+
<div>personalAccessToken</div>
12+
<div>
13+
<span>oAuth: </span>(<span className="tag">{oauth}</span>)
14+
</div>
1415
</div>
15-
</>
16-
)
17-
}
16+
</div>
17+
);
18+
};
1819

19-
export default Security;
20+
export default Security;

‎src/components/5_templates/api.js

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { graphql } from "gatsby";
33
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
44
import { atomDark } from "react-syntax-highlighter/dist/esm/styles/prism";
55
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
6+
import Clipboard from "react-clipboard.js";
67
import "react-tabs/style/react-tabs.css";
78

89
import Layout from "../../components/4_layouts/layout";
@@ -13,6 +14,8 @@ import Security from "../../components/2_molecules/Security";
1314
import ResponseList from "../../components/2_molecules/ResponseList";
1415
import ResponseSamples from "../2_molecules/ResponseSamples";
1516

17+
import Copy from "../../images/svgs/copy.svg";
18+
1619
// const _ = require("lodash");
1720

1821
const apiPage = ({ data }) => {
@@ -56,11 +59,13 @@ const apiPage = ({ data }) => {
5659
<h2 id={mode} className="mt-0">
5760
{m.summary}
5861
</h2>
59-
<p className="mb-2">
60-
<span className="tag big bold">{mode}</span>
61-
&nbsp;&nbsp; https://api.linode.com/v4{n.name}
62-
</p>
63-
<p>{m.description}</p>
62+
<div className="bg-ThemeCell p-4 mt-4 mb-8">
63+
<span className="tag big bold mr-2 uppercase">
64+
{mode}
65+
</span>
66+
<span>https://api.linode.com/v4{n.name}</span>
67+
</div>
68+
{m.description}
6469
{m.parameters && (
6570
<p className="mb-2">
6671
<b>Query Parameters</b>
@@ -79,7 +84,7 @@ const apiPage = ({ data }) => {
7984
{m.requestBody && (
8085
<>
8186
<div className="my-4">
82-
<h4>Request Body Schema</h4>
87+
<h3>Request Body Schema</h3>
8388
</div>
8489
{m.requestBody.content.application_json &&
8590
m.requestBody.content.application_json.schema &&
@@ -163,6 +168,15 @@ const apiPage = ({ data }) => {
163168
m.x_code_samples.map((x, i) => {
164169
return (
165170
<TabPanel key={i}>
171+
<div className="flex justify-end text-sm">
172+
<Clipboard
173+
data-clipboard-text={x.source}
174+
className="flex items-center hover:text-BaseBlueLight"
175+
>
176+
<span className="mr-2">Copy</span>
177+
<Copy style={{ width: 22, height: 22 }} />
178+
</Clipboard>
179+
</div>
166180
<SyntaxHighlighter
167181
language="bash"
168182
style={atomDark}

‎src/css/components/0_utilities/typography.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,12 @@ h5 a {
66
text-decoration: none !important;
77
}
88

9+
input[type="text"] {
10+
background-color: white;
11+
}
12+
913
.tag.big {
10-
font-size: 1rem;
14+
font-size: 1.1rem;
1115
}
1216

1317
.border-top {

‎src/css/components/1_atoms/tag.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.tag {
2-
@apply font-normal px-2 bg-ThemeTagGrey text-BaseBlackFull text-xs uppercase;
2+
@apply font-normal px-2 bg-ThemeTagGrey text-BaseBlackFull text-sm;
33
padding-top: 6px;
44
padding-bottom: 5px;
55
width: fit-content;

‎src/css/components/4_pages/api-page.css

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,12 @@
7171
@apply border-BaseRed;
7272
}
7373

74+
.initResponse {
75+
border-top-width: 1px;
76+
@apply border-grey-light;
77+
}
78+
7479
.subResponse {
7580
border-left-width: 2px;
76-
@apply border-grey-darker;
81+
@apply border-grey-light;
7782
}

‎src/images/svgs/copy.svg

Lines changed: 11 additions & 0 deletions
Loading

‎tailwind.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@ config.padding["12"] = "3rem";
1313
config.padding["20"] = "5rem";
1414

1515
config.leading["xs"] = ".75";
16-
config.leading["text-sm"] = "1.8";
16+
config.leading["text-sm"] = "1.9";
1717

1818
module.exports = config;

‎yarn.lock

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -739,6 +739,11 @@
739739
version "0.7.0"
740740
resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
741741

742+
"@types/clipboard@^2.0.1":
743+
version "2.0.1"
744+
resolved "https://registry.yarnpkg.com/@types/clipboard/-/clipboard-2.0.1.tgz#75a74086c293d75b12bc93ff13bc7797fef05a40"
745+
integrity sha512-gJJX9Jjdt3bIAePQRRjYWG20dIhAgEqonguyHxXuqALxsoDsDLimihqrSg8fXgVTJ4KZCzkfglKtwsh/8dLfbA==
746+
742747
"@types/configstore@^2.1.1":
743748
version "2.1.1"
744749
resolved "https://registry.yarnpkg.com/@types/configstore/-/configstore-2.1.1.tgz#cd1e8553633ad3185c3f2f239ecff5d2643e92b6"
@@ -8498,6 +8503,15 @@ rc@^1.1.7:
84988503
minimist "^1.2.0"
84998504
strip-json-comments "~2.0.1"
85008505

8506+
react-clipboard.js@^2.0.7:
8507+
version "2.0.7"
8508+
resolved "https://registry.yarnpkg.com/react-clipboard.js/-/react-clipboard.js-2.0.7.tgz#75bd13adede69858282b2d20cd1c6f2ee1ea9b55"
8509+
integrity sha512-KDjKTFL4Yumr6yq8/uM8+Ptk7m8YJLFRz1ie6u1hk8BC64ThTrzVqh3t6zJw11alEtwLvOgieF7YDm3JpxhZTQ==
8510+
dependencies:
8511+
"@types/clipboard" "^2.0.1"
8512+
clipboard "^2.0.0"
8513+
prop-types "^15.5.0"
8514+
85018515
react-dev-utils@^4.2.1:
85028516
version "4.2.3"
85038517
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-4.2.3.tgz#5b42d9ea58d5e9e017a2f57a40a8af408a3a46fb"

0 commit comments

Comments
 (0)