Complete site refactoring

mx
Letícia Camara 2018-09-22 15:23:51 -03:00
commit 4bebb23794
109 changed files with 20940 additions and 0 deletions

10
.eslintrc Normal file
View File

@ -0,0 +1,10 @@
{
parser: "babel-eslint",
"plugins": [
"react"
],
"rules": {
"max-len": [1, 120, 2, {ignoreComments: true}]
},
"extends": ["eslint:recommended", "plugin:react/recommended"]
}

24
.gitignore vendored Normal file
View File

@ -0,0 +1,24 @@
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.idea
package-lock.json
yarn.lock
npm-debug.log*
yarn-debug.log*
yarn-error.log*

7
README.md Normal file
View File

@ -0,0 +1,7 @@
# PalmPay.io Website files
Feel free to copy any/all of these files if you are creating a clone site such as PalmPay.se, PalmPay.pt, PalmPay.mx, PalmPay.my, PalmPay.ca, PalmPay.pro, etc
Any questions, feel free to ping us on..
Telegram: https://t.me/Agorise
Keybase: https://keybase.io/team/Agorise

34
package.json Normal file
View File

@ -0,0 +1,34 @@
{
"name": "client",
"version": "1.0.0",
"private": true,
"dependencies": {
"@feathersjs/client": "^3.7.2",
"@material-ui/core": "^3.1.0",
"@material-ui/icons": "^3.0.1",
"country-list": "^1.1.0",
"mdbreact": "^4.7.1",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-google-maps": "^9.4.5",
"react-intl": "^2.6.0",
"react-modal": "^3.5.1",
"react-ripples": "^1.1.2",
"react-router-dom": "^4.3.1",
"react-scripts": "^1.1.5",
"react-scroll": "^1.7.10",
"recompose": "^0.30.0",
"sort-by": "^1.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom --watchAll",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-eslint": "^9.0.0",
"eslint": "^5.6.0",
"eslint-plugin-react": "^7.11.1"
}
}

Binary file not shown.

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

91
public/index.html Normal file
View File

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>PalmPay</title>
<!-- FB Open Graph data -->
<meta property="og:title" content="PalmPay">
<meta property="og:type" content="website">
<meta property="og:image" content="http://palmpay.io/PalmPayIO.png">
<meta property="og:description" content="Cryptocurrencies bring Global Sales; Bitcoin Cash, bitUSD, bitEUR, bitRUB, bitXCD, bitSilver, Steem, Litecoin and more.">
<meta property="og:url" content="http://palmpay.io/">
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="PalmPay">
<meta name="twitter:description" content="Cryptocurrencies bring Global Sales; Bitcoin Cash, bitUSD, bitEUR, bitRUB, bitXCD, bitSilver, Steem, Litecoin and more.">
<meta name="twitter:image" content="http://palmpay.io/PalmPayIO.png">
<meta name="twitter:url" content="http://palmpay.io/">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="apple-mobile-web-app-title" content="PalmPay">
<meta name="application-name" content="PalmPay">
<meta name="msapplication-TileColor" content="#128f52">
<meta name="msapplication-TileImage" content="/mstile-144x144.png?v4=eE58gaorm5">
<meta name="theme-color" content="#29b872">
<!--script src="js/react-with-addons.js"></script>
<script src="js/react-dom.js"></script>
<script src="js/react-simplehtmlparser.min.js"></script>
<script src="js/react-language-selector.js"></script-->
</head>
<body id="home">
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<span id="root"></span>
<!-- React Language Selector -->
<!--script type="text/javascript">
var lang = new React.LS('en_US');
lang.ready(function () {
//List of languages
var rlsui_languages = [
{
id: 'en_US',
langfile: 'js/languages/en.json',
title: 'EN',
name: 'EN',
flagImg: 'img/flags/us.png',
flagTitle: 'United States'
},
{
id: 'el_GR',
langfile: 'js/languages/el.json',
title: 'GR',
name: 'GR',
flagImg: 'img/flags/gr.png',
flagTitle: 'Greece'
},
/*
{
//id for loaded language pack also can be 'fr'
id: 'fr_FR',
//path to language pack
langfile: 'languages/fr.json',
title: 'French',
name: 'French',
flagImg: 'img/flags/fr.png',
flagTitle: 'French'
},*/
];
//main part for loading language selector ui
ReactDOM.render(React.createElement(lang.UI, {
items: rlsui_languages,
selectedLang: window.lang.currentLang(),
showFlag: false,
onLanguageChanged: function (rlsui_lang) {
lang.set_load_lang(rlsui_lang.id, rlsui_lang.langfile);
}
}), document.getElementById('langs'));
});</script-->
</body>
</html>

15
public/manifest.json Normal file
View File

@ -0,0 +1,15 @@
{
"short_name": "React App",
"name": "PalmPay",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

229
src/assets/css/csslider.css Normal file
View File

@ -0,0 +1,229 @@
.csslider {
position: relative;
margin-bottom: 22px;
}
.csslider > input {
display: none;
}
.csslider > input:nth-of-type(10):checked ~ ul li:first-of-type {
margin-left: -900%;
}
.csslider > input:nth-of-type(9):checked ~ ul li:first-of-type {
margin-left: -800%;
}
.csslider > input:nth-of-type(8):checked ~ ul li:first-of-type {
margin-left: -700%;
}
.csslider > input:nth-of-type(7):checked ~ ul li:first-of-type {
margin-left: -600%;
}
.csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
margin-left: -500%;
}
.csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
margin-left: -400%;
}
.csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
margin-left: -300%;
}
.csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
margin-left: -200%;
}
.csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
margin-left: -100%;
}
.csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
margin-left: 0%;
}
.csslider > ul {
position: relative;
width: 100%;
height: 300px;
z-index: 1;
font-size: 0;
line-height: 0;
margin: 0 auto;
padding: 0;
overflow: hidden;
white-space: nowrap;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.csslider > ul > li {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 15px;
font-size: initial;
line-height: normal;
-moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
vertical-align: top;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: normal;
}
.csslider > ul > li.scrollable {
overflow-y: scroll;
}
.csslider > .navigation {
position: absolute;
bottom: -8px;
left: 50%;
z-index: 10;
margin-bottom: -10px;
font-size: 0;
line-height: 0;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider > .navigation > div {
margin-left: -100%;
}
.csslider > .navigation label {
position: relative;
display: inline-block;
cursor: pointer;
border-radius: 50%;
margin: 0 8px;
padding: 8px;
background: #3a3a3a;
}
.csslider > .navigation label:hover:after {
opacity: 1;
}
.csslider > .navigation label:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
margin-left: -10px;
margin-top: -10px;
background: #71ad37;
border-radius: 50%;
padding: 10px;
opacity: 0;
}
.csslider > .arrows {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.csslider.inside .navigation {
bottom: 10px;
margin-bottom: 10px;
}
.csslider.inside .navigation label {
border: 1px solid #7e7e7e;
}
.csslider > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after,
.csslider > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after,
.csslider > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after,
.csslider > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after,
.csslider > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5):after,
.csslider > input:nth-of-type(6):checked ~ .navigation label:nth-of-type(6):after,
.csslider > input:nth-of-type(7):checked ~ .navigation label:nth-of-type(7):after,
.csslider > input:nth-of-type(8):checked ~ .navigation label:nth-of-type(8):after,
.csslider > input:nth-of-type(9):checked ~ .navigation label:nth-of-type(9):after,
.csslider > input:nth-of-type(10):checked ~ .navigation label:nth-of-type(10):after,
.csslider > input:nth-of-type(11):checked ~ .navigation label:nth-of-type(11):after {
opacity: 1;
}
.csslider > .arrows {
position: absolute;
left: -31px;
top: 50%;
width: 100%;
height: 26px;
padding: 0 31px;
z-index: 0;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.csslider > .arrows label {
display: none;
position: absolute;
top: -50%;
padding: 13px;
box-shadow: inset 2px -2px 0 1px #3a3a3a;
cursor: pointer;
-moz-transition: box-shadow 0.15s, margin 0.15s;
-o-transition: box-shadow 0.15s, margin 0.15s;
-webkit-transition: box-shadow 0.15s, margin 0.15s;
transition: box-shadow 0.15s, margin 0.15s;
}
.csslider > .arrows label:hover {
box-shadow: inset 3px -3px 0 2px #71ad37;
margin: 0 0px;
}
.csslider > .arrows label:before {
content: '';
position: absolute;
top: -100%;
left: -100%;
height: 300%;
width: 300%;
}
.csslider.infinity > input:first-of-type:checked ~ .arrows label.goto-last,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(0),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(1),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(4),
.csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(5),
.csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(6),
.csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(7),
.csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(8),
.csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(9),
.csslider > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(10) {
display: block;
left: 0;
right: auto;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.csslider.infinity > input:last-of-type:checked ~ .arrows label.goto-first,
.csslider > input:nth-of-type(1):checked ~ .arrows > label:nth-of-type(2),
.csslider > input:nth-of-type(2):checked ~ .arrows > label:nth-of-type(3),
.csslider > input:nth-of-type(3):checked ~ .arrows > label:nth-of-type(4),
.csslider > input:nth-of-type(4):checked ~ .arrows > label:nth-of-type(5),
.csslider > input:nth-of-type(5):checked ~ .arrows > label:nth-of-type(6),
.csslider > input:nth-of-type(6):checked ~ .arrows > label:nth-of-type(7),
.csslider > input:nth-of-type(7):checked ~ .arrows > label:nth-of-type(8),
.csslider > input:nth-of-type(8):checked ~ .arrows > label:nth-of-type(9),
.csslider > input:nth-of-type(9):checked ~ .arrows > label:nth-of-type(10),
.csslider > input:nth-of-type(10):checked ~ .arrows > label:nth-of-type(11),
.csslider > input:nth-of-type(11):checked ~ .arrows > label:nth-of-type(12) {
display: block;
right: 0;
left: auto;
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
/*#region MODULES */
/*#endregion */

14267
src/assets/css/mdb.css Normal file

File diff suppressed because it is too large Load Diff

26
src/assets/css/mdb.min.css vendored Normal file

File diff suppressed because one or more lines are too long

352
src/assets/css/palmpay.css Normal file
View File

@ -0,0 +1,352 @@
/*!
* PalmPay - v1.0.0 ()
* Copyright 2018 poqdavid
* Licensed under GPLv3 (http://palmpay.io/LICENSE.txt)
*/
@font-face {
font-family: "PFBeauSansPro";
src: local("PFBeauSansPro"), local("PFBeauSansPro"), url("../font/pfb/PFBeauSansPro-Reg.ttf");
font-weight: 400; }
@font-face {
font-family: "PFBeauSansPro";
src: local("PFBeauSansPro SeBold"), local("PFBeauSansPro-SeBold"), url("../font/pfb/PFBeauSansPro-SeBold.ttf");
font-weight: 600; }
@font-face {
font-family: "PFBeauSansPro";
src: local("PFBeauSansPro Bold"), local("PFBeauSansPro-Bold"), url("../font/pfb/PFBeauSansPro-Bold.ttf");
font-weight: 700; }
body,
html {
width: 100%;
height: 100%; }
body {
font-family: 'PFBeauSansPro', sans-serif !important; }
hr {
max-width: 50px;
border-width: 3px;
border-color: #128f52; }
hr.light {
border-color: #fff; }
a {
color: #128f52;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s; }
a:hover {
color: #128f52; }
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'PFBeauSansPro', sans-serif !important; }
p {
font-family: 'PFBeauSansPro', sans-serif !important; }
.bg-primary {
background-color: #128f52 !important; }
.bg-secondary {
background-color: #F0F0F0 !important; }
.bg-dark {
background-color: #212529 !important; }
.text-faded {
color: rgba(255, 255, 255, 0.7); }
section {
padding: 8rem 0; }
.section-heading {
margin-top: 0; }
::-moz-selection {
color: #fff;
background: #212529;
text-shadow: none; }
::selection {
color: #fff;
background: #212529;
text-shadow: none; }
img::selection {
color: #fff;
background: transparent; }
img::-moz-selection {
color: #fff;
background: transparent; }
.containerfix {
width: 100%;
padding-right: 0px;
padding-left: 0px;
margin-right: auto;
margin-left: auto;
overflow: hidden; }
#mainNav {
border-bottom: 1px solid rgba(33, 37, 41, 0.1);
background-color: #128f52;
font-family: 'PFBeauSansPro', sans-serif !important;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
padding-top: 25px;
padding-bottom: 25px; }
#mainNav .navbar-brand {
font-weight: 700;
text-transform: uppercase !important;
color: #128f52;
font-family: 'PFBeauSansPro', sans-serif !important; }
#mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
color: #128f52; }
#mainNav .navbar-lang {
color: #fff;
background-color: #128f52;
padding: 0.5rem 1rem;
cursor: pointer; }
#mainNav .navbar-textsmall {
font-size: .7rem !important; }
#mainNav .expand_caret {
position: absolute !important;
-webkit-transition: 2s ease-in-out !important;
-moz-transition: 2s ease-in-out !important;
-o-transition: 2s ease-in-out !important;
transition: 2s ease-in-out !important; }
#mainNav .rlsui-selected-locale:hover.dropdown-toggle::after {
display: inline-block;
width: 0;
height: 0;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;
-moz-transform: rotate(180deg) !important;
-o-transform: rotate(180deg) !important;
-ms-transform: rotate(180deg) !important;
transform: rotate(180deg) !important; }
#mainNav .navbar-nav > li.nav-item > a.nav-link,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
font-size: .9rem;
font-weight: 700;
text-transform: uppercase !important;
color: #fff; }
#mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
color: #fec810;
cursor: pointer; }
#mainNav .navbar-nav > li.nav-item > a.nav-link.active,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active {
color: #fec810 !important;
background-color: transparent; }
#mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active:hover {
background-color: transparent; }
@media (max-width: 992px) {
#mainNav {
padding-top: 0px;
padding-bottom: 0px; }
#mainNav .navbar-brand .logo1 {
display: none !important; }
#mainNav .navbar-brand .logo2 {
display: inline !important; } }
@media (min-width: 992px) {
#mainNav {
border-color: transparent;
background-color: transparent; }
#mainNav .navbar-brand {
color: rgba(18, 143, 82, 0.7); }
#mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
color: #fff; }
#mainNav .navbar-nav > li.nav-item > a.nav-link {
padding: 0.5rem 1rem; }
#mainNav .navbar-nav > li.nav-item > a.nav-link,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
color: #fff; }
#mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
#mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
color: #fec810;
cursor: pointer; }
#mainNav.navbar-shrink {
border-bottom: 1px solid rgba(33, 37, 41, 0.1);
background-color: #128f52;
padding-top: 0px;
padding-bottom: 0px; }
#mainNav.navbar-shrink .navbar-brand {
color: #fff; }
#mainNav.navbar-shrink .navbar-brand:focus, #mainNav.navbar-shrink .navbar-brand:hover {
color: #fec810;
cursor: pointer; }
#mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link,
#mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus {
color: #fff; }
#mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:hover,
#mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus:hover {
color: #fec810;
cursor: pointer; } }
header.masthead {
padding-top: 10rem;
padding-bottom: calc(10rem - 56px);
background-image: url("../img/header/header-bg.jpg");
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
header.masthead hr {
margin-top: 30px;
margin-bottom: 30px; }
.view h1 {
font-size: 2rem !important; }
.view p {
font-weight: 300 !important; }
@media (min-width: 768px) {
.view p {
font-size: 1.15rem !important; } }
@media (min-width: 992px) {
header.masthead {
height: 100vh;
min-height: 650px;
padding-top: 0;
padding-bottom: 0; }
.view h1 {
font-size: 3rem !important; } }
@media (min-width: 1200px) {
.view h1 {
font-size: 4rem !important; }
}
.service-box {
max-width: 400px; }
.service-box img {
border: 2px solid #128f52;
border-radius: 50%; }
.service-box img:hover {
border: 2px solid #fec810; }
.text-primary {
color: #128f52 !important; }
.btn {
font-weight: 700;
text-transform: uppercase;
border: none;
border-radius: 300px;
font-family: 'PFBeauSansPro', sans-serif !important; }
.btn-xl {
padding: 1rem 2rem; }
.btn-primary {
background-color: #128f52 !important;
border-color: #128f52 !important; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
color: #fff;
background-color: #0f7845 !important; }
.btn-primary:active, .btn-primary:focus {
box-shadow: 0 0 0 0.2rem rgba(240, 95, 64, 0.5) !important; }
.about {
font-family: 'PFBeauSansPro'; }
.about .about-text {
color: black; }
.about .about-img {
min-height: 30rem;
background-size: cover; }
@media (min-width: 768px) {
.about .about-text {
color: black; } }
.about h1,
.about h2,
.about h3,
.about h4,
.about h5,
.about h6 {
font-family: 'PFBeauSansPro';
font-weight: 800 !important; }
.footerrow {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: #128f52;
color: #fff; }
.copyright {
background-color: #212529;
padding-left: 6rem;
padding-right: 6rem;
}
ul.social-buttons {
margin-bottom: 0; }
ul.social-buttons li a {
font-size: 20px;
line-height: 40px;
display: block;
width: 40px;
height: 40px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
color: white;
border-radius: 100%;
outline: none;
background-color: #0c6238; }
ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
background-color: #fec810; }
.vertical-align {
display: flex;
flex-direction: row; }
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: center; }
.fa-dtube {
background-image: url("../img/footer/dtube.png") no-repeat 0 0; }
.fa-steemit {
background-image: url("../img/footer/steemit.png") no-repeat 0 0; }
.testimonial-item i {
font-size: 80px;
color: #128f52;
padding-bottom: 15px; }
@media (min-width: 1200px) {
.pr-xl-6, .px-xl-6 {
padding-right: 8rem !important;
}
.pl-xl-6, .px-xl-6 {
padding-left: 8rem !important;
}
.pr-xl-7, .px-xl-7 {
padding-right: 12rem !important;
}
.pl-xl-7, .px-xl-7 {
padding-left: 12rem !important;
}
}

5
src/assets/css/palmpay.min.css vendored Normal file

File diff suppressed because one or more lines are too long

101
src/assets/css/tooltip.css Normal file
View File

@ -0,0 +1,101 @@
/*
* {
box-sizing: border-box;
}
body,
html {
width: 100%;
height: 100%;
margin: 0;
}
select {
margin-bottom: 3rem;
}
.popper {
background: #222;
color: white;
width: 150px;
border-radius: 2px;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
padding: 5px;
}
.popper .popper__arrow, .popover .popover__arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
}
.popper[data-placement^="top"], .popover[data-placement^="top"] {
margin-bottom: 5px;
}
.popper[data-placement^="top"] .popper__arrow, .popover[data-placement^="top"] .popover__arrow {
border-width: 5px 5px 0 5px;
border-color: #222 transparent transparent transparent;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.popover[data-placement^="top"] .popover__arrow {
border-color: #fff transparent transparent transparent;
}
.popper[data-placement^="bottom"], .popover[data-placement^="bottom"] {
margin-top: 5px;
}
.popper[data-placement^="bottom"] .popper__arrow, .popover[data-placement^="bottom"] .popover__arrow {
border-width: 0 5px 5px 5px;
border-color: transparent transparent #222 transparent;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.popover[data-placement^="bottom"] .popover__arrow {
border-color: transparent transparent #fff transparent;
}
.popper[data-placement^="right"], .popover[data-placement^="right"] {
margin-left: 5px;
}
.popper[data-placement^="right"] .popper__arrow, .popover[data-placement^="right"] .popover__arrow {
border-width: 5px 5px 5px 0;
border-color: transparent #222 transparent transparent;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.popover[data-placement^="right"] .popover__arrow {
border-color: transparent #fff transparent transparent;
}
.popper[data-placement^="left"], .popover[data-placement^="left"] {
margin-right: 5px;
}
.popper[data-placement^="left"] .popper__arrow, .popover[data-placement^="left"] .popover__arrow {
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent #222;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.popover[data-placement^="left"] .popover__arrow {
border-color: transparent transparent transparent #fff;
}
*/

Binary file not shown.

Binary file not shown.

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 434 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 190 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 243 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 196 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 250 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 215 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 297 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 362 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

84
src/components/App.js Normal file
View File

@ -0,0 +1,84 @@
import React from 'react';
import { Events, animateScroll as scroll, scrollSpy } from 'react-scroll';
import { Route, Switch } from 'react-router-dom';
// Custom components
import {
AmbassadorsPage,
HomePage,
MarketingPage,
MerchantsPage,
NotFoundPage
} from './pages';
/**
* The main App component - Route all the pages.
*/
class App extends React.Component {
constructor(props) {
super(props);
this.state = { showmenu: true };
this.state = {
collapse: false,
modal2: false
};
this.onClick = this.onClick.bind(this);
this.handleNavbarClick = this.handleNavbarClick.bind(this);
}
onClick() {
this.setState({
collapse: !this.state.collapse
});
}
handleNavbarClick() {
this.setState({
collapse: false
});
}
componentDidMount() {
scrollSpy.update();
}
componentWillUnmount() {
Events.scrollEvent.remove("begin");
Events.scrollEvent.remove("end");
}
scrollToTop() {
scroll.scrollToTop();
}
scrollToBottom() {
scroll.scrollToBottom();
}
scrollTo() {
scroll.scrollTo(100);
}
scrollMore() {
scroll.scrollMore(100);
}
render() {
const collapsed = this.state.collapsed;
const overlay = (
<div
id="sidenav-overlay"
style={{ backgroundColor: "transparent" }}
onClick={this.handleNavbarClick}
/>
);
return (
<span id="apppage">
<Switch>
<Route exact path="/" title="Palmpay" component={HomePage} />
<Route exact path="/ambs" title="PalmPay Ambassadors" component={AmbassadorsPage} />
<Route exact path="/marketing" title="PalmPay Marketing" component={MarketingPage} />
<Route exact path="/merchants" title="PalmPay Merchants" component={MerchantsPage} />
<Route title="PalmPay Page Not Found" component={NotFoundPage} />
</Switch>
{collapsed && overlay}
</span>
);
}
}
export default App;

View File

@ -0,0 +1,28 @@
import React from 'react';
import { Link } from 'react-router-dom';
//Material UI Components
import AppBar from '@material-ui/core/AppBar';
import Typography from '@material-ui/core/Typography';
import Toolbar from '@material-ui/core/Toolbar';
import AppLogo from '../assets/img/header/logo.png';
/**
* The header of some pages: MerchantsPage, AmbassadorsPage and NotFoundPage.
*/
function AppHeader() {
return (
<AppBar position="static" color="inherit" style={{backgroundColor: '#138F52'}}>
<Toolbar>
<Typography style={{margin: '0 auto'}} variant="title" color="inherit">
<Link to="/">
<img src={AppLogo} className="app-book-menu-remove-icon" alt="Palmpay logo" />
</Link>
</Typography>
</Toolbar>
</AppBar>
);
}
export default AppHeader;

View File

@ -0,0 +1,88 @@
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import TextField from '@material-ui/core/TextField';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
import InputAdornment from '@material-ui/core/InputAdornment';
import {
Search
} from '@material-ui/icons';
/**
* This object is used for type checking the props of the component.
*/
const propTypes = {
query: PropTypes.string.isRequired,
columns: PropTypes.array.isRequired,
onUpdateQuery: PropTypes.func.isRequired,
onColumnChange: PropTypes.func.isRequired,
};
const styles = theme => ({
root: {
display: 'flex',
flexWrap: 'wrap',
},
margin: {
margin: theme.spacing.unit,
},
textField: {
flexBasis: 280,
},
});
/**
* @description The Search page component of the table.
* @constructor
* @param {Object} props - The props that were defined by the caller of this component.
*/
class EnhancedSearch extends Component {
render() {
const {query, onUpdateQuery, onColumnChange} = this.props;
const { classes } = this.props;
return (
<div className="search-books">
<div className="search-books-bar">
<div className="search-books-input-wrapper" style={{ textAlign: 'left', marginLeft: 20}}>
<TextField
style={{ textAlign: 'left', width: 350}}
id="outlined-adornment-weight"
className={classNames(classes.margin, classes.textField)}
variant="outlined"
label="Search"
placeholder="Enter search term"
value={query}
onChange={(event) => onUpdateQuery(event.target.value)}
InputProps={{
startAdornment: <InputAdornment position="start"><Search /></InputAdornment>,
}}
/>
<br />
{this.props.showSearchColumns && this.props.columns.map(column => (
<FormControlLabel
key={column.name}
control={
<Checkbox
checked={column.checked}
onChange={onColumnChange(column.name)}
color="primary"
/>
}
label={column.name}
/>
))}
</div>
</div>
</div>
);
};