Improved UI

Author: zahidalidev

src/app/cody-api/styles.css

@@ -48,13 +48,25 @@
 
 .open-api-container h6,
 .open-api-container p,
+.open-api-container [data-testid="two-column-left"] .sl-stack--vertical p,
+.open-api-container [data-testid="two-column-left"] .sl-stack--vertical div,
+.open-api-container [data-testid="two-column-left"] .sl-stack--vertical span,
 .open-api-container .sl-sticky p,
 .open-api-container .sl-sticky span {
-  font-size: 16px;
+  font-size: 16px !important;
+}
+
+.open-api-container [data-testid="two-column-right"] .sl-stack--vertical div,
+.open-api-container [data-testid="two-column-right"] .sl-stack--vertical span,
+.open-api-container [data-testid="two-column-right"] p,
+.open-api-container [data-testid="two-column-right"] button,
+.open-api-container [data-testid="two-column-right"] span,
+.open-api-container [data-testid="two-column-right"] .sl-sticky span {
+  font-size: 14px !important;
 }
 
 .open-api-container .sl-sticky a div .sl-truncate {
-  font-size: .875rem;
+  font-size: 14px;
 }
 
 .open-api-container .sl-sticky a div.sl-bg-primary-tint .sl-truncate {
@@ -63,12 +75,16 @@
 
 
 .open-api-container tr th {
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 500;
 }
 
 .open-api-container td {
-  font-size: 14px;
+  font-size: 16px;
+}
+
+.open-api-container [data-test="security-row"] span {
+  font-size: 16px;
 }
 
 /* Light fonts */
@@ -162,6 +178,12 @@
   color: #FFFFFF;
 }
 
+.open-api-container [data-test="property-required"] {
+  color: #F46D2A !important;
+  font-weight: 400;
+  font-size: 14px;
+}
+
 /* Light */
 
 .openapi-light .sl-elements-api > .sl-flex:first-child {
@@ -202,10 +224,6 @@
   border-radius: 0.1px;
 }
 
-.openapi-light code {
-  border-width: 0.1px;
-}
-
 .openapi-light .sl-prose.sl-markdown-viewer .sl-code-viewer__scroller .sl-code-highlight .token {
   color: #334155 !important;
 }
@@ -270,10 +288,6 @@
   background-color: #14171F;
 }
 
-.openapi-dark code {
-  background-color: #14171F;
-}
-
 .openapi-dark .sl-bg-canvas-tint {
   background-color: #14171F;
 }
@@ -293,10 +307,6 @@
   border-radius: 4px;
 }
 
-.openapi-dark code {
-  border-color: #0F111A !important;
-}
-
 /* Code Blocks */
 
 .open-api-container .TryItPanel .sl-panel__titlebar {
@@ -362,6 +372,12 @@
   background-color: #2D2B55;
 }
 
+.open-api-container [data-testid="two-column-right"] .sl-panel__titlebar {
+  background-color: #2D2B55;
+  border-bottom-width: 0.1px;
+  border-bottom-color: #6B7280;
+}
+
 .open-api-container .sl-panel__titlebar button {
   color: #E2E8F0;
 }
@@ -398,3 +414,32 @@
 .open-api-container .HttpService .sl-stack.sl-stack--vertical .sl-panel__content-wrapper .sl-panel__content div div {
   border-width: 0px;
 }
+
+/* Code */
+
+.open-api-container code {
+  padding-left: 0.25rem !important;
+  padding-right: 0.25rem !important;
+  padding-top: 0.125rem !important;
+  padding-bottom: 0.125rem !important;
+  border-radius: 0.375rem !important;
+  font-weight: 500 !important;
+  font-size: 14px !important;
+}
+
+.openapi-light code {
+  border: 1px solid #D1D5DB !important;
+  background-color: #F1F5F9 !important;
+  color: #0F172A !important;
+}
+
+.openapi-dark code {
+  background-color: #0F172A !important;
+  border: 1px solid #4B5563 !important;
+  color: #FFFFFF !important;
+}
+
+.open-api-container [aria-label="Responses"] {
+  padding-right: 0px;
+  margin-right: -15px;
+}