From d2c16113328bd91a81c75eb7b8cce59cad79e155 Mon Sep 17 00:00:00 2001
From: MD Shuvo <66669067+shuvo7670@users.noreply.github.com>
Date: Thu, 24 Oct 2024 17:14:28 +0600
Subject: [PATCH] dashboard settings issue fixing

---
 .../fields/Modals/ApiCredentialsForm.tsx      | 29 ++++++++++---------
 .../app/Settings/fields/utils/MainProfile.tsx |  2 +-
 .../app/assets/sass/utils/_modals.scss        | 25 ++++++++++++++++
 3 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/includes/Admin/Settings/app/Settings/fields/Modals/ApiCredentialsForm.tsx b/includes/Admin/Settings/app/Settings/fields/Modals/ApiCredentialsForm.tsx
index 25f36325..14ce10b6 100644
--- a/includes/Admin/Settings/app/Settings/fields/Modals/ApiCredentialsForm.tsx
+++ b/includes/Admin/Settings/app/Settings/fields/Modals/ApiCredentialsForm.tsx
@@ -85,18 +85,6 @@ const ApiCredentialsForm = ({ props, platform, requestHandler, appInfo = [] }) =
                 </div>
             )}
             <input type="hidden" name="tempmodaltype" value="twitter" />
-            {hasAutomatic && !isManual && (
-              <div 
-                className="wpsp-modal-generate-token-button-wrapper"
-              >
-                <a
-                  onClick={ handleProfileConnection }
-                  className="wpsp-modal-generate-token-button"
-                >
-                  {__("Connect your account", "wp-scheduled-posts")}
-                </a>
-              </div>
-            )}
             {(isManual || platform == 'instagram' || platform == "facebook" || platform == "twitter") && (
               <form onSubmit={onSubmitHandler}>
                   <div className="form-group">
@@ -203,7 +191,22 @@ const ApiCredentialsForm = ({ props, platform, requestHandler, appInfo = [] }) =
                   >{ __( 'Connect Your Account','wp-scheduled-posts' ) }</button>
               </form>
             )}
-            {(isManual || platform == "medium" ) && (
+            {hasAutomatic && !isManual && (
+              <>
+                <div className="wpsp-separator-connect">{ __('OR', 'wp-scheduled-posts') }</div>
+                <div 
+                  className="wpsp-modal-generate-token-button-wrapper"
+                >
+                  <a
+                    onClick={ handleProfileConnection }
+                    className="wpsp-modal-generate-token-button"
+                  >
+                    {__("Connect your account", "wp-scheduled-posts")}
+                  </a>
+                </div>
+              </>
+            )}
+            {(platform == "medium" ) && (
               <form onSubmit={onSubmitHandler}>
                   { platform == 'medium' &&
                     <div className="form-group">
diff --git a/includes/Admin/Settings/app/Settings/fields/utils/MainProfile.tsx b/includes/Admin/Settings/app/Settings/fields/utils/MainProfile.tsx
index aa571832..836f0927 100644
--- a/includes/Admin/Settings/app/Settings/fields/utils/MainProfile.tsx
+++ b/includes/Admin/Settings/app/Settings/fields/utils/MainProfile.tsx
@@ -23,7 +23,7 @@ export default function MainProfile({
   let pageDisabled = wpspSettingsGlobal?.pro_version ? false : true;
   let currentActiveAccountType = localStorage.getItem('account_type');
 
-  if (props?.type == 'medium') {
+  if (props?.type == 'facebook') {
     options = [
       {
         value: 'page',
diff --git a/includes/Admin/Settings/app/assets/sass/utils/_modals.scss b/includes/Admin/Settings/app/assets/sass/utils/_modals.scss
index 63327046..b54daf78 100644
--- a/includes/Admin/Settings/app/assets/sass/utils/_modals.scss
+++ b/includes/Admin/Settings/app/assets/sass/utils/_modals.scss
@@ -175,6 +175,31 @@ img {
       width: 450px !important;
       padding: 28px;
     }
+    .wpsp-separator-connect {
+      display: flex;
+      align-items: center;
+      text-align: center;
+      font-size: 16px;
+      color: #d0d4d9;
+    }
+    
+    .wpsp-separator-connect::before,
+    .wpsp-separator-connect::after {
+      content: '';
+      flex: 1;
+      border-bottom: 1px solid #d7dbdf;
+    }
+    
+    .wpsp-separator-connect:not(:empty)::before {
+      margin-right: .25em;
+    }
+    
+    .wpsp-separator-connect:not(:empty)::after {
+      margin-left: .25em;
+    }
+    .wpsp-modal-generate-token-button-wrapper {
+      margin-top: 20px;
+    }
     .error-message {
       margin-bottom: 16px;
       @media screen and (max-width: 1439px) {