updates scss to css

gabrielwr · Jan 23, 2018 · 78e7f1c · 78e7f1c
1 parent d5b4a15
commit 78e7f1c
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 85 deletions.
diff --git 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`.
     -->
 
+    <title>Retirement Calculator</title>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <script src="https://use.fontawesome.com/ba76b64abe.js"></script>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet">
-
-    <!-- Responsive design? Check. This tag will make mobile browsers scale to device width -->
-    <title>Retirement Calculator</title>
     <script defer src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
     <script defer src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
   </head>
@@ -34,15 +32,5 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git 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
@@ -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
@@ -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