Skip to content

Commit

Permalink
feat: second pass at http methods
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevinperaza
kevinperaza committed Dec 20, 2022
1 parent 3c92b48 commit bebb8b7
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 77 deletions.
127 changes: 60 additions & 67 deletions src/components/shared/HttpMethod.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,95 +1,77 @@
.method {
font-family: "Source Code Pro", sans-serif;
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 180%;
letter-spacing: 0.15px;
color: #fff;
border-radius: 1px;
padding: 0 8px;
margin: 0 10px;
text-transform: uppercase;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 2px;
display: inline-block;
}

.container {
border-radius: 1px;
display: -ms-grid;
display: grid;
-ms-grid-columns: auto auto 1fr;
grid-template-columns: auto auto 1fr;
border-radius: var(--ifm-global-radius);
background: linear-gradient(
90deg,
rgba(186, 205, 255, 0.1) 0.78%,
rgba(186, 205, 255, 0.05) 41.41%
);
border: 1px solid rgba(150, 158, 194, 0.2);
display: flex;
align-items: center;
padding: 8px 16px 8px 8px;
margin-bottom: 20px;
}

.get {
background: #e9feff;
border: 1px solid #d4f2f4;
font-family: "Source Code Pro";
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 140%;
}

.container .method-wrapper {
min-width: 80px;
display: inline-block;
}
.method {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-size: 10px;
line-height: 140%;
letter-spacing: 0.15px;
border-radius: var(--ifm-global-radius);

.get .method {
background-color: #1ad1db;
margin-right: 12px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 3px 6px;
gap: 4px;
letter-spacing: 0.1px;
}

.post {
background-color: #e8fff9;
border: 1px solid #c6efe5;
.get .method {
background: rgba(0, 164, 186, 0.15);
color: #00a4ba;
border: 1px solid rgba(0, 164, 186, 0.15);
}

.post .method {
background-color: #3ac3a2;
background: rgba(0, 182, 138, 0.15);
border: 1px solid rgba(0, 182, 138, 0.15);
color: #18b18c;
}

.put {
background-color: #e9edff;
border: 1px solid #d8deff;
}
.put .method {
background-color: #5f7bff;
}
.patch {
background-color: #e9e4ff;
border: 1px solid #d3ccf9;
background: rgba(83, 131, 255, 0.15);
color: #5f8bff;
border: 1px solid rgba(83, 131, 255, 0.15);
}

.patch .method {
background-color: #7e67f3;
}
.delete {
background-color: #fff0f1;
border: 1px solid #ffdcde;
}
.delete .method {
background-color: #fb5b8b;
background: rgba(126, 101, 255, 0.15);
border: 1px solid rgba(126, 101, 255, 0.15);
color: #8f78ff;
}

.container code {
background-color: rgba(0, 0, 0, 0);
border: none;
font-weight: 500;
line-height: 17.6px;
font-style: normal;
color: #1e233b;
.delete .method {
color: #ef5596;
background: rgba(239, 85, 150, 0.12);
border: 1px solid rgba(239, 85, 150, 0.12);
}

.container .copy {
display: flex;
margin-left: auto;
opacity: 0;
-ms-grid-column-align: end;
justify-self: end;
cursor: pointer;
-ms-grid-column: 3;
grid-column: 3;
-ms-grid-row: 1;
grid-row: 1;
}

.container .copy:hover {
Expand All @@ -99,3 +81,14 @@
.container:hover .copy {
opacity: 1;
}

@media only screen and (max-width: 411px) {
.container {
overflow-y: hidden;
}

.container .copy {
opacity: 1;
margin-left: 16px;
}
}
12 changes: 2 additions & 10 deletions src/components/shared/HttpMethod.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,22 +42,14 @@ export const HttpMethod = ({ method, endpoint }: HttpMethod) => {
}, 1000);
}, [isCopied]);

const iconColor = {
[HttpMethods.GET]: "#009FA9",
[HttpMethods.POST]: "#009273",
[HttpMethods.PUT]: "#5F7BFF",
[HttpMethods.DELETE]: "#C3205E",
[HttpMethods.PATCH]: "#7E67F3",
}[method];

const onClick = (_: MouseEvent<HTMLDivElement>) => {
setCopied(true);
copyToClipboard(endpoint);
};

return (
<div className={clsx([styles.container, containerClass])}>
<span className={styles.method}>{method}</span> <code>{endpoint}</code>
<span className={styles.method}>{method}</span> {endpoint}
<div className={styles.copy} onClick={onClick}>
{isCopied ? (
<svg width="24" height="18" viewBox="0 0 18 18" fill="#00d600">
Expand All @@ -76,7 +68,7 @@ export const HttpMethod = ({ method, endpoint }: HttpMethod) => {
fillRule="evenodd"
clipRule="evenodd"
d="M4.16488 3.31632C3.9398 3.31632 3.72395 3.40573 3.56479 3.56489C3.40564 3.72404 3.31623 3.9399 3.31623 4.16497V11.0726C3.31623 11.2976 3.40564 11.5135 3.56479 11.6726C3.72395 11.8318 3.9398 11.9212 4.16488 11.9212H5.01353V6.92801C5.01353 5.87072 5.87063 5.01362 6.92792 5.01362H11.9211V4.16497C11.9211 3.9399 11.8317 3.72404 11.6726 3.56489C11.5134 3.40573 11.2975 3.31632 11.0725 3.31632H4.16488ZM12.9869 5.01362V4.16497C12.9869 3.65724 12.7852 3.17031 12.4262 2.81129C12.0671 2.45227 11.5802 2.25058 11.0725 2.25058H4.16488C3.65715 2.25058 3.17022 2.45227 2.8112 2.81129C2.45218 3.17031 2.25049 3.65724 2.25049 4.16497V11.0726C2.25049 11.5803 2.45218 12.0672 2.8112 12.4262C3.17022 12.7853 3.65715 12.987 4.16488 12.987H5.01353V13.8356C5.01353 14.8929 5.87063 15.75 6.92792 15.75H13.8355C14.8928 15.75 15.7499 14.8929 15.7499 13.8356V6.92801C15.7499 5.87072 14.8928 5.01362 13.8355 5.01362H12.9869ZM12.4533 6.07936C12.4535 6.07936 12.4538 6.07936 12.454 6.07936C12.4542 6.07936 12.4544 6.07936 12.4547 6.07936H13.8355C14.3042 6.07936 14.6842 6.45931 14.6842 6.92801V13.8356C14.6842 14.3043 14.3042 14.6842 13.8355 14.6842H6.92792C6.45922 14.6842 6.07927 14.3043 6.07927 13.8356V12.4548C6.07927 12.4545 6.07927 12.4543 6.07927 12.4541C6.07927 12.4539 6.07927 12.4536 6.07927 12.4534V6.92801C6.07927 6.45931 6.45922 6.07936 6.92792 6.07936H12.4533Z"
fill={iconColor}
fill="currentColor"
></path>
</svg>
)}
Expand Down

1 comment on commit bebb8b7

@vercel
Copy link

@vercel vercel bot commented on bebb8b7 Dec 20, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

developers-basistheory-com – ./

developers-basistheory-com-git-master-basis-theory.vercel.app
developers-basistheory-com-basis-theory.vercel.app
developers-basistheory-com.vercel.app

Please sign in to comment.