fix #1092

Author: sirakovaDimitrina

src/components/Wizard/Wizard.scss

@@ -9,7 +9,7 @@
     margin: 24px auto;
     min-width: 120px;
     padding: 20px;
-    position: relative;
+    /*position: relative;*/
     text-align: left;
     width: 100%;
   }

src/projects/create/components/FillProjectDetails.js

@@ -49,33 +49,37 @@ class FillProjectDetails extends Component  {
       specification = typeToSpecification[product]
     let sections = require(`../../../config/projectQuestions/${specification}`).basicSections
     return (
-      <div className="FillProjectDetails">
-        <div className="header">
+      <div className="FillProjectDetailsWrapper">
+        <div className="header headerFillProjectDetails">
           { (!userRoles || !userRoles.length) && <ConnectLogo />}
-          <h1>Let's setup your { productName } project</h1>
           { (!userRoles || !userRoles.length) && <button className="tc-btn tc-btn-default tc-btn-sm" onClick={ this.props.onChangeProjectType }><SVGIconImage filePath="arrows-undo" />Change project type</button> }
         </div>
-        <section className="two-col-content content">
-          <div className="container">
-            <div className="left-area">
-              <ProjectBasicDetailsForm
-                project={project}
-                sections={sections}
-                isEdittable
-                submitHandler={this.props.onCreateProject}
-                saving={processing}
-                onProjectChange={this.props.onProjectChange}
-                submitBtnText={ submitBtnText }
-              />
-            </div>
-            <div className="right-area">
-              <Sticky top={80}>
-                <ProjectOutline project={ dirtyProject } />
-                <div className="right-area-footer">In 24 hours our project managers will contact you for more information and a detailed quote that accurately reflects your project needs.</div>
-              </Sticky>
-            </div>
+        <div className="FillProjectDetails">
+          <div className="header">
+            <h1>Let's setup your { productName } project</h1>
           </div>
-        </section>
+          <section className="two-col-content content">
+            <div className="container">
+              <div className="left-area">
+                <ProjectBasicDetailsForm
+                  project={project}
+                  sections={sections}
+                  isEdittable
+                  submitHandler={this.props.onCreateProject}
+                  saving={processing}
+                  onProjectChange={this.props.onProjectChange}
+                  submitBtnText={ submitBtnText }
+                />
+              </div>
+              <div className="right-area">
+                <Sticky top={80}>
+                  <ProjectOutline project={ dirtyProject } />
+                  <div className="right-area-footer">In 24 hours our project managers will contact you for more information and a detailed quote that accurately reflects your project needs.</div>
+                </Sticky>
+              </div>
+            </div>
+          </section>
+        </div>
       </div>
     )
   }

src/projects/create/components/FillProjectDetails.scss

@@ -14,6 +14,14 @@
   -ms-flex: $number;
   flex: $number;
 }
+.headerFillProjectDetails {
+  margin-top: -28px;
+  display: flex;
+  justify-content: space-between;
+  .tc-btn-default img {
+    margin-right: 10px;
+  }
+}
 
 .FillProjectDetails {
 

src/projects/create/components/ProjectOutline.scss

@@ -43,6 +43,10 @@
     margin-top: $base-unit * 4;
     .project-meta-data-row {
       display: flex;
+      .visual-design-project-estimate-section {
+        margin-left: 0;
+        margin-right: 0;
+      }
       .project-meta-data-label {
         flex: 1;
         color: $tc-gray-50;

src/projects/create/components/SelectProduct.js

@@ -29,14 +29,16 @@ function SelectProduct(props) {
     }
   }
   return (
-    <div className="SelectProduct">
-      <div className="header">
+    <div>
+      <div className="header headerSelectProduct">
         <ConnectLogo />
       </div>
-      <h1>Select your project type</h1>
-      <div className="cards">{cards}</div>
-      <div className="footer">
-        Looking for something else? <a href="http://crowdsourcing.topcoder.com/piqued_by_crowdsourcing">Get in touch with us.</a>
+      <div className="SelectProduct">
+        <h1>Select your project type</h1>
+        <div className="cards">{cards}</div>
+        <div className="footer">
+          Looking for something else? <a href="http://crowdsourcing.topcoder.com/piqued_by_crowdsourcing">Get in touch with us.</a>
+        </div>
       </div>
     </div>
   )

src/projects/create/components/SelectProduct.scss

@@ -1,5 +1,11 @@
 @import 'tc-includes';
 
+.headerSelectProduct {
+    position: absolute;
+    top: 25px;
+    left: 20px;
+}
+
 .SelectProduct {
   @include tc-body;
   color: $tc-gray-50;

src/projects/detail/components/VisualDesignProjectEstimateSection.scss

@@ -2,12 +2,15 @@
 
 .visual-design-project-estimate-section {
   display: flex;
-  width: 100%;
+  width: calc(100% - 40px);
+  margin-left: 20px;
+  margin-right: 20px;
   flex-wrap: wrap;
   flex-direction: row;
 
   h4.titles {
     width: 100%;
+    margin: 0;
     margin-bottom: $base-unit * 2;
     font-size: 12px;
     color: $tc-gray-50;