#38 start working on conflict details

ui/src/visualizations/team-awareness/chart/chart.js

@@ -11,6 +11,7 @@ export default class TeamAwareness extends React.PureComponent {
 
     this.state = {
       componentMounted: false,
+      showModal: true,
       colors: this.createColorSchema(_.map(this.props.data.stakeholders, 'id'))
     };
   }

ui/src/visualizations/team-awareness/components/ConflictDetailsModal/ConflictDetailsModal.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import * as styles from './ConflictDetailsModal.scss';
+
+export default class ConflictDetailsModal extends React.Component {
+  constructor(props) {
+    super(props);
+    this.styles = Object.assign({}, styles);
+  }
+
+  render() {
+    return (
+      <div className={this.styles.darkBG}>
+        <div className={this.styles.modal}>
+          <div className={this.styles.modalHeader}>
+            <b>Conflict Details</b>
+          </div>
+          <div className={this.styles.modalBody}>Here comes the content</div>
+          <div className={this.styles.modalFooter}>
+            <button>Close</button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

ui/src/visualizations/team-awareness/components/ConflictDetailsModal/ConflictDetailsModal.scss

@@ -0,0 +1,31 @@
+.darkBG {
+  background-color: rgba(0, 0, 0, 0.2);
+  width: 100vw;
+  height: 100vh;
+  z-index: 0;
+  position: absolute;
+}
+
+
+.modal {
+  background-color: white;
+  width: 500px;
+  height: 500px;
+  z-index: 10;
+  position: absolute;
+  margin-left: auto;
+
+  border-radius: 5px;
+  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
+}
+
+
+.modalHeader {
+  font-size: 2rem;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+}
+.modalBody {}
+.modalFooter {}