fix: ui bugs and readability issues

scalar · May 12, 2024 · 0c5ae32 · 0c5ae32
1 parent 51f4aa4
commit 0c5ae32
Show file tree

Hide file tree

Showing 17 changed files with 70 additions and 78 deletions.
diff --git a/packages/api-client/src/components/ApiClient/AddressBar.vue b/packages/api-client/src/components/ApiClient/AddressBar.vue
@@ -254,6 +254,8 @@ const handleRequestMethodChanged = (requestMethod?: string) => {
   font-weight: var(--scalar-semibold);
   min-height: auto;
   padding-top: 0;
+  max-width: calc(100% - 153px);
+  margin-right: auto;
 }
 .url-form-input :deep(.cm-scroller) {
   overflow-y: hidden;

diff --git a/packages/api-client/src/components/ApiClient/Request/Request.vue b/packages/api-client/src/components/ApiClient/Request/Request.vue
@@ -100,10 +100,6 @@ const readOnly = true
   z-index: 2;
   position: relative;
 }
-.scalar-api-client__item__content .card-form > :first-child {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
 .scalar-api-client__item__content:empty {
   display: none;
 }
@@ -146,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;

diff --git a/packages/api-client/src/components/ApiClient/Request/RequestAuthentication/CardForm.vue b/packages/api-client/src/components/ApiClient/Request/RequestAuthentication/CardForm.vue
@@ -5,21 +5,9 @@
 </template>
 <style scoped>
 .card-form {
-  --input-radius: var(--scalar-radius);
-  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>
diff --git a/...ages/api-client/src/components/ApiClient/Request/RequestAuthentication/CardFormButton.vue b/...ages/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>
diff --git a/packages/api-client/src/components/ApiClient/Request/RequestAuthentication/CardFormGroup.vue b/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>
diff --git a/...s/api-client/src/components/ApiClient/Request/RequestAuthentication/CardFormTextInput.vue b/...s/api-client/src/components/ApiClient/Request/RequestAuthentication/CardFormTextInput.vue
@@ -49,21 +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: 6px;
-  margin: 3px 0 3px 3px;
+  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;
@@ -76,14 +70,18 @@ defineOptions({
   width: fit-content;
   white-space: nowrap;
   cursor: text;
-  background: var(--scalar-background-2);
+  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);
 }

diff --git a/...i-client/src/components/ApiClient/Request/RequestAuthentication/RequestAuthentication.vue b/...i-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;

diff --git a/...ages/api-client/src/components/ApiClient/Request/RequestAuthentication/SecurityScheme.vue b/...ages/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>
diff --git a/...pi-client/src/components/ApiClient/Request/RequestAuthentication/SecuritySchemeScopes.vue b/...pi-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;

diff --git a/...-client/src/components/ApiClient/Request/RequestAuthentication/SecuritySchemeSelector.vue b/...-client/src/components/ApiClient/Request/RequestAuthentication/SecuritySchemeSelector.vue
@@ -145,7 +145,7 @@ const keys = computed(() => Object.keys(props.value ?? {}))
   color: var(--scalar-color-1);
 }
 .security-scheme-selector span {
-  font-size: var(--scalar-micro);
+  font-size: var(--scalar-mini);
   font-weight: var(--scalar-semibold);
 }
 .security-scheme-selector select {

diff --git a/packages/api-client/src/components/ApiClient/Request/RequestCookies.vue b/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;

diff --git a/packages/api-client/src/components/CollapsibleSection/CollapsibleSection.vue b/packages/api-client/src/components/CollapsibleSection/CollapsibleSection.vue
@@ -39,6 +39,16 @@ watch(
         ref="collapseButton"
         class="scalar-api-client__toggle"
         @click="openCopy = !openCopy">
+        <div class="scalar-api-client__toggle-container">
+          <span class="scalar-api-client__item__title">
+            {{ title }}
+          </span>
+          <div
+            v-if="$slots.options && open"
+            class="scalar-api-client__item__options">
+            <slot name="options" />
+          </div>
+        </div>
         <svg
           class="scalar-api-client__toggle__icon"
           xmlns="http://www.w3.org/2000/svg"
@@ -50,14 +60,6 @@ watch(
             stroke-linejoin="round"
             d="M2.2 4.1 6 7.9l3.8-3.8"></path>
         </svg>
-        <span class="scalar-api-client__item__title">
-          {{ title }}
-        </span>
-        <div
-          v-if="$slots.options && open"
-          class="scalar-api-client__item__options">
-          <slot name="options" />
-        </div>
       </DisclosureButton>
       <DisclosurePanel>
         <div class="scalar-api-client__item__content">
@@ -90,6 +92,11 @@ watch(
   height: 6px;
   left: 0;
 }
+.scalar-api-client__toggle-container {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
 .scalar-api-client__item--open .scalar-api-client__toggle:after {
   display: none;
 }
@@ -105,7 +112,7 @@ watch(
   cursor: default;
 }
 .scalar-api-client__toggle {
-  padding: 0 12px;
+  padding: 0 6px 0 9px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -123,6 +130,7 @@ watch(
 .scalar-api-client__item--open .scalar-api-client__toggle {
   border-radius: var(--scalar-radius) var(--scalar-radius) 0 0;
   border-color: var(--scalar-background-1);
+  background: var(--scalar-background-2);
 }
 /* use this to match border colors between the toggle and it's sibling   */
 .scalar-api-client__item--open .scalar-api-client__toggle:before {
@@ -143,7 +151,6 @@ watch(
   font-weight: var(--scalar-semibold);
   font-family: var(--scalar-font);
   user-select: none;
-  flex: 1;
   position: relative;
   z-index: 1;
   padding: 6px 0;
@@ -175,7 +182,7 @@ watch(
   border-radius: 3px;
   font-size: var(--scalar-small);
   pointer-events: none;
-  color: var(--scalar-color-2);
+  color: var(--scalar-color-3);
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/packages/api-client/src/components/Grid/Grid.vue b/packages/api-client/src/components/Grid/Grid.vue
@@ -88,7 +88,7 @@ function addHandler() {
   width: 100%;
   appearance: none;
   outline: none;
-  font-size: var(--scalar-micro);
+  font-size: var(--scalar-mini);
   font-family: var(--scalar-font);
   color: var(--scalar-color-3);
   cursor: pointer;

diff --git a/packages/api-client/src/components/Grid/GridHeader.vue b/packages/api-client/src/components/Grid/GridHeader.vue
@@ -49,7 +49,7 @@ defineEmits<{
   padding: 9px;
   font-weight: var(--scalar-semibold);
   color: var(--scalar-color-1);
-  font-size: var(--scalar-micro);
+  font-size: var(--scalar-mini);
 }
 .table-description-toggle {
   padding: 0;

diff --git a/packages/api-client/src/components/Grid/GridRow.vue b/packages/api-client/src/components/Grid/GridRow.vue
@@ -46,7 +46,7 @@ defineProps<{
   width: 100%;
   min-height: 100%;
   color: var(--scalar-color-1);
-  font-size: var(--scalar-micro);
+  font-size: var(--scalar-mini);
   background: transparent;
   font-family: var(--scalar-font);
 }

diff --git a/packages/api-client/src/components/SimpleTable/SimpleHeader.vue b/packages/api-client/src/components/SimpleTable/SimpleHeader.vue
@@ -10,8 +10,8 @@ import SimpleCell from './SimpleCell.vue'
 </template>
 <style scoped>
 .simple-header {
-  color: var(--scalar-color-3);
+  color: var(--scalar-color-1);
   font-weight: var(--scalar-semibold);
-  text-transform: uppercase;
+  text-transform: capitalize;
 }
 </style>
diff --git a/packages/api-reference/src/components/ApiClientModal.vue b/packages/api-reference/src/components/ApiClientModal.vue
@@ -160,14 +160,20 @@ const showSideBar = ref(false)
   left: 50%;
   top: 50%;
   transform: translate3d(-50%, -50%, 0);
-  border-radius: 12px;
+  border-radius: var(--scalar-radius-lg);
   overflow: hidden;
   visibility: visible;
   position: fixed;
   z-index: 1001;
   opacity: 0;
   animation: apiclientfadein 0.35s forwards;
 }
+@media (min-width: 1520px) {
+  .api-client-drawer {
+    max-width: 80vw;
+    max-width: 1720px;
+  }
+}
 .api-client-drawer:before {
   content: '';
   display: block;