Add 404 and make scaling better

Author: 7coil

src/Routes.js

@@ -7,6 +7,7 @@ import Home from './routers/Home'
 import Test from './routers/Test'
 import AllBots from './routers/AllBots'
 import EditBot from './routers/EditBot'
+import NotFound from './routers/NotFound'
 
 class Routes extends Component {
   render () {
@@ -18,6 +19,7 @@ class Routes extends Component {
             <Route path="/test" component={Test} />
             <Route path="/bots" component={AllBots} />
             <Route path="/edit/:id" component={EditBot} />
+            <Route component={NotFound} />
           </Switch>
         </App>
       </Router>

src/components/BotCard.js

@@ -1,14 +1,17 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import { Link } from 'react-router-dom'
 
 export default class BotCard extends Component {
   render () {
     return (
-      <article className="bot-cards-card">
-        <img className="bot-card-avatar" src={this.props.bot.avatar} alt={this.props.bot.name + "'s avatar"}/>
-        <h1>{this.props.bot.name}</h1>
-        <p>{this.props.bot.description}</p>
-      </article>
+      <Link to={'/bot/' + this.props.bot.id}>
+        <article className="bot-cards-card">
+          <img className="bot-card-avatar" src={this.props.bot.avatar} alt={this.props.bot.name + "'s avatar"}/>
+          <h1>{this.props.bot.name}</h1>
+          <p>{this.props.bot.description}</p>
+        </article>
+      </Link>
     )
   }
 }

src/components/ErrorBox.js

@@ -19,5 +19,5 @@ export default class ErrorBox extends Component {
 
 ErrorBox.propTypes = {
   colour: PropTypes.string,
-  children: PropTypes.oneOf(PropTypes.string, PropTypes.React)
+  children: PropTypes.oneOf([PropTypes.string, PropTypes.React])
 }

src/routers/NotFound.js

@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import ErrorBox from './../components/ErrorBox'
+
+export default class Test extends Component {
+  render () {
+   return (
+      <main>
+        <ErrorBox colour="red">Not Found</ErrorBox>
+      </main>
+    )
+  }
+}

src/sass/components/_botcard.sass

@@ -12,8 +12,8 @@
   width: 120px
   background-color: #555
   margin-right: 20px
-  margin-top: 10px
-  margin-bottom: 10px
+  margin-top: 20px
+  margin-bottom: 20px
   padding: 5px
   display: flex
   flex-direction: column

src/sass/components/_botstrip.sass

@@ -8,8 +8,6 @@
   flex-wrap: nowrap
   overflow-x: auto
   overflow-y: hidden
-  .bot-cards-card:last-of-type
-    margin-right: 100px
 
 .bot-strip-tab
   padding-top: 15px

src/sass/components/_main.sass

@@ -2,17 +2,15 @@ main
   text-align: center
   code
     text-align: left
-  background-color: #333333
   background-size: cover
+  margin-left: auto
+  margin-right: auto
   padding: 2em
+  box-sizing: border-box
   flex-grow: 1
   @media screen and (min-width: 600px)
-    padding: 1em 5em 1em 5em
+    width: 100%
   @media screen and (min-width: 800px)
-    padding: 1em 10em 1em 10em
+    width: 70%
   @media screen and (min-width: 1200px)
-    padding: 1em 15em 1em 15em
-  @media screen and (min-width: 1600px)
-    padding: 1em 25em 1em 25em
-  @media screen and (min-width: 2000px)
-    padding: 1em 35em 1em 35em
+    width: 50%

src/sass/index.css

@@ -15,6 +15,7 @@
 body
   padding: 0
   margin: 0
+  background-color: #333333
 
 .App
   display: flex