From e8b04ea36ed4ed209e638ed9d319a4fdaef3f2a8 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Mon, 21 Oct 2019 13:18:13 -0400 Subject: [PATCH 1/9] Fix address search styles and processing status lable --- src/AddressSearch.js | 44 +++++++++----------------------------- src/App.css | 50 ++++++++++++++++++++++++++++++++++++++++++-- src/App.js | 24 ++++++++++++++------- src/index.css | 6 ------ 4 files changed, 74 insertions(+), 50 deletions(-) diff --git a/src/AddressSearch.js b/src/AddressSearch.js index 1defd874d..b64a33965 100644 --- a/src/AddressSearch.js +++ b/src/AddressSearch.js @@ -48,35 +48,11 @@ export default class AddressSearch extends React.Component { render() { const {viewport} = this.state - const titleStyle = { - fontSize: '2.2em', - marginTop: '75px', - marginBottom: '20px', - fontWeight: 'bold', - } - const textStyle = { - fontSize: '1em', - marginTop: '25px', - marginBottom: '20px', - } - const buttonStyle = { - marginBottom: '20px', - } - const noteStyle = { - color: '#999999', - fontSize: '0.9em', - } - const emailTextStyle = { - fontWeight: 'bold', - color: '#000000', - textDecoration: 'underline', - } - let addressData = ""; if(this.state.addressFound === false){ addressData = ( - -
+
+
What is your building address?
-
+
We'll use this information to determine if BlocPower is available in your area.
-
+
{addressData}
- - + + Having trouble entering your address?
- Please email us at support@blocpower.io + Please email us at support@blocpower.io - +
); } else { - if (this.props.user.data !== undefined && + if(this.props.user.loading === true && this.state.showUserAlert == true) { + alert = ( +
+ Processing ... +
+ ); + } else if (this.props.user.data !== undefined && this.props.user.data !== null && this.props.user.data.success === false && this.state.showUserAlert == true @@ -740,7 +746,7 @@ class App extends React.Component { if (this.state.isNewUser === true) { newUser = ( -
+
- + + + +
+
{alert} {newUserButton}
{returningUserButton} diff --git a/src/index.css b/src/index.css index 7368ce70e..6b5c617e7 100644 --- a/src/index.css +++ b/src/index.css @@ -184,12 +184,6 @@ code { width: 100%; }; -.content { - width: 100%; - text-align: center; - padding: 5%; -} - .image { width: 30%; } -- GitLab From 1beee5819015cadeb89283204e5f06c8da823d65 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Mon, 21 Oct 2019 13:32:43 -0400 Subject: [PATCH 2/9] Button size change --- src/Congrats.js | 1 - src/FinanceInterest.js | 2 +- src/WaitList.js | 6 +++--- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/Congrats.js b/src/Congrats.js index 380c430ce..d835e8ff9 100644 --- a/src/Congrats.js +++ b/src/Congrats.js @@ -2,7 +2,6 @@ import React from "react"; import congrats from './utils/images/spot-results-congratulations.svg'; // with import import './index.css'; - const Congrats = (props) => { const items = [ 'Air source heat pumps use less energy than your current system', diff --git a/src/FinanceInterest.js b/src/FinanceInterest.js index 085195895..7d5edda08 100644 --- a/src/FinanceInterest.js +++ b/src/FinanceInterest.js @@ -41,7 +41,7 @@ export default class FinanceInterest extends React.Component { { this.props.answerIds.map((answerId, id) => { return ( - +
this.chooseAnswer(answerId)} diff --git a/src/WaitList.js b/src/WaitList.js index a35d2aefd..5e958bb58 100644 --- a/src/WaitList.js +++ b/src/WaitList.js @@ -37,8 +37,8 @@ export default class WaitList extends React.Component {
- - + +
this.chooseAnswer(1)} @@ -46,7 +46,7 @@ export default class WaitList extends React.Component { YES
- +
this.chooseAnswer(2)} -- GitLab From fda1c0545943d9b9ba062b79d1c839a30b135bb2 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Mon, 21 Oct 2019 13:41:02 -0400 Subject: [PATCH 3/9] Fix thank you page big icon issue --- src/ThankYou.js | 2 +- src/index.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ThankYou.js b/src/ThankYou.js index 511d160d0..dbf994861 100644 --- a/src/ThankYou.js +++ b/src/ThankYou.js @@ -5,7 +5,7 @@ import './index.css'; const ThankYou = (props) => { const content = ( -
+
Thank You! diff --git a/src/index.css b/src/index.css index 6b5c617e7..0fb77a2bb 100644 --- a/src/index.css +++ b/src/index.css @@ -182,7 +182,7 @@ code { .subTitle { font-weight: bold; width: 100%; -}; +} .image { width: 30%; -- GitLab From e725b00ab6e7439ba31f77559f9054d1db5eb43d Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Mon, 21 Oct 2019 13:43:15 -0400 Subject: [PATCH 4/9] Fix congrats page wide items issue --- src/Congrats.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Congrats.js b/src/Congrats.js index d835e8ff9..5002f150d 100644 --- a/src/Congrats.js +++ b/src/Congrats.js @@ -18,7 +18,7 @@ const Congrats = (props) => { items.slice(1).map(item => { return (
  • {item}
  • ) }) : items.map(item => { return (
  • {item}
  • ) }); const content = ( -
    +
    Congratulations! -- GitLab From c4689cc97fae7e846fb72d2a04e3bfa149a39d2e Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Mon, 21 Oct 2019 13:49:32 -0400 Subject: [PATCH 5/9] Fix waitlist button not selected issue --- src/WaitList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/WaitList.js b/src/WaitList.js index 5e958bb58..513ec7397 100644 --- a/src/WaitList.js +++ b/src/WaitList.js @@ -7,7 +7,7 @@ export default class WaitList extends React.Component { constructor(props) { super(props); this.state = { - answer: 0, + answer: this.props.answer, }; this.names = { 1: 'Yes', -- GitLab From 80268f3aa74f5c79b4e0278efe7eeefecae965b9 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Mon, 21 Oct 2019 16:16:42 -0400 Subject: [PATCH 6/9] Fix Building button styles --- src/App.css | 64 ++++++++++++++++++++++++++++++++++++++++----------- src/App.js | 22 ++++++++++++++---- src/index.css | 18 --------------- 3 files changed, 68 insertions(+), 36 deletions(-) diff --git a/src/App.css b/src/App.css index 983ea87e0..3d10a235d 100644 --- a/src/App.css +++ b/src/App.css @@ -119,6 +119,54 @@ width: 100% !important; } +.buildingButton { + padding: 3%; + cursor: pointer; +} + +.selectedButton { + background: #EEEEEE; + cursor: pointer; + padding: 10%; + height: 100%; + border: 1px solid #999999; +} + +.selectedBuildingButton { + background: #EEEEEE !important; + cursor: pointer; + padding: 3%; + height: 100%; + border: 4px solid #999999 !important; +} + +.completedButton { + background: #DEF5DC; + border: 1px solid #333333; + font-size: 14px; +} + +.incompletedButton { + background: #FFFFFF; + color: #000000; + font-size: 14px; + border: 1px solid #333333; +} + +.completeIcon { + color: #336633; + font-size: 1.7em; + font-weight: bold; + margin-bottom: 2%; +} + +.incompleteIcon { + color: red; + font-size: 1.7em; + font-weight: bold; + margin-bottom: 2%; +} + .submitted { border: 1px solid #999999; padding: 30px 50px 30px 50px; @@ -191,20 +239,8 @@ } .welcome { - padding: 10px 25px 10px 25px; - background: #EEEEEE; + padding: 10px 0px 10px 0px; + border-bottom: 4px solid #CCCCCC; font-weight: bold; display: inline; } - -.completeIcon { - color: #336633; - font-size: 1.1em; - font-weight: bold; -} - -.incompleteIcon { - color: red; - font-size: 1.1em; - font-weight: bold; -} diff --git a/src/App.js b/src/App.js index e2b2c4cb8..47cff3675 100644 --- a/src/App.js +++ b/src/App.js @@ -627,8 +627,9 @@ class App extends React.Component { } else if (Object.keys(questions).includes(this.state.question)) { content = questions[this.state.question]; } else if (buildings.length > 0) { - const completedIcon = ((Completed)); - const incompletedIcon = ((Incomplete)); + const completedIcon = (
    ✔ Completed
    ); + const incompletedIcon = (
    ⚠ Incomplete
    ); + content = (
    @@ -639,14 +640,27 @@ class App extends React.Component {
    { buildings.map(building => { + let buttonStyle = ""; + if (this.state.selectedBuildingId === building.buildingId) { + buttonStyle = "selectedBuildingButton"; + } else { + buttonStyle = "buildingButton"; + } + + if (building.completed === true) { + buttonStyle += " completedButton"; + } else { + buttonStyle += " incompletedButton"; + } + return (
    this.chooseBuilding(building.buildingId, building.questions, building.userBuildingId)} > - {building.address}     { building.completed === true ? completedIcon : incompletedIcon } + {building.address}    
    ); }) diff --git a/src/index.css b/src/index.css index 0fb77a2bb..8511d7840 100644 --- a/src/index.css +++ b/src/index.css @@ -117,24 +117,6 @@ code { width: 90% !important; } -.selectedButton { - background: #EEEEEE; - border: 1px solid #999999; - font-weight: bold; - cursor: pointer; - padding: 10%; - height: 100%; -} - -.selectedBuildingButton { - background: #EEEEEE; - border: 1px solid #999999; - font-weight: bold; - cursor: pointer; - padding: 4%; - height: 100%; -} - .continueButton { margin-bottom: 20px; padding: 15px 30px 15px 30px; -- GitLab From b9a9ac4e7e0b9ff3f65cccdd3f2058715e3cdb75 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Mon, 21 Oct 2019 17:35:18 -0400 Subject: [PATCH 7/9] Add addres search icon --- src/AddressSearch.js | 16 +++++++---- src/utils/images/location.svg | 51 +++++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+), 5 deletions(-) create mode 100644 src/utils/images/location.svg diff --git a/src/AddressSearch.js b/src/AddressSearch.js index b64a33965..170855564 100644 --- a/src/AddressSearch.js +++ b/src/AddressSearch.js @@ -1,7 +1,8 @@ import React from "react"; import { Row, Col, Button} from 'reactstrap'; import './index.css'; -import Geocoder from 'react-mapbox-gl-geocoder' +import Geocoder from 'react-mapbox-gl-geocoder'; +import location from './utils/images/location.svg'; // with import const mapAccess = { mapboxApiAccessToken: 'pk.eyJ1IjoiYmxvY3Bvd2VyIiwiYSI6ImNqd202bngzazE3c2o0OW4wM2IzbG00Y2cifQ.ZdSoYvbdw4fuIul8PQ3sBQ' @@ -43,7 +44,7 @@ export default class AddressSearch extends React.Component { } disableText = () => { - this.setState({ addressFound:false }); + this.setState({ addressFound: false }); } render() { @@ -74,9 +75,14 @@ export default class AddressSearch extends React.Component {
    We'll use this information to determine if BlocPower is available in your area.
    -
    - {addressData} -
    + + + + + + {addressData} + + Having trouble entering your address?
    diff --git a/src/utils/images/location.svg b/src/utils/images/location.svg new file mode 100644 index 000000000..872471129 --- /dev/null +++ b/src/utils/images/location.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -- GitLab From 7ad2140ba2c7f3707391c3f68fa697f8559297c5 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Mon, 21 Oct 2019 17:42:41 -0400 Subject: [PATCH 8/9] Fix review answers css format --- src/ReviewAnswers.js | 2 +- src/index.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ReviewAnswers.js b/src/ReviewAnswers.js index fbd759979..83cea1c01 100644 --- a/src/ReviewAnswers.js +++ b/src/ReviewAnswers.js @@ -24,7 +24,7 @@ export default class ReviewAnswers extends React.Component { render() { const questions = this.props.questions; const content = ( -
    +
    Review your answers
    diff --git a/src/index.css b/src/index.css index 8511d7840..44d4974d4 100644 --- a/src/index.css +++ b/src/index.css @@ -197,7 +197,7 @@ code { } .iconEdit { - width: 35%; + width: 60%; cursor: pointer; } -- GitLab From 28dffb5ae604cf10a0bc5bad4a2c54ef04db34f0 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Mon, 21 Oct 2019 17:47:22 -0400 Subject: [PATCH 9/9] Fix selected building button style --- src/App.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/App.css b/src/App.css index 3d10a235d..ae5318f71 100644 --- a/src/App.css +++ b/src/App.css @@ -130,6 +130,7 @@ padding: 10%; height: 100%; border: 1px solid #999999; + font-weight: bold; } .selectedBuildingButton { -- GitLab