From 8d98fb7d1699600ef3f775a9f948ecbf7659031c Mon Sep 17 00:00:00 2001
From: Abhishek Katiyar <abhishek.katiyar@navi.com>
Date: Mon, 26 Apr 2021 12:14:17 +0530
Subject: [PATCH] INFRA-712 | Abhishek | Add header and fix css (#67)

---
 src/components/gocd-yaml/PipelineBaseForm.tsx | 10 +++++++---
 src/components/gocd-yaml/PipelineList.tsx     |  6 +++++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/gocd-yaml/PipelineBaseForm.tsx b/src/components/gocd-yaml/PipelineBaseForm.tsx
index df0f0e7..f3fef36 100644
--- a/src/components/gocd-yaml/PipelineBaseForm.tsx
+++ b/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) => {
diff --git a/src/components/gocd-yaml/PipelineList.tsx b/src/components/gocd-yaml/PipelineList.tsx
index 2d6a114..28c4f3e 100644
--- a/src/components/gocd-yaml/PipelineList.tsx
+++ b/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}>