Worked on #37

Mani and I figured out how to align the Label and the button of the productGrid.
amosproj · May 14, 2021 · 0ed3700 · 0ed3700
1 parent 8600635
commit 0ed3700
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 35 deletions.
diff --git a/frontend/src/components/cards/MiniCardComponent.js b/frontend/src/components/cards/MiniCardComponent.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Column } from 'simple-flexbox';
+import { Column, Row } from 'simple-flexbox';
 import { createUseStyles, useTheme } from 'react-jss';
 
 //reconfiguration of the dropdown boxes
@@ -10,7 +10,7 @@ const useStyles = createUseStyles((theme) => ({
         border: `3px solid ${theme.color.lightGrayishBlue2}`,
         borderRadius: 4,
         cursor: 'pointer',
-        maxWidth: 200,
+        maxWidth: 300,
         maxHeight:150,
         marginTop:50,
         padding: '8px 16px 8px 16px',
@@ -46,14 +46,11 @@ function MiniCardComponent({ className = '', title, value, path }) {
     const composedClassName = [classes.container, className].join(' ');
     return (
         <Column flexGrow={1} className={composedClassName} horizontal='center' vertical='center'>
-        {/*  Resize the image on the cards (product images)            */}
-            <div style={{width: 150, paddingLeft: 20, paddingTop: 20, paddingBottom: 20 }}>
-            {/* define the image path */}
-            <img src={path} alt=''/>
-            </div>
-            <span className={classes.title}>{title}</span>
-            <span className={classes.value}>{value}</span>
-
+            {/*  Resize the image on the cards (product images) */}
+                <div style={{ width: 150, paddingLeft: 20, paddingTop: 20, paddingBottom: 20 }}>
+                    {/* define the image path */}
+                    <img src={path} alt='' />
+                </div>
         </Column>
     );
 }

diff --git a/frontend/src/components/productGrid/LabelComponent.js b/frontend/src/components/productGrid/LabelComponent.js
@@ -0,0 +1,18 @@
+import React, {useContext} from 'react';
+
+/**
+ * Displaying a label.
+ * 
+ * @author Mani
+ * @author Martin Wagner
+ */
+
+function LabelComponent({productName}) {
+    return (
+        <span class='w3-container w3-center w3-lightgrey w3-margin-bottom w3-margin-left:5em w3-margin-right w3-margin-top w3-margin-bottom:2em'>
+            {productName}
+        </span>
+    );
+}
+
+export default LabelComponent;
diff --git a/frontend/src/components/productGrid/ModelDropdownComponent.js b/frontend/src/components/productGrid/ModelDropdownComponent.js
@@ -13,7 +13,7 @@ import {Container, Row, Col } from 'react-grid-system';
  * This component creates the dropdownboxes for the related products 
  * 
  * @returns the model properties of the related product depending on the model values from getModels func from interface/simaProInterface
- * @author parham, Martin Wagner, Irem Toroslu
+ * @author parham, Martin Wagner, Irem Toroslu, Mani Anand
  */
 
 const ModelDropdownComponent = (props) =>  {
@@ -30,7 +30,7 @@ const ModelDropdownComponent = (props) =>  {
             <Container fluid={true}>
                 <Row className=' w3-dropdown-hover w3-card-4 w3-lightgrey w3-margin-bottom w3-margin-left:5em w3-margin-right w3-margin-top w3-margin-bottom:2em' >
                     <Col xs={2}>                         
-                    <button className=' w3-button w3-border w3-lightgrey'>{selected}</button>
+                    <button className=' w3-button w3-border w3-white'>{selected}</button>
 
 
                     <div className='w3-dropdown-content w3-dropdown-hover w3-bar-block w3-border'>

diff --git a/frontend/src/components/productGrid/ProductGridComponent.js b/frontend/src/components/productGrid/ProductGridComponent.js
@@ -5,70 +5,93 @@
  * /**
  * 
  * @returns the product and model properties
- * @author Irem Toroslu
+ * @author Irem Toroslu, Martin Wagner, Mani Anand
  */
 
 import React, {useContext} from 'react';
-//import {Column, Row} from 'simple-flexbox';
+import {Column, Row} from 'simple-flexbox';
 import {createUseStyles} from 'react-jss';
 import MiniCardComponent from 'components/cards/MiniCardComponent';
 import {getProducts} from 'interface/simaProInterface'
 import ProductDropdown from './ModelDropdownComponent'
 import SLUGS from 'resources/slugs';
 import {Link} from 'react-router-dom';
 import {PrivateSectionContext} from 'hooks/PrivateSectionContext';
-import {Container, Row, Col } from 'react-grid-system';
+import { Component } from 'react';
+import LabelComponent from './LabelComponent'
 
+const myStyles = createUseStyles((theme) => ({
 
+    title: {
+        ...theme.typography.cardTitle,
+        color: theme.color.grayishBlue2,
+        marginBottom: 12,
+        minWidth: 205,
+        textAlign: 'center'
+    },
+    value: {
+        color: theme.color.veryDarkGrayishBlue,
+        fontWeight: 'bold',
+        fontSize: 20,
+        letterSpacing: '1px',
+        lineHeight: '50px',
+        textAlign: 'center'
+    }
+}));
 
-function ProductGridComponent() {
-    const [ selectedProducts, setSelectedProducts ] = useContext(PrivateSectionContext);
-    const NewSelectedProducts =
 
-        [{
+function ProductGridComponent() {
+    const [selectedProducts, setSelectedProducts] = useContext(PrivateSectionContext);
+    const NewSelectedProducts = [
+        {
             productID: selectedProducts.productID,
             productName: selectedProducts.productName,
             modelID: selectedProducts.modelID,
             modelName: selectedProducts.modelName
-        }]
-
+        }
+    ];
 
     const products = getProducts();
     const classes = useStyles();
 
     return (
-        <Container fluid={true}>
-        <Col>
+        <Column>
             <Row
                 className={classes.cardRow}
                 wrap
                 flexGrow={1}
                 vertical='center'
-                breakpoints={{50: 'column'}}
+                breakpoints={{ 50: 'column' }}
             >
-                {products.map((product, index) =>
-                    <Col key={'Column' + index} style="width:70px">
+                {products.map((product, index) => (
+                    <Column key={'Column' + index}>
                         <Link
                             onClick={(props) => {
                                 // Save selection to ContextProvider
                                 NewSelectedProducts[0].productID = product.productID;
                                 NewSelectedProducts[0].productName = product.productName;
                             }}
-                            to={{ // Link to the next page
-                                pathname: SLUGS.details,
-                            }}>
+                            to={{
+                                // Link to the next page
+                                pathname: SLUGS.details
+                            }}
+                        >
                             <MiniCardComponent
+                                title={product.productName}
                                 className={classes.miniCardContainer}
                                 // define the path of the image to show on the cards
                                 path={product.productImage}
                             />
                         </Link>
-                        <ProductDropdown productID={product.productID} productName={product.productName}/>
-                    </Col>
-                )}
+                        <LabelComponent productName={product.productName}/>
+                        <ProductDropdown
+                            productID={product.productID}
+                            productName={product.productName}
+                        />
+                    </Column>
+                ))}
             </Row>
-        </Col>
-        </Container>
+        </Column>
     );
 }
 
@@ -115,4 +138,4 @@ const useStyles = createUseStyles({
     }
 });
 
-export default ProductGridComponent;
+export default ProductGridComponent;