Move styles to SCSS Modules

Fixes: #4

README.md

@@ -12,4 +12,14 @@ The deployed version will appear at <https://www.tbble.org/monte-carlo-stefano/>
 
 This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
 
+It currently depends on the [react-scripts 2.0.0 alpha releases](https://www.npmjs.com/package/react-scripts/v/next) for features such as CSS Modules and Sass integration.
+
 You can find the originally-provided guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
+
+### [Sass: Syntactically Awesome Style Sheets](https://sass-lang.com)
+
+This project uses SCSS to define style sheets, see the [guide](https://sass-lang.com/guide).
+
+### [CSS Modules](https://github.com/css-modules/css-modules)
+
+This project uses CSS Modules to connect ReactJS components to their style.

src/App.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import './App.css';
+import styles from './App.module.scss';
 import ProjectDisplay from './ProjectDisplay';
 import EpicDisplay from './EpicDisplay';
 
@@ -45,14 +45,14 @@ class App extends Component {
     ];
 
     return (
-      <div className="App">
-        <header className="App-header">
-          <h1 className="App-title">Stefano's Monte Carlo thing</h1>
+      <div className={styles.App}>
+        <header className={styles.header}>
+          <h1 className={styles.title}>Stefano's Monte Carlo thing</h1>
         </header>
-        <div className="App-left">
+        <div className={styles.left}>
           <ProjectDisplay epics={EPICS} />
         </div>
-        <div className="App-right">
+        <div className={styles.right}>
           <EpicDisplay epics={EPICS} />
         </div>
       </div>

src/App.css → src/App.module.scss

@@ -2,26 +2,26 @@
   text-align: center;
 }
 
-.App-header {
+.header {
   background-color: #222;
   padding: 20px;
   color: white;
 }
 
-.App-title {
+.title {
   font-size: 1.5em;
 }
 
-.App-intro {
+.intro {
   font-size: large;
 }
 
-.App-left {
+.left {
   float: left;
   border: 2px black solid;
 }
 
-.App-right {
+.right {
   float: right;
   border: 2px black solid;
 }

src/Epic.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { percentile, round } from './data';
-import './Epic.css';
+import styles from './Epic.module.scss';
 
 function renderPercentiles(results) {
   return (
@@ -46,7 +46,7 @@ class Epic extends Component {
 
   render() {
     return (
-      <tr className={this.props.selected ? 'Epic Epic-Selected' : 'Epic'}>
+      <tr className={this.props.selected ? styles.selected : undefined}>
         <td>{this.props.epic.size}</td>
         {this.renderPERT()}
         {this.renderGaussian()}

src/Epic.css → src/Epic.module.scss

@@ -1,3 +1,3 @@
-.Epic-Selected {
+.selected {
   font-weight: bold;
 }

src/EpicDisplay.js

@@ -22,7 +22,7 @@ class EpicDisplay extends Component {
     const selectedResults = results[selected];
 
     return (
-      <div className="EpicDisplay">
+      <div>
         <Graph
           label={'Epic: ' + selectedEpics.size}
           results={selectedResults}

src/EpicList.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import './EpicList.css';
+import styles from './EpicList.module.scss';
 import Epic from './Epic';
 
 class EpicList extends Component {
@@ -17,7 +17,7 @@ class EpicList extends Component {
     });
 
     return (
-      <div className="EpicList">
+      <div className={styles.epicList}>
         <h2>Epics</h2>
         <table>
           <thead>

src/EpicList.css → src/EpicList.module.scss

@@ -1,15 +1,11 @@
-.EpicList {
+.epicList {
   border: 1px black solid;
 }
 
-.EpicList tr th {
+.epicList tr th {
   border: 1px black solid;
 }
 
-.EpicList tr td {
+.epicList tr td {
   border: 1px black dotted;
 }
-
-.error {
-  color: red;
-}

src/Graph.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import ReactEcharts from 'echarts-for-react';
 import { round, percentile } from './data';
 
-import './Graph.css';
+import styles from './Graph.module.scss';
 
 function tooltipValueFormatter(params) {
   return params.seriesName + ': ' + params.value[1] + '%';
@@ -26,7 +26,7 @@ function tooltipFormatter(paramsList) {
 class Graph extends Component {
   render() {
     return (
-      <div className="Graph">
+      <div className={styles.graph}>
         <p>Rendering {this.props.label}</p>
         <ReactEcharts style={{ height: '600px' }} option={this.getOption()} />
       </div>
@@ -130,7 +130,7 @@ class Graph extends Component {
     const count = values.length;
     return [...new Set(values)].map(x => [
       x,
-      values.filter(y => y === x).length * 100 / count,
+      (values.filter(y => y === x).length * 100) / count,
     ]);
   }
 

src/Graph.css → src/Graph.module.scss

@@ -1,3 +1,3 @@
-.Graph {
+.graph {
   border: 1px black solid;
 }

src/Project.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { percentile, round } from './data';
-import './Project.css';
+import styles from './Project.module.scss';
 
 function renderPercentiles(results) {
   return (
@@ -29,9 +29,7 @@ class Project extends Component {
       epicCounts.push(<td key={index}>{count}</td>);
     });
     return (
-      <tr
-        className={this.props.selected ? 'Project Project-Selected' : 'Project'}
-      >
+      <tr className={this.props.selected ? styles.selected : undefined}>
         <td>{project.id}</td>
         {epicCounts}
         {this.renderPERTPercentiles()}

src/Project.css → src/Project.module.scss

@@ -1,3 +1,3 @@
-.Project-Selected {
+.selected {
   font-weight: bold;
 }

src/ProjectDisplay.js

@@ -72,7 +72,7 @@ class ProjectDisplay extends Component {
       : null;
 
     return (
-      <div className="ProjectDisplay">
+      <div>
         <Graph
           label={'Project ' + selectedProjects.id}
           results={selectedResults}

src/ProjectList.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import './ProjectList.css';
+import styles from './ProjectList.module.scss';
 import Project from './Project';
 
 class ProjectList extends Component {
@@ -23,7 +23,7 @@ class ProjectList extends Component {
       );
     });
     return (
-      <div className="ProjectList">
+      <div className={styles.ProjectList}>
         <h2>Projects</h2>
         <table>
           <thead>

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ReactModal from 'react-modal';
-import './index.css';
+import './index.scss';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';