From 7fe60e9aec2de223fa20f5c63f0e5f984501deff Mon Sep 17 00:00:00 2001 From: Sachin Venugopalan Date: Tue, 21 Jul 2026 19:34:16 +0530 Subject: [PATCH] UI improvements --- .../src/components/DisabledBadge/StyledWrapper.ts | 2 +- .../ExecutionContext/AssertList/StyledWrapper.ts | 8 ++++++-- .../ExecutionContext/ScopeTag/StyledWrapper.ts | 4 ++-- .../ExecutionContext/ScriptChain/StyledWrapper.ts | 7 ++++--- .../ExecutionContext/TestList/StyledWrapper.ts | 5 +++-- .../UnsupportedRequest/UnsupportedRequest.tsx | 4 ++-- packages/oc-docs/src/pages/Folder/StyledWrapper.ts | 1 + packages/oc-docs/src/pages/Request/Request.tsx | 6 +++--- packages/oc-docs/src/runner/utils/tree-utils.ts | 2 +- packages/oc-docs/src/ui/MinimalComponents.tsx | 1 - packages/oc-docs/src/ui/Table/StyledWrapper.ts | 10 +++++++--- packages/oc-docs/src/utils/request.ts | 11 ++++++----- 12 files changed, 36 insertions(+), 25 deletions(-) diff --git a/packages/oc-docs/src/components/DisabledBadge/StyledWrapper.ts b/packages/oc-docs/src/components/DisabledBadge/StyledWrapper.ts index cabf261e..f69adf2a 100644 --- a/packages/oc-docs/src/components/DisabledBadge/StyledWrapper.ts +++ b/packages/oc-docs/src/components/DisabledBadge/StyledWrapper.ts @@ -4,7 +4,7 @@ export const StyledWrapper = styled.span` display: inline-flex; align-items: center; flex-shrink: 0; - font-size: 0.6875rem; + font-size: 0.625rem; font-weight: 500; line-height: 1; white-space: nowrap; diff --git a/packages/oc-docs/src/components/ExecutionContext/AssertList/StyledWrapper.ts b/packages/oc-docs/src/components/ExecutionContext/AssertList/StyledWrapper.ts index 2d4091d8..2f7cb42e 100644 --- a/packages/oc-docs/src/components/ExecutionContext/AssertList/StyledWrapper.ts +++ b/packages/oc-docs/src/components/ExecutionContext/AssertList/StyledWrapper.ts @@ -2,7 +2,11 @@ import styled from '@emotion/styled'; export const StyledWrapper = styled.div` .assert-item { - padding: 0.5rem 1rem; + display: flex; + flex-direction: column; + justify-content: center; + min-height: 2rem; + padding: 0.345rem 1rem; } .assert-item:not(:first-child) { border-top: 0.0625rem solid var(--oc-border-border0); @@ -16,7 +20,7 @@ export const StyledWrapper = styled.div` flex: 1; min-width: 0; font-family: var(--font-mono); - font-size: 0.78125rem; + font-size: 0.75rem; color: var(--text-primary); } `; diff --git a/packages/oc-docs/src/components/ExecutionContext/ScopeTag/StyledWrapper.ts b/packages/oc-docs/src/components/ExecutionContext/ScopeTag/StyledWrapper.ts index 0e8577ce..1d4401b6 100644 --- a/packages/oc-docs/src/components/ExecutionContext/ScopeTag/StyledWrapper.ts +++ b/packages/oc-docs/src/components/ExecutionContext/ScopeTag/StyledWrapper.ts @@ -2,9 +2,9 @@ import styled from '@emotion/styled'; export const StyledWrapper = styled.span` font-family: var(--font-mono); - font-size: 10.5px; + font-size: 0.625rem; font-weight: 500; - padding: 2px 8px; + padding: 0.125rem 0.5rem; border-radius: var(--oc-radius); flex-shrink: 0; diff --git a/packages/oc-docs/src/components/ExecutionContext/ScriptChain/StyledWrapper.ts b/packages/oc-docs/src/components/ExecutionContext/ScriptChain/StyledWrapper.ts index 85096587..ca360bbc 100644 --- a/packages/oc-docs/src/components/ExecutionContext/ScriptChain/StyledWrapper.ts +++ b/packages/oc-docs/src/components/ExecutionContext/ScriptChain/StyledWrapper.ts @@ -10,12 +10,13 @@ export const StyledWrapper = styled.div` grid-template-columns: min-content 0.875rem minmax(0, 1fr) auto; align-items: center; column-gap: 0.5rem; - padding: 0.75rem 1rem; + min-height: 2rem; + padding: 0.375rem 1rem; } .step-num { justify-self: start; font-family: var(--font-mono); - font-size: 0.71875rem; + font-size: 0.75rem; color: var(--text-muted); } @@ -48,7 +49,7 @@ export const StyledWrapper = styled.div` @container docs (max-width: 600px) { .script-line { gap: 0.5rem; - padding: 0.625rem 0.75rem; + padding: 0.375rem 0.75rem; } .script-http-url { white-space: normal; diff --git a/packages/oc-docs/src/components/ExecutionContext/TestList/StyledWrapper.ts b/packages/oc-docs/src/components/ExecutionContext/TestList/StyledWrapper.ts index 1f56c1d9..b814c0b5 100644 --- a/packages/oc-docs/src/components/ExecutionContext/TestList/StyledWrapper.ts +++ b/packages/oc-docs/src/components/ExecutionContext/TestList/StyledWrapper.ts @@ -8,13 +8,14 @@ export const StyledWrapper = styled.div` display: flex; align-items: center; gap: 0.75rem; - padding: 0.6875rem 1rem; + min-height: 2rem; + padding: 0.375rem 1rem; cursor: pointer; } .test-name { min-width: 0; font-family: var(--font-mono); - font-size: 12.5px; + font-size: 0.75rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; diff --git a/packages/oc-docs/src/components/UnsupportedRequest/UnsupportedRequest.tsx b/packages/oc-docs/src/components/UnsupportedRequest/UnsupportedRequest.tsx index 5e368d6f..e4cbe6af 100644 --- a/packages/oc-docs/src/components/UnsupportedRequest/UnsupportedRequest.tsx +++ b/packages/oc-docs/src/components/UnsupportedRequest/UnsupportedRequest.tsx @@ -82,12 +82,12 @@ export const UnsupportedRequest: React.FC = ({ {titleVariant === 'label' ? ( {name} ) : ( - + {name} )} - + {showRequestDocs && ( diff --git a/packages/oc-docs/src/pages/Folder/StyledWrapper.ts b/packages/oc-docs/src/pages/Folder/StyledWrapper.ts index c9dcee93..08ca600b 100644 --- a/packages/oc-docs/src/pages/Folder/StyledWrapper.ts +++ b/packages/oc-docs/src/pages/Folder/StyledWrapper.ts @@ -49,5 +49,6 @@ export const StyledWrapper = styled.div` .folder-fullwidth { margin-top: 1.5rem; + color: var(--text-muted); } `; diff --git a/packages/oc-docs/src/pages/Request/Request.tsx b/packages/oc-docs/src/pages/Request/Request.tsx index e4d24884..a18afb61 100644 --- a/packages/oc-docs/src/pages/Request/Request.tsx +++ b/packages/oc-docs/src/pages/Request/Request.tsx @@ -143,12 +143,12 @@ const RequestContent: React.FC = ({ - {name} + {name} - + {descHtml && ( - +
)} diff --git a/packages/oc-docs/src/runner/utils/tree-utils.ts b/packages/oc-docs/src/runner/utils/tree-utils.ts index a4e0b1d1..40558ce3 100644 --- a/packages/oc-docs/src/runner/utils/tree-utils.ts +++ b/packages/oc-docs/src/runner/utils/tree-utils.ts @@ -1,7 +1,7 @@ import type { OpenCollection } from '@opencollection/types'; import type { HttpRequest } from '@opencollection/types/requests/http'; import type { Item, Folder } from '@opencollection/types/collection/item'; -import { getItemType, getItemName, getHttpMethod, getRequestUrl, isFolder, isHttpRequest } from '../../utils/schemaHelpers'; +import { getItemName, getHttpMethod, getRequestUrl, isFolder, isHttpRequest } from '../../utils/schemaHelpers'; /** * Find the path from collection root to a specific item diff --git a/packages/oc-docs/src/ui/MinimalComponents.tsx b/packages/oc-docs/src/ui/MinimalComponents.tsx index b0f7d717..c56f9401 100644 --- a/packages/oc-docs/src/ui/MinimalComponents.tsx +++ b/packages/oc-docs/src/ui/MinimalComponents.tsx @@ -18,7 +18,6 @@ export const MinimalDataTable: React.FC = ({ data, title, columns, - compact = true }) => { if (!data || data.length === 0) return null; diff --git a/packages/oc-docs/src/ui/Table/StyledWrapper.ts b/packages/oc-docs/src/ui/Table/StyledWrapper.ts index c36e9d6f..fdf44d51 100644 --- a/packages/oc-docs/src/ui/Table/StyledWrapper.ts +++ b/packages/oc-docs/src/ui/Table/StyledWrapper.ts @@ -30,13 +30,17 @@ export const StyledWrapper = styled.div` .table-empty-message { margin: 0; font-family: var(--font-sans); - font-weight: 500; - font-style: italic; - font-size: 0.8125rem; + font-weight: 400; + font-size: var(--oc-font-size-base); line-height: 1; + letter-spacing: 0; color: var(--text-secondary); } + &:has(> .table-empty-message) { + border: none; + } + .table { width: 100%; border-collapse: collapse; diff --git a/packages/oc-docs/src/utils/request.ts b/packages/oc-docs/src/utils/request.ts index bd705691..9887a1d5 100644 --- a/packages/oc-docs/src/utils/request.ts +++ b/packages/oc-docs/src/utils/request.ts @@ -12,7 +12,8 @@ import type { PropertyRow } from '../components/PropertyTable/PropertyTable'; import type { Auth } from '@opencollection/types/common/auth'; import type { Scripts } from '@opencollection/types/common/scripts'; import type { Variable, SecretVariable, VariableValue, VariableValueType } from '@opencollection/types/common/variables'; -import type { Action, ActionSetVariable } from '@opencollection/types/common/actions'; +import type { Action, ActionSetVariable, ActionVariableScope } from '@opencollection/types/common/actions'; +import type { Description } from '@opencollection/types/common/description'; import { getRequestAuth, getItemName, @@ -412,16 +413,16 @@ export interface PostResponseVar { name?: string; expr?: string; disabled?: boolean; - scope?: string; - description?: unknown; + scope?: ActionVariableScope; + description?: Description; } export interface PostResponseRowInput { name?: string; value?: string; enabled?: boolean; - scope?: string; - description?: unknown; + scope?: ActionVariableScope; + description?: Description; } // Shared row-builders. Request items keep vars/actions under `runtime`; collection