2382 update survey design & sessionStorage

client/src/components/MuiDemo/MuiButtons.jsx

@@ -228,6 +228,97 @@ function MuiButtons() {
         </Stack>
       </Box>
 
+      {/* surveyButton*/}
+      <Typography variant="subtitle1" component="h3">
+        Survey Button
+      </Typography>
+      <Box
+        sx={{
+          padding: "0.5rem",
+          backgroundColor: "lightgray",
+          border: "1px solid black",
+          borderRadius: "4px",
+        }}
+      >
+        <Stack direction="row">
+          <Button variant="surveyButton">Normal</Button>
+          <Button variant="surveyButton" disabled>
+            Disabled
+          </Button>
+        </Stack>
+      </Box>
+      <Typography variant="subtitle1" component="h3">
+        Survey Button (Light Background)
+      </Typography>
+      <Box
+        sx={{
+          padding: "0.5rem",
+          backgroundColor: "white",
+          border: "1px solid black",
+          borderRadius: "4px",
+        }}
+      >
+        <Stack direction="row">
+          <Button variant="surveyButton">Normal</Button>
+          <Button variant="surveyButton" disabled>
+            Disabled
+          </Button>
+        </Stack>
+      </Box>
+      <Typography variant="subtitle1" component="h3">
+        Survey Button (Dark Background)
+      </Typography>
+      <Box
+        sx={{
+          padding: "0.5rem",
+          backgroundColor: "black",
+          borderRadius: "4px",
+        }}
+      >
+        <Stack direction="row">
+          <Button variant="surveyButton">Normal</Button>
+          <Button variant="surveyButton" disabled>
+            Disabled
+          </Button>
+        </Stack>
+      </Box>
+
+      <Typography variant="subtitle1" component="h3">
+        Sizing Test
+      </Typography>
+      <Box padding=".2rem">
+        <Stack direction="row" alignItems="center">
+          <Box
+            sx={{
+              height: "3rem",
+              width: "8rem",
+              backgroundColor: "lightgray",
+              border: "1px solid black",
+            }}
+          >
+            <Button variant="surveyButton">Small Space</Button>
+          </Box>
+          <Box
+            sx={{
+              backgroundColor: "lightgray",
+              border: "1px solid black",
+            }}
+          >
+            <Button variant="surveyButton">Enough Space</Button>
+          </Box>
+          <Box
+            sx={{
+              height: "12rem",
+              width: "36rem",
+              backgroundColor: "lightgray",
+              border: "1px solid black",
+            }}
+          >
+            <Button variant="surveyButton">Extra Space</Button>
+          </Box>
+        </Stack>
+      </Box>
+
       <Typography variant="subtitle1" component="h3">
         IconButtons
       </Typography>

client/src/components/MuiDemo/MuiTypography.jsx

@@ -40,6 +40,12 @@ export default function Types() {
         blanditiis tenetur unde suscipit, quam beatae rerum inventore
         consectetur, neque doloribus, cupiditate numquam dignissimos laborum
         fugiat deleniti? Eum quasi quidem quibusdam.
+      </Typography>{" "}
+      <Typography variant="body3" gutterBottom>
+        body3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
+        blanditiis tenetur unde suscipit, quam beatae rerum inventore
+        consectetur, neque doloribus, cupiditate numquam dignissimos laborum
+        fugiat deleniti? Eum quasi quidem quibusdam.
       </Typography>
       <Typography variant="button" display="block" gutterBottom>
         button text

client/src/components/UI/SurveySnackbar.jsx

@@ -1,14 +1,15 @@
 import * as React from "react";
 import { useState } from "react";
-import { Button } from "@mui/material";
+import { Button, Link, Typography } from "@mui/material";
 
 import Stack from "@mui/material/Stack";
 import Snackbar from "@mui/material/Snackbar";
 import Box from "@mui/material/Box";
+import { IconButton } from "./StandardButton";
 
 const SurveySnackbar = () => {
   const [open, setOpen] = useState(() => {
-    const isClosed = localStorage.getItem("surveySnackbarClosed");
+    const isClosed = sessionStorage.getItem("surveySnackbarClosed");
     return isClosed !== "true";
   });
 
@@ -17,7 +18,7 @@ const SurveySnackbar = () => {
       return;
     }
     setOpen(false);
-    localStorage.setItem("surveySnackbarClosed", "true");
+    sessionStorage.setItem("surveySnackbarClosed", "true");
   };
 
   const openForm = () => {
@@ -28,20 +29,66 @@ const SurveySnackbar = () => {
   };
 
   const action = (
-    <Box
+    <Stack
+      direction={{ xs: "column", md: "row" }}
       sx={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
+        alignItems: { xs: "end", md: "center" },
+        justifyContent: "end",
         width: { xs: "100%" },
-        cursor: "pointer",
-        gap: { xs: 1 },
+        gap: { xs: "20px", md: "60px" },
       }}
     >
-      <span> Participate in a quick survey</span>
-      <Button onClick={openForm}> Complete Survey </Button>
-      <Button onClick={handleClose}> OPT OUT </Button>
-    </Box>
+      <Stack direction="row" gap="10px">
+        <Typography variant="body3">
+          {" "}
+          Help us improve! Take a quick survey?
+        </Typography>
+        <IconButton
+          icon="close"
+          sx={(theme) => ({
+            color: theme.palette.surveyButtonColor.main,
+            display: { xs: "block", md: "none" },
+            transform: "translate(10px, -10px)",
+          })}
+          onClick={handleClose}
+        />
+      </Stack>
+      <Stack
+        direction="row"
+        sx={{
+          alignItems: "center",
+          // gap: { xs: "20px" },
+        }}
+      >
+        <Link
+          component="a"
+          variant=""
+          sx={(theme) => ({
+            marginRight: "20px",
+            color: theme.palette.surveyButtonColor.main,
+            fontWeight: "500",
+            textDecoration: "none",
+          })}
+          onClick={handleClose}
+        >
+          NO THANKS
+        </Link>
+
+        <Button variant="surveyButton" onClick={openForm}>
+          {" "}
+          Yes{" "}
+        </Button>
+        <IconButton
+          icon="close"
+          sx={(theme) => ({
+            color: theme.palette.surveyButtonColor.main,
+            display: { xs: "none", md: "flex" },
+            transform: "translateX(10px)",
+          })}
+          onClick={handleClose}
+        />
+      </Stack>
+    </Stack>
   );
 
   return (
@@ -59,9 +106,8 @@ const SurveySnackbar = () => {
       >
         <Box
           sx={{
-            backgroundColor: "#323232",
-            color: "white",
-            padding: 2,
+            backgroundColor: "#C1D6FC",
+            padding: 2.5,
             borderRadius: 1,
           }}
         >

client/src/theme/overrides/Button.js

@@ -129,6 +129,26 @@ export default function Button(theme) {
             filter: "drop-shadow(0px 0px  12px rgba(255, 255, 255, 0.8))",
           },
         },
+        surveyButton: {
+          padding: "8px 16px",
+          color: theme.palette.primary.contrastText,
+          backgroundColor: theme.palette.surveyButtonColor.main,
+          "&:hover": {
+            backgroundColor: theme.palette.surveyButtonColor.hover,
+          },
+          "&:active": {
+            backgroundColor: theme.palette.surveyButtonColor.active,
+            boxShadow: "inset 0px 8px 4px rgba(0,0,0,0.24)",
+          },
+          "&:focus": {
+            filter: "drop-shadow(0px 0px 12px rgba(255, 255, 255, 0.8))",
+          },
+          "&:disabled": {
+            backgroundColor: theme.palette.inactiveButton.main,
+            color: theme.palette.common.white,
+            boxShadow: "none",
+          },
+        },
       },
     },
   };

client/src/theme/palette.tsx

@@ -15,6 +15,9 @@ export const darkGray = "#4D4D4D";
 export const disabledText = "#999999";
 export const tooltipHover = "rgba(51, 102, 153, 0.2)";
 export const linkText = "#4A80F5";
+export const surveyButtonColor = "#163B92";
+export const surveyButtonHoverColor = "#275DE1";
+export const surveyButtonActiveColor = "#0E2B69";
 
 //Icon and List Colors
 export const foodPantry = "#0A7572";
@@ -86,6 +89,11 @@ export const palette = {
     backgroundColor: "#E6F0FF",
     bodyText: "#313233",
     hoverColor: "#f0f0f0",
-    hoverSelectedColor: "#D9E3F2"
+    hoverSelectedColor: "#D9E3F2",
+  },
+  surveyButtonColor: {
+    main: surveyButtonColor,
+    hover: surveyButtonHoverColor,
+    active: surveyButtonActiveColor,
   },
 };

client/src/theme/typography.tsx

@@ -70,6 +70,10 @@ export const typography = {
       fontSize: ".875rem",
     },
   },
+  body3: {
+    fontWeight: 400,
+    fontSize: "1.125rem",
+  },
   // The variant "button" is not overridden, so that the text on a button
   // is controlled by styles from the button itself. This allows us to
   // have different button variants with different font charactreristics.