From 1c3aaf25be0e8d07e21109ecc1cdd95872ef2a7a Mon Sep 17 00:00:00 2001
From: Mouhamadou Diouf <mouhamadoudioufsn@gmail.com>
Date: Wed, 4 Mar 2020 09:26:19 +0000
Subject: [PATCH 1/4] Adding the styling for modules

---
 src/App.css                   | 39 +++--------------------------------
 src/Button.css                |  5 +++++
 src/ButtonPanel.css           |  5 +++++
 src/Display.css               |  9 ++++++++
 src/components/App.js         |  2 +-
 src/components/Button.js      |  5 +++--
 src/components/ButtonPanel.js | 11 +++++-----
 src/components/Display.js     |  3 ++-
 8 files changed, 34 insertions(+), 45 deletions(-)
 create mode 100644 src/Button.css
 create mode 100644 src/ButtonPanel.css
 create mode 100644 src/Display.css

diff --git a/src/App.css b/src/App.css
index 74b5e05..e302e11 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,5 @@
 .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+display: flex;
+flex-direction: column;
+width: 700px;
 }
diff --git a/src/Button.css b/src/Button.css
new file mode 100644
index 0000000..0b50380
--- /dev/null
+++ b/src/Button.css
@@ -0,0 +1,5 @@
+.Button {
+  width: 25%;
+  text-align: center;
+  border-left: 1px solid black;
+}
diff --git a/src/ButtonPanel.css b/src/ButtonPanel.css
new file mode 100644
index 0000000..d499b0e
--- /dev/null
+++ b/src/ButtonPanel.css
@@ -0,0 +1,5 @@
+.group{
+  
+  height: 100px;
+
+}
diff --git a/src/Display.css b/src/Display.css
new file mode 100644
index 0000000..ba53965
--- /dev/null
+++ b/src/Display.css
@@ -0,0 +1,9 @@
+.Display {
+  background: grey;
+  height: 100px;
+  color: white;
+  font-weight: bold;
+  font-size: 80px;
+  padding: 10px;
+  text-align: right;
+}
diff --git a/src/components/App.js b/src/components/App.js
index b84ac74..5df3fa4 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -11,7 +11,7 @@ class App extends React.Component {
 
   render() {
     return (
-      <div>
+      <div className="App">
         <Display result="0" />
         <ButtonPanel />
       </div>
diff --git a/src/components/Button.js b/src/components/Button.js
index 437a88a..bee95d1 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import Proptypes from 'prop-types';
+import '../Button.css'
 
 const button = props => {
-  const { name } = props;
+  const { name, color, wide } = props;
   return (
-    <button type="button">{name}</button>
+    <button type="button" className="Button">{name}</button>
   );
 };
 
diff --git a/src/components/ButtonPanel.js b/src/components/ButtonPanel.js
index 57c4ba9..4a1fde2 100644
--- a/src/components/ButtonPanel.js
+++ b/src/components/ButtonPanel.js
@@ -1,33 +1,34 @@
 import React from 'react';
 import Button from './Button';
+import '../ButtonPanel.css'
 
 const buttonPanel = () => (
   <div>
-    <div className="group-1">
+    <div className="group group-1">
       <Button name="AC" />
       <Button name="+/-" />
       <Button name="%" />
       <Button name="+" />
     </div>
-    <div className="group-2">
+    <div className="group group-2">
       <Button name="7" />
       <Button name="8" />
       <Button name="9" />
       <Button name="X" />
     </div>
-    <div className="group-3">
+    <div className="group group-3">
       <Button name="4" />
       <Button name="5" />
       <Button name="6" />
       <Button name="-" />
     </div>
-    <div className="group-4">
+    <div className="group group-4">
       <Button name="1" />
       <Button name="2" />
       <Button name="3" />
       <Button name="+" />
     </div>
-    <div className="group-5">
+    <div className="group group-5">
       <Button name="0" />
       <Button name="." />
       <Button name="=" />
diff --git a/src/components/Display.js b/src/components/Display.js
index a0a9218..c2ab71d 100644
--- a/src/components/Display.js
+++ b/src/components/Display.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import Proptypes from 'prop-types';
+import '../Display.css'
 
 const display = props => {
   const { result } = props;
   return (
-    <div>
+    <div className="Display">
       {result}
     </div>
   );

From 02ac51f5c428739e5bcaf0d12bed92f9c366d542 Mon Sep 17 00:00:00 2001
From: Mouhamadou Diouf <mouhamadoudioufsn@gmail.com>
Date: Wed, 4 Mar 2020 10:36:38 +0000
Subject: [PATCH 2/4] Styling the calculator using CSS

---
 src/App.css                   |  1 +
 src/Button.css                |  5 +++++
 src/ButtonPanel.css           |  4 +---
 src/components/Button.js      | 14 +++++++++++---
 src/components/ButtonPanel.js | 34 +++++++++++++++++-----------------
 src/components/Display.js     |  2 +-
 6 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/src/App.css b/src/App.css
index e302e11..013350c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,4 +2,5 @@
 display: flex;
 flex-direction: column;
 width: 700px;
+margin: 50px auto;
 }
diff --git a/src/Button.css b/src/Button.css
index 0b50380..5713006 100644
--- a/src/Button.css
+++ b/src/Button.css
@@ -2,4 +2,9 @@
   width: 25%;
   text-align: center;
   border-left: 1px solid black;
+  font-size: 20px;
+  font-weight: bold;
+  color: black;
+  height: 100%
+
 }
diff --git a/src/ButtonPanel.css b/src/ButtonPanel.css
index d499b0e..05b1a24 100644
--- a/src/ButtonPanel.css
+++ b/src/ButtonPanel.css
@@ -1,5 +1,3 @@
-.group{
-  
+.ButtonPanel .group {
   height: 100px;
-
 }
diff --git a/src/components/Button.js b/src/components/Button.js
index bee95d1..d4fd935 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,20 +1,28 @@
 import React from 'react';
 import Proptypes from 'prop-types';
-import '../Button.css'
+import '../Button.css';
 
 const button = props => {
-  const { name, color, wide } = props;
+  const { name, color } = props;
+  let { wide } = props;
+  wide = wide === true ? '50%' : '25%';
   return (
-    <button type="button" className="Button">{name}</button>
+    <button type="button" className="Button" style={{ background: color, width: wide }}>{name}</button>
   );
 };
 
+
 button.defaultProps = {
   name: '',
+  color: '#FA9F42',
+  wide: false,
 };
 
 button.propTypes = {
   name: Proptypes.string,
+  color: Proptypes.string,
+  wide: Proptypes.bool,
 };
 
+
 export default button;
diff --git a/src/components/ButtonPanel.js b/src/components/ButtonPanel.js
index 4a1fde2..460fbf4 100644
--- a/src/components/ButtonPanel.js
+++ b/src/components/ButtonPanel.js
@@ -1,36 +1,36 @@
 import React from 'react';
 import Button from './Button';
-import '../ButtonPanel.css'
+import '../ButtonPanel.css';
 
 const buttonPanel = () => (
-  <div>
+  <div className="ButtonPanel">
     <div className="group group-1">
-      <Button name="AC" />
-      <Button name="+/-" />
-      <Button name="%" />
-      <Button name="+" />
+      <Button name="AC" color="#E0E0E2" />
+      <Button name="+/-" color="#E0E0E2" />
+      <Button name="%" color="#E0E0E2" />
+      <Button name="÷" />
     </div>
     <div className="group group-2">
-      <Button name="7" />
-      <Button name="8" />
-      <Button name="9" />
+      <Button name="7" color="#E0E0E2" />
+      <Button name="8" color="#E0E0E2" />
+      <Button name="9" color="#E0E0E2" />
       <Button name="X" />
     </div>
     <div className="group group-3">
-      <Button name="4" />
-      <Button name="5" />
-      <Button name="6" />
+      <Button name="4" color="#E0E0E2" />
+      <Button name="5" color="#E0E0E2" />
+      <Button name="6" color="#E0E0E2" />
       <Button name="-" />
     </div>
     <div className="group group-4">
-      <Button name="1" />
-      <Button name="2" />
-      <Button name="3" />
+      <Button name="1" color="#E0E0E2" />
+      <Button name="2" color="#E0E0E2" />
+      <Button name="3" color="#E0E0E2" />
       <Button name="+" />
     </div>
     <div className="group group-5">
-      <Button name="0" />
-      <Button name="." />
+      <Button name="0" wide color="#E0E0E2" />
+      <Button name="." color="#E0E0E2" />
       <Button name="=" />
     </div>
   </div>
diff --git a/src/components/Display.js b/src/components/Display.js
index c2ab71d..0a27c6d 100644
--- a/src/components/Display.js
+++ b/src/components/Display.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Proptypes from 'prop-types';
-import '../Display.css'
+import '../Display.css';
 
 const display = props => {
   const { result } = props;

From 2a194951f8ddf081e81f5add0d7577f72b8575de Mon Sep 17 00:00:00 2001
From: Mouhamadou Diouf <mouhamadoudioufsn@gmail.com>
Date: Thu, 5 Mar 2020 11:09:06 +0000
Subject: [PATCH 3/4] Destructuring the props for Button.js

---
 src/Button.css           | 1 -
 src/components/Button.js | 8 ++------
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/Button.css b/src/Button.css
index 5713006..3d97a44 100644
--- a/src/Button.css
+++ b/src/Button.css
@@ -1,7 +1,6 @@
 .Button {
   width: 25%;
   text-align: center;
-  border-left: 1px solid black;
   font-size: 20px;
   font-weight: bold;
   color: black;
diff --git a/src/components/Button.js b/src/components/Button.js
index d4fd935..a1152bd 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -2,16 +2,12 @@ import React from 'react';
 import Proptypes from 'prop-types';
 import '../Button.css';
 
-const button = props => {
-  const { name, color } = props;
-  let { wide } = props;
-  wide = wide === true ? '50%' : '25%';
+const button = ({name, color, wide}) => {
   return (
-    <button type="button" className="Button" style={{ background: color, width: wide }}>{name}</button>
+    <button type="button" className="Button" style={{ background: color, width: wide === true ? '50%' : '25%' }}>{name}</button>
   );
 };
 
-
 button.defaultProps = {
   name: '',
   color: '#FA9F42',

From 7a8b61f4e3e3618ceec2ca9681b4f1cc583ebe7b Mon Sep 17 00:00:00 2001
From: Mouhamadou Diouf <mouhamadoudioufsn@gmail.com>
Date: Thu, 5 Mar 2020 11:10:48 +0000
Subject: [PATCH 4/4] Fixing the linter errors

---
 src/components/Button.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index a1152bd..0c59f4d 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -2,11 +2,9 @@ import React from 'react';
 import Proptypes from 'prop-types';
 import '../Button.css';
 
-const button = ({name, color, wide}) => {
-  return (
-    <button type="button" className="Button" style={{ background: color, width: wide === true ? '50%' : '25%' }}>{name}</button>
-  );
-};
+const button = ({ name, color, wide }) => (
+  <button type="button" className="Button" style={{ background: color, width: wide === true ? '50%' : '25%' }}>{name}</button>
+);
 
 button.defaultProps = {
   name: '',