diff --git a/public/index.html b/public/index.html index 202a95f..a522483 100644 --- a/public/index.html +++ b/public/index.html @@ -20,12 +20,10 @@ Learn how to configure a non-root public URL by running `npm run build`. --> + Retirement Calculator - - - Retirement Calculator @@ -34,15 +32,5 @@ You need to enable JavaScript to run this app.
- diff --git a/src/components/CalculatorForm.jsx b/src/components/CalculatorForm.jsx index dd19a1d..adfaa9e 100644 --- a/src/components/CalculatorForm.jsx +++ b/src/components/CalculatorForm.jsx @@ -3,6 +3,7 @@ import Slider from 'material-ui/Slider'; import { Col } from 'react-materialize'; import { formatMoney } from '../utils/formatMoney'; +import '../css/index.css'; class CalculatorForm extends Component { render() { diff --git a/src/components/Chart.jsx b/src/components/Chart.jsx index 6a26677..167812a 100644 --- a/src/components/Chart.jsx +++ b/src/components/Chart.jsx @@ -9,7 +9,7 @@ import { ResponsiveContainer } from 'recharts'; -import '../css/scss/index.scss'; +import '../css/index.css'; import { formatMoney } from '../utils/formatMoney'; import BarChart from './DynamicChart'; diff --git a/src/css/index.css b/src/css/index.css new file mode 100644 index 0000000..e10e320 --- /dev/null +++ b/src/css/index.css @@ -0,0 +1,61 @@ + +.nav { + font-family: 'Open Sans', sans-serif; +} + +.chartContainer { + display: flex; + // flex-direction: column; + justify-content: center; + align-items: center; + height: 496px; + // position: relative; +} + +#form { + display: flex; + flex-direction: column; + justify-content: center; + font-family: 'Open Sans', sans-serif; +} + +footer { + background-color: "#2266bb"; + font-family: 'Open Sans', sans-serif; + position: absolute; + right: 0; + left: 0; + width: 100%; + padding: 1rem; +} + +.formContainer { + display: flex; + justify-content: center; + flex-direction: row; + align-items: center; + //should make similar to legend style + // background-color: '#f5f5f5'; + // border: '1px solid #d5d5d5'; + // border-radius: 3; + // line-height: '40px' +} + +footer .footer-copyright { + background-color: transparent; +} + +.page-footer a { + color: white; +} +.icon { + background-color: #2266bb; +} + +.space-button { + margin-left: 6%; +} + +.formContainer .col { + padding: 1em; +} diff --git a/src/css/scss/index.scss b/src/css/scss/index.scss deleted file mode 100644 index fcdd037..0000000 --- a/src/css/scss/index.scss +++ /dev/null @@ -1,71 +0,0 @@ -// can import these sass files straight into browser JS files -// wepback will then build the scss into css that is usable on dom -@import url('https://fonts.googleapis.com/css?family=Open+Sans'); - -.nav { - font-family: 'Open Sans', sans-serif; -} - -// .finalSavings { -// font-family: 'Open Sans', sans-serif; -// position: absolute; -// left: 20%; -// text-align: -webkit-center; -// } - -.chartContainer { - display: flex; - // flex-direction: column; - justify-content: center; - align-items: center; - height: 496px; - // position: relative; -} - -#form { - display: flex; - flex-direction: column; - justify-content: center; - font-family: 'Open Sans', sans-serif; -} - -footer { - background-color: "#2266bb"; - font-family: 'Open Sans', sans-serif; - position: absolute; - right: 0; - left: 0; - width: 100%; - padding: 1rem; -} - -.formContainer { - display: flex; - justify-content: center; - flex-direction: row; - align-items: center; - //should make similar to legend style - // background-color: '#f5f5f5'; - // border: '1px solid #d5d5d5'; - // border-radius: 3; - // line-height: '40px' -} - -footer .footer-copyright { - background-color: transparent; -} - -.page-footer a { - color: white; -} -.icon { - background-color: #2266bb; -} - -.space-button { - margin-left: 6%; -} - -.formContainer .col { - padding: 1em; -}