Merge pull request #1148 from appirio-tech/feature/misc-changes

Feature/misc changes

Author: vikasrohit

src/components/Footer/Footer.jsx

@@ -21,7 +21,7 @@ const Footer = () => {
 
   return (
     <div className="Footer">
-      <p className="copyright-notice">Created by © Topcoder, All Rights Reserved {currentYear}</p>
+      <p className="copyright-notice">© Topcoder { currentYear }</p>
       <div className="footer-menu">
         <MenuBar items={otherNavigationItems} orientation="horizontal" mobileBreakPoint={767} />
       </div>

src/projects/create/components/FillProjectDetails.js

@@ -2,16 +2,13 @@ import _ from 'lodash'
 import React, { PropTypes as PT, Component } from 'react'
 import Sticky from 'react-stickynode'
 
-import { Icons } from 'appirio-tech-react-components'
 import config from '../../../config/projectWizard'
 import SVGIconImage from '../../../components/SVGIconImage'
 import './FillProjectDetails.scss'
 import ProjectBasicDetailsForm from '../components/ProjectBasicDetailsForm'
 import ProjectOutline from '../components/ProjectOutline'
 import typeToSpecification from '../../../config/projectSpecification/typeToSpecification'
 
-const { ConnectLogo } = Icons
-
 class FillProjectDetails extends Component  {
   constructor(props) {
     super(props)
@@ -51,7 +48,7 @@ class FillProjectDetails extends Component  {
     return (
       <div className="FillProjectDetailsWrapper">
         <div className="header headerFillProjectDetails">
-          { (!userRoles || !userRoles.length) && <ConnectLogo />}
+          { (!userRoles || !userRoles.length) && <SVGIconImage filePath="connect-logo-mono" />}
           { (!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">

src/projects/create/components/FillProjectDetails.scss

@@ -15,14 +15,21 @@
   flex: $number;
 }
 .headerFillProjectDetails {
-  margin-top: -28px;
   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
+}
+
 .FillProjectDetails {
 
   .header {

src/projects/create/components/IncompleteProjectConfirmation.scss

@@ -7,7 +7,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: -60px;
+  margin-top: -60px;// to align top with bottom of the header
   padding: 20px;
   .header {
   	position: absolute;
@@ -16,7 +16,8 @@
   }
   h3 {
   	@include roboto-light;
-  	margin-bottom: 12 * $base_unit;
+  	margin-top: 8 * $base_unit;
+    margin-bottom: 12 * $base_unit;
   	color: $tc-black;
   	line-height: 40px;
   	font-size: 36px;

src/projects/create/components/SelectProduct.js

@@ -1,12 +1,9 @@
 import React, { PropTypes as PT } from 'react'
-import { Icons } from 'appirio-tech-react-components'
 import config from '../../../config/projectWizard'
 import ProductCard from './ProductCard'
 import SVGIconImage from '../../../components/SVGIconImage'
 import './SelectProduct.scss'
 
-const { ConnectLogo } = Icons
-
 function SelectProduct(props) {
   const cards = []
   for (const key in config) {
@@ -32,7 +29,7 @@ function SelectProduct(props) {
   return (
     <div>
       <div className="header headerSelectProduct">
-        <ConnectLogo />
+        <SVGIconImage filePath="connect-logo-mono" />
       </div>
       <div className="SelectProduct">
         <h1>Select your project type</h1>

src/projects/create/components/SelectProduct.scss

@@ -1,9 +1,9 @@
 @import 'tc-includes';
 
 .headerSelectProduct {
-    position: absolute;
-    top: 25px;
-    left: 20px;
+  position: absolute;
+  top: 25px;
+  left: 20px;
 }
 
 .SelectProduct {
@@ -12,6 +12,7 @@
   text-align: center;
   max-width: 1000px;
   margin: 0 auto;
+  margin-top: -20px;// to align top with bottom of the header
   a, a:visited, a:hover, a:active{
     color: $tc-dark-blue;
     cursor: pointer;