Checkout Responsive Design

zreecespieces · Feb 14, 2021 · a9b716b · a9b716b
1 parent ce73c0c
commit a9b716b
Show file tree

Hide file tree

Showing 11 changed files with 156 additions and 19 deletions.
diff --git a/frontend/src/components/auth/Fields.js b/frontend/src/components/auth/Fields.js
@@ -14,9 +14,13 @@ const useStyles = makeStyles(theme => ({
     [theme.breakpoints.down("xs")]: {
       width: ({ fullWidth }) => (fullWidth ? undefined : "15rem"),
     },
+    [theme.breakpoints.up("xs")]: {
+      width: ({ xs }) => (xs ? "10rem" : undefined),
+    },
   },
   input: {
     color: ({ isWhite }) => (isWhite ? "#fff" : theme.palette.secondary.main),
+    fontSize: ({ xs }) => (xs ? "1.25rem" : undefined),
   },
 }))
 
@@ -30,8 +34,9 @@ export default function Fields({
   disabled,
   fullWidth,
   settings,
+  xs,
 }) {
-  const classes = useStyles({ isWhite, fullWidth, settings })
+  const classes = useStyles({ isWhite, fullWidth, settings, xs })
 
   return Object.keys(fields).map(field => {
     const validateHelper = event => {

diff --git a/frontend/src/components/cart/BillingConfirmation.js b/frontend/src/components/cart/BillingConfirmation.js
@@ -44,10 +44,18 @@ export default function BillingConfirmation({
       {fields.map(field =>
         field.hidden ? null : (
           <Grid item key={field.title} classes={{ root: classes.wrapper }}>
-            <Typography variant="h4" classes={{ root: classes.heading }}>
+            <Typography
+              align="right"
+              variant="h4"
+              classes={{ root: classes.heading }}
+            >
               {field.title}
             </Typography>
-            <Typography variant="h3" classes={{ root: classes.values }}>
+            <Typography
+              align="right"
+              variant="h3"
+              classes={{ root: classes.values }}
+            >
               {Object.keys(field.values).map(value => (
                 <span key={value}>
                   {field.values[value]}

diff --git a/frontend/src/components/cart/CheckoutNavigation.js b/frontend/src/components/cart/CheckoutNavigation.js
@@ -19,6 +19,9 @@ const useStyles = makeStyles(theme => ({
     width: "40rem",
     height: "5rem",
     position: "relative",
+    [theme.breakpoints.down("sm")]: {
+      width: "100%",
+    },
   },
   back: {
     visibility: ({ steps, selectedStep }) =>
@@ -36,15 +39,36 @@ const useStyles = makeStyles(theme => ({
   icon: {
     height: "2.25rem",
     width: "2.25rem",
+    [theme.breakpoints.down("xs")]: {
+      height: "1.75rem",
+      width: "1.75rem",
+    },
   },
   delete: {
     height: "2rem",
     width: "2rem",
+    [theme.breakpoints.down("xs")]: {
+      height: "1.5rem",
+      width: "1.5rem",
+    },
+  },
+  iconButton: {
+    padding: 6,
   },
   actions: {
     position: "absolute",
     right: 0,
   },
+  text: {
+    [theme.breakpoints.down("xs")]: {
+      fontSize: "1.25rem",
+    },
+  },
+  navButtons: {
+    width: "1.5rem",
+    height: "1.5rem",
+    minWidth: 0,
+  },
 }))
 
 export default function CheckoutNavigation({
@@ -138,22 +162,29 @@ export default function CheckoutNavigation({
       classes={{ root: classes.navbar }}
     >
       <Grid item classes={{ root: classes.back }}>
-        <Button onClick={() => setSelectedStep(selectedStep - 1)}>
-          <Typography variant="h5">{"<"}</Typography>
+        <Button
+          classes={{ root: classes.navButtons }}
+          onClick={() => setSelectedStep(selectedStep - 1)}
+        >
+          <Typography variant="h5" classes={{ root: classes.text }}>
+            {"<"}
+          </Typography>
         </Button>
       </Grid>
       <Grid item>
-        <Typography variant="h5">
+        <Typography variant="h5" classes={{ root: classes.text }}>
           {steps[selectedStep].title.toUpperCase()}
         </Typography>
       </Grid>
       <Grid item classes={{ root: classes.forward }}>
         <Button
           disabled={steps[selectedStep].error}
-          classes={{ disabled: classes.disabled }}
+          classes={{ root: classes.navButtons, disabled: classes.disabled }}
           onClick={() => setSelectedStep(selectedStep + 1)}
         >
-          <Typography variant="h5">{">"}</Typography>
+          <Typography variant="h5" classes={{ root: classes.text }}>
+            {">"}
+          </Typography>
         </Button>
       </Grid>
       {steps[selectedStep].hasActions && user.username !== "Guest" ? (
@@ -163,7 +194,10 @@ export default function CheckoutNavigation({
               {loading === "save" ? (
                 <CircularProgress />
               ) : (
-                <IconButton onClick={() => handleAction("save")}>
+                <IconButton
+                  classes={{ root: classes.iconButton }}
+                  onClick={() => handleAction("save")}
+                >
                   <img src={save} alt="save" className={classes.icon} />
                 </IconButton>
               )}
@@ -172,7 +206,10 @@ export default function CheckoutNavigation({
               {loading === "delete" ? (
                 <CircularProgress />
               ) : (
-                <IconButton onClick={() => handleAction("delete")}>
+                <IconButton
+                  classes={{ root: classes.iconButton }}
+                  onClick={() => handleAction("delete")}
+                >
                   <span className={classes.delete}>
                     <Delete color="#fff" />
                   </span>

diff --git a/frontend/src/components/cart/CheckoutPortal.js b/frontend/src/components/cart/CheckoutPortal.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react"
 import Grid from "@material-ui/core/Grid"
 import Typography from "@material-ui/core/Typography"
+import useMediaQuery from "@material-ui/core/useMediaQuery"
 import { makeStyles } from "@material-ui/core/styles"
 
 import CheckoutNavigation from "./CheckoutNavigation"
@@ -18,6 +19,14 @@ const useStyles = makeStyles(theme => ({
     width: "40rem",
     height: "25rem",
     backgroundColor: theme.palette.primary.main,
+    [theme.breakpoints.down("sm")]: {
+      width: "100%",
+    },
+  },
+  container: {
+    [theme.breakpoints.down("md")]: {
+      marginBottom: "5rem",
+    },
   },
   "@global": {
     ".MuiInput-underline:before, .MuiInput-underline:hover:not(.Mui-disabled):before": {
@@ -31,6 +40,8 @@ const useStyles = makeStyles(theme => ({
 
 export default function CheckoutPortal({ user }) {
   const classes = useStyles()
+  const matchesMD = useMediaQuery(theme => theme.breakpoints.down("md"))
+
   const [selectedStep, setSelectedStep] = useState(0)
   const [detailValues, setDetailValues] = useState({
     name: "",
@@ -243,7 +254,14 @@ export default function CheckoutPortal({ user }) {
   }, [detailSlot, locationSlot, selectedStep])
 
   return (
-    <Grid item container direction="column" alignItems="flex-end" lg={6}>
+    <Grid
+      item
+      container
+      direction="column"
+      classes={{ root: classes.container }}
+      alignItems={matchesMD ? "flex-start" : "flex-end"}
+      lg={6}
+    >
       <CheckoutNavigation
         steps={steps}
         selectedStep={selectedStep}

diff --git a/frontend/src/components/cart/Confirmation.js b/frontend/src/components/cart/Confirmation.js
@@ -6,6 +6,7 @@ import Typography from "@material-ui/core/Typography"
 import CircularProgress from "@material-ui/core/CircularProgress"
 import Button from "@material-ui/core/Button"
 import Chip from "@material-ui/core/Chip"
+import useMediaQuery from "@material-ui/core/useMediaQuery"
 import { makeStyles } from "@material-ui/core/styles"
 
 import Fields from "../auth/Fields"
@@ -38,13 +39,19 @@ const useStyles = makeStyles(theme => ({
   text: {
     fontSize: "1rem",
     color: "#fff",
+    [theme.breakpoints.down("xs")]: {
+      fontSize: "0.85rem",
+    },
   },
   card: {
     height: 18,
     width: 25,
   },
   priceLabel: {
     fontSize: "1.5rem",
+    [theme.breakpoints.down("xs")]: {
+      fontSize: "0.85rem",
+    },
   },
   darkBackground: {
     backgroundColor: theme.palette.secondary.main,
@@ -67,9 +74,16 @@ const useStyles = makeStyles(theme => ({
   },
   priceValue: {
     marginRight: "1rem",
+    [theme.breakpoints.down("xs")]: {
+      fontSize: "0.85rem",
+      marginRight: "0.5rem",
+    },
   },
   fieldWrapper: {
     marginLeft: "1.25rem",
+    [theme.breakpoints.down("xs")]: {
+      marginLeft: "0.25rem",
+    },
   },
   button: {
     width: "100%",
@@ -117,6 +131,8 @@ export default function Confirmation({
   setOrder,
 }) {
   const classes = useStyles()
+  const matchesXS = useMediaQuery(theme => theme.breakpoints.down("xs"))
+
   const [loading, setLoading] = useState(false)
   const { cart, dispatchCart } = useContext(CartContext)
   const { dispatchFeedback } = useContext(FeedbackContext)
@@ -211,8 +227,8 @@ export default function Confirmation({
       <Grid item xs={2} classes={{ root: classes.adornmentWrapper }}>
         {adornment}
       </Grid>
-      <Grid item xs={10} classes={{ root: classes.centerText }}>
-        <Typography variant="body1" classes={{ root: classes.text }}>
+      <Grid item xs={10} classes={{ root: classes.centerText }} zeroMinWidth>
+        <Typography noWrap variant="body1" classes={{ root: classes.text }}>
           {value}
         </Typography>
       </Grid>
@@ -337,6 +353,7 @@ export default function Confirmation({
                   errors={promoError}
                   setErrors={setPromoError}
                   isWhite
+                  xs={matchesXS}
                 />
               </span>
             ) : (

diff --git a/frontend/src/components/cart/Shipping.js b/frontend/src/components/cart/Shipping.js
@@ -13,12 +13,19 @@ const useStyles = makeStyles(theme => ({
     borderRadius: 15,
     height: "10rem",
     width: "10rem",
+    [theme.breakpoints.down("xs")]: {
+      height: "6rem",
+      width: "6rem",
+    },
     "&:hover": {
       backgroundColor: theme.palette.secondary.light,
     },
   },
   label: {
     fontSize: "1.5rem",
+    [theme.breakpoints.down("xs")]: {
+      fontSize: "0.9rem",
+    },
   },
   container: {
     height: "100%",
@@ -29,6 +36,9 @@ const useStyles = makeStyles(theme => ({
   },
   price: {
     color: "#fff",
+    [theme.breakpoints.down("xs")]: {
+      fontSize: "1.25rem",
+    },
   },
   selected: {
     backgroundColor: "#fff",

diff --git a/frontend/src/components/cart/ThankYou.js b/frontend/src/components/cart/ThankYou.js
@@ -2,6 +2,7 @@ import React from "react"
 import Grid from "@material-ui/core/Grid"
 import Button from "@material-ui/core/Button"
 import Typography from "@material-ui/core/Typography"
+import useMediaQuery from "@material-ui/core/useMediaQuery"
 import { Link } from "gatsby"
 import { makeStyles } from "@material-ui/core/styles"
 
@@ -12,13 +13,24 @@ const useStyles = makeStyles(theme => ({
     padding: "0.25rem 0",
     textTransform: "none",
   },
+  detailsText: {
+    [theme.breakpoints.down("xs")]: {
+      fontSize: "1rem",
+    },
+  },
   order: {
     fontWeight: 600,
+    [theme.breakpoints.down("xs")]: {
+      fontSize: "1rem",
+    },
   },
   shopText: {
     fontSize: "2rem",
     fontWeight: 600,
     textTransform: "none",
+    [theme.breakpoints.down("xs")]: {
+      fontSize: "1.5rem",
+    },
   },
   container: {
     height: "100%",
@@ -36,6 +48,7 @@ const useStyles = makeStyles(theme => ({
 
 export default function ThankYou({ selectedShipping, order }) {
   const classes = useStyles()
+  const matchesXS = useMediaQuery(theme => theme.breakpoints.down("xs"))
 
   const addToDate = days => {
     var date = new Date()
@@ -73,16 +86,28 @@ export default function ThankYou({ selectedShipping, order }) {
         <img src={complete} alt="order placed" className={classes.icon} />
       </Grid>
       <Grid item>
-        <Typography variant="h4">Expected by {getExpected()}</Typography>
-        <Grid item container justify="space-between" alignItems="center">
+        <Typography variant="h4" align="center">
+          Expected by {getExpected()}
+        </Typography>
+        <Grid
+          item
+          container
+          justify={matchesXS ? "space-around" : "space-between"}
+          alignItems="center"
+        >
           <Grid item>
             <Typography variant="body2" classes={{ root: classes.order }}>
               Order #{order.id.slice(order.id.length - 10, order.id.length)}
             </Typography>
           </Grid>
           <Grid item>
             <Button classes={{ root: classes.detailsButton }}>
-              <Typography variant="body2">Details ></Typography>
+              <Typography
+                variant="body2"
+                classes={{ root: classes.detailsText }}
+              >
+                Details >
+              </Typography>
             </Button>
           </Grid>
         </Grid>

diff --git a/frontend/src/components/settings/Details.js b/frontend/src/components/settings/Details.js
@@ -71,6 +71,9 @@ const useStyles = makeStyles(theme => ({
   switchLabel: {
     color: "#fff",
     fontWeight: 600,
+    [theme.breakpoints.down("xs")]: {
+      fontSize: "1rem",
+    },
   },
   "@global": {
     ".MuiInput-underline:before, .MuiInput-underline:hover:not(.Mui-disabled):before": {

diff --git a/frontend/src/components/settings/Location.js b/frontend/src/components/settings/Location.js
@@ -44,6 +44,9 @@ const useStyles = makeStyles(theme => ({
   switchLabel: {
     color: "#fff",
     fontWeight: 600,
+    [theme.breakpoints.down("xs")]: {
+      fontSize: "1rem",
+    },
   },
   locationContainer: {
     position: "relative",