Box vinaybiradar1717 (#5)

Box vinaybiradar1717

src/App.jsx

@@ -2,21 +2,30 @@
 import React from "react";
 import Box from "./Component/Layout/Box/Box";
 import Button from "./Component/Inputs/Buttons/Buttons";
+import './App.css';
+import Container from "./Component/Layout/Container/Container";
 import "./App.css";
 
+
 function App() {
   return (
     <div className="App">
       <div>
-        <Box color="boxPrimary" p={7} m={3} />
-        <Box color="boxSecondary" p={5} m={4} />
-        <Box color="boxTertiary" p={3} m={5} />
-        {/* <Box property="Box-secondary" /> */}
-        {/* <Layout property="Box-secondary" />
-      <Layout property="Box-primary" /> */}
-        <Button color="primaryButton" />
-        <Button color="secondaryButton" />
-        <Button color="tertiaryButton" />
+
+      <Box color="boxPrimary" p={2} m={2.5}/>
+      <Box color="boxSecondary" p={2} m={2.5}/>
+      <Box color="boxTertiary" p={2} m={2.5}/>
+      <Box color="darkPrimary" p={2} m={2.5}/>
+      <Box color="darkSecondary" p={2} m={2.5}/>
+      <Box color="darkTertiary" p={2} m={2.5}/>
+      <Box color="disabled" p={2} m={2.5}/>
+      <Button color="primaryButton" />
+      <Button color="secondaryButton" />
+
+      <Container type="fluid" maxWidth="sm"/>
+      <Container type="fluid" maxWidth="md"/>
+      <Container type="fluid" maxWidth="xl"/>
+      <Container type="fixed"/>
       </div>
     </div>
   );

src/Component/Layout/Box/Box.jsx

@@ -24,5 +24,6 @@ export default class Box extends Component {
 
 Box.propType = {
   color: Proptypes.string,
-  p: Proptypes.number
+  p: Proptypes.number,
+  m: Proptypes.number
 };

src/Component/Layout/Box/boxStyles.scss

@@ -13,4 +13,24 @@
 .boxTertiary {
     background-color: $tertiaryColor;
     color: $defaultb;
+}
+
+.darkPrimary {
+    background-color: $primaryDark;
+    color: $defaultw;
+}
+
+.darkSecondary {
+    background-color: $secondaryDark;
+    color: $defaultw;
+}
+
+.darkTertiary {
+    background-color: $tertiaryDark;
+    color: $defaultw;
+}
+
+.disabled {
+    background-color: $disabled;
+    color: $defaultw;
 }

src/Component/Layout/Container/Container.jsx

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import './containerStyles.scss';
+import Proptypes from "prop-types";
+
+export default class Container extends Component {
+    render() {
+      let typeName=this.props.type;
+      let maxWidth=this.props.maxWidth;
+
+      return (
+        <div>
+         {typeName ===  "fluid"       
+            ? <div className={maxWidth}/>
+            : <div style={{backgroundColor: '#F9690E',
+                            height: '100vh'}}/>
+          }
+
+        </div>  
+      );
+    }
+  }
+
+Container.propType = {
+    typeName: Proptypes.string,
+    maxWidth: Proptypes.string
+  };
+
+

src/Component/Layout/Container/containerStyles.css

@@ -0,0 +1,14 @@
+.sm {
+  background-color: #ECF0F1;
+  height: 50vh;
+}
+
+.md {
+  background-color: #ECF0F1;
+  height: 75vh;
+}
+
+.xl {
+  background-color: #ECF0F1;
+  height: 100vh;
+}

src/Component/Layout/Container/containerStyles.scss

@@ -0,0 +1,14 @@
+@import "./../../../Styles/globals.scss";
+
+.sm{
+    background-color: $containerFluidsm;
+    height:20vh;
+}
+.md{
+    background-color: $containerFluidmd;
+    height:60vh;
+}
+.xl{
+    background-color: $containerFluidxl;
+    height: 100vh;
+}

src/Styles/globals.scss

@@ -1,6 +1,15 @@
 $primaryColor: #eb8f9e;
 $secondaryColor: #80ff80;
 $tertiaryColor: #ffd280;
+$primaryDark: #000000;
+$secondaryDark: #404040;
+$tertiaryDark: #737373;
+$disabled: #d9d9d9;
 $defaultw: #ffffff;
 $defaultb: #000000;
+$containerFluidsm:#ECF0F1;
+$containerFluidmd:#D0ACE4;
+$containerFluidxl:#AADB1E;
+$containerFixed:#F9690E;
 $grey: #888888;
+