Component refactoring

src/components/UI/Button/Button.css

@@ -10,7 +10,8 @@
   border: none;
   text-decoration: none;
   text-outline: none;
-  width: 70px;
+  height: 100%;
+  width: 100%;
 }
 
 .Button:hover:enabled {

src/components/UI/DropDown/DropDown.css

@@ -1,5 +1,7 @@
 .DropDown {
+  display: block;
   width: 100%;
+  height: 100%;
   margin: 0;
   padding: 0;
 }

src/components/UI/Grid/Grid.css

@@ -0,0 +1,18 @@
+.Grid {
+  margin: 0;
+  padding: 0;
+  display: grid;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: auto;
+}
+
+.GridOwner {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}

src/components/UI/Grid/Grid.js

@@ -0,0 +1,121 @@
+import React, {Component} from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './Grid.css';
+import GridComponent from './GridComponent/GridComponent';
+
+export default CSSModules(class extends Component {
+  constructor(props) {
+    super(props);
+    window.addEventListener("resize", this.updateSizeAsync);
+  }
+
+  state = {
+    calculated: false,
+    dimensions: {
+      columns: 0,
+      rows: 0
+    }
+  };
+
+  calculateDimensions = (size) => {
+    return {
+      columns: Math.floor(size.width / 4),
+      rows: Math.floor(size.height / 4)
+    };
+  };
+
+  getSize = () => {
+    const elem = this.refs.GridOwner;
+    return {
+      height: elem ? elem.clientHeight : 0,
+      width: elem ? elem.clientWidth : 0
+    };
+  };
+
+  updateSize = () => {
+    const state = {
+      ...this.state
+    };
+    const size = this.getSize();
+    const dimensions = this.calculateDimensions(size);
+    if (state.dimensions !== dimensions) {
+      this.setState({
+        calculated: true,
+        dimensions: dimensions
+      })
+    }
+  };
+
+  updateSizeAsync = () => {
+    return new Promise((done) => {
+      this.updateSize();
+      done();
+    });
+  };
+
+  componentDidMount = () => {
+    this.updateSizeAsync();
+  };
+
+  componentWillUnmount = () => {
+    window.removeEventListener("resize", this.updateSizeAsync);
+  };
+
+  render() {
+    let children = null;
+    const dimensions = this.state.dimensions;
+    if (this.state.calculated) {
+      children = React.Children.map(this.props.children, (child, i) => {
+        let row = child.props.row || 0;
+        if (typeof(row) === 'function') {
+          row = row(dimensions);
+        }
+
+        let col = child.props.col || 0;
+        if (typeof(col) === 'function') {
+          col = col(dimensions);
+        }
+
+        let rowSpan = child.props.rowSpan;
+        if (typeof(rowSpan) === 'function') {
+          rowSpan = rowSpan(dimensions.rows - row, dimensions.rows);
+        }
+
+        let colSpan = child.props.colSpan;
+        if (typeof(colSpan) === 'function') {
+          colSpan = colSpan(dimensions.columns - col, dimensions.columns);
+        }
+
+        rowSpan = rowSpan ? (rowSpan === 'remain' ? (dimensions.rows - row) : rowSpan) : null;
+        colSpan = colSpan ? (colSpan === 'remain' ? dimensions.columns - col : colSpan) : null;
+
+        return <GridComponent
+          row={row}
+          col={col}
+          rowSpan={rowSpan}
+          colSpan={colSpan}
+          key={'gc_' + i}>{child}</GridComponent>;
+      });
+    }
+
+    const style = {
+      style: {
+        gridTemplateColumns: '4px '.repeat(dimensions.columns).trim(),
+        gridTemplateRows: '4px '.repeat(dimensions.rows).trim(),
+        gridAutoColumns: '4px',
+        gridAutoRows: '4px'
+      }
+    };
+
+    return (
+      <div
+        ref='GridOwner'
+        styleName='GridOwner'>
+        <div styleName='Grid' {...style}>
+          {children}
+        </div>
+      </div>
+    )
+  };
+
+}, styles, {allowMultiple: true});

src/components/UI/Grid/GridComponent/GridComponent.css

@@ -0,0 +1,7 @@
+.GridComponent {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/components/UI/Grid/GridComponent/GridComponent.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './GridComponent.css';
+
+export default CSSModules((props) => {
+  const style = {
+    style: {
+      gridRowStart: Math.floor(props.row + 1),
+      gridRowEnd: 'span ' + Math.floor(props.rowSpan || 1),
+      gridColumnStart: Math.floor(props.col + 1),
+      gridColumnEnd: 'span ' + Math.floor(props.colSpan || 1)
+    }
+  };
+
+  return (
+    <div styleName='GridComponent' {...style}>
+      {props.children}
+    </div>
+  );
+
+}, styles, {allowMultiple: true});

src/components/UI/Text/Text.css

@@ -0,0 +1,39 @@
+.TextOwner {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  flex-direction: column;
+}
+
+.Text {
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
+  text-align: center;
+  vertical-align: center;
+  color: var(--text_color);
+}
+
+.Heading1 {
+  font-weight: bold;
+  color: var(--heading_text_color);
+}
+
+.Heading2 {
+  font-weight: bold;
+  color: var(--heading_other_text_color);
+}
+
+.Heading3 {
+  font-weight: bold;
+  color: var(--heading_other_text_color);
+}
+
+.AltTextColor {
+  color: var(--heading_other_text_color);
+}

src/components/UI/Text/Text.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './Text.css';
+
+export default CSSModules((props) => {
+  const styleList = [];
+  styleList.push('Text');
+  if (props.type) {
+    styleList.push(props.type);
+  }
+
+  let style = {...props.style};
+  if (props.textAlign) {
+    style['textAlign'] = props.textAlign.toLowerCase();
+  }
+
+  const text = (
+    <div
+      styleName={styleList.join(' ')}
+      style={style}>{props.text}
+    </div>);
+
+  return props.noOwner ? text : (
+    <div styleName={'TextOwner'}>
+      {text}
+    </div>);
+
+}, styles, {allowMultiple: true});