Add: visual treats

README.md

@@ -4,9 +4,9 @@
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![HitCount](http://hits.dwyl.com/Yog9/SnapShot.svg)](http://hits.dwyl.com/Yog9/SnapShot)
 
-[Demo of Snap Shot](https://yog9.github.io/SnapShot/)
+[Demo of Snap Shot]
 
-![](/snapscout.png)
+<img align="center" alt="kishore007k.com" width="800px" src="./SnapShot.gif" />
 
 ### Summary
 

src/App.js

@@ -20,32 +20,45 @@ class App extends Component {
       <PhotoContextProvider>
         <HashRouter basename="/SnapScout">
           <div className="container">
-            <Route
-              render={props => (
-                <Header
-                  handleSubmit={this.handleSubmit}
-                  history={props.history}
-                />
-              )}
-            />
+            <Route 
+              render={props => ( <Header 
+              handleSubmit={this.handleSubmit}
+              history={props.history}
+            /> )} />
             <Switch>
               <Route
                 exact
                 path="/"
-                render={() => <Redirect to="/mountain" />}
+                render={() => <Redirect to="/all" />}
               />
+							{/* Add your new topic here */}
 
+              <Route 
+                path="/all" 
+                render={() => <Item 
+                  searchTerm="all" 
+                />} />
               <Route
-                path="/mountain"
-                render={() => <Item searchTerm="mountain" />}
-              />
-              <Route path="/beach" render={() => <Item searchTerm="beach" />} />
-              <Route path="/bird" render={() => <Item searchTerm="bird" />} />
-              <Route path="/food" render={() => <Item searchTerm="food" />} />
+                path="/car"
+                render={() => <Item 
+                  searchTerm="car" 
+                />} />
+              <Route 
+                path="/animals" 
+                render={() => <Item 
+                  searchTerm="animals" />} />
+              <Route 
+                path="/bird" 
+                render={() => <Item 
+                  searchTerm="bird" />} />
+              <Route 
+                path="/food" 
+                render={() => <Item 
+                  searchTerm="food" />} />
               <Route
                 path="/search/:searchInput"
-                render={props => (
-                  <Search searchTerm={props.match.params.searchInput} />
+                render={props => ( <Search 
+                  searchTerm={props.match.params.searchInput} />
                 )}
               />
               <Route component={NotFound} />

src/_ToAddNewBranch.md

@@ -0,0 +1,4 @@
+### Steps to add new routes
+
+  1. Create a `<Route path="/{ROUTE NAME}" render={() => <Item searchTerm="{ROUTE NAME}" />} />` inside the App.js file above or below the existing routes
+  2. Do the same in the **components/Navigation.js** file `<li><NavLink to="/{ROUTER NAME}">{ROUTER NAME}</NavLink></li>`

src/components/Navigation.js

@@ -5,8 +5,10 @@ const Navigation = () => {
   return (
     <nav className="main-nav">
       <ul>
-        <li><NavLink to="/mountain">Mountain</NavLink></li>
-        <li><NavLink to="/beach">Beaches</NavLink></li>
+        {/* Add that router here as well */}
+        <li><NavLink to="/all">All</NavLink></li>
+        <li><NavLink to="/car">Cars</NavLink></li>
+        <li><NavLink to="/animals">Animals</NavLink></li>
         <li><NavLink to="/bird">Birds</NavLink></li>
         <li><NavLink to="/food">Food</NavLink></li>
       </ul>

src/index.css

@@ -2,6 +2,7 @@ body {
   text-align: center;
   font-family: "Josefin Sans", Helvetica, Arial, sans-serif;
   color: #3f4850;
+  background-color: rgb(32, 32, 32);
 }
 
 .forkongithub a {
@@ -44,13 +45,13 @@ h2 {
   font-size: 2em;
   margin: 52px 0 40px;
   text-transform: capitalize;
-  color: #051c33;
+  color: #dddfe0;
 }
 
 h1 {
   font-family: "Lobster", "Josefin Sans", Helvetica, Arial, sans-serif;
   font-size: 4em;
-  color: #051c33;
+  color: #cfd4d8;
 }
 
 ul {
@@ -88,19 +89,20 @@ a {
 }
 
 .active {
-  background-color: #051c33;
+  background-color: #0d61af;
   cursor: pointer;
 }
 
 input {
   font-size: 1em;
   width: 100%;
-  background-color: #edeff0;
+  background-color: #036dd1;
   padding: 10px 15px;
-  border: 3px solid #d7dbdf;
+  border: 3px solid #0a7ce6;
   border-right: none;
   border-radius: 0.35em 0 0 0.35em;
   outline: none;
+  color: #fff;
 }
 
 .main-nav li {
@@ -110,15 +112,16 @@ input {
 
 .main-nav a {
   display: block;
-  background: #051c33;
+  background: #278bee;
   border-radius: 3px;
   padding: 5px;
   color: #fff;
+  transition: .5s ease-in-out all;
 }
 
 .main-nav .active,
 .main-nav a:hover {
-  background-color: #051c33;
+  background-color: #37bd95;
 }
 
 .photo-container ul {