ux: http method tags margins and paddings (#961)

fern-api · Jun 4, 2024 · bb2cc94 · bb2cc94
1 parent b721320
commit bb2cc94
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/packages/ui/app/src/api-playground/PlaygroundEndpointSelectorContent.tsx b/packages/ui/app/src/api-playground/PlaygroundEndpointSelectorContent.tsx
@@ -154,11 +154,16 @@ export const PlaygroundEndpointSelectorContent = forwardRef<HTMLDivElement, Play
                                                 intent={active ? "primary" : "none"}
                                                 active={active}
                                                 onClick={createSelectEndpoint(endpointItem)}
-                                                rightIcon={
+                                                icon={
                                                     <HttpMethodTag
-                                                        method={endpointItem.method}
+                                                        method={
+                                                            endpointItem.isResponseStream
+                                                                ? "STREAM"
+                                                                : endpointItem.method
+                                                        }
                                                         size="sm"
                                                         active={active}
+                                                        className="mr-1"
                                                     />
                                                 }
                                             />
@@ -183,7 +188,7 @@ export const PlaygroundEndpointSelectorContent = forwardRef<HTMLDivElement, Play
                                                 intent={active ? "primary" : "none"}
                                                 active={active}
                                                 onClick={createSelectEndpoint(endpointItem)}
-                                                rightIcon={<HttpMethodTag method="WSS" size="sm" />}
+                                                icon={<HttpMethodTag method="WSS" size="sm" className="mr-1" />}
                                             />
                                         </FernTooltip>
                                     </li>

diff --git a/packages/ui/app/src/sidebar/nodes/SidebarApiLeafNode.tsx b/packages/ui/app/src/sidebar/nodes/SidebarApiLeafNode.tsx
@@ -20,13 +20,13 @@ export function SidebarApiLeafNode({ node, depth }: SidebarApiLeafNodeProps): Re
 
     const renderRightElement = () => {
         if (node.type === "webSocket") {
-            return <HttpMethodTag method="WSS" size="sm" active={selected} className="my-0.5" />;
+            return <HttpMethodTag method="WSS" size="sm" active={selected} />;
         } else {
             if (node.type === "endpoint" && node.isResponseStream) {
-                return <HttpMethodTag method="STREAM" size="sm" active={selected} className="my-0.5" />;
+                return <HttpMethodTag method="STREAM" size="sm" active={selected} />;
             }
 
-            return <HttpMethodTag method={node.method} size="sm" active={selected} className="my-0.5" />;
+            return <HttpMethodTag method={node.method} size="sm" active={selected} />;
         }
     };