From b9933bc266eaa7906392c53eb443d42e2df01681 Mon Sep 17 00:00:00 2001
From: dc-andysign <andrei.baloiu@gmail.com>
Date: Wed, 17 Jan 2024 17:19:58 +0000
Subject: [PATCH] Added the GriddedDiv - gridded container div for the 3
 buttons on the right

---
 .../components/CertificateActionsButtons.js   | 50 +++++++++++++++++--
 1 file changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/pages/components/CertificateActionsButtons.js b/src/pages/components/CertificateActionsButtons.js
index 196ab47..90e2eaa 100644
--- a/src/pages/components/CertificateActionsButtons.js
+++ b/src/pages/components/CertificateActionsButtons.js
@@ -5,17 +5,57 @@ import { Grid } from '@digicatapult/ui-component-library'
 
 export default function CertificateActionsButtons({ onSubmit }) {
   return (
-    <Sidebar area="sidebar">
-      <button onSubmit={onSubmit}>Submit</button>
-    </Sidebar>
+    <>
+      <Sidebar area="sidebar">
+        <PaddedDiv>
+          <GriddedDiv>
+            <Div>SaveDraft</Div>
+            <Div>Cancel</Div>
+            <DivDouble>
+              <button onSubmit={onSubmit}>Submit</button>
+            </DivDouble>
+          </GriddedDiv>
+        </PaddedDiv>
+      </Sidebar>
+    </>
   )
 }
 
 const Sidebar = styled(Grid.Panel)`
-  display: grid;
   align-items: center;
   justify-items: center;
-  min-width: 400px;
+  min-width: 340px;
   color: white;
   background: #0c3b38;
 `
+
+const PaddedDiv = styled.div`
+  padding: 34px 21px;
+  width: 100%;
+`
+
+const GriddedDiv = styled.div`
+  display: grid;
+  gap: 20px 10px;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-rows: 44px 69px;
+
+  background-color: #25928b;
+`
+
+const Div = styled.div`
+  min-width: 132px;
+
+  padding: 1em;
+  background-color: #369a93;
+  color: #454545;
+`
+
+const DivDouble = styled(Div)`
+  grid-column: 1 / -1;
+`
+
+// const BoxDoubleAlternative = styled(Box)`
+//   grid-column-start: 1;
+//   grid-column-end: 3;
+// `