From 401c93403b79b8a45a20c98825d061bec5b8a934 Mon Sep 17 00:00:00 2001
From: astumpff2 <astumpff2@huskers.unl.edu>
Date: Sun, 30 Aug 2020 12:45:36 -0500
Subject: [PATCH] Added various properties to app

---
 .../features/invisibleMaze/invisibleMaze.js   | 64 ++++++++++---------
 .../invisibleMaze/invisibleMaze.module.css    | 25 ++++++--
 2 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/minimal-app/src/features/invisibleMaze/invisibleMaze.js b/minimal-app/src/features/invisibleMaze/invisibleMaze.js
index a203532..87f7514 100644
--- a/minimal-app/src/features/invisibleMaze/invisibleMaze.js
+++ b/minimal-app/src/features/invisibleMaze/invisibleMaze.js
@@ -1,38 +1,44 @@
 import React from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import PropTypes from 'prop-types';
 import styles from './invisibleMaze.module.css';
 export function InvisibleMaze() {
 
   return (
     <main>
-      <label>
-        <button className={styles.panel}>
-        </button>
-        <button className={styles.panel}>
-        </button>
-        <button className={styles.panel}>
-        </button>
-        <button className={styles.panel}>
-        </button>
-        <button className={styles.panel}>
-        </button>
-        <button className={styles.panel}>
-        </button>
-        <button className={styles.panel}>
-        </button>
-        <button className={styles.panel}>
-        </button>
-        <button className={styles.panel}>
-        </button>
-        <button className={styles.create}>
-        {"Create Maze"}
-        </button>
-        <button className={styles.reset}>
-        </button>
-        <button className={styles.play}>
-        </button>
-      </label>
+        <div className={styles.maze}>
+          <button className={styles.panel}>
+          </button>
+          <button className={styles.panel}>
+          </button>
+          <button className={styles.panel}>
+          </button>
+        </div>
+        <div className={styles.maze}>
+          <button className={styles.panel}>
+          </button>
+          <button className={styles.panel}>
+          </button>
+          <button className={styles.panel}>
+          </button>
+        </div>
+        <div className={styles.maze}>
+          <button className={styles.panel}>
+          </button>
+          <button className={styles.panel}>
+          </button>
+          <button className={styles.panel}>
+          </button>
+        </div>
+        <div className={styles.controlPanel}>
+          <button className={styles.create}>
+          {"Create Maze"}
+          </button>
+          <button className={styles.reset}>
+          {"Reset Maze"}
+          </button>
+          <button className={styles.play}>
+          {"Play Maze"}
+          </button>
+        </div>
     </main>
   );
 }
\ No newline at end of file
diff --git a/minimal-app/src/features/invisibleMaze/invisibleMaze.module.css b/minimal-app/src/features/invisibleMaze/invisibleMaze.module.css
index 4ade51c..29604f3 100644
--- a/minimal-app/src/features/invisibleMaze/invisibleMaze.module.css
+++ b/minimal-app/src/features/invisibleMaze/invisibleMaze.module.css
@@ -1,20 +1,31 @@
 .panel {
-  width: 50px;
+  width: 100px;
   height: 50px;
 }
 .create {
-  width: 50px;
+  width: 100px;
   height: 50px;
+  font-weight: bold;
 }
 .reset {
-  width: 50px;
+  width: 100px;
   height: 50px;
+  font-weight: bold;
 }
 .play {
-  width: 50px;
+  width: 100px;
   height: 50px;
+  font-weight: bold;
 }
-.maze {
-  width: 50px;
-  height: 50px;
+.maze{
+  display: flex;
+  flex-flow: row, nowrap;
+  padding: 10px;
+  align-content: center;
 }
+.controlPanel{
+  display: flex;
+  background-color: maroon;
+  padding: 10px;
+  flex-flow: row, nowrap;
+}
\ No newline at end of file
-- 
GitLab