From c31eae664fe35df5d55c9ddc026670fa241a36a3 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Thu, 31 Oct 2019 11:53:06 -0400 Subject: [PATCH 1/7] Show fuel type message --- src/Fuels.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Fuels.js b/src/Fuels.js index 9adcc673c..cf327ce32 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 = (
  {' '} -- GitLab From 9bf24081adcf6d3fb6e2fa3cbbe05b9070699170 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Thu, 31 Oct 2019 12:57:48 -0400 Subject: [PATCH 2/7] Add style changes for large screen --- src/App.css | 74 +++++++++++++++++++++++++++++---- src/App.js | 6 +-- src/BuildingTypes.js | 2 +- src/ReviewAnswers.js | 4 +- src/SideBar.js | 23 +--------- src/index.css | 99 ++++++++++++++++++++++++++++++++++---------- 6 files changed, 150 insertions(+), 58 deletions(-) diff --git a/src/App.css b/src/App.css index ae5318f71..10ab0bf0f 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,6 +84,9 @@ text-align: center; } +.content { + padding: 100px 20% 4% 20%; +} .submitButton { width: 150px; margin-top: 15px; @@ -122,23 +140,63 @@ .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; +} + +@media (max-width: 1200px) { + .selectedButton { + font-size: 12px; + } +} + +@media (max-width: 992px) { + .selectedButton { + font-size: 20px; + } + + .content { + padding: 130px 20% 4% 20%; + } +} + +@media (max-width: 576px) { + .content { + padding: 0 20% 4% 20%; + } + + .title { + font-size: 30px; + margin-top: 25px; + 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 +242,7 @@ margin-bottom: 15px; } -.content { - padding: 4% 20% 4% 20%; -} + .logo { width: '75%', diff --git a/src/App.js b/src/App.js index 47cff3675..9b0b44d0b 100644 --- a/src/App.js +++ b/src/App.js @@ -635,7 +635,7 @@ class App extends React.Component {
Welcome, {user.firstName} {user.lastName}
-
+
Select a building to continue
{ @@ -746,7 +746,7 @@ class App extends React.Component { if (this.state.isNewUser === true || this.state.isReturningUser === true) { title = ( -
+
See if your building qualifies
); @@ -856,7 +856,7 @@ class App extends React.Component { return (
- + this.chooseAnswer(answerId)} > - {images[id]} +
{images[id]}
{this.names[id]}
diff --git a/src/ReviewAnswers.js b/src/ReviewAnswers.js index 83cea1c01..de2ff5d7b 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,7 +115,7 @@ export default class ReviewAnswers extends React.Component { {questions[question].answer}
- + this.editAnswer(question) } /> diff --git a/src/SideBar.js b/src/SideBar.js index eea69a71c..80bad808a 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 44d4974d4..2e1f64636 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-Bold.otf") format("opentype"); } body { @@ -20,6 +20,12 @@ code { monospace; } +.btn-secondary { + background-color: #002F43 !important; + border-color: #002F43 !important; + border-radius: 0 !important; +} + @media(min-width: 992px) { .col-lg-2 { flex: 0 0 16.666667%; @@ -43,13 +49,6 @@ code { } -.title { - font-size: 2.2em; - margin-top: 50px; - margin-bottom: 30px; - font-weight: bold; - width: 100%; -} .col-12 { position: relative; @@ -65,19 +64,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 +113,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; } @@ -136,24 +130,79 @@ code { font-weight: bold; text-decoration: none; cursor: pointer; + color: #002F43; } .fuelName { margin-top: 20%; + font-size: 14px; + color: #002F43; } .HSName { - margin-top: 20% + margin-top: 20%; + font-size: 14px; } +.button { + border: 1px solid #999999; + font-weight: bold; + cursor: pointer; + padding: 10%; + height: 100%; + font-size: 14px; + color: #002F43; +} + +@media (max-width: 1200px) { + .fuelName { + margin-top: 20%; + font-size: 12px; + } + + .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; + } + +} + + + .HSImage { width: 100% } .message { - font-size: 1.2em; + font-size: 16px; font-weight: bold; margin-top: 25px; + color: #002F43; } .messageIcon { @@ -162,8 +211,10 @@ code { } .subTitle { + font-size: 16px; font-weight: bold; width: 100%; + color: #002F43; } .image { @@ -190,15 +241,17 @@ code { font-weight: bold; font-size: 0.9em; margin-bottom: 10px; + color: #002F43; } .reviewAnswer { - font-size: 1.1em; + font-size: 16px; } .iconEdit { - width: 60%; + width: 30px; cursor: pointer; + position: absolute; } .addressSearchNote { @@ -216,3 +269,7 @@ code { margin-top: 30px; margin-bottom: 30px; } + +.building-type-image { + padding: 0px 30px 0px 30px; +} \ No newline at end of file -- GitLab From 27298dbe54fe4394535a5fd217edf88d2c75ced5 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Thu, 31 Oct 2019 13:02:41 -0400 Subject: [PATCH 3/7] Style changes for ipad pro --- src/index.css | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/index.css b/src/index.css index 2e1f64636..b9f0d14f0 100644 --- a/src/index.css +++ b/src/index.css @@ -26,6 +26,10 @@ code { border-radius: 0 !important; } +.building-type-image { + padding: 0px 30px 0px 30px; +} + @media(min-width: 992px) { .col-lg-2 { flex: 0 0 16.666667%; @@ -154,12 +158,21 @@ code { color: #002F43; } +@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; } + + .HSName { margin-top: 20%; font-size: 12px; @@ -270,6 +283,5 @@ code { margin-bottom: 30px; } -.building-type-image { - padding: 0px 30px 0px 30px; -} \ No newline at end of file + + -- GitLab From abdeda021110ccb5f7bea441102c7a45ed8073ec Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Thu, 31 Oct 2019 13:53:02 -0400 Subject: [PATCH 4/7] Style changes for small screens --- src/App.css | 12 ++++++++++++ src/ReviewAnswers.js | 8 +++++--- src/index.css | 11 +++++++++++ 3 files changed, 28 insertions(+), 3 deletions(-) diff --git a/src/App.css b/src/App.css index 10ab0bf0f..4397ccda4 100644 --- a/src/App.css +++ b/src/App.css @@ -187,6 +187,18 @@ 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 { diff --git a/src/ReviewAnswers.js b/src/ReviewAnswers.js index de2ff5d7b..4f8b6fa82 100644 --- a/src/ReviewAnswers.js +++ b/src/ReviewAnswers.js @@ -115,9 +115,11 @@ export default class ReviewAnswers extends React.Component { {questions[question].answer}
- - this.editAnswer(question) } /> - +
+ + this.editAnswer(question) } /> + +

diff --git a/src/index.css b/src/index.css index b9f0d14f0..c5c609392 100644 --- a/src/index.css +++ b/src/index.css @@ -206,7 +206,18 @@ code { } +@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%; + } +} .HSImage { width: 100% } -- GitLab From 7950396a304d58aae225bc19b584801f975f4f4a Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Thu, 31 Oct 2019 14:14:12 -0400 Subject: [PATCH 5/7] Remove link for Start Over --- src/App.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/App.js b/src/App.js index 9b0b44d0b..fd8d426e7 100644 --- a/src/App.js +++ b/src/App.js @@ -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 { -- GitLab From e9fc586068be62f5ad3cbe40bd69558d21952535 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Fri, 1 Nov 2019 12:22:52 -0400 Subject: [PATCH 6/7] Style change --- src/App.css | 35 ++++++++++++++++++++++++++++++++++- src/App.js | 4 ++-- src/BuildingTypes.js | 2 +- src/index.css | 27 +++++++++++++++++++++++---- 4 files changed, 60 insertions(+), 8 deletions(-) diff --git a/src/App.css b/src/App.css index 4397ccda4..c7fe86bcf 100644 --- a/src/App.css +++ b/src/App.css @@ -84,12 +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 { @@ -156,6 +163,22 @@ 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; @@ -170,13 +193,23 @@ .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; diff --git a/src/App.js b/src/App.js index fd8d426e7..fec412aae 100644 --- a/src/App.js +++ b/src/App.js @@ -631,7 +631,7 @@ class App extends React.Component { const incompletedIcon = (
⚠ Incomplete
); content = ( -
+
Welcome, {user.firstName} {user.lastName}
@@ -838,7 +838,7 @@ class App extends React.Component { } content = ( -
+
{alert} {newUserButton}
{returningUserButton} diff --git a/src/BuildingTypes.js b/src/BuildingTypes.js index e348b54c2..a41eef050 100644 --- a/src/BuildingTypes.js +++ b/src/BuildingTypes.js @@ -60,7 +60,7 @@ export default class BuildingTypes extends React.Component {
- + { this.props.answerIds.map((answerId, id) => { return ( diff --git a/src/index.css b/src/index.css index c5c609392..a2699f031 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-Bold.otf") format("opentype"); + src: url("utils/fonts/Purchased_Fonts/LinotypeFonts/Fonts/AvenirNext/OpenTypeCFFGeorgian/AvenirNextGEO-Demi.otf") format("opentype"); } body { @@ -27,7 +27,11 @@ code { } .building-type-image { - padding: 0px 30px 0px 30px; + margin-top: 1%; +} + +.building-type-image img{ + width: 80% !important; } @media(min-width: 992px) { @@ -129,6 +133,13 @@ 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; @@ -138,14 +149,15 @@ code { } .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 { @@ -158,6 +170,10 @@ code { color: #002F43; } +.button img{ + width: 60%; +} + @media (max-width: 1400px) { .building-type-image { padding: 0px 0px 0px 0px; @@ -171,6 +187,9 @@ code { font-size: 12px; } + .building-unit { + padding: 0 0 0 0; + } .HSName { -- GitLab From 063b8bf710c11cc4c94eaa18bbbced6ba1975bb5 Mon Sep 17 00:00:00 2001 From: RujitRaval Date: Fri, 1 Nov 2019 13:13:56 -0400 Subject: [PATCH 7/7] icon size change in review page --- src/index.css | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/src/index.css b/src/index.css index a2699f031..73f8443fd 100644 --- a/src/index.css +++ b/src/index.css @@ -57,6 +57,11 @@ code { } +.iconEdit { + width: 30px; + cursor: pointer; + position: absolute; +} .col-12 { position: relative; @@ -236,6 +241,12 @@ code { .icon-col{ margin-left: -10%; } + + .iconEdit { + width: 20px; + cursor: pointer; + position: absolute; +} } .HSImage { width: 100% @@ -291,11 +302,7 @@ code { font-size: 16px; } -.iconEdit { - width: 30px; - cursor: pointer; - position: absolute; -} + .addressSearchNote { color: #999999; -- GitLab