From b5c1038e950d210f89be891a2d478dbd54d1545f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Let=C3=ADcia=20Camara?= Date: Fri, 28 Sep 2018 04:10:44 -0300 Subject: [PATCH] Align website and other updates --- package.json | 1 + src/assets/css/mdb.css | 2 +- src/assets/css/palmpay.css | 23 ++++++-- src/components/EnhancedSearch.js | 3 +- src/components/Footer.js | 12 +++-- src/components/LayerMap.js | 1 + src/components/LayerMapSwitches.js | 20 +++++-- src/components/pages/AmbassadorsPage.js | 26 +++++++-- src/components/pages/HomePage.css | 53 +++++++++++++++++++ src/components/pages/MarketingPage.js | 6 ++- src/components/pages/MerchantsPage.js | 17 +++++- src/components/sections/AboutSection.js | 22 ++++---- src/components/sections/MainSection.js | 2 +- src/components/sections/ServicesSection.js | 4 +- src/components/sections/TestimoniesSection.js | 20 +++++-- src/index.css | 2 +- src/translations/en.json | 2 +- src/utils/feathers.js | 4 +- 18 files changed, 175 insertions(+), 45 deletions(-) diff --git a/package.json b/package.json index a834651..4e5a2e1 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@feathersjs/client": "^3.7.2", "@material-ui/core": "^3.1.0", "@material-ui/icons": "^3.0.1", + "bootstrap": "^4.1.3", "country-list": "^1.1.0", "mdbreact": "^4.7.1", "react": "^16.5.2", diff --git a/src/assets/css/mdb.css b/src/assets/css/mdb.css index fb26b48..68c5da0 100644 --- a/src/assets/css/mdb.css +++ b/src/assets/css/mdb.css @@ -3942,7 +3942,7 @@ a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href] padding-bottom: 1.5rem !important; } .p-5 { - padding: 3rem !important; } + padding: 3rem; } .pt-5 { padding-top: 3rem !important; } diff --git a/src/assets/css/palmpay.css b/src/assets/css/palmpay.css index 3fbf375..49511a3 100644 --- a/src/assets/css/palmpay.css +++ b/src/assets/css/palmpay.css @@ -66,7 +66,7 @@ p { color: rgba(255, 255, 255, 0.7); } section { - padding: 8rem 0; } + padding: 50px 0; } .section-heading { margin-top: 0; } @@ -163,7 +163,9 @@ img::-moz-selection { padding-top: 0px; padding-bottom: 0px; } #mainNav .navbar-brand .logo1 { - display: none !important; } + /*display: none !important;*/ + width: 223px; + } #mainNav .navbar-brand .logo2 { display: inline !important; } } @media (min-width: 992px) { @@ -293,8 +295,8 @@ header.masthead { .copyright { background-color: #212529; - padding-left: 6rem; - padding-right: 6rem; + /*padding-left: 6rem; + padding-right: 6rem;*/ } ul.social-buttons { @@ -350,3 +352,16 @@ ul.social-buttons { } } +.search-books-input-wrapper { + margin-left: 0 !important; +} +#testimonies .container .row > div { + border: none !important; +} +.ambassadorsTitle { + margin-top: 0 !important; +} +.about.bg-secondary > div { + padding-left: 0 !important; + padding-right: 0 !important; +} diff --git a/src/components/EnhancedSearch.js b/src/components/EnhancedSearch.js index 34c4118..d3d43dc 100644 --- a/src/components/EnhancedSearch.js +++ b/src/components/EnhancedSearch.js @@ -30,6 +30,7 @@ const styles = theme => ({ }, textField: { flexBasis: 280, + borderColor: "#139657" }, }); @@ -49,7 +50,7 @@ class EnhancedSearch extends Component {
- + +
+ + @@ -68,19 +71,20 @@ function Footer() { - +

+
-
+

@@ -106,7 +110,7 @@ function Footer() {

-
+
diff --git a/src/components/LayerMap.js b/src/components/LayerMap.js index bcdd38d..25b5237 100644 --- a/src/components/LayerMap.js +++ b/src/components/LayerMap.js @@ -258,6 +258,7 @@ class LayerMap extends Component { ) : ( diff --git a/src/components/LayerMapSwitches.js b/src/components/LayerMapSwitches.js index 91794f4..f0df207 100644 --- a/src/components/LayerMapSwitches.js +++ b/src/components/LayerMapSwitches.js @@ -18,11 +18,23 @@ const styles = theme => ({ }, colorBar: {}, colorChecked: {}, - iOSSwitchBase: { + iOSSwitchBaseBlue: { '&$iOSChecked': { color: theme.palette.common.white, '& + $iOSBar': { - backgroundColor: '#52d869', + backgroundColor: "#2069b3", + }, + }, + transition: theme.transitions.create('transform', { + duration: theme.transitions.duration.shortest, + easing: theme.transitions.easing.sharp, + }), + }, + iOSSwitchBaseGreen: { + '&$iOSChecked': { + color: theme.palette.common.white, + '& + $iOSBar': { + backgroundColor: "#139657", }, }, transition: theme.transitions.create('transform', { @@ -76,7 +88,7 @@ class LayerMapSwitches extends React.Component { onChange={this.props.onChange('ambassadorLayer')} value="ambassadors" classes={{ - switchBase: classes.iOSSwitchBase, + switchBase: ( (this.props.ambsMap) ? classes.iOSSwitchBaseBlue : classes.iOSSwitchBaseGreen ), bar: classes.iOSBar, icon: classes.iOSIcon, iconChecked: classes.iOSIconChecked, @@ -90,7 +102,7 @@ class LayerMapSwitches extends React.Component { control={ this.openMaps( ambassador.nickname, `${ambassador.city} - ${ambassador.country}`, @@ -186,7 +189,15 @@ class AmbassadorsPage extends Component { return (
-

+ +
+
+
+
+
+ + +

{ /* Conditional Rendering */} {(this.state.loading) ? ( Loading @@ -237,11 +248,18 @@ class AmbassadorsPage extends Component { ambassadorsLayer={true} merchantsLayer={false} mapHeight={'600px'} + ambsMap={true} showControls={this.state.mapsModalIsOpen} />
)} +
+
+
+ +
+
); diff --git a/src/components/pages/HomePage.css b/src/components/pages/HomePage.css index 0f60998..bbdb324 100644 --- a/src/components/pages/HomePage.css +++ b/src/components/pages/HomePage.css @@ -5,3 +5,56 @@ background-position: center center; height: 100vh; } +@media screen and (max-width: 991px) { + .testimonialbox { + margin-bottom: 250px; + } +} + + +@media screen and (min-width: 991px) { +.logoFooter { + text-align: left !important; + padding-left: 0 !important; +} + +.brandTextFooter { + text-align: right !important; + padding-right: 0 !important; +} +.developersName { + text-align: right !important; +} +.developersName > div { + padding-right: 0 !important; +} +#home footer .col-md-10 { + padding-left: 0 !important; ; + padding-right: 0 !important; ; +} +.boxTestimonial { + padding-left: 0 !important; +} +.boxVideo { + padding-right: 0 !important; +} +} +@media screen and (max-width: 991px) { +.testimoniesBox { + padding-right: 0 !important; +} + .box-video { + padding-left: 0 !important; + } +} + +@media screen and (min-width: 991px) { + .margin-5 { + padding-right: 0 !important; + padding-left: 0 !important; + } +} + +.margin-5 { + padding: 3rem; +} \ No newline at end of file diff --git a/src/components/pages/MarketingPage.js b/src/components/pages/MarketingPage.js index b8978fc..0cdf661 100644 --- a/src/components/pages/MarketingPage.js +++ b/src/components/pages/MarketingPage.js @@ -3,7 +3,8 @@ import { Button, Collapse } from "mdbreact"; import { FormattedMessage, FormattedHTMLMessage } from 'react-intl'; // Custom components -import MarketingHeader from '../MarketingHeader'; +import AppHeader from '../AppHeader'; +import Footer from '../Footer'; /** * Marketing page component. @@ -85,7 +86,7 @@ class MarketingPage extends React.Component { render() { return (
- +
@@ -168,6 +169,7 @@ class MarketingPage extends React.Component {
+
); } diff --git a/src/components/pages/MerchantsPage.js b/src/components/pages/MerchantsPage.js index a524957..54b6315 100644 --- a/src/components/pages/MerchantsPage.js +++ b/src/components/pages/MerchantsPage.js @@ -165,7 +165,10 @@ class MerchantsPage extends Component { merchant.map =
+
); diff --git a/src/components/sections/AboutSection.js b/src/components/sections/AboutSection.js index ab514ed..e9042c6 100644 --- a/src/components/sections/AboutSection.js +++ b/src/components/sections/AboutSection.js @@ -14,15 +14,15 @@ import AboutImage5 from '../../assets/img/about/ab5.png'; function AboutSection() { return (
-
+
-
+
-
+

@@ -64,12 +64,12 @@ function AboutSection() {
-
+
-
+

@@ -103,12 +103,12 @@ function AboutSection() {
-
+
-
+

@@ -150,12 +150,12 @@ function AboutSection() {
-
+
-
+

@@ -182,12 +182,12 @@ function AboutSection() {
-
+
-
+

diff --git a/src/components/sections/MainSection.js b/src/components/sections/MainSection.js index ec195c9..b917148 100644 --- a/src/components/sections/MainSection.js +++ b/src/components/sections/MainSection.js @@ -17,7 +17,7 @@ function MainSection() { - +

diff --git a/src/components/sections/ServicesSection.js b/src/components/sections/ServicesSection.js index eb8c6d8..4f017b5 100644 --- a/src/components/sections/ServicesSection.js +++ b/src/components/sections/ServicesSection.js @@ -17,7 +17,7 @@ import Retail from '../../assets/img/services/retail.png'; function ServicesSection() { return (
-
+

@@ -30,7 +30,7 @@ function ServicesSection() {

-
+
diff --git a/src/components/sections/TestimoniesSection.js b/src/components/sections/TestimoniesSection.js index 0b1635f..2cf77ad 100644 --- a/src/components/sections/TestimoniesSection.js +++ b/src/components/sections/TestimoniesSection.js @@ -40,7 +40,7 @@ const testimonies = [ class TestimoniesSection extends React.Component { constructor(props) { super(props); - + this.state = { activeItem: 1, maxLength: testimonies.length @@ -53,9 +53,14 @@ class TestimoniesSection extends React.Component { return (
-
+
- + - + {testimonies.map( (testimony, index) => ( @@ -81,7 +88,10 @@ class TestimoniesSection extends React.Component { - +