From 896ce294a641f64aff79b121bb029fc08ad7e564 Mon Sep 17 00:00:00 2001
From: dc-andysign <andrei.baloiu@gmail.com>
Date: Thu, 18 Jan 2024 16:50:56 +0000
Subject: [PATCH] Added the new green and white buttons.

---
 .../components/CertificateActionsButtons.js   | 63 +++++++++++++++----
 src/pages/components/CertificateForm.js       |  4 +-
 2 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/src/pages/components/CertificateActionsButtons.js b/src/pages/components/CertificateActionsButtons.js
index 8b3d595..64be33e 100644
--- a/src/pages/components/CertificateActionsButtons.js
+++ b/src/pages/components/CertificateActionsButtons.js
@@ -3,13 +3,24 @@ import styled from 'styled-components'
 
 import { Grid, Button } from '@digicatapult/ui-component-library'
 
-export default function CertificateActionsButtons({ onSubmit }) {
+export default function CertificateActionsButtons() {
+  function handleClickSaveDraft() {
+    alert('Saved')
+  }
+  function handleCancelDraft() {
+    alert('Cancelled')
+  }
+  function handleClickSubmit(e) {
+    e.preventDefault()
+    e.target.form.requestSubmit()
+  }
+
   return (
     <>
       <Sidebar area="sidebar">
         <PaddedDiv>
           <Grid
-            style={{ backgroundColor: 'white' }}
+            style={{ gridTemplateRows: '40px 60px' }}
             areas={[
               ['div-left', 'div-right'],
               ['div-double', 'div-double'],
@@ -19,17 +30,28 @@ export default function CertificateActionsButtons({ onSubmit }) {
             gap="20px 10px"
           >
             <Grid.Panel area="div-left">
-              <Div>left</Div>
+              <SmallButton
+                variant="roundedPronounced"
+                onClick={handleClickSaveDraft}
+              >
+                Save draft
+              </SmallButton>
             </Grid.Panel>
             <Grid.Panel area="div-right">
-              <Div>right</Div>
+              <SmallButton
+                variant="roundedPronounced"
+                onClick={handleCancelDraft}
+              >
+                Cancel
+              </SmallButton>
             </Grid.Panel>
             <Grid.Panel area="div-double">
-              <Div>
-                <Button onSubmit={onSubmit} variant="rounded">
-                  Submit
-                </Button>
-              </Div>
+              <LargeButton
+                variant="roundedPronounced"
+                onClick={handleClickSubmit}
+              >
+                Submit
+              </LargeButton>
             </Grid.Panel>
           </Grid>
         </PaddedDiv>
@@ -51,10 +73,25 @@ const PaddedDiv = styled.div`
   width: 100%;
 `
 
-const Div = styled.div`
+const SmallButton = styled(Button)`
+  width: 100%;
   min-width: 132px;
+  height: 100% !important;
+  font-family: Roboto;
+  font-style: normal;
+  font-weight: 500;
+
+  font-size: 15.5px;
+
+  color: #ffffff;
+  border: 1px solid #ffffff !important;
+  background: #124338 !important;
+`
+
+const LargeButton = styled(SmallButton)`
+  font-size: 21px;
 
-  padding: 1em;
-  background-color: #369a93;
-  color: #454545;
+  color: #33e58c;
+  border: 1px solid #2fe181 !important;
+  background: #124338 !important;
 `
diff --git a/src/pages/components/CertificateForm.js b/src/pages/components/CertificateForm.js
index 7ca66e0..bcf08ab 100644
--- a/src/pages/components/CertificateForm.js
+++ b/src/pages/components/CertificateForm.js
@@ -13,7 +13,7 @@ export default function CertificateForm() {
   }
 
   return (
-    <Form onSubmit={handleSubmit}>
+    <Form action="" onSubmit={handleSubmit}>
       <Timeline area="timeline">timeline</Timeline>
       <Grid.Panel area="main">
         <CertificateFormHeader />
@@ -22,7 +22,7 @@ export default function CertificateForm() {
         <div>InfoPickerBatchSize</div>
         <div>InfoPickerProdTime</div>
       </Grid.Panel>
-      <CertificateActionsButtons onSubmit={handleSubmit} />
+      <CertificateActionsButtons />
     </Form>
   )
 }