From 33d71ac1350082c11719f4a097468b46b9a0bbc3 Mon Sep 17 00:00:00 2001
From: vinaybiradar1717 <vinaybiradar1717@gmail.com>
Date: Sat, 3 Aug 2019 02:42:41 +0530
Subject: [PATCH 1/3] simple grids

Signed-off-by: vinaybiradar1717 <vinaybiradar1717@gmail.com>
---
 package-lock.json                          | 84 ++++++++++++++++------
 src/App.jsx                                |  3 +
 src/Components/Layout/Grid/Grid.jsx        | 29 ++++++++
 src/Components/Layout/Grid/stylesGrid.scss | 50 +++++++++++++
 4 files changed, 143 insertions(+), 23 deletions(-)
 create mode 100644 src/Components/Layout/Grid/Grid.jsx
 create mode 100644 src/Components/Layout/Grid/stylesGrid.scss

diff --git a/package-lock.json b/package-lock.json
index 2aa4ffb..bcf71e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "zapify-ui",
-  "version": "0.1.0",
+  "version": "0.1.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2901,7 +2901,8 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -2919,11 +2920,13 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -2936,15 +2939,18 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -3047,7 +3053,8 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -3057,6 +3064,7 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -3069,17 +3077,20 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -3096,6 +3107,7 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -3168,7 +3180,8 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -3178,6 +3191,7 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -3253,7 +3267,8 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -3283,6 +3298,7 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -3300,6 +3316,7 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -3338,11 +3355,13 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             }
           }
         },
@@ -6865,7 +6884,8 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -6883,11 +6903,13 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -6900,15 +6922,18 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -7011,7 +7036,8 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -7021,6 +7047,7 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -7033,17 +7060,20 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -7060,6 +7090,7 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -7132,7 +7163,8 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -7142,6 +7174,7 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -7217,7 +7250,8 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -7247,6 +7281,7 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -7264,6 +7299,7 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
+              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -7302,11 +7338,13 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
-              "bundled": true
+              "bundled": true,
+              "optional": true
             }
           }
         }
diff --git a/src/App.jsx b/src/App.jsx
index bb0d70d..c06d250 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import "./App.scss";
 import Container from "./Components/Layout/Container/Container";
 import Typography from "./Components/Data Display/Typography/Typography";
 import TextField from "./Components/Inputs/TextField/TextField";
+import Grid from "./Components/Layout/Grid/Grid";
 
 function App() {
   return (
@@ -19,12 +20,14 @@ function App() {
         <Box color="darkSecondary" p={2} m={2.5} />
         <Box color="darkTertiary" p={2} m={2.5} />
         <Box color="disabled" p={2} m={2.5} />
+        <Grid />
         <Button color="primaryButton">Button</Button>
         <TextField>Input</TextField>
         <Container type="fluid" maxWidth="sm" />
         <Container type="fluid" maxWidth="md" />
         <Container type="fluid" maxWidth="xl" />
         <Container type="fixed" />
+        
       </div>
     </div>
   );
diff --git a/src/Components/Layout/Grid/Grid.jsx b/src/Components/Layout/Grid/Grid.jsx
new file mode 100644
index 0000000..9704a05
--- /dev/null
+++ b/src/Components/Layout/Grid/Grid.jsx
@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import './stylesGrid.scss';
+
+export default class Grid extends Component {
+    
+    render() { 
+        // const totalgrids = this.props.n;
+        // const gridsWidth = calc((100% - "20px" * totalgrids) / totalgrids);
+        return ( 
+           <div>
+                <div className="zapGrid">
+                    <div className="zapRow">
+                        <div className="zapItem">Exactly not resposive, but width changes according to pixels</div>
+                        <div className="zapItem">Exactly not resposive, but width changes according to pixels</div>
+                        <div className="zapItem">Exactly not resposive, but width changes according to pixels</div>
+                    </div>
+                 </div>
+                <div className="zapGrid">
+                    <div className="zapRow">
+                        <div className="zapItem2">Exactly not resposive, but width changes according to pixels</div>
+                        <div className="zapItem2">Exactly not resposive, but width changes according to pixels</div>
+                        <div className="zapItem2">Exactly not resposive, but width changes according to pixels</div>
+                        <div className="zapItem2">Exactly not resposive, but width changes according to pixels</div>
+                    </div>
+                </div>
+           </div>
+         );
+    }
+}
\ No newline at end of file
diff --git a/src/Components/Layout/Grid/stylesGrid.scss b/src/Components/Layout/Grid/stylesGrid.scss
new file mode 100644
index 0000000..fe898c7
--- /dev/null
+++ b/src/Components/Layout/Grid/stylesGrid.scss
@@ -0,0 +1,50 @@
+@import "../../../Styles/globals.scss";
+
+html {
+    box-sizing: border-box;
+  }
+  
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+  }
+
+  .zapRow:after {
+    display: table;
+    clear: both;
+    content: '';
+  }
+
+  .zapGrid {
+    max-width: 1140px;
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+//   .zapRow .zapItem  {
+//     width: 33.33333%;
+//     float: left;
+//   }
+
+  .zapItem {
+    color: white;
+    width: calc((100% - 20px * 3) / 3);
+    margin-right: 10px;
+    margin-left: 10px;
+    float: left;
+    border: 1px solid black;
+    margin-top: 10px;
+    font-size: 1.5em;
+  }
+
+  .zapItem2 {
+    color: white;
+    width: calc((100% - 20px * 4) / 4);
+    margin-right: 10px;
+    margin-left: 10px;
+    float: left;
+    border: 1px solid black;
+    margin-top: 10px;
+    font-size: 1.5em;
+  }

From 4e5024bfe7e3b03b9b861ab46853c5ba49ca4fb4 Mon Sep 17 00:00:00 2001
From: vinaybiradar1717 <vinaybiradar1717@gmail.com>
Date: Tue, 6 Aug 2019 21:17:11 +0530
Subject: [PATCH 2/3] grid space with margin

Signed-off-by: vinaybiradar1717 <vinaybiradar1717@gmail.com>
---
 src/App.jsx                                | 10 ++++-----
 src/Components/Inputs/Buttons/Buttons.jsx  |  2 +-
 src/Components/Layout/Grid/GridSpacing.jsx | 24 +++++++++++++++++-----
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 9635616..e43b097 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -12,8 +12,7 @@ import Media from "./Components/Layout/Media/Media"
 
 function App() {
   return (
-    <div className="App">
-      <div>
+    <div >
         <Typography variant="h1">Zapify</Typography>
         <Box color="boxPrimary" p={2} m={2.5} />
         <Box color="boxSecondary" p={2} m={2.5} />
@@ -23,9 +22,9 @@ function App() {
         <Box color="darkTertiary" p={2} m={2.5} />
         <Box color="disabled" p={2} m={2.5} />
         <Grid />
-        <GridSpacing nBox={4}>hbscdjhb</GridSpacing>
-        <GridSpacing nBox={3}>fsafvcsda</GridSpacing>
-        <GridSpacing nBox={5}>VCSADFw</GridSpacing>
+        <GridSpacing nBox={4} m={3}>hbscdjhb</GridSpacing>
+        <GridSpacing nBox={3} m={3}>fsafvcsda</GridSpacing>
+        <GridSpacing nBox={5} m={3}>VCSADFw</GridSpacing>
         <Button color="primaryButton">Button</Button>
         <TextField>Input</TextField>
         <Container type="fluid" maxWidth="sm" />
@@ -33,7 +32,6 @@ function App() {
         <Container type="fluid" maxWidth="xl" />
         <Container type="fixed" />
         <Media typeGet = "linear"/>
-      </div>
     </div>
   );
 }
diff --git a/src/Components/Inputs/Buttons/Buttons.jsx b/src/Components/Inputs/Buttons/Buttons.jsx
index 86a9b9d..b496cd8 100644
--- a/src/Components/Inputs/Buttons/Buttons.jsx
+++ b/src/Components/Inputs/Buttons/Buttons.jsx
@@ -6,7 +6,7 @@ import "./buttonStyles.scss";
 export default class Button extends Component {
   render() {
     return (
-      <a href className={`${this.props.color} `}>
+      <a href className={`${this.props.color}`}>
         <Typography> {this.props.children}</Typography>
       </a>
     );
diff --git a/src/Components/Layout/Grid/GridSpacing.jsx b/src/Components/Layout/Grid/GridSpacing.jsx
index 28d4955..254fc9c 100644
--- a/src/Components/Layout/Grid/GridSpacing.jsx
+++ b/src/Components/Layout/Grid/GridSpacing.jsx
@@ -11,13 +11,14 @@ export default class GridSpacing extends Component {
     createTable = () => {
         let table = []
         const nBox = this.props.nBox;
+        const m = (this.props.m);
         // Outer loop to create parent
         for (let i = 0; i < 1; i++) {
           let children = []
           //Inner loop to create children
           for (let j = 0; j < nBox; j++) {
             children.push(<td><div className="GridBox" style={{
-                    margin: "30px"
+                    margin: `${m}rem`
                 }}>{this.props.children}</div></td>)
           }
           //Create the parent and add the children
@@ -28,14 +29,27 @@ export default class GridSpacing extends Component {
     render() { 
         return ( 
             <div className="GridSpacing">
-             {this.createTable()}
+             <table>{this.createTable()}</table>
             </div>
             );
     }
 }
- 
 
-GridSpacing.propType = {
-    nBox: Proptypes.number
+function tweetLength(props, nBox, GridSpacing) {
+    GridSpacing = GridSpacing || 'ANONYMOUS';
+  
+    if (props[nBox]) {
+      let value = props[nBox];
+      if (typeof value === 'number') {
+          return (value>2 && value<7) ? null : new Error(" is longer than 140 characters");
+      }
+    }
+  
+    // assume all ok
+    return null;
   }
 
+GridSpacing.propType = {
+    nBox: tweetLength
+  };
+

From 6ac933f7a28342736970cd64a3434db911e723d0 Mon Sep 17 00:00:00 2001
From: vinaybiradar1717 <vinaybiradar1717@gmail.com>
Date: Tue, 6 Aug 2019 23:18:36 +0530
Subject: [PATCH 3/3] merge grid spacing

Signed-off-by: vinaybiradar1717 <vinaybiradar1717@gmail.com>
---
 src/App.jsx                                |  2 -
 src/Components/Layout/Box/Box.jsx          |  2 +-
 src/Components/Layout/Grid/Grid.jsx        | 29 -------------
 src/Components/Layout/Grid/GridSpacing.jsx | 30 ++++---------
 src/Components/Layout/Grid/stylesGrid.scss | 50 ----------------------
 5 files changed, 10 insertions(+), 103 deletions(-)
 delete mode 100644 src/Components/Layout/Grid/Grid.jsx
 delete mode 100644 src/Components/Layout/Grid/stylesGrid.scss

diff --git a/src/App.jsx b/src/App.jsx
index 4a7afe0..c66afe7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,7 +6,6 @@ import "./App.scss";
 import Container from "./Components/Layout/Container/Container";
 import Typography from "./Components/Data Display/Typography/Typography";
 import TextField from "./Components/Inputs/TextField/TextField";
-import Grid from "./Components/Layout/Grid/Grid";
 import GridSpacing from './Components/Layout/Grid/GridSpacing';
 import Media from "./Components/Layout/Media/Media"
 
@@ -21,7 +20,6 @@ function App() {
         <Box color="darkSecondary" p={2} m={2.5} />
         <Box color="darkTertiary" p={2} m={2.5} />
         <Box color="disabled" p={2} m={2.5} />
-        <Grid />
         <GridSpacing nBox={4} m={3}>hbscdjhb</GridSpacing>
         <GridSpacing nBox={3} m={3}>fsafvcsda</GridSpacing>
         <GridSpacing nBox={5} m={3}>VCSADFw</GridSpacing>
diff --git a/src/Components/Layout/Box/Box.jsx b/src/Components/Layout/Box/Box.jsx
index 0446e4a..f992444 100644
--- a/src/Components/Layout/Box/Box.jsx
+++ b/src/Components/Layout/Box/Box.jsx
@@ -23,7 +23,7 @@ export default class Box extends Component {
   }
 }
 
-Box.propType = {
+Box.propTypes = {
   color: Proptypes.string,
   p: Proptypes.number,
   m: Proptypes.number
diff --git a/src/Components/Layout/Grid/Grid.jsx b/src/Components/Layout/Grid/Grid.jsx
deleted file mode 100644
index 9704a05..0000000
--- a/src/Components/Layout/Grid/Grid.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { Component } from 'react';
-import './stylesGrid.scss';
-
-export default class Grid extends Component {
-    
-    render() { 
-        // const totalgrids = this.props.n;
-        // const gridsWidth = calc((100% - "20px" * totalgrids) / totalgrids);
-        return ( 
-           <div>
-                <div className="zapGrid">
-                    <div className="zapRow">
-                        <div className="zapItem">Exactly not resposive, but width changes according to pixels</div>
-                        <div className="zapItem">Exactly not resposive, but width changes according to pixels</div>
-                        <div className="zapItem">Exactly not resposive, but width changes according to pixels</div>
-                    </div>
-                 </div>
-                <div className="zapGrid">
-                    <div className="zapRow">
-                        <div className="zapItem2">Exactly not resposive, but width changes according to pixels</div>
-                        <div className="zapItem2">Exactly not resposive, but width changes according to pixels</div>
-                        <div className="zapItem2">Exactly not resposive, but width changes according to pixels</div>
-                        <div className="zapItem2">Exactly not resposive, but width changes according to pixels</div>
-                    </div>
-                </div>
-           </div>
-         );
-    }
-}
\ No newline at end of file
diff --git a/src/Components/Layout/Grid/GridSpacing.jsx b/src/Components/Layout/Grid/GridSpacing.jsx
index 254fc9c..4a2c981 100644
--- a/src/Components/Layout/Grid/GridSpacing.jsx
+++ b/src/Components/Layout/Grid/GridSpacing.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import Proptypes from "prop-types";
+import Proptypes from 'prop-types';
 import './stylesGridSpacing.scss';
 
 export default class GridSpacing extends Component {
@@ -8,10 +8,10 @@ export default class GridSpacing extends Component {
         this.createTable = this.createTable.bind(this);
     }
 
-    createTable = () => {
+    createTable = (props) => {
         let table = []
         const nBox = this.props.nBox;
-        const m = (this.props.m);
+        const m = this.props.m;
         // Outer loop to create parent
         for (let i = 0; i < 1; i++) {
           let children = []
@@ -26,30 +26,18 @@ export default class GridSpacing extends Component {
         }
         return table
       }
-    render() { 
-        return ( 
+    render(){ 
+        return( 
             <div className="GridSpacing">
-             <table>{this.createTable()}</table>
-            </div>
+            <table>{this.createTable()}</table>
+           </div>
             );
     }
 }
 
-function tweetLength(props, nBox, GridSpacing) {
-    GridSpacing = GridSpacing || 'ANONYMOUS';
-  
-    if (props[nBox]) {
-      let value = props[nBox];
-      if (typeof value === 'number') {
-          return (value>2 && value<7) ? null : new Error(" is longer than 140 characters");
-      }
-    }
-  
-    // assume all ok
-    return null;
-  }
 
 GridSpacing.propType = {
-    nBox: tweetLength
+    nBox: Proptypes.number,
+    m: Proptypes.number
   };
 
diff --git a/src/Components/Layout/Grid/stylesGrid.scss b/src/Components/Layout/Grid/stylesGrid.scss
deleted file mode 100644
index fe898c7..0000000
--- a/src/Components/Layout/Grid/stylesGrid.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-@import "../../../Styles/globals.scss";
-
-html {
-    box-sizing: border-box;
-  }
-  
-  *,
-  *:before,
-  *:after {
-    box-sizing: inherit;
-  }
-
-  .zapRow:after {
-    display: table;
-    clear: both;
-    content: '';
-  }
-
-  .zapGrid {
-    max-width: 1140px;
-    margin-right: auto;
-    margin-left: auto;
-  }
-
-//   .zapRow .zapItem  {
-//     width: 33.33333%;
-//     float: left;
-//   }
-
-  .zapItem {
-    color: white;
-    width: calc((100% - 20px * 3) / 3);
-    margin-right: 10px;
-    margin-left: 10px;
-    float: left;
-    border: 1px solid black;
-    margin-top: 10px;
-    font-size: 1.5em;
-  }
-
-  .zapItem2 {
-    color: white;
-    width: calc((100% - 20px * 4) / 4);
-    margin-right: 10px;
-    margin-left: 10px;
-    float: left;
-    border: 1px solid black;
-    margin-top: 10px;
-    font-size: 1.5em;
-  }