From 280896a70ab34307c670e71b53248ac68816a4ce Mon Sep 17 00:00:00 2001
From: jherman5 <jherman5@huskers.unl.edu>
Date: Sat, 29 Aug 2020 20:16:53 -0500
Subject: [PATCH] Added basic GUI styling. May need to rework in the future.
Checkpoint 4.
---
.../src/features/patternGen/buttonLayout.css | 35 +++++++++++++++++++
.../features/patternGen/patternGeneration.js | 12 ++++---
2 files changed, 42 insertions(+), 5 deletions(-)
create mode 100644 simon-says/src/features/patternGen/buttonLayout.css
diff --git a/simon-says/src/features/patternGen/buttonLayout.css b/simon-says/src/features/patternGen/buttonLayout.css
new file mode 100644
index 0000000..e7e3133
--- /dev/null
+++ b/simon-says/src/features/patternGen/buttonLayout.css
@@ -0,0 +1,35 @@
+.redbutton{
+ background-color: #f44336;
+ border: none;
+ width: 50%;
+ height: 300px;
+}
+.bluebutton{
+ background-color: #008CBA;
+ border: none;
+ width: 50%;
+ height: 300px;
+}
+.yellowbutton{
+ background-color: #ffff00;
+ border: none;
+ width: 50%;
+ height: 300px;
+}
+.greenbutton{
+ background-color: #4CAF50;
+ border: none;
+ width: 50%;
+ height: 300px;
+}
+#wrapper{
+ width: 100%;
+ background-color:#ffffff;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top:10px;
+ margin-bottom:10px;
+ padding:10px;
+ line-height:150%;
+ clear:both;
+}
\ No newline at end of file
diff --git a/simon-says/src/features/patternGen/patternGeneration.js b/simon-says/src/features/patternGen/patternGeneration.js
index cfe8a60..dbf89a0 100644
--- a/simon-says/src/features/patternGen/patternGeneration.js
+++ b/simon-says/src/features/patternGen/patternGeneration.js
@@ -1,20 +1,22 @@
import React from 'react';
+import styles from './buttonLayout.css';
export function Pattern() {
return (
<main>
- <button>
-
+ <div>
+ <button class = "redbutton">
</button>
- <button>
+ <button class = "bluebutton">
</button>
- <button>
+ <button class = 'yellowbutton'>
</button>
- <button>
+ <button class = 'greenbutton'>
</button>
+ </div>
</main>
);
}
\ No newline at end of file
--
GitLab