Add TopMenu component and page specific content

src/App.css

@@ -3,6 +3,7 @@
     text-align: center;
     display: flex;
     flex-direction: column;
+    background: var(--colorBg);
 }
 
 .App-logo {

src/App.js

@@ -12,6 +12,8 @@ import TicketsBuy from './components/pages/TicketsBuy.js';
 import Travel from './components/pages/Travel.js';
 import TrafficInfo from './components/pages/TrafficInfo.js';
 
+import './variables.css';
+ 
 class App extends Component {
     render() {
         return (

src/components/BottomMenu.js

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

src/components/BottomMenuButton.js

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

src/components/MainArea.js

@@ -6,7 +6,7 @@ class MainArea extends Component {
     render() {
         return (
             <main>
-                <div id="topSection" />
+                {this.props.children}
             </main>
         );
     }

src/components/MenuButton.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+
+class MenuButton extends Component {
+    render(label, icon, childOrderReverse) {
+        if (this.props.childOrderReverse) {
+            return (
+                <button>
+                    <span>{this.props.label}</span>
+                    <img src={this.props.icon}/>
+                </button>
+            );
+        } else {
+            return (
+                <button>
+                    <img src={this.props.icon}/>
+                    <span>{this.props.label}</span>
+                </button>
+            );
+        }
+    }
+}
+
+export default MenuButton;

src/components/TopMenu.js

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

src/components/TripSelector.js

@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+
+class TripSelector extends Component {
+    render() {
+        return (
+            <form>
+                <label>Från:</label>
+                <input type="text" placeholder="Hållplats/Adress/Plats" />
+                <hr/>
+                <label for="lname">Till:</label>
+                <input type="text" placeholder="Hållplats/Adress/Plats" />
+            </form>
+        );
+    }
+}
+
+export default TripSelector;

src/components/css/Header.css

@@ -3,9 +3,9 @@ header {
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 15px;
-    position: fixed;
+    padding: 15px 15px 15vh 15px;
     top: 0;
+    background: linear-gradient(90deg, var(--colorVT1), var(--colorVT2));
 }
 
 #navBtn img {

src/components/css/MainArea.css

@@ -1,11 +1,7 @@
 main {
     width: 100vw;
     flex: 1 1 auto;
-    background: var(--colorBg);
-}
-
-#topSection {
-    width: 100%;
-    height: 15vh;
-    background: linear-gradient(90deg, var(--colorVT1), var(--colorVT2));
+    display: flex;
+    flex-flow: column;
+    justify-content: space-evenly;
 }

src/components/css/TopMenu.css

@@ -0,0 +1,32 @@
+#topMenu {
+    width: 100vw;
+    height: var(--topMenuHeight);
+    margin-top: calc(var(--topMenuHeight) / -2);
+    display: inline-flex;
+    justify-content: space-evenly;
+}
+
+#topMenu button {
+    width: var(--topMenuHeight);
+    height: calc(var(--topMenuHeight) / 1.3);
+    display: flex;
+    flex-flow: column;
+    justify-content: space-evenly;
+    background: white;
+    border-radius: calc(var(--topMenuHeight) / 15);
+    box-shadow: var(--boxShadow);
+}
+
+#topMenu button:active {
+    background: rgb(235, 235, 235);
+}
+
+#topMenu img {
+    width: 100%;
+    height: 40%;
+}
+
+#topMenu button span {
+    width: 100%;
+    font-size: calc(var(--topMenuHeight) / 7);
+}

src/components/css/TripSelector.css

@@ -0,0 +1,32 @@
+form {
+    width: 65vw;
+    height: calc(var(--topMenuHeight));
+    background: white;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-evenly;
+    align-items: center;
+    font-size: 15px;
+    padding: 1vw 2vw;
+    border-radius: var(--borderRadius);
+    box-shadow: var(--boxShadow);
+}
+
+label {
+    flex-basis: 20%;
+    height: 15px;
+}
+
+input {
+    flex-basis: 70%;
+    height: 15px;
+    border: none;
+}
+
+hr {
+    --width: 90%;
+
+    flex-basis: var(--width);
+    margin: 0 calc((100% - var(--width)) / 2);
+    opacity: 0.5;
+}

src/components/pages/Tickets.js

@@ -1,14 +1,16 @@
 import React, { Component } from 'react';
 
-import Header from '../Header.js'
-import MainArea from '../MainArea.js'
+import Header from '../Header.js';
+import MainArea from '../MainArea.js';
 
 class Tickets extends Component {
     render() {
         return (
             <>
                 <Header title="Biljetter" />
-                <MainArea />
+                <MainArea>
+                    <p>Du har inga biljetter</p>
+                </MainArea>
             </>
         );
     }

src/components/pages/TicketsBuy.js

@@ -1,14 +1,27 @@
 import React, { Component } from 'react';
 
-import Header from '../Header.js'
-import MainArea from '../MainArea.js'
+import Header from '../Header.js';
+import TopMenu from '../TopMenu.js';
+import MenuButton from '../MenuButton.js';
+import MainArea from '../MainArea.js';
+
+import clockIcon from '../../img/clock.svg';
+import calendarIcon from '../../img/calendar.svg';
+import recurringIcon from '../../img/redo.svg';
 
 class TicketsBuy extends Component {
     render() {
         return ( 
             <>
                 <Header title="Köp biljett" />
-                <MainArea />
+                <TopMenu>
+                    <MenuButton label="Enkelbiljett" icon={clockIcon} />
+                    <MenuButton label="Periodbiljett" icon={calendarIcon} />
+                    <MenuButton label="Dygnsbiljett" icon={recurringIcon} />
+                </TopMenu>
+                <MainArea>
+                    <p>Du har inga tidigare köp</p>
+                </MainArea>
             </>
         );
     }

src/components/pages/TrafficInfo.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 
-import Header from '../Header.js'
-import MainArea from '../MainArea.js'
+import Header from '../Header.js';
+import MainArea from '../MainArea.js';
 
 class TrafficInfo extends Component {
     render() {

src/components/pages/Travel.js

@@ -1,14 +1,22 @@
 import React, { Component } from 'react';
 
-import Header from '../Header.js'
-import MainArea from '../MainArea.js'
+import Header from '../Header.js';
+import TopMenu from '../TopMenu.js';
+import MainArea from '../MainArea.js';
+import TripSelector from '../TripSelector.js';
+
+import '../css/TripSelector.css';
 
 class Travel extends Component {
     render() {
         return (
             <>
                 <Header title="Reseplanering" />
-                <MainArea />
+                <TopMenu>
+                    <TripSelector />
+                </TopMenu>
+                <MainArea>
+                </MainArea>
             </>
         );
     }

src/variables.css

@@ -2,4 +2,8 @@
     --colorVT1: rgb(1, 170, 235);
     --colorVT2: rgb(25, 212, 245);
     --colorBg: rgb(240, 248, 250);
+
+    --topMenuHeight: 15vh;
+    --borderRadius: calc(var(--topMenuHeight) / 15);
+    --boxShadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.3);
 }