Merge branch 'aw-uiBase' into main

This commit is contained in:
André Wahlberg 2020-11-20 18:00:34 +01:00
commit 3d76447d72
30 changed files with 522 additions and 78 deletions

96
package-lock.json generated
View File

@ -6969,6 +6969,19 @@
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
}, },
"history": {
"version": "4.10.1",
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
"integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
"requires": {
"@babel/runtime": "^7.1.2",
"loose-envify": "^1.2.0",
"resolve-pathname": "^3.0.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0",
"value-equal": "^1.0.1"
}
},
"hmac-drbg": { "hmac-drbg": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@ -6979,6 +6992,14 @@
"minimalistic-crypto-utils": "^1.0.1" "minimalistic-crypto-utils": "^1.0.1"
} }
}, },
"hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"requires": {
"react-is": "^16.7.0"
}
},
"hoopy": { "hoopy": {
"version": "0.1.4", "version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -9909,6 +9930,15 @@
"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==" "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
}, },
"mini-create-react-context": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
"integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
"requires": {
"@babel/runtime": "^7.12.1",
"tiny-warning": "^1.0.3"
}
},
"mini-css-extract-plugin": { "mini-css-extract-plugin": {
"version": "0.11.3", "version": "0.11.3",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz",
@ -12327,6 +12357,52 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
"integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
}, },
"react-router": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
"integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
"requires": {
"@babel/runtime": "^7.1.2",
"history": "^4.9.0",
"hoist-non-react-statics": "^3.1.0",
"loose-envify": "^1.3.1",
"mini-create-react-context": "^0.4.0",
"path-to-regexp": "^1.7.0",
"prop-types": "^15.6.2",
"react-is": "^16.6.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
},
"dependencies": {
"isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
},
"path-to-regexp": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
"requires": {
"isarray": "0.0.1"
}
}
}
},
"react-router-dom": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
"integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
"requires": {
"@babel/runtime": "^7.1.2",
"history": "^4.9.0",
"loose-envify": "^1.3.1",
"prop-types": "^15.6.2",
"react-router": "5.2.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
}
},
"react-scripts": { "react-scripts": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.0.tgz", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.0.tgz",
@ -12782,6 +12858,11 @@
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==" "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
}, },
"resolve-pathname": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
},
"resolve-url": { "resolve-url": {
"version": "0.2.1", "version": "0.2.1",
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@ -14518,6 +14599,16 @@
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz", "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=" "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
}, },
"tiny-invariant": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
"integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
},
"tiny-warning": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
},
"tmp": { "tmp": {
"version": "0.0.33", "version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@ -14976,6 +15067,11 @@
"spdx-expression-parse": "^3.0.0" "spdx-expression-parse": "^3.0.0"
} }
}, },
"value-equal": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
},
"vary": { "vary": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

View File

@ -8,6 +8,7 @@
"@testing-library/user-event": "^12.2.2", "@testing-library/user-event": "^12.2.2",
"react": "^17.0.1", "react": "^17.0.1",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0", "react-scripts": "4.0.0",
"web-vitals": "^0.2.4" "web-vitals": "^0.2.4"
}, },

View File

@ -3,17 +3,13 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#01aaeb" />
<meta name="theme-color" content="#000000" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta <meta name="description" content="Störningar i kollektivtrafiken" />
name="description" <meta name='viewport' content='minimal-ui, width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0' >
content="Web site created using create-react-app" <meta name=apple-mobile-web-app-capable content=yes>
/> <meta name=apple-mobile-web-app-status-bar-style content=black>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
@ -29,15 +25,5 @@
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body> </body>
</html> </html>

BIN
public/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

View File

@ -1,25 +1,20 @@
{ {
"short_name": "React App", "short_name": "Västtrafik",
"name": "Create React App Sample", "name": "Störningar i kollektivtrafiken",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16", "sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon" "type": "image/x-icon"
}, },
{ {
"src": "logo192.png", "src": "logo.png",
"type": "image/png", "type": "image/png",
"sizes": "192x192" "sizes": "135x135"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
} }
], ],
"start_url": ".", "start_url": ".",
"display": "standalone", "display": "fullscreen",
"theme_color": "#000000", "theme_color": "#01aaeb",
"background_color": "#ffffff" "background_color": "#f0f8fa"
} }

View File

@ -1,25 +1,31 @@
import './variables.css';
import './App.css'; import './App.css';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import NavigationDrawer from './components/NavigationDrawer.js' import NavigationDrawer from './components/NavigationDrawer.js'
import Header from './components/Header.js'
import PageArea from './components/PageArea.js'
import BottomMenu from './components/BottomMenu.js' import BottomMenu from './components/BottomMenu.js'
import Tickets from './components/pages/Tickets.js';
import TicketsBuy from './components/pages/TicketsBuy.js';
import Travel from './components/pages/Travel.js';
class App extends Component { class App extends Component {
render() { render() {
return ( return (
<div className="App"> <Router>
{/* <div className="App">
<Button <NavigationDrawer />
title = "placeholderTitle"
destination = "placeholderDestination" <Route path="/" exact component={TicketsBuy} />
/> <Route path="/tickets" exact component={Tickets} />
*/} <Route path="/ticketsBuy" exact component={TicketsBuy} />
<NavigationDrawer /> <Route path="/travel" exact component={Travel} />
<Header />
<PageArea /> <BottomMenu />
<BottomMenu /> </div>
</div> </Router>
); );
} }
} }

View File

@ -1,13 +1,28 @@
import './css/BottomMenu.css';
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import BottomMenuButton from './BottomMenuButton';
import './css/BottomMenu.css';
import ticketsIcon from '../img/tickets.svg';
import ticketsBuyIcon from '../img/tickets+.svg';
import travelIcon from '../img/tram.svg';
class BottomMenu extends Component { class BottomMenu extends Component {
render() { render() {
return ( return (
<div id="bottomMenu"> <div id="bottomMenu">
<button>Biljetter</button> <Link to="/tickets">
<button>Köp biljett</button> <BottomMenuButton label="Biljetter" icon={ticketsIcon}/>
<button>Reseplanering</button> </Link>
<Link to="/ticketsBuy">
<BottomMenuButton label="Köp biljett" icon={ticketsBuyIcon}/>
</Link>
<Link to="/travel">
<BottomMenuButton label="Reseplanering" icon={travelIcon}/>
</Link>
</div> </div>
); );
} }

View File

@ -0,0 +1,19 @@
import React, { Component } from 'react';
import './css/BottomMenu.css';
class BottomMenuButton extends Component {
constructor(props) {
super(props);
}
render(label, icon) {
return (
<button>
<img src={this.props.icon}/>
<span>{this.props.label}</span>
</button>
);
}
}
export default BottomMenuButton;

View File

@ -1,11 +1,13 @@
import './css/Header.css';
import React, { Component } from 'react'; import React, { Component } from 'react';
import './css/Header.css';
import navIcon from '../img/menu.svg'
class Header extends Component { class Header extends Component {
render() { render() {
return ( return (
<header> <header>
<button id="navDrawBtn"></button> <button id="navBtn"><img src={navIcon} /></button>
<h1 id="pageTitle">{this.props.title}</h1>
</header> </header>
); );
} }

View File

@ -0,0 +1,15 @@
import React, { Component } from 'react';
import './css/MainArea.css';
class MainArea extends Component {
render() {
return (
<main>
<div id="topSection" />
</main>
);
}
}
export default MainArea;

View File

@ -1,12 +0,0 @@
import './css/PageArea.css';
import React, { Component } from 'react';
class PageArea extends Component {
render() {
return (
<div id="pageArea"></div>
);
}
}
export default PageArea;

View File

@ -1,18 +1,37 @@
#bottomMenu { #bottomMenu {
width: 100%; width: 100%;
height: 8vh; height: 9vh;
background: lightcoral; min-height: 60px;
background: white;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
border-top: 2px solid rgba(0, 0, 0, 0.05);
}
#bottomMenu a {
display: contents;
text-decoration: none;
} }
#bottomMenu button { #bottomMenu button {
background: none; background: none;
border: none; border: none;
font-size: 0.9em; font-size: 0.9em;
margin-bottom: 5px;
flex-basis: calc(100%/3); flex-basis: calc(100%/3);
display: flex; display: flex;
align-items: flex-end; flex-direction: column;
align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
} }
#bottomMenu button:active {
background: rgba(0, 0, 0, 0.1);
}
#bottomMenu button span {
color: black;
}
#bottomMenu button img {
width: 25px;
}

View File

@ -1,5 +1,21 @@
header { header {
width: 100vw; width: 100vw;
height: 15vh; display: flex;
background: burlywood; flex-direction: row;
align-items: center;
padding: 15px;
position: fixed;
top: 0;
}
#navBtn img {
height: 1.4em;
}
#pageTitle {
font-size: 1.2em;
letter-spacing: 0.3px;
color: white;
font-family: 'Roboto Light', sans-serif;
padding: 0 0 0 25px;
} }

View File

@ -0,0 +1,11 @@
main {
width: 100vw;
flex: 1 1 auto;
background: var(--colorBg);
}
#topSection {
width: 100%;
height: 15vh;
background: linear-gradient(90deg, var(--colorVT1), var(--colorVT2));
}

View File

@ -1,4 +0,0 @@
#pageArea {
width: 100vw;
flex: 1 1 auto;
}

View File

@ -0,0 +1,17 @@
import React, { Component } from 'react';
import Header from '../Header.js'
import MainArea from '../MainArea.js'
class Tickets extends Component {
render() {
return (
<>
<Header title="Biljetter" />
<MainArea />
</>
);
}
}
export default Tickets;

View File

@ -0,0 +1,17 @@
import React, { Component } from 'react';
import Header from '../Header.js'
import MainArea from '../MainArea.js'
class TicketsBuy extends Component {
render() {
return (
<>
<Header title="Köp biljett" />
<MainArea />
</>
);
}
}
export default TicketsBuy;

View File

@ -0,0 +1,17 @@
import React, { Component } from 'react';
import Header from '../Header.js'
import MainArea from '../MainArea.js'
class Travel extends Component {
render() {
return (
<>
<Header title="Reseplanering" />
<MainArea />
</>
);
}
}
export default Travel;

BIN
src/fonts/roboto-light.ttf Normal file

Binary file not shown.

59
src/img/calendar.svg Normal file
View File

@ -0,0 +1,59 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<g>
<circle cx="386" cy="210" r="20"/>
<path d="M432,40h-26V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v20h-91V20c0-11.046-8.954-20-20-20
c-11.046,0-20,8.954-20,20v20h-90V20c0-11.046-8.954-20-20-20s-20,8.954-20,20v20H80C35.888,40,0,75.888,0,120v312
c0,44.112,35.888,80,80,80h153c11.046,0,20-8.954,20-20c0-11.046-8.954-20-20-20H80c-22.056,0-40-17.944-40-40V120
c0-22.056,17.944-40,40-40h25v20c0,11.046,8.954,20,20,20s20-8.954,20-20V80h90v20c0,11.046,8.954,20,20,20s20-8.954,20-20V80h91
v20c0,11.046,8.954,20,20,20c11.046,0,20-8.954,20-20V80h26c22.056,0,40,17.944,40,40v114c0,11.046,8.954,20,20,20
c11.046,0,20-8.954,20-20V120C512,75.888,476.112,40,432,40z"/>
<path d="M391,270c-66.72,0-121,54.28-121,121s54.28,121,121,121s121-54.28,121-121S457.72,270,391,270z M391,472
c-44.663,0-81-36.336-81-81s36.337-81,81-81c44.663,0,81,36.336,81,81S435.663,472,391,472z"/>
<path d="M420,371h-9v-21c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v41c0,11.046,8.954,20,20,20h29
c11.046,0,20-8.954,20-20C440,379.954,431.046,371,420,371z"/>
<circle cx="299" cy="210" r="20"/>
<circle cx="212" cy="297" r="20"/>
<circle cx="125" cy="210" r="20"/>
<circle cx="125" cy="297" r="20"/>
<circle cx="125" cy="384" r="20"/>
<circle cx="212" cy="384" r="20"/>
<circle cx="212" cy="210" r="20"/>
</g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

1
src/img/clock.svg Normal file
View File

@ -0,0 +1 @@
<svg height="384pt" viewBox="0 0 384 384" width="384pt" xmlns="http://www.w3.org/2000/svg"><path d="m343.59375 101.039062c-7.953125 3.847657-11.28125 13.417969-7.433594 21.367188 10.511719 21.714844 15.839844 45.121094 15.839844 69.59375 0 88.222656-71.777344 160-160 160s-160-71.777344-160-160 71.777344-160 160-160c36.558594 0 70.902344 11.9375 99.328125 34.519531 6.894531 5.503907 16.976563 4.351563 22.480469-2.566406 5.503906-6.914063 4.351562-16.984375-2.570313-22.480469-33.652343-26.746094-76-41.472656-119.238281-41.472656-105.863281 0-192 86.136719-192 192s86.136719 192 192 192 192-86.136719 192-192c0-29.335938-6.40625-57.449219-19.039062-83.527344-3.839844-7.96875-13.441407-11.289062-21.367188-7.433594zm0 0"/><path d="m192 64c-8.832031 0-16 7.167969-16 16v112c0 8.832031 7.167969 16 16 16h80c8.832031 0 16-7.167969 16-16s-7.167969-16-16-16h-64v-96c0-8.832031-7.167969-16-16-16zm0 0"/></svg>

After

Width:  |  Height:  |  Size: 906 B

23
src/img/menu.svg Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 341.3 341.3" style="enable-background:new 0 0 341.3 341.3;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g>
<g>
<rect y="277.3" class="st0" width="341.3" height="42.7"/>
</g>
</g>
<g>
<g>
<rect y="149.3" class="st0" width="341.3" height="42.7"/>
</g>
</g>
<g>
<g>
<rect y="21.3" class="st0" width="341.3" height="42.7"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 656 B

1
src/img/redo.svg Normal file
View File

@ -0,0 +1 @@
<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m502.121094 1.214844c-5.972656-2.453125-12.863282-1.109375-17.429688 3.476562l-57.597656 57.601563c-47.488281-39.210938-108.417969-62.292969-171.09375-62.292969-141.164062 0-256 114.835938-256 256s114.835938 256 256 256c68.332031 0 132.609375-26.644531 180.96875-75.03125 8.34375-8.339844 8.34375-21.820312 0-30.164062-8.339844-8.339844-21.820312-8.339844-30.164062 0-40.296876 40.320312-93.867188 62.527343-150.804688 62.527343-117.632812 0-213.332031-95.699219-213.332031-213.332031s95.699219-213.332031 213.332031-213.332031c51.414062 0 101.332031 18.496093 140.777344 49.917969l-50.75 50.773437c-4.585938 4.585937-5.929688 11.457031-3.476563 17.429687 2.472657 5.972657 8.296875 9.878907 14.78125 9.878907h138.667969c8.832031 0 16-7.167969 16-16v-138.667969c0-6.484375-3.902344-12.308594-9.878906-14.785156zm0 0"/></svg>

After

Width:  |  Height:  |  Size: 924 B

56
src/img/tickets+.svg Normal file
View File

@ -0,0 +1,56 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{clip-path:url(#SVGID_2_);}
.st1{display:none;}
.st2{display:inline;fill:#FF0000;}
</style>
<g id="Capa_1">
</g>
<g id="Layer_4">
<g>
<defs>
<polygon id="SVGID_1_" points="0,0 0,512 299,512 299,393.4 184.1,393.4 184.1,327.8 299,327.8 298.9,234.3 364.5,234.3
364.5,327.8 479.4,327.8 479.4,393.4 364.5,393.4 362.9,512 512,512 512,0 "/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g class="st0">
<g>
<path d="M448.7,128.2l-10.6,10.6c-8.7,8.7-20.2,13.4-32.4,13.4s-23.8-4.8-32.4-13.4c-8.7-8.7-13.4-20.2-13.4-32.4
s4.8-23.8,13.4-32.4l10.6-10.6L320.5,0L0,320.5l63.3,63.3l10.6-10.6c8.7-8.7,20.2-13.4,32.4-13.4s23.8,4.8,32.4,13.4
c8.7,8.7,13.4,20.2,13.4,32.4s-4.8,23.8-13.4,32.4l-10.6,10.6l63.3,63.3L512,191.5L448.7,128.2z M169.6,447.6
c8.2-12.3,12.7-26.8,12.7-42c0-20.3-7.9-39.3-22.2-53.7c-14.3-14.3-33.4-22.2-53.7-22.2c-15.2,0-29.7,4.4-42,12.7l-21.9-21.9
l278-278l21.9,21.9c-8.2,12.3-12.7,26.8-12.7,42c0,20.3,7.9,39.3,22.2,53.7c14.3,14.3,33.4,22.2,53.7,22.2
c15.2,0,29.7-4.4,42-12.7l21.9,21.9l-278,278L169.6,447.6z"/>
</g>
</g>
<g class="st0">
<g>
<rect x="284" y="197.9" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -63.0406 273.8113)" width="30" height="30.1"/>
</g>
</g>
<g class="st0">
<g>
<rect x="241.4" y="155.3" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -45.3836 231.2101)" width="30" height="30.1"/>
</g>
</g>
<g class="st0">
<g>
<rect x="326.6" y="240.5" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -80.6853 316.4155)" width="30" height="30.1"/>
</g>
</g>
</g>
</g>
<g id="Layer_3" class="st1">
<polygon class="st2" points="298.9,234.3 364.5,234.3 364.5,327.8 479.4,327.8 479.4,393.4 364.5,393.4 364.5,486.9 298.9,486.9
299,393.4 184.1,393.4 184.1,327.8 299,327.8 "/>
</g>
<g id="Layer_2">
<rect x="312.4" y="273.8" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 692.3611 28.913)" width="38.6" height="173.7"/>
<rect x="312.4" y="273.8" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 663.4481 721.2742)" width="38.6" height="173.7"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

65
src/img/tickets.svg Normal file
View File

@ -0,0 +1,65 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M448.678,128.219l-10.607,10.608c-8.667,8.667-20.191,13.44-32.449,13.44c-12.258,0-23.78-4.773-32.448-13.44
c-8.667-8.667-13.44-20.191-13.44-32.448s4.773-23.781,13.44-32.449l10.608-10.608L320.459,0L0,320.459l63.322,63.322
l10.608-10.608c8.667-8.667,20.191-13.44,32.449-13.44c12.258,0,23.78,4.773,32.448,13.44c8.667,8.667,13.44,20.191,13.44,32.448
s-4.773,23.781-13.44,32.449l-10.608,10.608L191.541,512L512,191.541L448.678,128.219z M169.61,447.636
c8.237-12.343,12.662-26.839,12.662-42.015c0-20.272-7.894-39.33-22.229-53.664c-14.334-14.335-33.393-22.229-53.664-22.229
c-15.176,0-29.672,4.425-42.015,12.662l-21.932-21.931L320.459,42.432l21.931,21.932c-8.237,12.343-12.662,26.839-12.662,42.015
c0,20.272,7.894,39.33,22.229,53.664c14.334,14.335,33.393,22.229,53.664,22.229c15.176,0,29.672-4.425,42.015-12.662
l21.932,21.931L191.541,469.568L169.61,447.636z"/>
</g>
</g>
<g>
<g>
<rect x="284.001" y="197.94" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -63.0395 273.8137)" width="30.004" height="30.124"/>
</g>
</g>
<g>
<g>
<rect x="241.404" y="155.325" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -45.3819 231.2119)" width="30.004" height="30.124"/>
</g>
</g>
<g>
<g>
<rect x="326.607" y="240.541" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -80.684 316.4184)" width="30.004" height="30.124"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

8
src/img/tram.svg Normal file
View File

@ -0,0 +1,8 @@
<?xml version='1.0' encoding='iso-8859-1'?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 470 470" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 470 470">
<g>
<path d="m386.032,146.681h-9.045v-23.144c0-25.859-21.038-46.898-46.898-46.898h-70.411l26.433-61.639h25.056c4.143,0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-29.929c-0.023,0-0.045,0-0.068,0h-90.215c-0.023,0-0.047,0-0.07,0h-29.929c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5 7.5,7.5h25.056l26.433,61.639h-72.533c-25.86,0-46.898,21.039-46.898,46.898v23.144h-9.045c-11.304,0-20.5,9.196-20.5,20.5v50.88c0,4.142 3.357,7.5 7.5,7.5s7.5-3.358 7.5-7.5v-50.88c0-3.033 2.468-5.5 5.5-5.5h9.045v240.819c0,4.142 3.357,7.5 7.5,7.5h41.893l-47.197,47.197c-2.145,2.145-2.786,5.371-1.625,8.173 1.16,2.803 3.896,4.63 6.929,4.63h268.975c3.033,0 5.769-1.827 6.929-4.63 1.161-2.803 0.52-6.028-1.625-8.173l-30-29.999c-0.003-0.002-17.199-17.198-17.199-17.198h41.893c4.143,0 7.5-3.358 7.5-7.5v-240.819h9.045c3.032,0 5.5,2.467 5.5,5.5v50.88c0,4.142 3.357,7.5 7.5,7.5s7.5-3.358 7.5-7.5v-50.88c0-11.304-9.196-20.5-20.5-20.5zm-183.7-131.681h67.459l-26.433,61.639h-14.593l-26.433-61.639zm-94.319,108.537c0-17.588 14.31-31.898 31.898-31.898h83.86c0.018,0 0.036,0.004 0.054,0.004 0.026,0 0.052-0.004 0.078-0.004h24.365c0.049,0 81.82,0 81.82,0 17.589,0 31.898,14.31 31.898,31.898v23.144h-253.973v-23.144zm79.487,178.247v-140.103h95v140.104h-95zm-68.881,153.215l15-15h202.761l15,15h-232.761zm202.761-30h-172.761l15-15h142.76l15.001,15zm40.607-30h-253.974v-233.319h64.487v140.104h-41.987c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5 7.5,7.5h208.975c4.143,0 7.5-3.358 7.5-7.5s-3.357-7.5-7.5-7.5h-41.988v-140.104h64.487v233.319z"/>
<path d="M290,126.66c4.143,0,7.5-3.358,7.5-7.5s-3.357-7.5-7.5-7.5H180c-4.143,0-7.5,3.358-7.5,7.5s3.357,7.5,7.5,7.5H290z"/>
<path d="m235,333.392c-12.406,0-22.5,10.093-22.5,22.5s10.094,22.5 22.5,22.5 22.5-10.093 22.5-22.5-10.094-22.5-22.5-22.5zm0,30c-4.136,0-7.5-3.364-7.5-7.5s3.364-7.5 7.5-7.5 7.5,3.364 7.5,7.5-3.364,7.5-7.5,7.5z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -3,6 +3,11 @@
src: url('fonts/roboto-regular.ttf') format('truetype'); /* Safari, Android, iOS */ src: url('fonts/roboto-regular.ttf') format('truetype'); /* Safari, Android, iOS */
} }
@font-face {
font-family: 'Roboto Light';
src: url('fonts/roboto-light.ttf') format('truetype'); /* Safari, Android, iOS */
}
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -14,3 +19,8 @@ html, body, #root, #app {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
button {
background: none;
border: none;
}

5
src/variables.css Normal file
View File

@ -0,0 +1,5 @@
:root {
--colorVT1: rgb(1, 170, 235);
--colorVT2: rgb(25, 212, 245);
--colorBg: rgb(240, 248, 250);
}