From 074224f56fdd9f7acfb38cf0d8745c024a8aa51f Mon Sep 17 00:00:00 2001
From: Boaz Poolman <boaz_skater@hotmail.com>
Date: Sat, 20 Mar 2021 15:07:10 +0100
Subject: [PATCH] Add elements to admin page

---
 admin/src/components/ActionButtons/index.js | 22 +++++++++++++++++++
 admin/src/components/Container/index.js     | 24 +++++++++++++++++++++
 admin/src/components/Header/index.js        | 22 +++++++++++++++++++
 admin/src/containers/App/index.js           |  7 +++++-
 admin/src/containers/ConfigPage/index.js    |  2 ++
 5 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 admin/src/components/ActionButtons/index.js
 create mode 100644 admin/src/components/Container/index.js
 create mode 100644 admin/src/components/Header/index.js

diff --git a/admin/src/components/ActionButtons/index.js b/admin/src/components/ActionButtons/index.js
new file mode 100644
index 0000000..7384cd3
--- /dev/null
+++ b/admin/src/components/ActionButtons/index.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button } from '@buffetjs/core';
+
+const ActionButtons = () => {
+  return (
+    <ActionButtonsStyling>
+      <Button color="primary" label="Import"/>
+      <Button color="primary" label="Export"/>
+    </ActionButtonsStyling>
+  );
+}
+
+const ActionButtonsStyling = styled.div`
+  padding: 10px 0 20px 0;
+
+  > button {
+    margin-right: 10px;
+  }
+`;
+ 
+export default ActionButtons;
\ No newline at end of file
diff --git a/admin/src/components/Container/index.js b/admin/src/components/Container/index.js
new file mode 100644
index 0000000..b8dca52
--- /dev/null
+++ b/admin/src/components/Container/index.js
@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+const ContainerFluid = styled.div`
+  padding: 18px 30px;
+  > div:first-child {
+    max-height: 33px;
+  }
+
+  .buttonOutline {
+    height: 30px;
+    padding: 0 15px;
+    border: 1px solid #dfe0e1;
+    font-weight: 500;
+    font-size: 13px;
+    &:before {
+      margin-right: 10px;
+      content: '\f08e';
+      font-family: 'FontAwesome';
+      font-size: 10px;
+    }
+  }
+`;
+
+export default ContainerFluid;
diff --git a/admin/src/components/Header/index.js b/admin/src/components/Header/index.js
new file mode 100644
index 0000000..245ea3a
--- /dev/null
+++ b/admin/src/components/Header/index.js
@@ -0,0 +1,22 @@
+/*
+ *
+ * HeaderComponent
+ *
+ */
+
+import React, { memo } from 'react';
+import { Header } from '@buffetjs/custom';
+import { useGlobalContext } from 'strapi-helper-plugin';
+
+const HeaderComponent = (props) => {
+  const globalContext = useGlobalContext();
+
+  return (
+    <Header
+      title={{ label: 'Config Sync' }}
+      content="Manage your database config across environments."
+    />
+  );
+};
+
+export default memo(HeaderComponent);
diff --git a/admin/src/containers/App/index.js b/admin/src/containers/App/index.js
index a268bf4..4675fdb 100644
--- a/admin/src/containers/App/index.js
+++ b/admin/src/containers/App/index.js
@@ -7,6 +7,8 @@
 
 import React from 'react';
 import { Provider } from 'react-redux';
+import ContainerFluid from '../../components/Container';
+import Header from '../../components/Header';
 
 import { store } from "../../helpers/configureStore";
 import ConfigPage from '../ConfigPage';
@@ -14,7 +16,10 @@ import ConfigPage from '../ConfigPage';
 const App = () => {
   return (
     <Provider store={store}>
-      <ConfigPage />
+      <ContainerFluid>
+        <Header />
+        <ConfigPage />
+      </ContainerFluid>
     </Provider>
   );
 };
diff --git a/admin/src/containers/ConfigPage/index.js b/admin/src/containers/ConfigPage/index.js
index bd10e8f..4013a9a 100644
--- a/admin/src/containers/ConfigPage/index.js
+++ b/admin/src/containers/ConfigPage/index.js
@@ -4,6 +4,7 @@ import { Map } from 'immutable';
 
 import { getAllDatabaseConfig, getAllFileConfig } from '../../state/actions/Config';
 import ConfigList from '../../components/ConfigList';
+import ActionButtons from '../../components/ActionButtons';
 
 const ConfigPage = () => {
   const dispatch = useDispatch();
@@ -21,6 +22,7 @@ const ConfigPage = () => {
 
   return (
     <div>
+      <ActionButtons />
       <ConfigList fileConfig={fileConfig} databaseConfig={databaseConfig} />
     </div>
   );