From b8b9be05619c585ea8596fc2e127974d7d6e3861 Mon Sep 17 00:00:00 2001
From: anoop narang <anoop.narang@navi.com>
Date: Mon, 20 Jul 2020 22:53:22 +0530
Subject: [PATCH] [INFRA-421] | Anoop | Update styling

---
 src/components/manifest/Form.tsx              |  2 +-
 src/components/manifest/SchemaForm.css        | 11 ++++++
 src/components/manifest/SchemaForm.tsx        | 37 +++++++++++--------
 .../manifest/ShowDeploymentManifest.tsx       |  2 +-
 .../jsonforms}/CustomAjv.ts                   |  0
 src/configuration/jsonforms/Theme.tsx         |  7 ++++
 6 files changed, 41 insertions(+), 18 deletions(-)
 create mode 100644 src/components/manifest/SchemaForm.css
 rename src/{ajv => configuration/jsonforms}/CustomAjv.ts (100%)
 create mode 100644 src/configuration/jsonforms/Theme.tsx

diff --git a/src/components/manifest/Form.tsx b/src/components/manifest/Form.tsx
index bbebe75..4288826 100644
--- a/src/components/manifest/Form.tsx
+++ b/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" }}>
diff --git a/src/components/manifest/SchemaForm.css b/src/components/manifest/SchemaForm.css
new file mode 100644
index 0000000..15b5fbd
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/manifest/SchemaForm.tsx b/src/components/manifest/SchemaForm.tsx
index c8abb77..b11724c 100644
--- a/src/components/manifest/SchemaForm.tsx
+++ b/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
                     }
diff --git a/src/components/manifest/ShowDeploymentManifest.tsx b/src/components/manifest/ShowDeploymentManifest.tsx
index b6fcc58..89b9e75 100644
--- a/src/components/manifest/ShowDeploymentManifest.tsx
+++ b/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>
diff --git a/src/ajv/CustomAjv.ts b/src/configuration/jsonforms/CustomAjv.ts
similarity index 100%
rename from src/ajv/CustomAjv.ts
rename to src/configuration/jsonforms/CustomAjv.ts
diff --git a/src/configuration/jsonforms/Theme.tsx b/src/configuration/jsonforms/Theme.tsx
new file mode 100644
index 0000000..f05a346
--- /dev/null
+++ b/src/configuration/jsonforms/Theme.tsx
@@ -0,0 +1,7 @@
+import { createMuiTheme } from "@material-ui/core";
+
+export const jsonformThemeOverride = createMuiTheme({
+    // typography: {
+    //   fontSize: 18,
+    // },
+  });
\ No newline at end of file