From 54c5be2d6d89d068010bcf3a8c0a6eeaae4298b9 Mon Sep 17 00:00:00 2001
From: Oliver Sand <oliver.sand@sda-se.com>
Date: Thu, 11 Nov 2021 11:33:12 +0100
Subject: [PATCH] Fix styling issues of swagger-ui

Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>
---
 .../OpenApiDefinition.tsx                     | 108 ++++++++++++------
 1 file changed, 74 insertions(+), 34 deletions(-)

diff --git a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.tsx b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.tsx
index cc3df40ae5..4a74b238f7 100644
--- a/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.tsx
+++ b/plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.tsx
@@ -21,58 +21,98 @@ import 'swagger-ui-react/swagger-ui.css';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    '& .swagger-ui, .info h1, .info h2, .info h3, .info h4, .info h': {
-      'font-family': 'inherit',
+    '& .swagger-ui': {
+      fontFamily: 'inherit',
       color: theme.palette.text.primary,
-    },
-    '& .scheme-container': {
-      'background-color': theme.palette.background.default,
-    },
-    '& .opblock-tag, .opblock-tag small, table thead tr td, table thead tr th':
-      {
+
+      [`& .info h1,
+          .info h2,
+          .info h3,
+          .info h4,
+          .info h5,
+          .info h6`]: {
+        fontFamily: 'inherit',
         color: theme.palette.text.primary,
-        'border-color': theme.palette.divider,
       },
-    '& section.models, section.models.is-open h4': {
-      'border-color': theme.palette.divider,
-    },
-    '& .opblock .opblock-summary-description, .parameter__type, table.headers td, .model-title, .model .property.primitive, section h3':
-      {
+      [`& .scheme-container`]: {
+        backgroundColor: theme.palette.background.default,
+      },
+      [`& .opblock-tag,
+          .opblock-tag small,
+          table thead tr td,
+          table thead tr th`]: {
+        fontFamily: 'inherit',
+        color: theme.palette.text.primary,
+        borderColor: theme.palette.divider,
+      },
+      [`& section.models,
+          section.models.is-open h4`]: {
+        borderColor: theme.palette.divider,
+      },
+      [`& .opblock .opblock-summary-description,
+          .parameter__type,
+          table.headers td,
+          .model-title,
+          .model .property.primitive,
+          section h3`]: {
+        fontFamily: 'inherit',
         color: theme.palette.text.secondary,
       },
-    '& .opblock .opblock-summary-operation-id, .opblock .opblock-summary-path, .opblock .opblock-summary-path__deprecated, .opblock .opblock-section-header h4, .parameter__name, .response-col_status, .response-col_links, .responses-inner h4, .swagger-ui .responses-inner h5, .opblock-section-header .btn, .tab li, .info li, .info p, .info table, section.models h4, .info .title, table.model tr.description, .property-row':
-      {
+      [`& .opblock .opblock-summary-operation-id, 
+          .opblock .opblock-summary-path,
+          .opblock .opblock-summary-path__deprecated,
+          .opblock .opblock-section-header h4,
+          .parameter__name,
+          .response-col_status,
+          .response-col_links,
+          .responses-inner h4,
+          .responses-inner h5,
+          .opblock-section-header .btn,
+          .tab li,
+          .info li,
+          .info p,
+          .info table,
+          section.models h4,
+          .info .title,
+          table.model tr.description,
+          .property-row`]: {
+        fontFamily: 'inherit',
         color: theme.palette.text.primary,
       },
-    '& .opblock .opblock-section-header, .model-box, section.models .model-container':
-      {
+      [`& .opblock .opblock-section-header, 
+          .model-box,
+          section.models .model-container`]: {
         background: theme.palette.background.default,
       },
-    '& .prop-format, .parameter__in': {
-      color: theme.palette.text.disabled,
-    },
-    '& ': {
-      color: theme.palette.text.primary,
-      'border-color': theme.palette.divider,
-    },
-    '& .opblock-description-wrapper p, .opblock-external-docs-wrapper p, .opblock-title_normal p, .response-control-media-type__accept-message, .opblock .opblock-section-header>label, .scheme-container .schemes>label, .info .base-url, .model':
-      {
+      [`& .prop-format,
+          .parameter__in`]: {
+        color: theme.palette.text.disabled,
+      },
+      [`& .opblock-description-wrapper p,
+          .opblock-external-docs-wrapper p,
+          .opblock-title_normal p,
+          .response-control-media-type__accept-message,
+          .opblock .opblock-section-header>label,
+          .scheme-container .schemes>label,
+          .info .base-url,
+          .model`]: {
         color: theme.palette.text.hint,
       },
-    '& .parameter__name.required:after': {
-      color: theme.palette.warning.dark,
-    },
-    '& .prop-type': {
-      color: theme.palette.primary.main,
+      [`& .parameter__name.required:after`]: {
+        color: theme.palette.warning.dark,
+      },
+      [`& .prop-type`]: {
+        color: theme.palette.primary.main,
+      },
     },
   },
 }));
 
-type Props = {
+export type OpenApiDefinitionProps = {
   definition: string;
 };
 
-export const OpenApiDefinition = ({ definition }: Props) => {
+export const OpenApiDefinition = ({ definition }: OpenApiDefinitionProps) => {
   const classes = useStyles();
 
   // Due to a bug in the swagger-ui-react component, the component needs