Merge branch 'dev'

Author: Parth Shah

src/projects/detail/components/FeatureSelector/DefaultFeatureForm.jsx

@@ -68,6 +68,7 @@ class DefaultFeatureForm extends Component {
             onChange={ this.toggleFeature }
             name="featue-active"
             checked={isActive}
+            label="Enable feature"
           />
         </div>
         <div className="feature-form-content">

src/projects/detail/components/FeatureSelector/FeatureForm.scss

@@ -12,18 +12,17 @@
       background-color: $tc-gray-neutral-dark;
     }
   }
-  
+
   .feature-title-row {
     display: flex;
     justify-content: space-between;
     margin-bottom: 4 * $base-unit;
     padding-bottom: 2 * $base-unit;
     border-bottom: 1px solid $tc-gray-10;
-    
+
     .title {
       @include tc-heading;
       @include roboto-medium;
-
       flex: 1;
       color: $tc-black;
       white-space: nowrap;
@@ -56,7 +55,6 @@
   }
 
   .feature-form-content {
-
     .feature-description {
       @include roboto;
       font-size: $tc-body-md;
@@ -65,10 +63,9 @@
       color: $tc-gray-50;
       margin: 4 * $base-unit 0px;
     }
-    
+
     .predefined-feature-form,
     .custom-feature-form {
-      
       .feature-notes {
         label {
           @include tc-label-md;
@@ -102,7 +99,7 @@
     .feature-form-actions {
       display: flex;
       justify-content: center;
-      
+
       button + button {
         margin-left: 4 * $base-unit;
       }
@@ -122,11 +119,30 @@
       }
     }
   }
-  
+
   .description {
     textarea {
       margin-top: 64px;
       height: 150px;
     }
   }
-}
+
+  // Switch button extensions
+  .SwitchButton {
+    & > * {
+      cursor: pointer;
+    }
+
+    .label {
+      transition: color 200ms ease-in-out;
+      -moz-user-select: none;
+      -webkit-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+    }
+
+    &:hover .label {
+      color: $tc-black;
+    }
+  }
+}

src/projects/detail/components/FeatureSelector/FeaturePicker.scss

@@ -1,24 +1,23 @@
 @import 'tc-includes';
-
 $card-max-width: 180px;
 // Used to calculate the available height for the left-side column
 $header-height: 60px;
 $footer-height: 0;
 
-
 button {
   &.clean {
     background-color: transparent;
-    border-radius   : 0;
-    border          : none;
-    padding         : 0;
-    margin          : 0;
-    font-size       : inherit;
-    font            : inherit;
-    line-height     : inherit;
-    font-weight     : inherit;
-    text-transform  : inherit;
+    border-radius: 0;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font-size: inherit;
+    font: inherit;
+    line-height: inherit;
+    font-weight: inherit;
+    text-transform: inherit;
   }
+
   &:active,
   &:focus {
     outline: none;
@@ -61,12 +60,13 @@ button {
       width: 320px;
       max-width: 320px;
       background-color: $tc-gray-10;
-      border-right    : 1px solid $tc-gray-20;
+      border-right: 1px solid $tc-gray-20;
       position: relative;
+      // Main container, scroll according to the content displayed inside.
+      overflow-y: scroll;
+      height: calc(100% - #{$header-height});
 
       .feature-categories-list {
-        overflow-y: scroll;
-        max-height: calc(100% - #{$header-height}); //FIXME: ??
         width: 100%;
         padding: 4 * $base-unit 0;
 
@@ -98,13 +98,14 @@ button {
         width: 100%;
         height: 100%;
       }
-    }    
+    }
 
     .features-content {
       max-width: 660px;
       width: 100%;
       position: relative;
     }
+
     .feature-form-instructions {
       padding: 8 * $base-unit;
 

src/projects/detail/components/FeatureSelector/FeaturePreview.scss

@@ -2,12 +2,15 @@
 
 .feature-preview {
   text-align: center;
-  /*padding: (8 * $base-unit) (12 * $base-unit) ;*/
-  /*background: url('./images/Device-iPhone.svg') no-repeat;*/
-  background-color: #FBFDFF;
+  // padding: (8 * $base-unit) (12 * $base-unit) ;
+  // background: url('./images/Device-iPhone.svg') no-repeat;
+  background-color: #fbfdff;
   background-position: 50% 22px;
   padding: 8 * $base-unit;
   border-left: 1px solid $tc-dark-blue-30;
+  min-width: 260px;
+  display: block;
+
   .feature-preview-img {
     background: url('./images/Device-iPhone.svg') no-repeat;
     /*padding: (8 * $base-unit) (12 * $base-unit) ;*/
@@ -16,6 +19,7 @@
     max-width: 273px;
     background-size: contain;
   }
+
   img {
     display: inline-block;
     width: 100%;

src/projects/detail/containers/Specification.scss

@@ -50,15 +50,19 @@ $title-color: $tc-gray-80;
   .x-mark-icon {
     display: inline-block;
     margin: 0 0 0 5px;
-    vertical-align: text-bottom;
     transition: all 200ms ease-in-out;
+
+    & > svg {
+      padding-top: 3px;
+      transition: all 200ms ease-in-out;
+    }
   }
 
   &:hover {
     color: $tc-black;
     cursor: pointer;
 
-    .x-mark-icon {
+    .x-mark-icon > svg {
       fill: $tc-black;
     }
   }

src/projects/list/components/Projects/Projects.jsx

@@ -15,12 +15,12 @@ class Projects extends Component {
   }
 
   componentDidUpdate() {
-    window.scrollTo(0, parseInt(window.sessionStorage.getItem("projectsPageScrollTop")));
+    window.scrollTo(0, parseInt(window.sessionStorage.getItem('projectsPageScrollTop')))
   }
 
   componentWillUnmount(){
-    const scrollingElement = document.scrollingElement || document.documentElement;
-    window.sessionStorage.setItem('projectsPageScrollTop', scrollingElement.scrollTop);
+    const scrollingElement = document.scrollingElement || document.documentElement
+    window.sessionStorage.setItem('projectsPageScrollTop', scrollingElement.scrollTop)
   }
 
   componentWillMount() {
@@ -45,7 +45,7 @@ class Projects extends Component {
   }
 
   onPageChange(pageNum) {
-    window.sessionStorage.removeItem('projectsPageScrollTop');
+    window.sessionStorage.removeItem('projectsPageScrollTop')
     this.routeWithParams(this.props.criteria, pageNum)
   }