From 36871a0b3465813e2108b14adb82b464010ef9c4 Mon Sep 17 00:00:00 2001
From: Sylvain <sylvain@sleede.com>
Date: Tue, 6 Apr 2021 18:00:13 +0200
Subject: [PATCH] improved display

---
 .../javascript/components/payzen-settings.tsx | 28 ++++++++++---------
 .../stylesheets/modules/payzen-settings.scss  |  9 +++---
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/app/frontend/src/javascript/components/payzen-settings.tsx b/app/frontend/src/javascript/components/payzen-settings.tsx
index c87417118..526849d79 100644
--- a/app/frontend/src/javascript/components/payzen-settings.tsx
+++ b/app/frontend/src/javascript/components/payzen-settings.tsx
@@ -65,7 +65,7 @@ export const PayzenSettings: React.FC<PayzenSettingsProps> = ({}) => {
 
   const handleUpdateKeys = () => {
     const api = new SettingAPI();
-    api.bulkUpdate(settings).then(result => {
+    api.bulkUpdate(config).then(result => {
       if (Array.from(result.values()).filter(item => !item.status).length > 0) {
         setErrors(JSON.stringify(result));
       } else {
@@ -99,19 +99,21 @@ export const PayzenSettings: React.FC<PayzenSettingsProps> = ({}) => {
              </div>
            );
          })}
+         <div className="edit-keys">
+           <FabButton className="edit-keys-btn" onClick={toggleEditKeysModal}>{t('app.admin.invoices.payment.edit_keys')}</FabButton>
+           <FabModal title={t('app.admin.invoices.payment.payzen.payzen_keys')}
+                     isOpen={openEditModal}
+                     toggleModal={toggleEditKeysModal}
+                     width={ModalSize.medium}
+                     confirmButton={t('app.admin.invoices.payment.payzen.update_button')}
+                     onConfirm={handleUpdateKeys}
+                     preventConfirm={preventConfirm}
+                     closeButton>
+             {errors && <span>{errors}</span>}
+             <PayZenKeysForm onValidKeys={handleValidPayZenKeys} />
+           </FabModal>
+         </div>
        </div>
-      <FabButton className="edit-keys-btn" onClick={toggleEditKeysModal}>{t('app.admin.invoices.payment.edit_keys')}</FabButton>
-      <FabModal title={t('app.admin.invoices.payment.payzen.payzen_keys')}
-                isOpen={openEditModal}
-                toggleModal={toggleEditKeysModal}
-                width={ModalSize.medium}
-                confirmButton={t('app.admin.invoices.payment.payzen.update_button')}
-                onConfirm={handleUpdateKeys}
-                preventConfirm={preventConfirm}
-                closeButton>
-        {errors && <span>{errors}</span>}
-        <PayZenKeysForm onValidKeys={handleValidPayZenKeys} />
-      </FabModal>
     </div>
   );
 }
diff --git a/app/frontend/src/stylesheets/modules/payzen-settings.scss b/app/frontend/src/stylesheets/modules/payzen-settings.scss
index 1fc6ec47e..7667e4ced 100644
--- a/app/frontend/src/stylesheets/modules/payzen-settings.scss
+++ b/app/frontend/src/stylesheets/modules/payzen-settings.scss
@@ -3,14 +3,15 @@
   .payzen-keys {
     display: flex;
     flex-direction: row;
-    justify-content: space-around;
+    justify-content: start;
     flex-wrap: wrap;
 
     .key-wrapper {
-      padding: 5px;
+      padding: 5px 15px;
     }
   }
-  .edit-keys-btn {
-    margin-top: 20px;
+  .edit-keys {
+    margin: 5px 15px;
+    padding-top: 1.8rem;
   }
 }