diff --git a/app/assets/stylesheets/nav.scss b/app/assets/stylesheets/nav.scss
index 55c794e..adb9130 100644
--- a/app/assets/stylesheets/nav.scss
+++ b/app/assets/stylesheets/nav.scss
@@ -33,7 +33,7 @@
margin-left: 16px;
margin-right: 16px;
padding-bottom: 4px;
- color: #1d1c23;
+ color: inherit;
text-decoration: none;
font-size: 18px;
transition: border-bottom ease 2s;
diff --git a/app/assets/stylesheets/reset.scss b/app/assets/stylesheets/reset.scss
index 7d344b3..ad5199e 100644
--- a/app/assets/stylesheets/reset.scss
+++ b/app/assets/stylesheets/reset.scss
@@ -49,23 +49,4 @@ table {
a:hover{
cursor: pointer;
-}
-
-.app-container {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- background-color: #fef9f8;
- min-height: 100%;
- font-family: "Roboto", "Helvetica", "Arial", sans-serif;
- position: relative;
-
- &::-webkit-scrollbar {
- display: none;
- }
-
- .component{
- flex-grow: 1;
- display: flex;
- }
}
\ No newline at end of file
diff --git a/db/schema.rb b/db/schema.rb
index fcb494e..8fac939 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -38,8 +38,8 @@
t.integer "start_date"
t.string "end_date"
t.text "notes"
- t.boolean "tips"
t.string "pay_frequency", null: false
+ t.boolean "tips"
t.float "avg_tips"
t.integer "satisfaction"
t.index ["position"], name: "index_reviews_on_position"
diff --git a/frontend/components/App.jsx b/frontend/components/App.jsx
index 1be92d7..e5a2971 100644
--- a/frontend/components/App.jsx
+++ b/frontend/components/App.jsx
@@ -1,45 +1,56 @@
import React from 'react'
import Splash from './splash/splash'
import { Route, Switch } from 'react-router-dom';
-import Form from './reviews/Form';
import Nav from './nav/nav'
import ReviewIndex from './reviews/Index';
-import ShopSearch from './reviews/ShopSearch';
import ErrorReport from './contact/error_report';
import NewReview from './reviews/NewReview';
import Footer from './footer/Footer';
import Auth from './auth/Auth';
import { AuthRoute } from '../util/route_util';
-import Graphs from './chart/chart';
-import theme from 'styled-theming';
-import { ThemeProvider } from 'styled-components';
+import DarkThemeProvider from './DarkThemeProvider';
+import styled from 'styled-components';
+import { backgroundColor, textColor } from './DarkThemeProvider';
-export const backgroundColor = theme("theme", {
- light: "#fef9f8",
- dark: "#15202B"
-});
+const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ background-color: ${backgroundColor};
+ color: ${textColor};
+ min-height: 100%;
+ font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+ position: relative;
-export const textColor = theme("theme", {
- light: "#ffffff",
- dark: "#000000"
-});
+ &::-webkit-scrollbar {
+ display: none;
+ }
+`;
+
+const Component = styled.div`
+ flex-grow: 1;
+ display: flex;
+`;
export default function App() {
return (
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
\ No newline at end of file
diff --git a/frontend/components/DarkThemeProvider.js b/frontend/components/DarkThemeProvider.js
new file mode 100644
index 0000000..559c52e
--- /dev/null
+++ b/frontend/components/DarkThemeProvider.js
@@ -0,0 +1,37 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { ThemeProvider } from "styled-components";
+import theme from 'styled-theming';
+
+
+export const backgroundColor = theme("theme", {
+ light: "#fef9f8",
+ dark: "#15202B"
+});
+
+export const textColor = theme("theme", {
+ light: "#000000",
+ dark: "#ffffff"
+});
+
+export const buttonColor = theme("theme", {
+ light: "#A9A9A9",
+ dark: "#D3D3D3"
+});
+
+export const footerColor = theme("theme", {
+ light: "#404040",
+ dark: "#22303C"
+});
+
+const DarkThemeProvider = ({ children }) => {
+ const darkThemeEnabled = useSelector((state) => state.theme.darkThemeEnabled);
+ return (
+
+ {children}
+
+ );
+};
+
+
+export default DarkThemeProvider;
diff --git a/frontend/components/footer/Footer.jsx b/frontend/components/footer/Footer.jsx
index ae8e2b9..b839979 100644
--- a/frontend/components/footer/Footer.jsx
+++ b/frontend/components/footer/Footer.jsx
@@ -2,59 +2,110 @@ import React from 'react';
import LinkedInIcon from '@material-ui/icons/LinkedIn';
import GitHubIcon from '@material-ui/icons/GitHub';
import LanguageIcon from '@material-ui/icons/Language';
+import WbIncandescentIcon from '@material-ui/icons/WbIncandescent';
+import { useDispatch } from 'react-redux';
+import { toggleDarktheme } from '../../actions/theme_actions';
+import { buttonColor, footerColor } from '../DarkThemeProvider';
+import styled from 'styled-components';
+
+const source = 'https://docs.google.com/spreadsheets/d/1oE2avtfGQRuSI1-gltcIw-AazA3ov3dEoX-sTbPI6Jw/edit?fbclid=IwAR1T3ttg8PBZ2Ppi5w2J2R1UfUtF6h3eYUM6u7u6xIte9qdtHUz6T12unIc#gid=0';
+
+const Anchor = styled.a`
+ color: ${buttonColor}
+`;
+
+const Foot = styled.footer`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 40px;
+ background: ${footerColor};
+ width: 100%;
+ box-sizing: border-box;
+
+ &-site-explanation {
+ width: 40%
+ }
+
+ &-personal-info {
+ display: flex;
+ width: 40%;
+ justify-content: space-between;
+
+ & > div {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ width: 102px;
+ }
+
+ & span {
+ text-align: center;
+ }
+
+ &-links {
+ display: flex;
+ justify-content: space-between;
+ }
+ }
+
+`;
export default function Footer() {
- const source = 'https://docs.google.com/spreadsheets/d/1oE2avtfGQRuSI1-gltcIw-AazA3ov3dEoX-sTbPI6Jw/edit?fbclid=IwAR1T3ttg8PBZ2Ppi5w2J2R1UfUtF6h3eYUM6u7u6xIte9qdtHUz6T12unIc#gid=0';
+ const dispatch = useDispatch();
return (
-
+
)
}
\ No newline at end of file
diff --git a/frontend/reducers/theme_reducer.js b/frontend/reducers/theme_reducer.js
index bb38638..ca823d9 100644
--- a/frontend/reducers/theme_reducer.js
+++ b/frontend/reducers/theme_reducer.js
@@ -1,6 +1,6 @@
import { TOGGLE_DARKTHEME } from '../actions/theme_actions';
-export const themeReducer = (state = { darkThemeEnabled: false }, action) => {
+export default function themeReducer (state = { darkThemeEnabled: false }, action) {
switch (action.type) {
case TOGGLE_DARKTHEME:
return {...state, darkThemeEnabled: !state.darkThemeEnabled}
diff --git a/package-lock.json b/package-lock.json
index e4d4543..0f02bdf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1016,6 +1016,29 @@
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
},
+ "@emotion/is-prop-valid": {
+ "version": "0.8.8",
+ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+ "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+ "requires": {
+ "@emotion/memoize": "0.7.4"
+ }
+ },
+ "@emotion/memoize": {
+ "version": "0.7.4",
+ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+ "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+ },
+ "@emotion/stylis": {
+ "version": "0.8.5",
+ "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+ "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+ },
+ "@emotion/unitless": {
+ "version": "0.7.5",
+ "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+ "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+ },
"@material-ui/core": {
"version": "4.11.2",
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.2.tgz",
@@ -1404,6 +1427,22 @@
"object.assign": "^4.1.0"
}
},
+ "babel-plugin-styled-components": {
+ "version": "1.12.0",
+ "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz",
+ "integrity": "sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==",
+ "requires": {
+ "@babel/helper-annotate-as-pure": "^7.0.0",
+ "@babel/helper-module-imports": "^7.0.0",
+ "babel-plugin-syntax-jsx": "^6.18.0",
+ "lodash": "^4.17.11"
+ }
+ },
+ "babel-plugin-syntax-jsx": {
+ "version": "6.18.0",
+ "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+ "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+ },
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -1449,6 +1488,11 @@
"get-intrinsic": "^1.0.0"
}
},
+ "camelize": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+ "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+ },
"caniuse-lite": {
"version": "1.0.30001165",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001165.tgz",
@@ -1603,6 +1647,21 @@
"which": "^2.0.1"
}
},
+ "css-color-keywords": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+ "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+ },
+ "css-to-react-native": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+ "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+ "requires": {
+ "camelize": "^1.0.0",
+ "css-color-keywords": "^1.0.0",
+ "postcss-value-parser": "^4.0.2"
+ }
+ },
"css-vendor": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
@@ -5563,6 +5622,11 @@
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
"integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
},
+ "postcss-value-parser": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
+ "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
+ },
"prop-types": {
"version": "15.7.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
@@ -5861,6 +5925,11 @@
"randombytes": "^2.1.0"
}
},
+ "shallowequal": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+ "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+ },
"shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -5925,6 +5994,28 @@
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-1.0.4.tgz",
"integrity": "sha1-HhX7ysl9Pumb8tc7TGVrCCu6+5E="
},
+ "styled-components": {
+ "version": "5.2.1",
+ "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.1.tgz",
+ "integrity": "sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==",
+ "requires": {
+ "@babel/helper-module-imports": "^7.0.0",
+ "@babel/traverse": "^7.4.5",
+ "@emotion/is-prop-valid": "^0.8.8",
+ "@emotion/stylis": "^0.8.4",
+ "@emotion/unitless": "^0.7.4",
+ "babel-plugin-styled-components": ">= 1",
+ "css-to-react-native": "^3.0.0",
+ "hoist-non-react-statics": "^3.0.0",
+ "shallowequal": "^1.1.0",
+ "supports-color": "^5.5.0"
+ }
+ },
+ "styled-theming": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/styled-theming/-/styled-theming-2.2.0.tgz",
+ "integrity": "sha1-MITkPUDqq0vBHrr9PeBONiL+434="
+ },
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/package.json b/package.json
index 473e94c..5542a2e 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,8 @@
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
+ "styled-components": "^5.2.1",
+ "styled-theming": "^2.2.0",
"use-deep-compare-effect": "^1.6.1",
"webpack": "^5.10.0",
"webpack-cli": "^4.2.0"