Skip to content

Commit 7f36303

Browse files
MananTankMananTank
authored
portal: OpenApiEndpoint card UI tweaks (#8661)
1 parent 13a46b7 commit 7f36303

5 files changed

Lines changed: 31 additions & 26 deletions

File tree

‎apps/portal/src/app/wallets/get-users/page.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ Required headers:
4949

5050
<OpenApiEndpoint path="/v1/wallets/user" method="GET" />
5151

52+
<br/>
53+
5254
For ecosystem wallets, include the ecosystem headers in your requests.
5355

5456
</TabsContent>

‎apps/portal/src/components/Document/APIEndpointMeta/ApiEndpoint.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -130,12 +130,12 @@ export function ApiEndpoint(props: { metadata: ApiEndpointMeta }) {
130130
hasMultipleExamples={true}
131131
/>
132132
) : (
133-
<div className="rounded-lg border">
133+
<div className="rounded-lg border bg-card">
134134
<RequestExample
135135
codeExamples={requestExamples.map((example) => ({
136136
code: (
137137
<CodeBlock
138-
className="rounded-none border-none"
138+
className="rounded-none border-none !bg-card"
139139
code={example.code}
140140
containerClassName="m-0"
141141
lang={example.lang}
@@ -190,16 +190,17 @@ export function ApiEndpoint(props: { metadata: ApiEndpointMeta }) {
190190
>
191191
Response
192192
</Heading>
193-
<div className="overflow-hidden rounded-lg border">
193+
<div className="overflow-hidden rounded-lg border bg-card">
194194
<Tabs className="w-full" defaultValue={responseKeys[0]}>
195-
<TabsList className="w-full">
195+
<TabsList className="w-full pt-1">
196196
{responseKeys.map((status) => (
197197
<TabsTrigger key={status} value={status}>
198-
<div className="flex items-center gap-2 py-1">
198+
<div className="flex items-center gap-1.5 px-0.5">
199199
<span
200200
className={cn("h-2 w-2 rounded-full", {
201201
"bg-green-500": status.startsWith("2"),
202202
"bg-red-500": status.startsWith("4"),
203+
"bg-orange-500": status.startsWith("3"),
203204
"bg-yellow-500": status.startsWith("5"),
204205
})}
205206
/>
@@ -212,7 +213,7 @@ export function ApiEndpoint(props: { metadata: ApiEndpointMeta }) {
212213
{responseKeys.map((status) => (
213214
<TabsContent className="m-0" key={status} value={status}>
214215
<CodeBlock
215-
className="rounded-none border-none"
216+
className="rounded-none border-none !bg-card"
216217
code={responseExamples[status] as string}
217218
containerClassName="m-0"
218219
lang="json"
@@ -237,15 +238,16 @@ function ParameterSection(props: {
237238
summary={
238239
<div className="flex items-center gap-3">
239240
<span className="text-sm font-medium">{props.title}</span>
240-
<span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
241+
<span className="text-xs text-muted-foreground bg-muted size-6 rounded-full inline-flex justify-center items-center">
241242
{props.parameters.length}
242243
</span>
243244
</div>
244245
}
245246
accordionItemClassName="border-0 my-0"
246247
accordionTriggerClassName="p-4 hover:bg-muted/50 transition-colors"
248+
headingClassName="!no-underline"
247249
>
248-
<div className="px-4 pb-4">
250+
<div className="px-4 pb-4 space-y-2">
249251
{props.parameters
250252
.sort((a, b) => {
251253
if (a.required === b.required) {
@@ -266,16 +268,16 @@ function InlineParameterItem({ param }: { param: APIParameter }) {
266268
return (
267269
<div className="flex flex-col gap-2 p-3">
268270
<div className="flex items-center gap-2 flex-wrap">
269-
<code className="text-foreground text-sm font-mono bg-background px-2 py-1 rounded border">
271+
<code className="text-foreground text-base font-mono font-medium">
270272
{param.name}
271273
</code>
272274
{param.type && (
273-
<span className="text-xs text-muted-foreground px-2 py-1 bg-muted rounded">
275+
<span className="text-xs text-muted-foreground px-2 py-1 bg-muted rounded-lg">
274276
{param.type}
275277
</span>
276278
)}
277279
{param.required && (
278-
<span className="text-xs text-warning-text px-2 py-1 rounded border border-warning-text">
280+
<span className="text-xs text-warning-text px-2 py-1 rounded-lg border border-warning-text/30 bg-warning-text/15">
279281
Required
280282
</span>
281283
)}
@@ -289,6 +291,7 @@ function InlineParameterItem({ param }: { param: APIParameter }) {
289291
<div className="text-sm flex flex-col gap-2">
290292
<span className="text-muted-foreground">Example: </span>
291293
<CodeBlock
294+
className="!bg-card"
292295
code={
293296
typeof param.example === "object"
294297
? JSON.stringify(param.example)

‎apps/portal/src/components/Document/APIEndpointMeta/DynamicRequestExample.tsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,16 @@ function InlineParameterItem({ param }: { param: APIParameter }) {
2929
return (
3030
<div className="flex flex-col gap-2 p-3 rounded-lg">
3131
<div className="flex items-center gap-2 flex-wrap">
32-
<code className="text-foreground text-sm font-mono bg-background px-2 py-1 rounded border">
32+
<code className="text-foreground text-base font-mono font-medium">
3333
{param.name}
3434
</code>
3535
{param.type && (
36-
<span className="text-xs text-muted-foreground px-2 py-1 bg-muted rounded">
36+
<span className="text-xs text-muted-foreground px-2 py-1 bg-muted rounded-lg">
3737
{param.type}
3838
</span>
3939
)}
4040
{param.required && (
41-
<span className="text-xs text-warning-text px-2 py-1 rounded border border-warning-text">
41+
<span className="text-xs text-warning-text px-2 py-1 rounded-lg border border-warning-text/30 bg-warning-text/15">
4242
Required
4343
</span>
4444
)}
@@ -49,15 +49,15 @@ function InlineParameterItem({ param }: { param: APIParameter }) {
4949
)}
5050

5151
{param.example !== undefined && (
52-
<div className="text-sm flex flex-col gap-2">
53-
<span className="text-muted-foreground">Example: </span>
52+
<div className="text-sm flex flex-col gap-2 my-3">
53+
<span className="text-muted-foreground">Example </span>
5454
<CodeClient
5555
code={
5656
typeof param.example === "object"
5757
? JSON.stringify(param.example)
5858
: String(param.example)
5959
}
60-
className="rounded-none border-none"
60+
className="rounded-lg"
6161
lang="json"
6262
scrollableContainerClassName="m-0"
6363
scrollableClassName="max-h-[200px]"
@@ -78,10 +78,11 @@ function ParameterSection(props: {
7878
<div className="border-b last:border-b-0">
7979
<Details
8080
key={props.title}
81+
headingClassName="!no-underline"
8182
summary={
8283
<div className="flex items-center gap-3">
8384
<span className="text-sm font-medium">{props.title}</span>
84-
<span className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
85+
<span className="text-xs text-muted-foreground bg-muted size-6 rounded-full inline-flex justify-center items-center">
8586
{props.parameters.length}
8687
</span>
8788
</div>
@@ -138,7 +139,7 @@ export function DynamicRequestExample(props: DynamicRequestExampleProps) {
138139

139140
return (
140141
<QueryClientProvider client={queryClient}>
141-
<div className="rounded-lg border">
142+
<div className="rounded-lg border bg-card">
142143
<RequestExample
143144
codeExamples={props.requestExamples.map((example) => ({
144145
code: (

‎apps/portal/src/components/Document/APIEndpointMeta/OpenApiEndpoint.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Spinner } from "@workspace/ui/components/spinner";
12
import type { OpenAPIV3_1 } from "openapi-types";
23
import { cache, Suspense } from "react";
34
import {
@@ -455,10 +456,8 @@ function transformOpenApiToApiEndpointMeta(
455456

456457
function LoadingFallback() {
457458
return (
458-
<div className="flex items-center justify-center p-8">
459-
<div className="text-sm text-muted-foreground">
460-
Loading API documentation...
461-
</div>
459+
<div className="flex items-center justify-center p-8 border rounded-lg min-h-[300px] bg-card">
460+
<Spinner className="size-8 text-muted-foreground" />
462461
</div>
463462
);
464463
}

‎apps/portal/src/components/Document/APIEndpointMeta/RequestExample.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ export function RequestExample(props: {
109109
}}
110110
value={selectedFormat}
111111
>
112-
<SelectTrigger className="w-[130px] rounded-full bg-card">
112+
<SelectTrigger className="w-[130px] rounded-xl bg-card ">
113113
<SelectValue />
114114
</SelectTrigger>
115115
<SelectContent className="bg-background rounded-xl">
@@ -144,7 +144,7 @@ export function RequestExample(props: {
144144
}}
145145
value={selectedExampleType}
146146
>
147-
<SelectTrigger className="w-[130px] rounded-full bg-card">
147+
<SelectTrigger className="md:w-[250px] rounded-xl bg-card text-left">
148148
<SelectValue />
149149
</SelectTrigger>
150150
<SelectContent className="bg-background rounded-xl">
@@ -169,7 +169,7 @@ export function RequestExample(props: {
169169
}}
170170
value={selectedExample?.label}
171171
>
172-
<SelectTrigger className="w-[130px] rounded-full bg-card">
172+
<SelectTrigger className="w-[150px] rounded-xl bg-card">
173173
<SelectValue />
174174
</SelectTrigger>
175175
<SelectContent className="bg-background rounded-xl">

0 commit comments

Comments
 (0)