Layout changes

src/components/UI/Button/Button.css

@@ -1,7 +1,6 @@
 .Button {
   display: block;
   text-align: center;
-  margin: 0;
   padding: 4px;
   outline: 0;
   color: var(--text_color);
@@ -10,8 +9,10 @@
   border: none;
   text-decoration: none;
   text-outline: none;
+  vertical-align: center;
   height: 100%;
   width: 100%;
+  overflow: hidden;
 }
 
 .Button:hover:enabled {
@@ -21,7 +22,7 @@
 }
 
 .Button:hover:disabled {
-  cursor: default;
+  cursor: no-drop;
 }
 
 .Button:active,

src/components/UI/DropDown/DropDown.css

@@ -23,4 +23,17 @@
   background: rgba(10, 10, 15, 0.8);
   border-color: rgba(10, 10, 20, 0.9);
   color: var(--text_color);
+}
+
+.Select:hover:enabled {
+  cursor: pointer;
+}
+
+.Select:hover:disabled {
+  cursor: no-drop;
+}
+
+.Select:active,
+.Select.active {
+  cursor: pointer;
 }

src/components/UI/Grid/Grid.js

@@ -66,36 +66,41 @@ export default CSSModules(class extends Component {
     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);
+        if (child) {
+          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>;
+        } else {
+          return null;
         }
-
-        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>;
-      });
+      })
+      .filter(i => i !== null);
     }
 
     const style = {