feat: update api client UI (#1700)

* feat: update api client ui

* docs(changeset): feat: update api client ui

* fix: ui bugs and readability issues

* fix: url form input mobile length

* chore: add some missing styles from merge conflicts

---------

Co-authored-by: marclave <marc@scalar.com>

.changeset/gold-lions-drive.md

@@ -0,0 +1,6 @@
+---
+"@scalar/use-codemirror": patch
+"@scalar/api-client": patch
+---
+
+feat: update api client ui

packages/api-client/src/components/ApiClient/AddressBar.vue

@@ -269,6 +269,8 @@ const handleRequestMethodChanged = (requestMethod?: string) => {
   min-width: fit-content;
   padding-top: 0;
   position: relative;
+  max-width: calc(100% - 153px);
+  margin-right: auto;
 }
 .url-form-input-fade__left,
 .url-form-input-fade__right {
@@ -310,6 +312,11 @@ const handleRequestMethodChanged = (requestMethod?: string) => {
     opacity: 1;
   }
 }
+@media screen and (max-width: 720px) {
+  .url-form-input {
+    max-width: calc(100% - 113px);
+  }
+}
 .url-form-input :deep(.cm-scroller) {
   overflow-y: hidden;
 }
@@ -333,7 +340,7 @@ const handleRequestMethodChanged = (requestMethod?: string) => {
   color: var(--scalar-button-1-color);
   border: none;
   white-space: nowrap;
-  padding: 0 8px;
+  padding: 0 9px;
   cursor: pointer;
   outline: none;
   font-family: var(--scalar-font);

packages/api-client/src/components/ApiClient/ApiClient.vue

@@ -208,13 +208,13 @@ watch(
   display: flex;
   gap: 6px;
   height: 50px;
-  padding: 16px;
+  padding: 16px 18px;
   position: sticky;
   top: 0;
   z-index: 100;
 }
 .scalar-api-client__main__content__header label {
-  font-size: var(--scalar-small);
+  font-size: var(--scalar-mini);
   color: var(--scalar-color-1);
   font-weight: var(--scalar-semibold);
   display: flex;
@@ -226,7 +226,7 @@ watch(
   height: 100%;
 }
 .scalar-api-client__main__content__body {
-  padding: 8px;
+  padding: 9px 9px 9px 18px;
 }
 @media screen and (max-width: 820px) {
   .scalar-api-client__main__content__header {
@@ -258,7 +258,7 @@ watch(
   align-items: center;
   white-space: nowrap;
   font-weight: var(--scalar-semibold);
-  font-size: var(--scalar-small);
+  font-size: var(--scalar-mini);
   color: var(--scalar-color-3);
   min-height: 17px;
 }
@@ -293,14 +293,15 @@ watch(
   font-size: 24px;
 }
 .scalar-api-client__empty-state {
-  border: 1px dashed var(--scalar-border-color);
+  border: 1px solid var(--scalar-border-color);
   width: 100%;
   text-align: center;
-  border-radius: var(--scalar-radius);
+  border-radius: 0 0 var(--scalar-radius) var(--scalar-radius);
   font-size: var(--scalar-small);
   min-height: 58px;
   display: flex;
   align-items: center;
   justify-content: center;
+  background-color: var(--scalar-background-1);
 }
 </style>

packages/api-client/src/components/ApiClient/Request/Request.vue

@@ -91,13 +91,14 @@ const readOnly = true
 }
 .scalar-api-client__item__content {
   flex-flow: wrap;
-  padding: 3px 9px 9px 9px;
-  border-radius: 3px;
   color: var(--scalar-color-3);
   font-size: var(--scalar-micro);
-  margin-top: -3px;
+  margin-bottom: 12px;
   justify-content: space-between;
   overflow: auto;
+  padding: 0 9px 0 0;
+  z-index: 2;
+  position: relative;
 }
 .scalar-api-client__item__content:empty {
   display: none;
@@ -109,7 +110,11 @@ const readOnly = true
 .scalar-api-client__item__content .scalar-codeblock-pre,
 .scalar-api-client__item__content .cm-s-default {
   border: 1px solid var(--scalar-border-color);
-  border-radius: var(--scalar-radius-lg);
+  border-radius: 0 0 var(--scalar-radius) var(--scalar-radius);
+  background: transparent;
+}
+.scalar-api-client__item__content .scalar-codeblock-pre * {
+  font-size: var(--scalar-micro);
 }
 .scalar-api-client__item__content .scalar-codeblock-pre,
 .scalar-api-client__item__content .codemirror-container {
@@ -119,7 +124,8 @@ const readOnly = true
 }
 .scalar-api-client__item__content .cm-scroller {
   border: 1px solid var(--scalar-border-color);
-  border-radius: 3px;
+  border-radius: 0 0 var(--scalar-radius) var(--scalar-radius);
+  background-color: var(--scalar-background-1);
 }
 .scalar-api-client__item__content .cm-editor {
   outline: none !important;
@@ -136,6 +142,9 @@ const readOnly = true
 .scalar-api-client__item__content .cm-editor .cm-line {
   color: var(--scalar-color-1);
 }
+.scalar-api-client__item__content .card-form {
+  border-radius: 0 0 var(--scalar-radius) var(--scalar-radius);
+}
 .scalar-api-client__item__content-button {
   appearance: none;
   border: none;
@@ -251,7 +260,7 @@ const readOnly = true
   color: var(--scalar-color-2);
 }
 .select {
-  background: --scalar-background-1;
+  background: var(--scalar-background-1);
   border-radius: var(--scalar-radius-lg);
   font-size: var(--scalar-micro);
   border: 1px solid var(--scalar-border-color);
@@ -365,7 +374,7 @@ const readOnly = true
   appearance: none;
   -webkit-appearance: none;
   color: var(--scalar-color-3);
-  font-size: var(--scalar-small);
+  font-size: var(--scalar-mini);
   font-weight: var(--scalar-semibold);
   color: var(--scalar-color-3);
   width: 100%;

packages/api-client/src/components/ApiClient/Request/RequestAuthentication/CardForm.vue

@@ -5,21 +5,9 @@
 </template>
 <style scoped>
 .card-form {
-  --input-radius: var(--scalar-radius-lg);
-  border-color: var(--scalar-border-color);
   color: var(--scalar-color-1);
   width: 100%;
-}
-.card-form > :first-child {
-  border-top-left-radius: var(--input-radius);
-  border-top-right-radius: var(--input-radius);
-}
-.card-form > :last-child {
-  border-bottom-left-radius: var(--input-radius);
-  border-bottom-right-radius: var(--input-radius);
-}
-.card-form > :deep(* + *) {
-  margin-top: -1px;
-  border-top-color: transparent;
+  border: 1px solid var(--scalar-border-color);
+  border-radius: var(--scalar-radius);
 }
 </style>

packages/api-client/src/components/ApiClient/Request/RequestAuthentication/CardFormButton.vue

@@ -20,19 +20,15 @@ defineExpose({ el })
   position: relative;
   background: transparent;
   cursor: pointer;
-  border-style: solid;
-  border-width: 1px;
-  border-color: inherit;
   padding: 9px;
   outline: none;
   white-space: nowrap;
   font-family: var(--scalar-font);
   font-size: var(--scalar-micro);
   font-weight: var(--scalar-semibold);
-  color: var(--scalar-color-1);
+  color: var(--scalar-color-2);
 }
 .card-form-button:hover {
-  background: var(--scalar-background-2);
-  border-color: var(--scalar-border-color);
+  color: var(--scalar-color-1);
 }
 </style>

packages/api-client/src/components/ApiClient/Request/RequestAuthentication/CardFormGroup.vue

@@ -6,21 +6,5 @@
 <style scoped>
 :where(.card-form-group) {
   display: flex;
-  border-color: inherit;
-}
-.card-form-group > * {
-  border-color: inherit;
-}
-.card-form-group > :first-child {
-  border-top-left-radius: inherit;
-  border-bottom-left-radius: inherit;
-}
-.card-form-group > :last-child {
-  border-top-right-radius: inherit;
-  border-bottom-right-radius: inherit;
-}
-.card-form-group > :deep(* + *) {
-  margin-left: -1px;
-  border-left-color: transparent;
 }
 </style>

packages/api-client/src/components/ApiClient/Request/RequestAuthentication/CardFormTextInput.vue

@@ -49,20 +49,15 @@ defineOptions({
   text-align: left;
   display: flex;
   align-items: baseline;
-  border-style: solid;
-  border-width: 1px;
   border-color: inherit;
 }
-.card-form-input:focus-within {
-  border-color: var(--scalar-color-3);
-}
 
 .card-form-input label,
 .card-form-input input {
   padding: 9px;
   border: 0;
   outline: none;
-  font-size: var(--scalar-micro);
+  font-size: var(--scalar-mini);
   color: var(--scalar-color-2);
   width: 100%;
   background: transparent;
@@ -73,13 +68,19 @@ defineOptions({
 .card-form-input label {
   color: var(--scalar-color-1);
   width: fit-content;
-  padding-right: 0;
   white-space: nowrap;
   cursor: text;
+  padding: 9px 0 9px 9px;
+  border-radius: var(--scalar-radius);
+  font-weight: var(--scalar-semibold);
 }
 .card-form-input input {
   position: relative;
   z-index: 99;
+  color: var(--scalar-color-1);
+}
+.card-form-input + .card-form-input {
+  border-left: 1px solid var(--scalar-border-color);
 }
 .card-form-input input:not(:placeholder-shown) + label {
   color: var(--scalar-color-2);

packages/api-client/src/components/ApiClient/Request/RequestAuthentication/RequestAuthentication.vue

@@ -112,7 +112,7 @@ const setIntialScheme = (
   justify-content: center;
 }
 .scalar-api-client-add {
-  color: var(--scalar-color-2);
+  color: var(--scalar-color-3);
   padding: 3px 9px;
   width: fit-content;
   cursor: pointer;

packages/api-client/src/components/ApiClient/Request/RequestAuthentication/SecurityScheme.vue

@@ -217,7 +217,8 @@ const startAuthentication = (url: string) => {
           :scopes="
             (value as OpenAPIV3.OAuth2SecurityScheme).flows.implicit!.scopes
           " />
-        <CardFormButton
+        <button
+          class="cardform-auth-button"
           @click="
             () =>
               startAuthentication(
@@ -228,7 +229,7 @@ const startAuthentication = (url: string) => {
               )
           ">
           Authorize
-        </CardFormButton>
+        </button>
       </template>
     </CardFormGroup>
   </CardForm>
@@ -244,4 +245,18 @@ const startAuthentication = (url: string) => {
   padding: 12px 4px 4px;
   font-size: var(--scalar-mini);
 }
+.cardform-auth-button {
+  background: var(--scalar-button-1);
+  color: var(--scalar-button-1-color);
+  font-size: var(--scalar-mini);
+  font-weight: var(--scalar-semibold);
+  border-radius: var(--scalar-radius);
+  margin: 3px;
+  padding: 0 9px;
+  cursor: pointer;
+  appearance: none;
+}
+.cardform-auth-button:hover {
+  background: var(--scalar-button-1-hover);
+}
 </style>

packages/api-client/src/components/ApiClient/Request/RequestAuthentication/SecuritySchemeScopes.vue

@@ -47,13 +47,11 @@ const model = computed({
       :class="{ 'wrapper-open': open }">
       <ListboxButton :as="CardFormButton">
         <div class="scopes-label">
+          Scopes
+          {{ model.length }}<em>/</em>{{ Object.entries(scopes).length }}
           <ScalarIcon
             :icon="open ? 'ChevronUp' : 'ChevronDown'"
             size="sm" />
-          Scopes
-          <Badge class="scopes-label-badge">
-            {{ model.length }}<em>|</em>{{ Object.entries(scopes).length }}
-          </Badge>
         </div>
       </ListboxButton>
     </div>
@@ -107,7 +105,6 @@ const model = computed({
 }
 .scopes-label-badge em {
   transform: rotate(10deg) translate(0, -0.9px);
-  color: var(--scalar-color-3);
 }
 .floating {
   position: relative;

packages/api-client/src/components/ApiClient/Request/RequestAuthentication/SecuritySchemeSelector.vue

@@ -146,6 +146,7 @@ const keys = computed(() => Object.keys(props.value ?? {}))
 }
 .security-scheme-selector span {
   font-size: var(--scalar-mini);
+  font-weight: var(--scalar-semibold);
 }
 .security-scheme-selector select {
   position: absolute;

packages/api-client/src/components/ApiClient/Request/RequestCookies.vue

@@ -70,11 +70,11 @@ const hasCookies = computed(() => {
 </template>
 <style>
 .scalar-api-client-add {
-  color: var(--scalar-color-2);
-  padding: 3px 9px;
+  color: var(--scalar-color-3);
+  padding: 6px 9px;
   width: fit-content;
   cursor: pointer;
-  font-size: var(--scalar-micro);
+  font-size: var(--scalar-mini);
   font-weight: var(--scalar-semibold);
   text-decoration: none;
   margin: 0 6px;