INFRA-712 | Abhishek | Add header and fix css (#67)

src/components/gocd-yaml/PipelineBaseForm.tsx

@@ -11,6 +11,7 @@ import {toast} from "react-toastify";
 import {getFormattedRuntimeException, httpClient, post} from "../../helper/api-client";
 import {PipelineList} from "./PipelineList";
 import {Autocomplete} from "@material-ui/lab";
+import Header from "../layout/Header";
 
 const YAML = require('js-yaml');
 
@@ -20,14 +21,16 @@ const useStyles = makeStyles({
     root: {
         minWidth: 500,
         padding: '2px',
-        display: 'inline-block'
+        display: 'inline-block',
+        margin: '4px'
     },
     title: {
         fontSize: 14,
     },
     gridRow: {
-        width: 1600,
-        display: 'inline-block'
+        width: 1800,
+        display: 'inline-block',
+        padding: '15px'
     },
     yamlText: {
         width: 900,
@@ -119,6 +122,7 @@ const PipelineBaseForm = () => {
 
     return (
         <div>
+            <Header name="Create Pipeline"/>
             <Autocomplete options={manifestList}
                           onFocus={getManifestList}
                           onChange={(_,value) => {

src/components/gocd-yaml/PipelineList.tsx

@@ -22,6 +22,10 @@ const useStyles = makeStyles({
         width: 430,
         padding: '5px'
     },
+    root:{
+        marginLeft: 5,
+        padding: 15
+    },
     twoFieldBigCard: {
         width: 150
     },
@@ -109,7 +113,7 @@ const PipelineCardList = (props: FormikCheckboxCardListProps) => {
             {({remove, form}) => (<>
                 <Grid container>
                     {getIn(form.values, name, []).map((_, i) => (
-                        <Grid item key={i}>
+                        <Grid item key={i} className={classes.root}>
                             <Card variant="elevation">
                                 <CardContent>
                                     <Grid container justify="space-between" direction={direction}>