Fix styling issues for safari browser

ujjavaldesai07 · ujjavaldesai07 · commit 72b088662b50 · 2020-08-04T01:10:06.000-07:00
diff --git a/client/src/components/routes/checkout/shippingAddress.js b/client/src/components/routes/checkout/shippingAddress.js
@@ -9,9 +9,14 @@ import {stateCodes} from "../../../constants/stateCodes";
 import {setShippingAddress} from "../../../actions"
 import {ModalConfirmation} from "../../ui/modalConfirmation";
 import {SummaryCard} from "./summaryCard";
-import {textFieldStyles} from "../../../styles/js/formStyles";
 import {checkoutFormStyles} from "../../../styles/materialUI/checkoutFormStyles";
 
+export const textFieldStyles = {
+    width: "inherit",
+    height: "fit-content",
+    margin: "20px 0 0 20px",
+}
+
 const renderTextField = (
     {placeholder, shrink, selectField, input, label, meta: { touched, error }, ...custom },
 ) => {
diff --git a/client/src/components/routes/detail/productDetails.js b/client/src/components/routes/detail/productDetails.js
@@ -3,7 +3,6 @@ import {Button, Grid, Box} from "@material-ui/core";
 import log from 'loglevel';
 import BreadcrumbsSection from "../../ui/breadcrumbs";
 import history from "../../../history";
-import {SearchMatchesNotFound} from "../../ui/error/searchMatchesNotFound";
 import {useDispatch, useSelector} from "react-redux";
 import {connect} from 'react-redux';
 import {getDataViaAPI} from '../../../actions'
@@ -39,23 +38,33 @@ function ProductDetails(props) {
     const addToCart = useSelector(state => state.addToCartReducer)
     const [productQuantity, setProductQuantity] = useState(1)
 
+    /**
+     * Update the Component when product is already selected.
+     * Cart products are stored in Cookie and we will set the product
+     * for the first time the page is rendered.
+     */
     useEffect(() => {
         log.info(`[Product Detail] Component did mount selectProductDetail = ${JSON.stringify(selectProductDetail)}`)
         log.info(`[Product Detail] Component did mount selectedProduct = ${JSON.stringify(selectedProduct)}`)
 
+        // check if have anything in the cart
         if (selectedProduct && !_.isEmpty(addToCart.productQty)) {
             log.info(`[Product Detail] addToCart = ${JSON.stringify(addToCart)}`)
             log.info(`[Product Detail] setProductQuantity = ${addToCart.productQty[selectedProduct.id]}`)
             setProductQuantity(addToCart.productQty[selectedProduct.id])
         }
+
+        // eslint-disable-next-line
     }, [selectedProduct])
 
+    // if the user change the URL format then just return bad request.
     if (history.location.pathname.localeCompare('/products/details') !== 0 ||
         history.location.search.search('product_id=') === -1
         || !history.location.search.startsWith('?q=')) {
         return <BadRequest/>
     }
 
+    // find the breadcrumb from the url
     const getStringBeforeLastDelimiter = (str, delimiter) => {
         return str.substring(0, str.lastIndexOf(delimiter))
     }
@@ -80,11 +89,15 @@ function ProductDetails(props) {
 
     if (!selectedProduct) {
         try {
+
+            // if status code is set then its because of error.
             log.info(`[Product Detail] selectProductDetail = ${JSON.stringify(selectProductDetail)}`)
             if (selectProductDetail.hasOwnProperty("statusCode")) {
                 log.info(`[Product Detail] Internal Server Error`)
                 return <InternalServerError/>
             }
+
+            // get the product details from server
             const extractedProductId = history.location.search.split("product_id=")
             log.info(`[Product Detail] extractedProductId = ${JSON.stringify(extractedProductId)}, length = ${extractedProductId.length}`)
             if (extractedProductId.length === 2) {
@@ -104,6 +117,7 @@ function ProductDetails(props) {
         }
     }
 
+    // set the cart products in the cookie
     const dispatchAddToCart = newAddToCart => {
         Cookies.set(SHOPPERS_PRODUCT_INFO_COOKIE, newAddToCart, {expires: 7});
         log.info(`[Product Detail] dispatchAddToCart productQty = ${JSON.stringify(newAddToCart)}`)
@@ -117,6 +131,7 @@ function ProductDetails(props) {
         log.info(`[Product Detail] Product is added to cart`)
         let newAddToCart = addToCart
 
+        // add new product to cart
         if (newAddToCart.hasOwnProperty("productQty") === false) {
             newAddToCart = {
                 totalQuantity: productQuantity,
@@ -137,6 +152,9 @@ function ProductDetails(props) {
         dispatchAddToCart(newAddToCart)
     }
 
+    /**
+     * Navigate to shopping bag page.
+     */
     const handleProceedToBagBtnClick = () => {
         history.push(`${history.location.pathname}/shopping-bag${history.location.search}`)
     }
diff --git a/client/src/components/routes/navbar/navBar.js b/client/src/components/routes/navbar/navBar.js
@@ -20,15 +20,11 @@ import useNavBarStyles from "../../../styles/materialUI/navBarStyles";
 import TabList from "./tabList";
 import {Link} from "react-router-dom";
 import {useSelector} from "react-redux";
-import {ADD_TO_CART, CART_TOTAL, LOAD_TABS_DATA} from "../../../actions/types";
+import {ADD_TO_CART, LOAD_TABS_DATA} from "../../../actions/types";
 import log from "loglevel";
 import Hidden from "@material-ui/core/Hidden";
 import BagButton from "./bagButton";
-import {
-    cartTotalReducer,
-    shoppingBagProductReducer,
-    tabsDataReducer
-} from "../../../reducers/screens/commonScreenReducer";
+import {tabsDataReducer} from "../../../reducers/screens/commonScreenReducer";
 import Spinner from "../../ui/spinner";
 import {HTTPError} from "../../ui/error/httpError";
 import {BadRequest} from "../../ui/error/badRequest";
@@ -51,6 +47,9 @@ const NavBar = props => {
     const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
     const dispatch = useDispatch()
 
+    /**
+     * set the cart from saved Cookie
+     */
     const setAddToCartValuesFromCookie = () => {
         let savedProductsFromCookie = Cookies.get(SHOPPERS_PRODUCT_INFO_COOKIE)
         let totalQuantity = 0
@@ -71,8 +70,14 @@ const NavBar = props => {
         }
     }
 
+    /**
+     * This will execute only once.
+     */
     useEffect(() => {
         log.info(`[NavBar]: Component did update.`)
+
+        // if user is not signed in then signed it in using
+        // account details from the cookie.
         if (isSignedIn === null) {
             log.info(`[NavBar]: isSignedIn is null`)
             let tokenIdFromCookie = Cookies.get(TOKEN_ID_COOKIE)
@@ -81,10 +86,13 @@ const NavBar = props => {
                 props.setTokenFromCookie(tokenIdFromCookie)
             }
         }
+
+        // tabs data is not loaded then load it.
         if(!tabsAPIData.hasOwnProperty("data")) {
             props.getDataViaAPI(LOAD_TABS_DATA, TABS_DATA_API)
         }
 
+        // set the cart values
         setAddToCartValuesFromCookie()
 
         // eslint-disable-next-line
@@ -271,7 +279,7 @@ const NavBar = props => {
                         <Hidden xsDown>
                             <Box display="flex" justifyContent="center" alignItems="center" css={{width: 90}}>
                                 <Box width="50%" onClick={handleProfileMenuOpen} css={{cursor: 'pointer'}}>
-                                    <Box pl={1}>
+                                    <Box pl={1} pt={0.3}>
                                         <AccountCircle/>
                                     </Box>
                                     <Box style={{color: "black", fontSize: "0.8rem", fontWeight: 'bold'}}>
diff --git a/client/src/components/routes/navbar/tabList.js b/client/src/components/routes/navbar/tabList.js
@@ -15,6 +15,8 @@ export default function TabList() {
     const handleMouseEnter = (event) => {
         log.debug(`[TabList]: dispatching HANDLE_TAB_HOVER_EVENT with
          index = ${parseInt(event.target.id.split('-')[2])} and hover = true`)
+
+        // check if index is number
         let index = parseInt(event.target.id.split('-')[2])
         if (isNaN(index)) {
             return
diff --git a/client/src/components/routes/product/filterSideNavbar/apparelCheckBox.js b/client/src/components/routes/product/filterSideNavbar/apparelCheckBox.js
@@ -5,6 +5,7 @@ import {useDispatch, useSelector} from "react-redux";
 import {ADD_SELECTED_CATEGORY} from "../../../../actions/types";
 import CheckboxMoreButton from "./checkboxMoreButton";
 import CheckboxSearchBar from "./checkboxSearchBar";
+import {Grid} from "@material-ui/core";
 
 export default function ApparelCheckBox() {
     const TITLE = "Apparel"
diff --git a/client/src/components/routes/product/filterSideNavbar/brandCheckBox.js b/client/src/components/routes/product/filterSideNavbar/brandCheckBox.js
@@ -8,7 +8,7 @@ import CheckboxSearchBar from "./checkboxSearchBar";
 
 export default function BrandCheckBox() {
     const TITLE = "Brand"
-    const propName="brands"
+    const propName = "brands"
     const dispatch = useDispatch()
     const brandList = useSelector(state => state.filterAttributesReducer ?
         state.filterAttributesReducer.brands : null)
diff --git a/client/src/components/routes/product/filterSideNavbar/checkboxMoreButton.js b/client/src/components/routes/product/filterSideNavbar/checkboxMoreButton.js
@@ -80,7 +80,7 @@ export default function CheckboxMoreButton(props) {
     const renderMoreButton = () => {
         if (props.checkboxList.length > 6) {
             return (
-                <Box pl={1.5} pb={1}>
+                <Box pl={1.5}>
                     <Button color="secondary" onClick={handleMoreButton}>
                         {`+ ${props.checkboxList.length - 6} more`}
                     </Button>
diff --git a/client/src/components/routes/product/filterSideNavbar/checkboxSearchBar.js b/client/src/components/routes/product/filterSideNavbar/checkboxSearchBar.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import log from 'loglevel';
 import {NavBarHeader} from "../../../ui/headers";
-import {Box} from "@material-ui/core";
+import {Box, Grid} from "@material-ui/core";
 import CollapsableSearch from "../../../ui/collapsableSearch";
 
 export default function CheckboxSearchBar(props) {
@@ -24,17 +24,15 @@ export default function CheckboxSearchBar(props) {
     log.info(`[CheckboxSearchBar] Rendering CheckboxSearchBar Component`)
 
     return (
-        <Box display="flex" alignItems="center" pt={2}>
-            <Box width="50%">
+        <Grid container alignItems="center" style={{padding: "1rem 0", height: "fit-content"}}>
+            <Grid item style={{paddingLeft: "0.1rem"}}>
                 <NavBarHeader title={props.title}/>
-            </Box>
-            <Box width="50%">
-                <CollapsableSearch
-                    handleOnSearchChange={handleSearchBarChange}
-                    handleCancelButton={handleSearchBarCancel}
-                    placeholder={props.placeholderText}
-                />
-            </Box>
-        </Box>
+            </Grid>
+            <CollapsableSearch
+                handleOnSearchChange={handleSearchBarChange}
+                handleCancelButton={handleSearchBarCancel}
+                placeholder={props.placeholderText}
+            />
+        </Grid>
     );
 }
diff --git a/client/src/components/routes/product/filterSideNavbar/filterNavBar.js b/client/src/components/routes/product/filterSideNavbar/filterNavBar.js
@@ -11,7 +11,7 @@ import PriceCheckBox from "./priceCheckBox";
 import ClearAllButton from "./clearAllButton";
 import {connect, useDispatch, useSelector} from "react-redux";
 import {loadFilterAttributes} from "../../../../actions";
-import {Box} from "@material-ui/core";
+import {Box, Grid} from "@material-ui/core";
 import {useFilterNavBarStyles} from "../../../../styles/materialUI/filterNavBarStyles";
 import {
     FILTER_ATTRIBUTES, INITIAL_PAGINATION_STATE,
@@ -344,26 +344,34 @@ function FilterNavBar(props) {
     const renderDrawerComponents = (component) => {
         return (
             <>
-                <Box display="flex" flexDirection="column" px={1} pl={3}>
-                    <Box>
-                        {component}
-                    </Box>
-                </Box>
-                <Divider/>
+                <Grid container direction="column" style={{paddingLeft: "1.5rem"}}>
+                    {component}
+                </Grid>
+
+                <div style={{paddingTop: "0.5rem"}}>
+                    <Divider/>
+                </div>
             </>
         )
     }
 
     const drawer = (
         <>
-            <Box display="flex" p={2} style={{
+            <Grid container alignItems="center" style={{
                 position: 'sticky', top: 0, backgroundColor: 'white',
-                fontWeight: "bold", fontSize: "1.2rem", zIndex: 1040
+                fontWeight: "bold", fontSize: "1.2rem", zIndex: 1040,
+                paddingTop: "1rem"
             }}>
-                <Box alignSelf="center" flex="1">FILTERS</Box>
-                <Box alignSelf="center"><ClearAllButton/></Box>
-            </Box>
-            <Divider/>
+                <Grid item sm={6} style={{paddingLeft: "1.5rem"}}>
+                    FILTERS
+                </Grid>
+                <Grid item sm={6} style={{paddingLeft: "3rem"}}>
+                    <ClearAllButton/>
+                </Grid>
+                <Grid item style={{height: "1px", width: "100%", paddingTop: "1rem"}}>
+                    <Divider/>
+                </Grid>
+            </Grid>
 
             {renderDrawerComponents(<GenderRadioButton/>)}
             {renderDrawerComponents(<ApparelCheckBox/>)}
diff --git a/client/src/components/routes/product/filterSideNavbar/genderRadioButton.js b/client/src/components/routes/product/filterSideNavbar/genderRadioButton.js
@@ -3,7 +3,7 @@ import log from 'loglevel';
 import RadioButtonsGroup from "../../../ui/radioButtonGroup";
 import {useDispatch, useSelector} from "react-redux";
 import {ADD_SELECTED_CATEGORY} from "../../../../actions/types";
-import {Box} from "@material-ui/core";
+import {Box, Grid} from "@material-ui/core";
 import {NavBarHeader} from "../../../ui/headers";
 
 export default function GenderRadioButton() {
@@ -45,14 +45,16 @@ export default function GenderRadioButton() {
     log.info(`[GenderRadioButton] Rendering FilterRadioButtonSection Component = ${JSON.stringify(gender[0])}`)
 
     return (
-        <Box pb={1}>
-            <Box pt={2.5} pb={1}>
+        <>
+            <Grid item style={{padding: "1rem 0"}}>
                 <NavBarHeader title="Gender"/>
-            </Box>
-            <RadioButtonsGroup onChangeHandler={handleRadioButtonChange}
-                               attrList={genderList.filter(obj => obj.id < 5)}
-                               selectedValue={gender.length > 0 ? gender[0].value : false}
-                               title="Gender"/>
-        </Box>
+            </Grid>
+            <Grid item style={{marginLeft: "0.5rem"}}>
+                <RadioButtonsGroup onChangeHandler={handleRadioButtonChange}
+                                   attrList={genderList.filter(obj => obj.id < 5)}
+                                   selectedValue={gender.length > 0 ? gender[0].value : false}
+                                   title="Gender"/>
+            </Grid>
+        </>
     );
 }
diff --git a/client/src/components/ui/checkboxList.js b/client/src/components/ui/checkboxList.js
@@ -6,12 +6,10 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import Checkbox from '@material-ui/core/Checkbox';
 import log from "loglevel";
-import {Box} from "@material-ui/core";
+import {Box, Grid} from "@material-ui/core";
 
 const useStyles = makeStyles((theme) => ({
     root: {
-        width: '100%',
-        maxWidth: 360,
         backgroundColor: theme.palette.background.paper,
     },
     listItemIconRoot: {
@@ -86,15 +84,15 @@ export default function CheckboxList(props) {
                             inputProps={{'aria-labelledby': id}}
                         />
                     </ListItemIcon>
-                    <Box display="flex" flexDirection="row">
-                        <Box>
+                    <Grid container alignItems="center">
+                        <Grid item>
                             <ListItemText id={id} primary={value} style={{fontSize: "0.9rem"}}
                                           disableTypography/>
-                        </Box>
-                        <Box alignSelf="center" pl={0.5}  css={{color: "#94969f", fontSize: "0.8rem"}}>
+                        </Grid>
+                        <Grid item style={{color: "#94969f", fontSize: "0.8rem", paddingLeft: "0.3rem"}}>
                             {`(${totalItems})`}
-                        </Box>
-                    </Box>
+                        </Grid>
+                    </Grid>
                 </ListItem>
             );
         })
@@ -103,8 +101,7 @@ export default function CheckboxList(props) {
     log.trace(`[CheckboxList] props.attrList = ${JSON.stringify(props.attrList)}`)
     log.debug(`[CheckboxList] Rendering CheckboxList Component`)
     return (
-        <List
-            className={classes.root}>
+        <List style={{padding: "0 0 0 0.7rem"}}>
             {renderCheckBoxList()}
         </List>
     );
diff --git a/client/src/components/ui/collapsableSearch.js b/client/src/components/ui/collapsableSearch.js
diff --git a/client/src/styles/js/formStyles.js b/client/src/styles/js/formStyles.js
diff --git a/client/src/styles/materialUI/filterNavBarStyles.js b/client/src/styles/materialUI/filterNavBarStyles.js
