diff --git a/dashboard-client/app/app/src/components/Tabs.js b/dashboard-client/app/app/src/components/Tabs.js index 260938b912..6ee0a47b33 100644 --- a/dashboard-client/app/app/src/components/Tabs.js +++ b/dashboard-client/app/app/src/components/Tabs.js @@ -8,21 +8,21 @@ const Container = styled.div` `; const Tab = styled.div` - background: ${({ active }) => active ? 'blue' : 'white'}; - color: ${({ active }) => active ? 'white' : 'blue'}; + background: ${({ active, theme }) => active ? theme.primary : 'white'}; + color: ${({ active, theme }) => active ? 'white' : theme.primary}; font-size: 18px; padding: 5px; - border: 2px solid blue; + border: 2px solid ${({ theme }) => theme.primary}; border-left: none; &:hover { cursor: pointer; - background: blue; + background: ${({ theme }) => theme.primary}; color: white; } &:first-child { - border-left: 2px solid blue; + border-left: 2px solid ${({ theme }) => theme.primary}; } `; diff --git a/dashboard-client/app/app/src/index.js b/dashboard-client/app/app/src/index.js index 0c5e75da1c..9aab8351fd 100644 --- a/dashboard-client/app/app/src/index.js +++ b/dashboard-client/app/app/src/index.js @@ -1,12 +1,17 @@ import React from 'react'; import ReactDOM from 'react-dom'; + import './index.css'; -import App from './App'; import * as serviceWorker from './serviceWorker'; +import theme from './theme'; -ReactDOM.render(, document.getElementById('root')); +import App from './App'; +import { ThemeProvider } from 'styled-components'; + +ReactDOM.render( + + + , + document.getElementById('root')); -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: http://bit.ly/CRA-PWA serviceWorker.unregister(); diff --git a/dashboard-client/app/app/src/theme/index.js b/dashboard-client/app/app/src/theme/index.js new file mode 100644 index 0000000000..142142640c --- /dev/null +++ b/dashboard-client/app/app/src/theme/index.js @@ -0,0 +1,5 @@ +const theme = { + primary: 'blue' +}; + +export default theme;