Style refactor to fix layout issues;

We should always use SCSS to the fullest. Copy-paste of styles introduces mistakes and is extremely hard to fix.

Author: Victor George

src/assets/images/connect-logo-mono.svg

@@ -193,9 +193,9 @@ $tc-body-large: 20px;
     z-index: 22;/* +1 from z-index of the modal overlay */
   }
 
-  .FillProjectDetailsWrapper {
-    margin-top: 0px;
-  }
+  // .FillProjectDetailsWrapper {
+//   margin-top: -60px; // Counteract the push from the main wrapper, top of vewport
+// }
 }
 
 .project-creation-dialog {

src/components/TopBar/ProjectsToolBar.scss

@@ -48,7 +48,7 @@ class FillProjectDetails extends Component  {
     return (
       <div className="FillProjectDetailsWrapper">
         <div className="header headerFillProjectDetails">
-          { (!userRoles || !userRoles.length) && <SVGIconImage filePath="connect-logo-mono" />}
+          { (!userRoles || !userRoles.length) && <SVGIconImage filePath="connect-logo-mono" className="connectLogo" />}
           { (!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>
         <div className="FillProjectDetails">
@@ -69,7 +69,7 @@ class FillProjectDetails extends Component  {
                 />
               </div>
               <div className="right-area">
-                <Sticky top={80}>
+                <Sticky top={20}>
                   <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>

src/projects/create/components/FillProjectDetails.js

@@ -1,99 +1,67 @@
+// Project form styles
+
+@import 'layout';
 @import 'tc-includes';
 
-@mixin flexBox {
-  display: box;
-  display: flex;
-  flex-direction: row;
-  width: auto;
+.FillProjectDetailsWrapper {
+  // @extend .wizardWrapper;
 }
 
-@mixin flexWidth($number) {
-  -webkit-box-flex: $number;
-  -moz-box-flex: $number;
-  -webkit-flex: $number;
-  -ms-flex: $number;
-  flex: $number;
-}
 .headerFillProjectDetails {
-  display: flex;
-  justify-content: space-between;
-  position: absolute;
-  top: 25px;
-  left: 20px;
-  width: calc(100% - 40px);// 20px for left absolute position, 20px for padding around button in the  header
-  .tc-btn-default img {
-    margin-right: 10px;
-  }
-}
-
-.FillProjectDetailsWrapper {
-  margin-top: -20px;// to align top with bottom of the header
+  @extend .wizardHeader;
 }
 
 .FillProjectDetails {
-
-  .header {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 30px;
-
-    h1 {
-      @include tc-heading;
-      width: 100%;
-      text-align: center;
-    }
-
-    button {
-      align-self: flex-end;
-      white-space: nowrap;
-
-      .Icon {
-        vertical-align: middle;
-        margin-right: 2 * $base_unit;
-      }
-    }
+  h1 {
+    @extend .wizardHeadline;
   }
 
-
-  .two-col-content.content {
+  .two-col-content {
+    padding: 0 !important;
+    min-width: $minimumPageWidth;
 
     .container {
       @include flexBox;
-      background-color: transparent;
+      align-self: flex-start;
+      background-color: none;
       display: flex;
-      padding: 0px;
-      width: 1110px;
-      margin: 20px auto;
+      padding: 0;
+      max-width: 1110px;
+      margin: 0 auto;
+
       /* .left-area */
       .left-area {
-        @include flexWidth(2);
+        flex: auto;
+        width: auto;
         position: relative;
         border-radius: 4px;
         background: $tc-white;
         box-shadow: 0px 1px 3px 0px $tc-gray-30;
-        padding: 5*$base-unit;
-        margin-bottom: 20px;
+        padding: 50px;
 
         .title {
           color: $tc-gray-80;
           @include roboto-bold;
         }
 
         .section-footer {
-          margin-top: 4*$base_unit;
-          margin-bottom: 0px;
+          margin-top: $base_unit * 4;
+          margin-bottom: 0;
           background: none;
+          height: 40px;
         }
-
       }
 
       .right-area {
-        @include flexWidth(1);
-        margin-left: 4*$base_unit;
+        flex: auto !important;
+        width: 320px;
+        min-width: 320px;
+        max-width: 320px;
+        margin-left: 4 * $base_unit;
 
         .right-area-footer {
           @include roboto;
-          padding: 10px 40px 0 0;
+          padding: 10px 0 0 0;
           font-size: 13px;
           line-height: 20px;
           color: $tc-gray-50;
@@ -110,29 +78,19 @@
 
 .ProjectWizard {
   .FillProjectDetails {
-    .header h1{
-      @include roboto-light;
-      font-size: 36px;
-      color: $tc-black;
-      line-height: 40px;
+    .left-area .title span,
+    .section-header .section-number {
+      display: none;
     }
-    .two-col-content.content .container {
-      margin-top: 0;
-      .left-area .title span,
-      .section-header .section-number {
-        display: none;
-      }
-      .gray-text {
-        @include roboto;
-        font-size: 15px;
-        color: $tc-gray-50;
-        line-height: 25px;
-      }
-      .left-area {
-        padding: 50px;
-      }
+
+    .gray-text {
+      @include roboto;
+      font-size: 15px;
+      color: $tc-gray-50;
+      line-height: 25px;
     }
   }
+
   .spec-question-list-item .content-col > h5 span {
     display: none;
   }

src/projects/create/components/FillProjectDetails.scss

@@ -1,51 +1,55 @@
+// Incomplete page styles
+@import 'layout';
 @import 'tc-includes';
 
 .IncompleteProjectConfirmation {
   width: 100%;
-  min-height: calc(100vh - 40px);
-  background: #fafafb;
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: -60px;// to align top with bottom of the header
-  padding: 20px;
+
   .header {
-  	position: absolute;
-  	left: 40px;
-  	top: 40px;
+    @extend .wizardHeader;
+    width: 100%;
   }
+
   h3 {
-  	@include roboto-light;
-  	margin-top: 8 * $base_unit;
+    @include roboto-light;
+    margin-top: 8 * $base_unit;
     margin-bottom: 12 * $base_unit;
-  	color: $tc-black;
-  	line-height: 40px;
-  	font-size: 36px;
+    color: $tc-black;
+    line-height: 40px;
+    font-size: 36px;
   }
+
   h5 {
-  	@include roboto-medium;
-  	margin-bottom: 4 * $base_unit;
-  	color: $tc-gray-80;
-  	line-height: 30px;
-  	font-size: 20px;
+    @include roboto-medium;
+    margin-bottom: 4 * $base_unit;
+    color: $tc-gray-80;
+    line-height: 30px;
+    font-size: 20px;
   }
+
   p {
-  	@include roboto;
-  	margin-bottom: 10 * $base_unit;
-  	color: $tc-gray-60;
-  	line-height: 25px;
-  	font-size: 15px;
+    @include roboto;
+    margin-bottom: 10 * $base_unit;
+    color: $tc-gray-60;
+    line-height: 25px;
+    font-size: 15px;
   }
+
   .actions {
-  	button {
-  		display: block;
-  		margin: 0 auto; 
-  	}
+    button {
+      display: block;
+      margin: 0 auto;
+    }
+
     button + button {
       margin-top: 4 * $base_unit;
     }
   }
 }
+
 .Footer {
   position: relative;
 }