lukechilds
/
zap-desktop
mirror of https://github.com/lukechilds/zap-desktop.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

feature(navbar): mock MVP navbar styles

renovate/lint-staged-8.x
Jack Mallers 8 years ago
parent
c05f5434f9
commit
28872adb5f
24 changed files with 347 additions and 256 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 41
      app/actions/counter.js
  2. 39
      app/app.global.css
  3. 24
      app/app.global.scss
  4. 4
      app/app.html
  5. 37
      app/components/Counter.css
  6. 42
      app/components/Counter.js
  7. 14
      app/components/Home.css
  8. 16
      app/components/Home.js
  9. 16
      app/containers/CounterPage.js
  10. 11
      app/containers/HomePage.js
  11. 2
      app/index.js
  12. 33
      app/keyframes.scss
  13. 21
      app/reducers/counter.js
  14. 12
      app/reducers/index.js
  15. 48
      app/reset.scss
  16. 12
      app/routes.js
  17. 66
      app/routes/home/components/Home.js
  18. 104
      app/routes/home/components/Home.scss
  19. 8
      app/routes/home/containers/HomeContainer.js
  20. 3
      app/routes/home/index.js
  21. 5
      app/store/configureStore.dev.js
  22. 4
      app/variables.scss
  23. 39
      package-lock.json
  24. 2
      package.json

41
app/actions/counter.js
View File

@ -1,41 +0,0 @@
// @flow
import type { counterStateType } from '../reducers/counter';
type actionType = {
+type: string
};
export const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
export const DECREMENT_COUNTER = 'DECREMENT_COUNTER';
export function increment() {
return {
type: INCREMENT_COUNTER
};
}
export function decrement() {
return {
type: DECREMENT_COUNTER
};
}
export function incrementIfOdd() {
return (dispatch: (action: actionType) => void, getState: () => counterStateType) => {
const { counter } = getState();
if (counter % 2 === 0) {
return;
}
dispatch(increment());
};
}
export function incrementAsync(delay: number = 1000) {
return (dispatch: (action: actionType) => void) => {
setTimeout(() => {
dispatch(increment());
}, delay);
};
}

39
app/app.global.css
View File

@ -1,39 +0,0 @@
@import "~font-awesome/css/font-awesome.css";
body {
position: relative;
color: white;
height: 100vh;
background-color: #000;
background-image: linear-gradient(45deg, rgba(29, 29, 29, 0.5) 10%, rgba(235, 184, 100, 0.7));
font-family: Arial, Helvetica, Helvetica Neue, serif;
overflow-y: hidden;
}
h2 {
margin: 0;
font-size: 2.25rem;
font-weight: bold;
letter-spacing: -0.025em;
color: #fff;
}
p {
font-size: 24px;
}
li {
list-style: none;
}
a {
color: white;
opacity: 0.75;
text-decoration: none;
}
a:hover {
opacity: 1;
text-decoration: none;
cursor: pointer;
}

24
app/app.global.scss
View File

@ -0,0 +1,24 @@
@import "~font-awesome/css/font-awesome.css";
@import 'reset.scss';
@import 'variables.scss';
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Fl4y0QdOxyyTHEGMXX8kcaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
body {
position: relative;
overflow-y: hidden;
margin: 0;
padding: 0;
// background: linear-gradient(to bottom, $grey 0%, $black 100%);
color: $white;
height: 100vh;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(255,255,255,0);
font-family: 'Roboto';
}

4
app/app.html
View File

@ -3,6 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Hello Electron React!</title> <title>Hello Electron React!</title>
<link rel="stylesheet" href="https://s3.amazonaws.com/fonts.typotheque.com/WF-018717-007225.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Raleway:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Noto+Sans:400,700|Roboto:300' rel='stylesheet' type='text/css'>
<script> <script>
(function() { (function() {
if (!process.env.HOT) { if (!process.env.HOT) {

37
app/components/Counter.css
View File

@ -1,37 +0,0 @@
.backButton {
position: absolute;
}
.counter {
position: absolute;
top: 30%;
left: 45%;
font-size: 10rem;
font-weight: bold;
letter-spacing: -0.025em;
}
.btnGroup {
position: relative;
top: 500px;
width: 480px;
margin: 0 auto;
}
.btn {
font-size: 1.6rem;
font-weight: bold;
background-color: #fff;
border-radius: 50%;
margin: 10px;
width: 100px;
height: 100px;
opacity: 0.7;
cursor: pointer;
font-family: Arial, Helvetica, Helvetica Neue;
}
.btn:hover {
color: white;
background-color: rgba(0, 0, 0, 0.5);
}

42
app/components/Counter.js
View File

@ -1,42 +0,0 @@
// @flow
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import styles from './Counter.css';
class Counter extends Component {
props: {
increment: () => void,
incrementIfOdd: () => void,
incrementAsync: () => void,
decrement: () => void,
counter: number
};
render() {
const { increment, incrementIfOdd, incrementAsync, decrement, counter } = this.props;
return (
<div>
<div className={styles.backButton} data-tid="backButton">
<Link to="/">
<i className="fa fa-arrow-left fa-3x" />
</Link>
</div>
<div className={`counter ${styles.counter}`} data-tid="counter">
{counter}
</div>
<div className={styles.btnGroup}>
<button className={styles.btn} onClick={increment} data-tclass="btn">
<i className="fa fa-plus" />
</button>
<button className={styles.btn} onClick={decrement} data-tclass="btn">
<i className="fa fa-minus" />
</button>
<button className={styles.btn} onClick={incrementIfOdd} data-tclass="btn">odd</button>
<button className={styles.btn} onClick={() => incrementAsync()} data-tclass="btn">async</button>
</div>
</div>
);
}
}
export default Counter;

14
app/components/Home.css
View File

@ -1,14 +0,0 @@
.container {
position: absolute;
top: 30%;
left: 10px;
text-align: center;
}
.container h2 {
font-size: 5rem;
}
.container a {
font-size: 1.4rem;
}

16
app/components/Home.js
View File

@ -1,16 +0,0 @@
// @flow
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import styles from './Home.css'
export default class Home extends Component {
render() {
return (
<div>
<div className={styles.container} data-tid="container">
</div>
</div>
);
}
}

16
app/containers/CounterPage.js
View File

@ -1,16 +0,0 @@
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Counter from '../components/Counter';
import * as CounterActions from '../actions/counter';
function mapStateToProps(state) {
return {
counter: state.counter
};
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(CounterActions, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

11
app/containers/HomePage.js
View File

@ -1,11 +0,0 @@
// @flow
import React, { Component } from 'react';
import Home from '../components/Home';
export default class HomePage extends Component {
render() {
return (
<Home />
);
}
}

2
app/index.js
View File

@ -3,7 +3,7 @@ import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader'; import { AppContainer } from 'react-hot-loader';
import Root from './containers/Root'; import Root from './containers/Root';
import { configureStore, history } from './store/configureStore'; import { configureStore, history } from './store/configureStore';
import './app.global.css'; import './app.global.scss';
const store = configureStore(); const store = configureStore();

33
app/keyframes.scss
View File

@ -0,0 +1,33 @@
@import 'variables';
@keyframes fadeinOutD6 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(6deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes fadeinOutD13 {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(13deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes colorchange {
0% { color: $white; }
25% { color: $gold; }
50% { color: $white; }
75% { color: $gold; }
100% { color: $white; }
}

21
app/reducers/counter.js
View File

@ -1,21 +0,0 @@
// @flow
import { INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions/counter';
export type counterStateType = {
+counter: number
};
type actionType = {
+type: string
};
export default function counter(state: number = 0, action: actionType) {
switch (action.type) {
case INCREMENT_COUNTER:
return state + 1;
case DECREMENT_COUNTER:
return state - 1;
default:
return state;
}
}

12
app/reducers/index.js
View File

@ -1,11 +1,9 @@
// @flow // @flow
import { combineReducers } from 'redux'; import { combineReducers } from 'redux'
import { routerReducer as router } from 'react-router-redux'; import { routerReducer as router } from 'react-router-redux'
import counter from './counter';
const rootReducer = combineReducers({ const rootReducer = combineReducers({
counter, router
router, })
});
export default rootReducer; export default rootReducer

48
app/reset.scss
View File

@ -0,0 +1,48 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

12
app/routes.js
View File

@ -1,15 +1,13 @@
/* eslint flowtype-errors/show-errors: 0 */ /* eslint flowtype-errors/show-errors: 0 */
import React from 'react'; import React from 'react'
import { Switch, Route } from 'react-router'; import { Switch, Route } from 'react-router'
import App from './containers/App'; import App from './containers/App'
import HomePage from './containers/HomePage'; import Home from './routes/home'
import CounterPage from './containers/CounterPage';
export default () => ( export default () => (
<App> <App>
<Switch> <Switch>
<Route path="/counter" component={CounterPage} /> <Route path='/' component={Home} />
<Route path="/" component={HomePage} />
</Switch> </Switch>
</App> </App>
); );

66
app/routes/home/components/Home.js
View File

@ -0,0 +1,66 @@
// @flow
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import ReactSVG from 'react-svg'
import { MdAccountBalanceWallet, MdSettings } from 'react-icons/lib/md'
import { FaClockO, FaBitcoin, FaDollar } from 'react-icons/lib/fa'
import styles from './Home.scss'
class Home extends Component {
render() {
return (
<div className={styles.container} data-tid='container'>
<nav className={styles.nav}>
<ul className={styles.info}>
<li className={`${styles.currencies} ${styles.link}`}>
<span className={`${styles.currency} ${styles.btc}`}>
<FaBitcoin />
</span>
<span className={`${styles.currency} ${styles.usd}`}>
<FaDollar />
</span>
</li>
<li className={`${styles.logo} ${styles.link}`}>
<ReactSVG path='../resources/zap_2.svg' />
</li>
<li className={`${styles.wallet} ${styles.link}`}>
<span>
$56.13
</span>
</li>
</ul>
<ul className={styles.links}>
<li className={styles.link}>
<FaClockO />
<span>Activity</span>
</li>
<li className={styles.link}>
<MdAccountBalanceWallet />
<span>Wallet</span>
</li>
<li className={styles.link}>
<MdSettings />
<span>Settings</span>
</li>
</ul>
<div className={styles.buttons}>
<div className={styles.button}>
<span>Pay</span>
</div>
<div className={styles.button}>
<span>Request</span>
</div>
</div>
</nav>
<div className={styles.content}>
</div>
</div>
)
}
}
export default Home

104
app/routes/home/components/Home.scss
View File

@ -0,0 +1,104 @@
.nav {
display: inline-block;
width: 15%;
padding: 10px;
font-size: 32px;
background: #1d1d1d;
height: 100vh;
position: relative;
}
.info {
margin-bottom: 50%;
.link {
display: inline-block;
vertical-align: top;
list-style-type: none;
width: 33.3%;
cursor: pointer;
}
}
.currency {
margin: 0 5px;
&.usd {
color: #ebb864;
font-weight: bold;
}
}
.logo {
text-align: center;
margin-top: 50px;
svg {
width: 100px;
height: 100px;
}
}
.wallet {
text-align: right;
color: #ebb864;
}
.links {
width: 50%;
margin: 0 auto;
.link {
margin-bottom: 20px;
padding: 0 10px;
opacity: 0.5;
cursor: pointer;
&:first-child {
color: #ebb864;
opacity: 1.0;
}
svg {
width: 22px;
height: 22px;
}
span {
margin-left: 15px;
line-height: 22px;
font-size: 18px;
font-weight: 500;
letter-spacing: .2px;
}
}
}
.buttons {
width: 75%;
font-size: 18px;
position: absolute;
bottom: 10px;
right: 12.5%;
}
.button {
text-align: center;
border-radius: 8px;
background: #ebb864;
margin-bottom: 20px;
padding: 20px 10px;
font-weight: bold;
cursor: pointer;
text-transform: uppercase;
letter-spacing: .2px;
&:hover {
background: lighten(#ebb864, 5%);
}
}
.content {
width: 80%;
}

8
app/routes/home/containers/HomeContainer.js
View File

@ -0,0 +1,8 @@
import { connect } from 'react-redux'
import Home from '../components/Home'
const mapDispatchToProps = {}
const mapStateToProps = (state) => ({})
export default connect(mapStateToProps, mapDispatchToProps)(Home)

3
app/routes/home/index.js
View File

@ -0,0 +1,3 @@
import HomeContainer from './containers/HomeContainer'
export default HomeContainer

5
app/store/configureStore.dev.js
View File

@ -4,8 +4,6 @@ import { createHashHistory } from 'history';
import { routerMiddleware, routerActions } from 'react-router-redux'; import { routerMiddleware, routerActions } from 'react-router-redux';
import { createLogger } from 'redux-logger'; import { createLogger } from 'redux-logger';
import rootReducer from '../reducers'; import rootReducer from '../reducers';
import * as counterActions from '../actions/counter';
import type { counterStateType } from '../reducers/counter';
const history = createHashHistory(); const history = createHashHistory();
@ -30,8 +28,7 @@ const configureStore = (initialState?: counterStateType) => {
// Redux DevTools Configuration // Redux DevTools Configuration
const actionCreators = { const actionCreators = {
...counterActions, ...routerActions
...routerActions,
}; };
// If Redux DevTools Extension is installed use it, otherwise use Redux compose // If Redux DevTools Extension is installed use it, otherwise use Redux compose
/* eslint-disable no-underscore-dangle */ /* eslint-disable no-underscore-dangle */

4
app/variables.scss
View File

@ -0,0 +1,4 @@
$white: #fff;
$black: #000;
$grey: #1d1d1d;
$gold: #ebb864;

39
package-lock.json
View File

@ -12247,6 +12247,32 @@
"source-map": "0.4.4" "source-map": "0.4.4"
} }
}, },
"react-icon-base": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/react-icon-base/-/react-icon-base-2.0.7.tgz",
"integrity": "sha1-C9GHNr1s55ym1pzoOHoH+41M7/4=",
"requires": {
"prop-types": "15.5.8"
},
"dependencies": {
"prop-types": {
"version": "15.5.8",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.5.8.tgz",
"integrity": "sha1-a3suFBCDvjjIWVqlH8VXdccZk5Q=",
"requires": {
"fbjs": "0.8.12"
}
}
}
},
"react-icons": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-2.2.5.tgz",
"integrity": "sha1-+UJQHCGkzARWziu+5QMsk/YFHc8=",
"requires": {
"react-icon-base": "2.0.7"
}
},
"react-inline-svg": { "react-inline-svg": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/react-inline-svg/-/react-inline-svg-1.1.0.tgz", "resolved": "https://registry.npmjs.org/react-inline-svg/-/react-inline-svg-1.1.0.tgz",
@ -12309,6 +12335,14 @@
"react-router": "4.1.2" "react-router": "4.1.2"
} }
}, },
"react-svg": {
"version": "2.1.21",
"resolved": "https://registry.npmjs.org/react-svg/-/react-svg-2.1.21.tgz",
"integrity": "sha1-DK80ACZJVCln8E4ZdIDXhHaOkUw=",
"requires": {
"svg-injector": "1.1.3"
}
},
"react-test-renderer": { "react-test-renderer": {
"version": "15.6.1", "version": "15.6.1",
"resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-15.6.1.tgz", "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-15.6.1.tgz",
@ -14356,6 +14390,11 @@
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=" "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
}, },
"svg-injector": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/svg-injector/-/svg-injector-1.1.3.tgz",
"integrity": "sha1-j7oY10GeX4GOcSxPgtg+41dhDmE="
},
"svg-tags": { "svg-tags": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz", "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",

2
package.json
View File

@ -189,11 +189,13 @@
"react": "^15.6.1", "react": "^15.6.1",
"react-dom": "^15.6.1", "react-dom": "^15.6.1",
"react-hot-loader": "3.0.0-beta.6", "react-hot-loader": "3.0.0-beta.6",
"react-icons": "^2.2.5",
"react-inline-svg": "^1.1.0", "react-inline-svg": "^1.1.0",
"react-redux": "^5.0.5", "react-redux": "^5.0.5",
"react-router": "^4.1.1", "react-router": "^4.1.1",
"react-router-dom": "^4.1.1", "react-router-dom": "^4.1.1",
"react-router-redux": "^5.0.0-alpha.6", "react-router-redux": "^5.0.0-alpha.6",
"react-svg": "^2.1.21",
"redux": "^3.7.1", "redux": "^3.7.1",
"redux-thunk": "^2.2.0", "redux-thunk": "^2.2.0",
"source-map-support": "^0.4.15" "source-map-support": "^0.4.15"

Write Preview
Loading…
Cancel
Save