Add elements to admin page

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;

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;

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);

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>
   );
 };

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>
   );