[INFRA-421] | Anoop | Update styling

src/components/manifest/Form.tsx

@@ -122,7 +122,7 @@ const Form = (props: any) => {
   return (
     <div id="mainComponent">
       <MenuAppBar
-        name={manifestIdParam ? "Edit Manifest" : "Create New Manifest File"}
+        name={manifestIdParam ? "Edit Manifest" : "Create New Manifest"}
       />
 
       <Grid container style={{ padding: "2em" }}>

src/components/manifest/SchemaForm.css

@@ -0,0 +1,11 @@
+.MuiTypography-body1 {
+  font-weight: 500 !important;
+  font-size: 1.4rem !important;
+}
+.MuiButtonBase-root {
+  margin-top: 4px !important;
+  margin-bottom: 4px !important;
+}
+.MuiInputBase-root {
+  font-size: 1.1rem !important;
+}

src/components/manifest/SchemaForm.tsx

@@ -9,10 +9,13 @@
 import * as React from 'react'
 import { JsonForms } from '@jsonforms/react'
 import { materialCells, materialRenderers } from '@jsonforms/material-renderers'
-import customAjv  from '../../ajv/CustomAjv'
+import customAjv  from '../../configuration/jsonforms/CustomAjv'
 import _ from 'lodash'
 import { FoldableGroupTester, FoldableGroupRenderer } from '../../renderer/FoldableGroup'
 import { FoldableGroupContextProvider } from '../../renderer/FoldableGroupContext'
+import { ThemeProvider, StylesProvider } from '@material-ui/core'
+import { jsonformThemeOverride } from '../../configuration/jsonforms/Theme'
+import './SchemaForm.css'
 interface IProps {
     csrfToken?: any
     name: string
@@ -85,21 +88,23 @@ export default function SchemaForm(props: IProps) {
                     {
                         (!props.updateCompleteSchemaHandler && isProperJsonSchema(completeSchema)) ?
                             <FoldableGroupContextProvider>
-                                <JsonForms
-                                    schema={completeSchema.jsonSchema}
-                                    ajv={customAjv}
-                                    uischema={completeSchema.uiSchema}
-                                    data={props.manifestData}
-                                    renderers={[
-                                        ...materialRenderers,
-                                        { tester: FoldableGroupTester, renderer: FoldableGroupRenderer }
-                                    ]}
-                                    cells={materialCells}
-                                    onChange={({ errors, data }) => {
-                                        if (props.onDataChange) {
-                                            props.onDataChange(data)
-                                        }
-                                    }} />
+                                <ThemeProvider theme={jsonformThemeOverride}>
+                                    <JsonForms
+                                        schema={completeSchema.jsonSchema}
+                                        ajv={customAjv}
+                                        uischema={completeSchema.uiSchema}
+                                        data={props.manifestData}
+                                        renderers={[
+                                            ...materialRenderers,
+                                            { tester: FoldableGroupTester, renderer: FoldableGroupRenderer }
+                                        ]}
+                                        cells={materialCells}
+                                        onChange={({ errors, data }) => {
+                                            if (props.onDataChange) {
+                                                props.onDataChange(data)
+                                            }
+                                        }} />
+                                </ThemeProvider>
                             </FoldableGroupContextProvider>
                             : null
                     }

src/components/manifest/ShowDeploymentManifest.tsx

@@ -151,7 +151,7 @@ const ShowDeploymentManifest = (props: any) => {
 
   return (
     <div>
-      <MenuAppBar name="Show Manifest File" />
+      <MenuAppBar name="Show Manifest" />
       <div className="app">
         <Grid container spacing={1}>
           <Grid item xs>

src/configuration/jsonforms/Theme.tsx

@@ -0,0 +1,7 @@
+import { createMuiTheme } from "@material-ui/core";
+
+export const jsonformThemeOverride = createMuiTheme({
+    // typography: {
+    //   fontSize: 18,
+    // },
+  });