Align website and other updates

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",

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; }

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-left: 6rem;
-  padding-right: 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;
+}

src/components/EnhancedSearch.js

@@ -30,6 +30,7 @@ const styles = theme => ({
   },
   textField: {
     flexBasis: 280,
+    borderColor: "#139657"
   },
 });
 
@@ -49,7 +50,7 @@ class EnhancedSearch extends Component {
 				<div className="search-books-bar">
 					<div className="search-books-input-wrapper" style={{ textAlign: 'left', marginLeft: 20}}>
 						<TextField
-							style={{ textAlign: 'left', width: 350}}
+							style={{ textAlign: 'left', width: 350,borderColor: "#139657" }}
 							id="outlined-adornment-weight"
 							className={classNames(classes.margin, classes.textField)}
 		          variant="outlined"

src/components/Footer.js

@@ -20,7 +20,10 @@ function Footer() {
     <FooterBase className="footer text-center">
       <div className="containerfix">
         <Row className="vertical-align footerrow">
-          <Col md="4">
+
+      <div className="col-md-10 mx-md-auto">
+
+          <Col className="logoFooter" md="4">
             <img alt="" src={FooterLogo} />
           </Col>
 
@@ -68,19 +71,20 @@ function Footer() {
               </li>
             </ul>
           </Col>
-          <Col md="4">
+          <Col className="brandTextFooter" md="4">
             <p className="mb-0">
               <span id="ft_lang1">
                 <FormattedMessage id="footer.title" />
               </span>
             </p>
           </Col>
+          </div>
         </Row>
 
         <div
           className="copyright py-3 text-center text-white"
           style={{ fontSize: "0.8em" }}>
-          <div>
+<div className="col-md-10 mx-md-auto">
             <div className="row vertical-align">
               <div className="col-md-10 mx-md-auto">
                 <p>
@@ -106,7 +110,7 @@ function Footer() {
               </div>
             </div>
 
-            <div className="row justify-content-end">
+            <div className="row developersName justify-content-end">
               <div
                 style={{ fontSize: "0.8em" }}
                 className="text-white col-md-2">

src/components/LayerMap.js

@@ -258,6 +258,7 @@ class LayerMap extends Component {
           <LayerMapSwitches
             ambassadors={this.state.ambassadorLayer}
             merchants={this.state.merchantLayer}
+            ambsMap={this.props.ambsMap}
             onChange={this.handleLayerChange}
           />
         ) : (

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={
               <Switch
                 classes={{
-                  switchBase: classes.iOSSwitchBase,
+                  switchBase: ( (this.props.ambsMap) ? classes.iOSSwitchBaseBlue : classes.iOSSwitchBaseGreen ),
                   bar: classes.iOSBar,
                   icon: classes.iOSIcon,
                   iconChecked: classes.iOSIconChecked,

src/components/pages/AmbassadorsPage.js

@@ -57,8 +57,8 @@ const columnData = [
   { id: 'keybase', numeric: false, disablePadding: false, label: 'Keybase' },
   { id: 'email', numeric: false, disablePadding: false, label: 'Email' },
   { id: 'phone', numeric: false, disablePadding: false, label: 'Phone' },
-  { id: 'map', numeric: false, disablePadding: false, label: 'Maps', disableSearch: true},
+  { id: 'link', numeric: false, disablePadding: false, label: 'URL' },
-  { id: 'link', numeric: false, disablePadding: false, label: 'URL' }
+  { id: 'map', numeric: false, disablePadding: false, label: 'Maps', disableSearch: true}
 ];
 
 /**
@@ -171,7 +171,10 @@ class AmbassadorsPage extends Component {
         ambassador.map = <Button
         className="App-button"
         variant="contained"
-        color="primary"
+        style={{
+            backgroundColor: "#2069b3",
+            color: 'white'
+        }}
         onClick={() => this.openMaps(
           ambassador.nickname,
           `${ambassador.city} - ${ambassador.country}`,
@@ -186,7 +189,15 @@ class AmbassadorsPage extends Component {
     return (
       <div>
         <AppHeader />
-        <h2 style={centerStyle}><FormattedMessage id="ambassadors.title" /></h2>
+
+        <div id="maincontent">
+      <section data-spy="scroll" data-target="#mainNav" id="services">
+      <div className="containerfix">
+      <div className="row">
+      <div className="col-md-10 mx-md-auto">
+
+
+        <h2 className="ambassadorsTitle" style={centerStyle}><FormattedMessage id="ambassadors.title" /></h2>
         { /* Conditional Rendering */}
             {(this.state.loading) ? (
               <img src={LoadingGif} alt="Loading" style={loadingStyle} />
@@ -237,11 +248,18 @@ class AmbassadorsPage extends Component {
                 ambassadorsLayer={true}
                 merchantsLayer={false}
                 mapHeight={'600px'}
+                ambsMap={true}
                 showControls={this.state.mapsModalIsOpen}
               />
             </div>
           </div>
         )}
+</div>
+  </div>
+</div>
+</section>
+  </div>
+
         <Footer />
       </div>
     );

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;
+}

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 (
         <div>
-        <MarketingHeader />
+        <AppHeader />
         <div id="maincontent">
         <section data-spy="scroll" data-target="#mainNav" id="services">
         <div className="containerfix">
@@ -168,6 +169,7 @@ class MarketingPage extends React.Component {
 </div>
 </section>
 </div>
+<Footer />
 </div>
   );
   }

src/components/pages/MerchantsPage.js

@@ -165,7 +165,10 @@ class MerchantsPage extends Component {
       merchant.map = <Button
         className="App-button"
         variant="contained"
-        color="primary"
+        style={{
+            backgroundColor: "#139657",
+            color: 'white'
+        }}
         onClick={() => this.openMaps(
           merchant.name,
           `${merchant.address}, ${merchant.city} - ${merchant.country}`,
@@ -180,7 +183,13 @@ class MerchantsPage extends Component {
     return (
       <div>
         <AppHeader />
-        <h2 style={centerStyle}><FormattedMessage id="merchants.title" /></h2>
+
+      <section data-spy="scroll" data-target="#mainNav" id="services">
+      <div className="containerfix">
+      <div className="row">
+      <div className="col-md-10 mx-md-auto">
+
+        <h2 className="ambassadorsTitle" style={centerStyle}><FormattedMessage id="merchants.title" /></h2>
         { /* Conditional Rendering */}
             {(this.state.loading) ? (
               <img src={LoadingGif} alt="Loading" style={loadingStyle} />
@@ -237,6 +246,10 @@ class MerchantsPage extends Component {
             </div>
           </div>
           )}
+</div>
+  </div>
+  </div>
+  </section>
         <Footer />
       </div>
     );

src/components/sections/AboutSection.js

@@ -14,15 +14,15 @@ import AboutImage5 from '../../assets/img/about/ab5.png';
 function AboutSection() {
   return (
     <section className="about bg-secondary" id="about">
-      <div className="container">
+      <div className="col-md-10 mx-md-auto">
         <div className="row align-items-center">
           <div className="col-lg-6 order-lg-2">
-            <div className="p-5">
+            <div className="margin-5">
               <img alt="" className="img-fluid" src={AboutImage1} />
             </div>
           </div>
           <div className="col-lg-6 order-lg-1">
-            <div className="p-5">
+            <div className="margin-5">
               <h2 className="about-text">
                 <span>
                   <span id="ab_lang1">
@@ -64,12 +64,12 @@ function AboutSection() {
 
         <div className="row align-items-center">
           <div className="col-lg-6">
-            <div className="p-5">
+            <div className="margin-5">
               <img alt="" className="img-fluid" src={AboutImage2} />
             </div>
           </div>
           <div className="col-lg-6">
-            <div className="p-5">
+            <div className="margin-5">
               <h2 className="about-text">
                 <span>
                   <span id="ab_lang6">
@@ -103,12 +103,12 @@ function AboutSection() {
 
         <div className="row align-items-center">
           <div className="col-lg-6 order-lg-2">
-            <div className="p-5">
+            <div className="margin-5">
               <img alt="" className="img-fluid" src={AboutImage3} />
             </div>
           </div>
           <div className="col-lg-6 order-lg-1">
-            <div className="p-5">
+            <div className="margin-5">
               <h2 className="about-text">
                 <span>
                   <span id="ab_lang10">
@@ -150,12 +150,12 @@ function AboutSection() {
 
         <div className="row align-items-center">
           <div className="col-lg-6">
-            <div className="p-5">
+            <div className="margin-5">
               <img alt="" className="img-fluid" src={AboutImage4} />
             </div>
           </div>
           <div className="col-lg-6">
-            <div className="p-5">
+            <div className="margin-5">
               <h2 className="about-text">
                 <span>
                   <span id="ab_lang15">
@@ -182,12 +182,12 @@ function AboutSection() {
 
         <div className="row align-items-center">
           <div className="col-lg-6 order-lg-2">
-            <div className="p-5">
+            <div className="margin-5">
               <img alt="" className="img-fluid" src={AboutImage5} />
             </div>
           </div>
           <div className="col-lg-6 order-lg-1">
-            <div className="p-5">
+            <div className="margin-5">
               <h2 className="display-5 about-text">
                 <span>
                   <span id="ab_lang18">

src/components/sections/MainSection.js

@@ -17,7 +17,7 @@ function MainSection() {
     <View className="vmain">
       <Mask className="d-flex justify-content-center align-items-center gradient">
         <Container className="px-md-3 px-sm-0">
-          <Row>
+          <Row className="col-md-10 mx-md-auto">
             <Col lg="10" className="mx-auto white-text text-center">
               <h1 className="text-uppercase">
                 <strong className="important">

src/components/sections/ServicesSection.js

@@ -17,7 +17,7 @@ import Retail from '../../assets/img/services/retail.png';
 function ServicesSection() {
   return (
     <section data-spy="scroll" data-target="#mainNav" id="services">
-      <div className="containerfix">
+      <div className="col-md-10 mx-md-auto">
         <div className="row">
           <div className="col-lg-12 text-center">
             <h2 className="section-heading">
@@ -30,7 +30,7 @@ function ServicesSection() {
         </div>
       </div>
       <div className="containerfix">
-        <div className="row">
+        <div className="row"  style={{ margin: 'auto' }}>
           <div className="col-lg-3 col-md-6 text-center">
             <div className="service-box mt-5 mx-auto">
               <i className="fa fa-4x text-primary mb-3 sr-icons">

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 (
       <span>
       <section className="testimonials text-center" id="testimonies">
-        <div className="container">
+        <div className="col-md-10 mx-md-auto">
           <Row>
-            <Col lg="6">
+            <Col lg="6"
+              style={{
+                border: '1px solid #128f52',
+                paddingTop: '10px',
+                paddingLeft: '0'
+            }} className ="testimoniesBox">
               <Carousel
                 className="testimonialc"
                 activeItem={activeItem}
@@ -64,7 +69,9 @@ class TestimoniesSection extends React.Component {
                 showControls={true}
                 showIndicators={true}
               >
-                <CarouselInner>
+                <CarouselInner
+                  className="testimonialbox"
+              >
                   <Row>
                     {testimonies.map( (testimony, index) => (
                       <CarouselItem itemId={index+1} key={index}>
@@ -81,7 +88,10 @@ class TestimoniesSection extends React.Component {
                 </CarouselInner>
               </Carousel>
             </Col>
-            <Col lg="6" className="mx-auto white-text text-center">
+            <Col lg="6"
+              style={{
+              paddingRight: '0' }}
+              className="mx-auto white-text text-center box-video">
               <div className="embed-responsive embed-responsive-16by9">
                 <iframe
                   className="embed-responsive-item"

src/index.css

@@ -93,7 +93,7 @@ strong.important {
   }
 }
 #testimonies {
-  padding: 14rem 0 !important;
+  padding: 10rem 0 !important;
 }
 @media (min-width: 1200px) {
   .menuc {

src/translations/en.json

@@ -45,7 +45,7 @@
   "home.services.phone_orders": "Phone Orders",
 
   "footer.title": "FASTER AND SAFER THAN CASH",
-  "footer.description": "This website is not intended as legal or financial advice, is not a guarantee of anything and we do not collect any info about you whatsoever. PalmPay is a Point Of Sale product by Agorise, Ltd. For technical details, chat anytime 24/7 with the Agorise community on Telegram at: <a target='_blank' rel='noopener noreferrer' href='http://t.me/Agorise> http://t.me/Agorise </a>",
+  "footer.description": "This website is not intended as legal or financial advice, is not a guarantee of anything and we do not collect any info about you whatsoever. PalmPay is a Point Of Sale product by Agorise, Ltd. For technical details, chat anytime 24/7 with the Agorise community on Telegram at: <a target='_blank' rel='noopener noreferrer' href='http://t.me/Agorise'> http://t.me/Agorise </a>",
 
   "marketing.button.presentations": "Presentations",
   "marketing.accordion.presentations1": "<a target='_blank' rel='noopener noreferrer' href='https://docs.google.com/presentation/d/1oYQxlKIzNHb-F07PJ04xsK0jIJcduIzc-4HMpbqAw0o/edit?usp=sharing' class='list-group-item list-group-item-action flex-column align-items-start'> <div class='d-flex w-100 justify-content-between'> <h5 class='mb-1'> Slides (ES) - Google Slides (for Meetups and Workshops etc) in Spanish </h5> </div> <p class='mb-1'> https://docs.google.com/presentation/d/1oYQxlKIzNHb-F07PJ04xsK0jIJcduIzc-4HMpbqAw0o/edit?usp=sharing </p> </a>",

src/utils/feathers.js

@@ -2,8 +2,8 @@ import feathers from '@feathersjs/client';
 
 const app = feathers();
 // Change to your production ambassador web service
-const restClient = feathers.rest('http://localhost:3030');
+// const restClient = feathers.rest('http://localhost:3030');
-
+const restClient = feathers.rest('https://palmpaybackend.leticiacamara.com');
 // Configure an Fetch AJAX library with that client. For fetch details see https://facebook.github.io/react-native/docs/network.html
 // For rest details see https://docs.feathersjs.com/api/client/rest.html
 app.configure(restClient.fetch(window.fetch));