UI improvements (#135)

Author: sachin-bruno

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;

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);
   }
 `;

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;
 

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;

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;

packages/oc-docs/src/components/UnsupportedRequest/UnsupportedRequest.tsx

@@ -82,12 +82,12 @@ export const UnsupportedRequest: React.FC<UnsupportedRequestProps> = ({
       {titleVariant === 'label' ? (
         <TitleLabel className='mt-3' testId="unsupported-request-title">{name}</TitleLabel>
       ) : (
-        <Heading size="md" style={{ marginTop: '0.875rem' }} testId="unsupported-request-title">
+        <Heading size="md" style={{ marginTop: '0.25rem' }} testId="unsupported-request-title">
           {name}
         </Heading>
       )}
 
-      <RequestUrlBar className="mt-2" method={shortName} url={getRequestUrl(item)} />
+      <RequestUrlBar className="mt-3" method={shortName} url={getRequestUrl(item)} />
 
       {showRequestDocs && (
         <ViewMore collapsedHeight='4.5rem' testId="overview-markdown-view-more">

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);
   }
 `;

packages/oc-docs/src/pages/Request/Request.tsx

@@ -143,12 +143,12 @@ const RequestContent: React.FC<RequestContentProps> = ({
       <StyledWrapper className="request" data-testid={testId}>
         <Breadcrumb segments={segments} current={name} onSegmentClick={onBreadcrumbClick} testId="request-breadcrumb" />
 
-        <Heading size="md" style={{ marginTop: '0.875rem' }} testId="request-title">{name}</Heading>
+        <Heading size="md" style={{ marginTop: '0.25rem' }} testId="request-title">{name}</Heading>
 
-        <RequestUrlBar method={method} url={url} onTry={onTryClick} style={{ marginTop: '0.9375rem' }} />
+        <RequestUrlBar method={method} url={url} onTry={onTryClick} style={{ marginTop: '0.75rem' }} />
 
         {descHtml && (
-          <ViewMore collapsedHeight="4.5rem" style={{ marginTop: '0.9375rem' }} testId="request-description">
+          <ViewMore collapsedHeight="4.5rem" style={{ marginTop: '1.5rem' }} testId="request-description">
             <div className="markdown-documentation" dangerouslySetInnerHTML={{ __html: descHtml }} />
           </ViewMore>
         )}

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

packages/oc-docs/src/ui/MinimalComponents.tsx

@@ -18,7 +18,6 @@ export const MinimalDataTable: React.FC<MinimalDataTableProps> = ({
   data,
   title,
   columns,
-  compact = true
 }) => {
   if (!data || data.length === 0) return null;