diff --git a/src/App.css b/src/App.css index ae5318f716e5d4adcb6d6090da144501c63d11f1..c7fe86bcf814bda397c0ded16a243e49a8573a2e 100644 --- a/src/App.css +++ b/src/App.css @@ -48,11 +48,26 @@ } .title { - font-size: 2.2em; + font-size: 30px; margin-top: 25px; - margin-bottom: 10%; + width: 100%; + color: #002F43; font-weight: bold; + padding-left: 70px; + padding-right: 70px; + font-family: 'AvenirNext'; +} + +.page-title { + font-size: 30px; + margin-top: 25px; + margin-bottom: 50px; width: 100%; + color: #002F43; + font-weight: bold; + padding-left: 70px; + padding-right: 70px; + font-family: 'AvenirNext'; } .newUserButton { @@ -69,9 +84,19 @@ text-align: center; } +.main-content { + padding: 100px 38% 4% 38%; + margin-left: -10%; +} + +.content { + padding: 100px 20% 4% 20%; + margin-left: -10%; +} + .submitButton { width: 150px; - margin-top: 15px; + margin-top: 40px; } .input { @@ -122,23 +147,101 @@ .buildingButton { padding: 3%; cursor: pointer; + font-size: 14px; + font-weight: bold; + color: #002F43; } + .selectedButton { - background: #EEEEEE; cursor: pointer; padding: 10%; height: 100%; - border: 1px solid #999999; + border: 3px solid #002F43; font-weight: bold; + font-size: 14px; + color: #002F43; +} + +.selectedButton img{ + width: 60%; +} + +@media (max-width: 1367px) { + .main-content { + padding: 300px 20% 4% 10%; + margin-left: 0%; + } + + .content { + padding: 200px 20% 4% 20%; + + } +} + +@media (max-width: 1200px) { + .selectedButton { + font-size: 12px; + } +} + +@media (max-width: 992px) { + .selectedButton { + font-size: 20px; + } + + .content { + padding: 130px 20% 4% 20%; + } + + .main-content { + padding: 100px 20% 4% 10%; + margin-left: 0%; + } +} + +@media (max-width: 576px) { + .content { + padding: 0 20% 4% 20%; + margin-left: 0%; + } + + .main-content { + padding: 0 10% 0 10%; +} + + .title { + font-size: 30px; + margin-top: 25px; + width: 100%; + color: #002F43; + font-weight: bold; + padding-left: 0; + padding-right: 0; + font-family: 'AvenirNext'; + } + + .page-title { + font-size: 30px; + margin-top: 25px; + margin-bottom: 50px; + width: 100%; + color: #002F43; + font-weight: bold; + padding-left: 0; + padding-right: 0; + font-family: 'AvenirNext'; +} } .selectedBuildingButton { - background: #EEEEEE !important; + /* background: #EEEEEE !important; */ cursor: pointer; padding: 3%; height: 100%; - border: 4px solid #999999 !important; + font-size: 14px; + font-weight: bold; + border: 3px solid #002F43 !important; } .completedButton { @@ -184,9 +287,7 @@ margin-bottom: 15px; } -.content { - padding: 4% 20% 4% 20%; -} + .logo { width: '75%', diff --git a/src/App.js b/src/App.js index 47cff36756135563c6c378645c2857c47fabd849..fec412aae785bdb5772936d589a2cd7e01e82031 100644 --- a/src/App.js +++ b/src/App.js @@ -631,11 +631,11 @@ class App extends React.Component { const incompletedIcon = (
⚠ Incomplete
); content = ( -
+
Welcome, {user.firstName} {user.lastName}
-
+
Select a building to continue
{ @@ -692,9 +692,6 @@ class App extends React.Component {
Successful.
We have sent you an email, please click on the link in your email to continue the questionniare. -
- -
); } else { @@ -746,7 +743,7 @@ class App extends React.Component { if (this.state.isNewUser === true || this.state.isReturningUser === true) { title = ( -
+
See if your building qualifies
); @@ -841,7 +838,7 @@ class App extends React.Component { } content = ( -
+
{alert} {newUserButton}
{returningUserButton} @@ -856,7 +853,7 @@ class App extends React.Component { return (
- +
- + { this.props.answerIds.map((answerId, id) => { return ( @@ -69,7 +69,7 @@ export default class BuildingTypes extends React.Component { className={this.state.answer === answerId ? "selectedButton" : "button"} onClick={() => this.chooseAnswer(answerId)} > - {images[id]} +
{images[id]}
{this.names[id]}
diff --git a/src/Fuels.js b/src/Fuels.js index 9adcc673c807b9f50d8b85aeb09f792f68642a28..cf327ce32587082a32018680d2d258c7b4a196f0 100644 --- a/src/Fuels.js +++ b/src/Fuels.js @@ -43,7 +43,7 @@ export default class Fuels extends React.Component { render() { let message = ""; - if (this.state.answer === 'fuelOil' || this.state.answer === 'electricResistance' || this.state.answer === 'dualFuel' ) { + if (this.state.answer === 4 || this.state.answer === 5 || this.state.answer === 6 ) { message = (
  {' '} diff --git a/src/ReviewAnswers.js b/src/ReviewAnswers.js index 83cea1c013a283eb81d06602b888367662dda05e..4f8b6fa823203f4db8d84026572eb20ff5f51fbc 100644 --- a/src/ReviewAnswers.js +++ b/src/ReviewAnswers.js @@ -25,7 +25,7 @@ export default class ReviewAnswers extends React.Component { const questions = this.props.questions; const content = (
-
+
Review your answers
@@ -115,9 +115,11 @@ export default class ReviewAnswers extends React.Component { {questions[question].answer}
- - this.editAnswer(question) } /> - +
+ + this.editAnswer(question) } /> + +

diff --git a/src/SideBar.js b/src/SideBar.js index eea69a71c2229818939328342352faed30e1bc9e..80bad808a6aeb026f27c763ad3cbce03755f4ccf 100644 --- a/src/SideBar.js +++ b/src/SideBar.js @@ -10,30 +10,9 @@ const SideBar = (props) => { 'Your Tenants', ]; - // let content = ""; - // if (props.progress !== "" && props.progress !== '100%' ) { - // content = ( - //
- //
- // {props.progress} - //
- //
- //   {navTitles[0]} - //
- //
- //   {navTitles[1]} - //
- //
- //   {navTitles[2]} - //
- //
- // ); - // } - return ( -
+
- {/* {content} */}
); } diff --git a/src/index.css b/src/index.css index 44d4974d40c949d2b5cde2375078f46e1d1d2496..73f8443fd741cd7ddb871248ad20f05be75e365e 100644 --- a/src/index.css +++ b/src/index.css @@ -5,7 +5,7 @@ @font-face { font-family: "AvenirNext"; - src: url("utils/fonts/Purchased_Fonts/LinotypeFonts/Fonts/AvenirNext/OpenTypeCFFGeorgian/AvenirNextGEO-Medium.otf") format("opentype"); + src: url("utils/fonts/Purchased_Fonts/LinotypeFonts/Fonts/AvenirNext/OpenTypeCFFGeorgian/AvenirNextGEO-Demi.otf") format("opentype"); } body { @@ -20,6 +20,20 @@ code { monospace; } +.btn-secondary { + background-color: #002F43 !important; + border-color: #002F43 !important; + border-radius: 0 !important; +} + +.building-type-image { + margin-top: 1%; +} + +.building-type-image img{ + width: 80% !important; +} + @media(min-width: 992px) { .col-lg-2 { flex: 0 0 16.666667%; @@ -43,12 +57,10 @@ code { } -.title { - font-size: 2.2em; - margin-top: 50px; - margin-bottom: 30px; - font-weight: bold; - width: 100%; +.iconEdit { + width: 30px; + cursor: pointer; + position: absolute; } .col-12 { @@ -65,19 +77,14 @@ code { margin: 0; } -.button { - border: 1px solid #999999; - font-weight: bold; - cursor: pointer; - padding: 10%; - height: 100%; -} + .buidlingButton { border: 1px solid #999999; font-weight: bold; cursor: pointer; padding: 4%; + font-size: 14px; height: 100%; } @@ -119,9 +126,9 @@ code { .continueButton { margin-bottom: 20px; - padding: 15px 30px 15px 30px; + padding: 15px 30px 15px 30px !important; border: 1px solid #999999; - font-weight: bold; + font-weight: bold !important; cursor: pointer; } @@ -131,29 +138,125 @@ code { text-transform: uppercase; } +.building-unit { + padding: 0 10% 0 10%; + margin-top: 30px; + text-align: center; + text-transform: uppercase; +} + .backButton { text-align: left; font-weight: bold; text-decoration: none; cursor: pointer; + color: #002F43; } .fuelName { - margin-top: 20%; + margin-top: 10%; + font-size: 14px; + color: #002F43; } .HSName { - margin-top: 20% + margin-top: 10%; + font-size: 14px; + color: #002F43; +} + +.button { + border: 1px solid #999999; + font-weight: bold; + cursor: pointer; + padding: 10%; + height: 100%; + font-size: 14px; + color: #002F43; +} + +.button img{ + width: 60%; +} + +@media (max-width: 1400px) { + .building-type-image { + padding: 0px 0px 0px 0px; + margin-bottom: 20px; + } +} + +@media (max-width: 1200px) { + .fuelName { + margin-top: 20%; + font-size: 12px; + } + + .building-unit { + padding: 0 0 0 0; + } + + + .HSName { + margin-top: 20%; + font-size: 12px; + } + + .button { + font-size: 12px; + } +} + +@media (max-width: 992px) { + .fuelName { + margin-top: 20%; + font-size: 20px; + } + + .iconEdit { + width: 30px; + cursor: pointer; + } + + .HSName { + margin-top: 20%; + font-size: 20px; + } + + .button { + font-size: 20px; + } + } + +@media (max-width: 576px) { + .continueButton { + margin-bottom: 20px; + padding: 15px 10px 15px !important; + border: 1px solid #999999; + font-weight: bold !important; + } + + .icon-col{ + margin-left: -10%; + } + + .iconEdit { + width: 20px; + cursor: pointer; + position: absolute; +} +} .HSImage { width: 100% } .message { - font-size: 1.2em; + font-size: 16px; font-weight: bold; margin-top: 25px; + color: #002F43; } .messageIcon { @@ -162,8 +265,10 @@ code { } .subTitle { + font-size: 16px; font-weight: bold; width: 100%; + color: #002F43; } .image { @@ -190,16 +295,14 @@ code { font-weight: bold; font-size: 0.9em; margin-bottom: 10px; + color: #002F43; } .reviewAnswer { - font-size: 1.1em; + font-size: 16px; } -.iconEdit { - width: 60%; - cursor: pointer; -} + .addressSearchNote { color: #999999; @@ -216,3 +319,6 @@ code { margin-top: 30px; margin-bottom: 30px; } + + +