Merge pull request #95 from acelaya-forks/feature/fix-async-api-styles

Feature/fix async api styles

Author: acelaya

.gitignore

@@ -5,3 +5,4 @@ docker-compose.override.yml
 /build/
 npm-debug.log*
 home
+tsconfig.tsbuildinfo

CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
-## [Unreleased]
+## [2.1.0] - 2023-03-05
 ### Added
 * *Nothing*
 

package.json

@@ -13,7 +13,7 @@
     "lint": "eslint --ext .js,.ts,.tsx src",
     "lint:fix": "npm run lint -- --fix",
     "start": "vite serve --host=0.0.0.0",
-    "build": "tsc --noEmit && vite build"
+    "build": "tsc && vite build"
   },
   "dependencies": {
     "@asyncapi/react-component": "^1.0.0-next.47",

src/assets/css/main.css

@@ -19,6 +19,18 @@
   }
 }
 
+@layer components {
+  .menu-item {
+    font-family: sans-serif;
+    @apply text-shlink-brand hover:text-shlink-brand-dark py-1.5 px-2.5;
+  }
+
+  .menu-item.active {
+    @apply text-white bg-shlink-brand rounded;
+  }
+}
+
+/* Overwrite swagger styles */
 .swagger-ui .url {
   word-wrap: break-word;
 }
@@ -27,13 +39,26 @@
   padding: 0 !important;
 }
 
-@layer components {
-  .menu-item {
-    font-family: sans-serif;
-    @apply text-shlink-color hover:text-shlink-color-dark py-1.5 px-2.5;
+.swagger-ui .scheme-container {
+  box-shadow: none;
+  padding: 0;
+}
+
+.swagger-ui .auth-wrapper .authorize {
+  margin-right: 0;
+}
+
+/* Overwrite API spec styles */
+.aui-root {
+  @apply -ml-6;
+}
+
+@media (max-width: 1535px) {
+  .aui-root {
+    @apply -mr-6;
   }
 
-  .menu-item.active {
-    @apply text-white bg-shlink-color rounded;
+  .aui-root .panel-item--right {
+    @apply mx-8;
   }
 }

src/components/Header.tsx

@@ -21,7 +21,7 @@ export const Header: FC<HeaderProps> = ({ setTag, tags }) => {
 
   return (
     <Headroom style={{ zIndex: 99 }}>
-      <header className="bg-shlink-color h-16 py-4">
+      <header className="bg-shlink-brand h-16 py-4">
         <div className="container mx-auto px-5 flex">
           <h2 className="text-white text-2xl font-bold flex-1">
             <ShlinkLogo className="w-8 h-8 inline" />{' '}

tailwind.config.js

@@ -6,8 +6,10 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        'shlink-color': '#4696e5',
-        'shlink-color-dark': '#1f69c0'
+        'shlink-brand': {
+          'DEFAULT': '#4696e5',
+          'dark': '#1f69c0'
+        },
       }
     },
     screens: {