fix problem with loading poisition + hide/show profiile

appirio-tech · Apr 17, 2020 · 33e7d71 · 33e7d71
1 parent f878f10
commit 33e7d71
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 13 deletions.
diff --git a/src/projects/create/components/FillProjectDetails.js b/src/projects/create/components/FillProjectDetails.js
@@ -102,7 +102,15 @@ class FillProjectDetails extends Component {
   }
 
   closeUserSettings() {
-    this.setState({ showUpdateUser: false })
+    const { isMissingUserInfo } = this.props
+    this.setState({
+      showUpdateUser: false,
+      ... (
+        isMissingUserInfo ? {
+          requireCheckUserSetting: false
+        } : {}
+      )
+    })
   }
 
   onRequireCheckUserSetting(isRequire, cb) {
@@ -139,7 +147,9 @@ class FillProjectDetails extends Component {
     const projectTemplateId = _.get(project, 'templateId')
     const projectTemplate = _.find(projectTemplates, { id: projectTemplateId })
     const formDisclaimer = _.get(projectTemplate, 'scope.formDisclaimer')
-
+    const showLoading = (isSavingProject ||
+      profileSettings.isLoading ||
+      profileSettings.pending)
     const template = projectTemplate.scope
 
     let header = null
@@ -176,13 +186,15 @@ class FillProjectDetails extends Component {
         })}
       >
         {showUpdateUser && (
-          <UpdateUserInfo
-            {...this.props}
-            closeUserSettings={this.closeUserSettings}
-          />
+          <div className={`${showLoading ? 'hide': ''}`}>
+            <UpdateUserInfo
+              {...this.props}
+              closeUserSettings={this.closeUserSettings}
+            />
+          </div>
         )}
 
-        <div className={`FillProjectDetails ${showUpdateUser ? 'hide' : ''}`}>
+        <div className={`FillProjectDetails ${(showUpdateUser || showLoading) ? 'hide' : ''}`}>
           <div className="header">{header}</div>
           <section className="two-col-content content">
             <div className="container">
@@ -225,9 +237,7 @@ class FillProjectDetails extends Component {
           </section>
         </div>
 
-        {(isSavingProject ||
-          profileSettings.isLoading ||
-          profileSettings.pending) && (
+        {showLoading && (
           <div className="loading-container">
             <div className="loading">
               <LoadingIndicator />

diff --git a/src/projects/create/components/FillProjectDetails.scss b/src/projects/create/components/FillProjectDetails.scss
@@ -14,6 +14,7 @@
   .FillProjectDetailsWrapper {
     // @extend .wizardWrapper;
     position: relative;
+    min-height: 85px;
 
     &.form-theme-light {
       .FillProjectDetails {
@@ -38,13 +39,12 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      padding-top: 20px;
     }
   }
 
   .FillProjectDetails {
 
-    &.hide {
+    .hide {
       display: none;
     }
 

diff --git a/src/projects/create/components/UpdateUserInfo.scss b/src/projects/create/components/UpdateUserInfo.scss
@@ -10,11 +10,13 @@
 }
 
 .user-container {
-  padding: 20px 50px 50px;
+  padding: 20px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: -67px;
+  max-width: 760px;
+  margin: 0 auto;
 
   > * {
     width: 100%;