RFR: Theme & styling (#224)

* changed color of navbar and progress bars, removed logo background

* oops forgot to add these

* changed scratchy font, added padding to bottom of pages

* got hamburger icon to showgit add -u

* changed some button colors to orange, added enter key handler to upgrade user

frontend/src/App.js

@@ -24,8 +24,6 @@ import ROYearGradeView from './pages/ReadingOlympics/ROYearGradeView';
 import ROYearView from './pages/ReadingOlympics/ROYearView';
 import BadgesPage from './pages/BadgesPage';
 import About from './pages/About';
-
-import './styles/App.scss';
 import AdminProtection from './pages/protection/AdminProtection';
 import AuthenticatedProtection from './pages/protection/AuthenticatedProtection';
 import AdminAddQuizPage from './pages/admin/AdminAddQuizPage';

frontend/src/components/PReadsNavbar.js

@@ -13,7 +13,8 @@ import {
   UncontrolledDropdown
 } from 'reactstrap';
 import Cookies from 'universal-cookie';
-import logo from '../images/philareadslogo.png';
+import logo from '../images/philareadslogo_transparent.png';
+import '../styles/PReadsNavbar.scss';
 export default class PReadsNavbar extends React.Component {
   navigationOptions = [
     {
@@ -59,11 +60,11 @@ export default class PReadsNavbar extends React.Component {
   render() {
     return (
       <div>
-        <Navbar color="light" light expand="md">
+        <Navbar className="navbar-light" expand="md">
           <NavbarBrand href="/">
-            <img src={logo} width="60" alt="philareads" />
+            <img src={logo} width="80" alt="philareads" />
           </NavbarBrand>
-          <NavbarToggler onClick={this.toggle} />
+          <NavbarToggler onClick={this.toggle} className="hamburger-color" />
           <Collapse isOpen={this.state.isOpen} navbar>
             <Nav className="mr-auto" navbar>
               {this.navigationOptions.map(({ route, name }) => {

frontend/src/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import './styles/bootswatch.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 

frontend/src/pages/BadgesPage.js

@@ -67,7 +67,10 @@ class BadgesPage extends Component {
             <img src={badgeMap[badge.graphic]} width="50" alt={badge.graphic} />
           </Col>
           <Col lg="9" align="center">
-            <Progress value={(badge.currentCount / badge.targetCount) * 100} />
+            <Progress
+              color="success"
+              value={(badge.currentCount / badge.targetCount) * 100}
+            />
           </Col>
         </Row>
       );

frontend/src/pages/ReadingOlympics/ROHome.js

@@ -75,7 +75,6 @@ class ROHome extends Component {
                 <Button
                   className="navigation-button"
                   onClick={this.onClickMiddleSchool}
-                  color="primary"
                   size="lg"
                   block
                 >
@@ -84,7 +83,6 @@ class ROHome extends Component {
                 <Button
                   className="navigation-button"
                   onClick={this.onClickIntermediate}
-                  color="primary"
                   size="lg"
                   block
                 >

frontend/src/pages/admin/AdminManageUsersPage.js

@@ -87,6 +87,12 @@ class AdminManageUsersPage extends Component {
                 onChange={event => {
                   this.setState({ username: event.target.value });
                 }}
+                onKeyPress={event => {
+                  if (event.key === 'Enter') {
+                    event.preventDefault();
+                    this.toggleModal();
+                  }
+                }}
               />
               <br />
               <Button

frontend/src/styles/App.scss

@@ -1,5 +1,6 @@
 body {
   background-color: #f5f5f5;
+  padding-bottom: 40px;
 }
 
 .spinner {

frontend/src/styles/BadgesPage.scss

@@ -1,19 +1,17 @@
-.profile {
-  .bar {
-    align-items: center;
-  }
+.bar {
+  align-items: center;
+}
 
-  .completed-badge {
-    align-self: center;
-  }
+.completed-badge {
+  align-self: center;
+}
 
-  .earned-badge {
-    margin-left: 15px;
-    margin-right: 15px;
-  }
+.earned-badge {
+  margin-left: 15px;
+  margin-right: 15px;
+}
 
-  .ip-badge {
-    margin-top: 10px;
-    margin-bottom: 10px;
-  }
+.ip-badge {
+  margin-top: 10px;
+  margin-bottom: 10px;
 }

frontend/src/styles/Home.scss

@@ -33,6 +33,11 @@
     color: white;
   }
 
+  .navigation-button {
+    background-color: #ff9966;
+    color: black;
+  }
+
   .navigation-button + .navigation-button {
     margin: 30px 0px;
   }

frontend/src/styles/PReadsNavbar.scss

@@ -5,3 +5,7 @@
 .navbar-brand > img {
   padding: 7px 14px;
 }
+
+.navbar-light {
+  background-color: #b3d9ff !important;
+}

frontend/src/styles/ReadingOlympics.scss

@@ -22,8 +22,9 @@
 
   .navigation-button {
     margin: 30px 0px;
+    background-color: #ff9966;
+    color: black;
   }
-
   .book-image-container {
     text-align: center;
     margin-bottom: 10px;