paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 31 Packages Projects Releases Wiki Activity

Fix styling issues of swagger-ui

Browse Source 
Signed-off-by: Oliver Sand <oliver.sand@sda-se.com>
This commit is contained in:
Oliver Sand
2021-11-11 11:33:12 +01:00
parent e849f9cc0a
commit 54c5be2d6d
1 changed files with 74 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/api-docs/src/components/OpenApiDefinitionWidget/OpenApiDefinition.tsx
+74 -34
View File
@@ -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