From 72b671efdd6d7779b65a3aa4de382f1b1fb577ea Mon Sep 17 00:00:00 2001 From: Drew Date: Sun, 24 Jan 2021 22:48:04 -0500 Subject: [PATCH] Footer and app container now support theme --- app/assets/stylesheets/nav.scss | 2 +- app/assets/stylesheets/reset.scss | 19 ---- db/schema.rb | 2 +- frontend/components/App.jsx | 65 +++++++------ frontend/components/DarkThemeProvider.js | 37 ++++++++ frontend/components/footer/Footer.jsx | 113 ++++++++++++++++------- frontend/reducers/theme_reducer.js | 2 +- package-lock.json | 91 ++++++++++++++++++ package.json | 2 + 9 files changed, 253 insertions(+), 80 deletions(-) create mode 100644 frontend/components/DarkThemeProvider.js 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 ( -
-
+ + +