From bebb8b76b3a17193122fb7671de78f194cb9da3c Mon Sep 17 00:00:00 2001 From: kevin Date: Tue, 20 Dec 2022 08:15:36 -0600 Subject: [PATCH] feat: second pass at http methods --- src/components/shared/HttpMethod.module.css | 127 +++++++++----------- src/components/shared/HttpMethod.tsx | 12 +- 2 files changed, 62 insertions(+), 77 deletions(-) diff --git a/src/components/shared/HttpMethod.module.css b/src/components/shared/HttpMethod.module.css index 06f95426..c0cf41e8 100644 --- a/src/components/shared/HttpMethod.module.css +++ b/src/components/shared/HttpMethod.module.css @@ -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 { @@ -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; + } +} diff --git a/src/components/shared/HttpMethod.tsx b/src/components/shared/HttpMethod.tsx index d8b3f4c4..7268b425 100644 --- a/src/components/shared/HttpMethod.tsx +++ b/src/components/shared/HttpMethod.tsx @@ -42,14 +42,6 @@ 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) => { setCopied(true); copyToClipboard(endpoint); @@ -57,7 +49,7 @@ export const HttpMethod = ({ method, endpoint }: HttpMethod) => { return (
- {method} {endpoint} + {method} {endpoint}
{isCopied ? ( @@ -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" > )}