Merge pull request #1963 from weseek/support/adjust-personal-setting-page

Support/adjust personal setting page

src/client/js/components/Me/ApiSettings.jsx

@@ -38,7 +38,7 @@ class ApiSettings extends React.Component {
     return (
       <React.Fragment>
 
-        <div className="mb-5 container-fluid">
+        <div className="container-fluid my-4">
           <h2 className="border-bottom">{ t('API Token Settings') }</h2>
         </div>
 

src/client/js/components/Me/ExternalAccountLinkedMe.jsx

@@ -67,7 +67,7 @@ class ExternalAccountLinkedMe extends React.Component {
 
     return (
       <Fragment>
-        <div className="container-fluid p-0 my-4">
+        <div className="container-fluid my-4">
           <h2 className="border-bottom">
             <button type="button" className="btn btn-outline-secondary btn-sm pull-right" onClick={this.openAssociateModal}>
               <i className="icon-plus" aria-hidden="true" />
@@ -77,31 +77,27 @@ class ExternalAccountLinkedMe extends React.Component {
           </h2>
         </div>
 
-        <div className="row">
-          <div className="col-md-12">
-            <table className="table table-bordered table-user-list">
-              <thead>
-                <tr>
-                  <th width="120px">Authentication Provider</th>
-                  <th>
-                    <code>accountId</code>
-                  </th>
-                  <th width="200px">{ t('Created') }</th>
-                  <th width="150px">{ t('Admin') }</th>
-                </tr>
-              </thead>
-              <tbody>
-                {externalAccounts !== 0 && externalAccounts.map(account => (
-                  <ExternalAccountRow
-                    account={account}
-                    key={account._id}
-                    openDisassociateModal={this.openDisassociateModal}
-                  />
+        <table className="table table-bordered table-user-list">
+          <thead>
+            <tr>
+              <th width="120px">Authentication Provider</th>
+              <th>
+                <code>accountId</code>
+              </th>
+              <th width="200px">{ t('Created') }</th>
+              <th width="150px">{ t('Admin') }</th>
+            </tr>
+          </thead>
+          <tbody>
+            {externalAccounts !== 0 && externalAccounts.map(account => (
+              <ExternalAccountRow
+                account={account}
+                key={account._id}
+                openDisassociateModal={this.openDisassociateModal}
+              />
                 ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
+          </tbody>
+        </table>
 
         <AssociateModal
           isOpen={this.state.isAssociateModalOpen}

src/client/js/components/Me/PasswordSettings.jsx

@@ -68,7 +68,7 @@ class PasswordSettings extends React.Component {
     return (
       <React.Fragment>
         {(!personalContainer.state.isPasswordSet) && <div className="alert alert-warning m-t-10">{ t('Password is not set') }</div>}
-        <div className="mb-5 container-fluid">
+        <div className="container-fluid my-4">
           {(personalContainer.state.isPasswordSet)
             ? <h2 className="border-bottom">{t('personal_settings.update_password')}</h2>
           : <h2 className="border-bottom">{t('personal_settings.set_new_password')}</h2>}

src/client/js/components/Me/UserSettings.jsx

@@ -13,15 +13,15 @@ class UserSettings extends React.Component {
 
     return (
       <Fragment>
-        <div className="mb-5 container-fluid">
+        <div className="container-fluid my-4">
           <h2 className="border-bottom">{t('Basic Info')}</h2>
-          <BasicInfoSettings />
         </div>
+        <BasicInfoSettings />
 
-        <div className="mb-5 container-fluid">
+        <div className="container-fluid my-4">
           <h2 className="border-bottom">{t('Set Profile Image')}</h2>
-          <ProfileImageSettings />
         </div>
+        <ProfileImageSettings />
 
       </Fragment>
     );