Change the color scheme

src/App.css

@@ -5,7 +5,7 @@
 
 .chooser {
     position: relative;
-    background: #333;
+    background: #343779;
     grid-column-start: 1;
     grid-column-end: 1;
     grid-row-start: 3;

src/components/Image.js

@@ -25,7 +25,7 @@ class Image extends React.Component {
     fetchData() {
         const resource = "img/" + this.props.cat + "/" + this.props.artwork + ".svg";
 
-        fetch(resource, {cache: "force-cache"})
+        fetch(resource)
             .then(res => res.text())
             .then(
                 (result) => {

src/index.css

@@ -5,7 +5,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-
+  background-color: #fcfcfc;
 }
 
 code {

src/navbar.css

 /* Add a black background color to the top navigation */
 .navbar {
-    background-color: #333;
+    background-color: #fff;
     overflow: hidden;
     width: 100%;
+    box-shadow:0px 2px 2px #efefef;
 }
 
 /* Style the links inside the navigation bar */
 .navbar div {
     float: left;
-    color: #f2f2f2;
+    color: #000;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
@@ -32,6 +33,6 @@
 
 /* Add a color to the active/current link */
 .navbar div.active {
-    background-color: #A20C25;
+    background-color: #343779;
     color: white;
 }

src/style/FavoriteButton.css

 .Button-container {
     margin: auto;
     padding-top: 5px;
-    border: 2px solid #222;
 }
 
 .Button-container button {
@@ -9,12 +8,13 @@
     display: block;
     padding: 5px;
     font-size: 1rem;
-    background: #A20C25;
-    color: white;
+    background: #FFA646;
+    color: #333;
     border: none;
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
     border-radius: 6px;
+    box-shadow:0px 2px 2px #333;
 }
 
 .Button-container button:hover {
@@ -32,4 +32,4 @@
         display: inline-block;
         margin: 10px;
     }
-}
\ No newline at end of file
+}

src/style/SessionElement.css

 .sessionWrapper {
-    background-color: #333;
+    background-color: #e9e9e9;
     padding: 8px;
-    color: white;
+    color:#333;
+    box-shadow:0px -2px 2px #efefef;
 }
 
 .sessionWrapper h3 {
@@ -14,7 +15,7 @@
 }
 
 .sessionHolder {
-    background-color: #3f3f3f;
+    background-color: #fff;
     border-radius: 4px;
     max-height: 200px;
     overflow-y: scroll;
@@ -30,7 +31,7 @@
 }
 
 .sessionHolder > .selectedSessionItem {
-    background-color: #666;
+    background-color: #7b96e8;
     border-radius: 8px;
 }
 
@@ -40,4 +41,4 @@
         padding: 8px;
         margin: 4px;
     }
-}
\ No newline at end of file
+}

src/style/SessionNavigation.css

 
 .sessionNavButtons > .navBtn {
     display: inline-block;
-    background-color: #555;
+    background-color: #FFA646;
     border: 1px solid #ddd;
     border-radius: 4px;
     margin: 6px;
@@ -15,11 +15,11 @@
 
 .sessionNavButtons > .navBtn.inactive  {
     border: 1px solid #aaa;
-    background-color: #555;
-    color: #aaa;
+    background-color: #FFA646;
+    color: #333;
 }
 @media screen and (min-width: 960px) {
     .sessionNavButtons > .navBtn:hover {
-        background-color: #bbb;
+        background-color: #fff;
     }
-}
\ No newline at end of file
+}