finishing touches

marwanehab98 · Jan 3, 2023 · 401f218 · 401f218 · vercel · Jan 3, 2023
1 parent d27c1ba
commit 401f218
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 7 deletions.
diff --git a/src/App.css b/src/App.css
@@ -8,4 +8,6 @@ footer {
   border-color: lightgray;
   padding: 8px;
   text-align: center;
+  box-shadow: 0px -4px 3px lightGray
+
 }
diff --git a/src/components/CreateProduct/CreateProduct.js b/src/components/CreateProduct/CreateProduct.js
@@ -108,7 +108,12 @@ function CreateProduct() {
 
     return (
         <Form id='product_form' noValidate validated={validated} onSubmit={handleSubmit}>
-            <Navbar style={{"marginBottom": "20px"}} bg="dark" variant="dark">
+            <Navbar
+                style={{
+                    "marginBottom": "20px",
+                    "boxShadow": "0px 3px 3px lightGray"
+                }}
+                bg="dark" variant="dark">
                 <Container fluid>
                     <Navbar.Brand>Product Add</Navbar.Brand>
                     <Nav variant='pills' activeKey="1" className="justify-content-end">
@@ -119,7 +124,7 @@ function CreateProduct() {
                     </Nav>
                 </Container>
             </Navbar>
-            <Container fluid>
+            <Container>
                 <Form.Group className="mb-3">
                     <Form.Label>SKU</Form.Label>
                     <Form.Control

diff --git a/src/components/Product/Product.js b/src/components/Product/Product.js
@@ -43,7 +43,10 @@ function Product(props) {
                 bg={"light"}
                 key={"Card" + props.product.SKU}
                 text={"dark"}
-                style={{ width: '18rem' }}
+                style={{ 
+                    width: '18rem',
+                    boxShadow: '3px 3px 3px lightGray'
+                }}
                 className="mb-2"
             >
                 <Card.Header as="h5">

diff --git a/src/components/ProductsList/ProductsList.js b/src/components/ProductsList/ProductsList.js
@@ -94,7 +94,7 @@ export default function ProductsList() {
     };
 
     const formatData = (product) => {
-        if(product.length && product.width && product.height){
+        if (product.length && product.width && product.height) {
             product.dimensions = `${product.length}x${product.width}x${product.height}`;
             delete product.length;
             delete product.width;
@@ -105,7 +105,12 @@ export default function ProductsList() {
 
     return (
         <>
-            <Navbar style={{ "marginBottom": "20px" }} bg="dark" variant="dark">
+            <Navbar
+                style={{
+                    "marginBottom": "20px",
+                    "boxShadow": "0px 3px 3px lightGray"
+                }}
+                bg="dark" variant="dark">
                 <Container fluid>
                     <Navbar.Brand>Product List</Navbar.Brand>
                     <Nav variant="pills" activeKey="1" className="justify-content-end">
@@ -114,9 +119,9 @@ export default function ProductsList() {
                     </Nav>
                 </Container>
             </Navbar>
-            <Container fluid>
+            <Container>
                 <Row
-                    className="g-2">
+                    className="g-4">
                     {products.map((_, idx) => (
                         <Col
                             xs="auto"