New How it works modal on HomePage and minor UX tweeks

.gitignore

@@ -1 +1 @@
-credentials.sql
+credentials.sql

web/src/components/NeedHelpModal.tsx

@@ -0,0 +1,172 @@
+import {
+  Box,
+  Grid,
+  GridItem,
+  Icon,
+  Image,
+  Link,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Stack,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react";
+import * as React from "react";
+import { HiChevronRight } from "react-icons/hi";
+
+import CreateWorkspaceButtonSVG from "@/assets/howitworks/create-workspace-button.svg";
+import RTDMConnectButtonSVG from "@/assets/howitworks/rtdm-connect-button.svg";
+import WorkspaceConnectOptionSVG from "@/assets/howitworks/workspace-connect-direct.svg";
+
+import { InvertedPrimaryButton } from "./customcomponents/Button";
+
+const HOW_IT_WORKS_STEPS = [
+  {
+    title: "1. Enter your workspace host address.",
+    description: (
+      <>
+        Go to your SingleStoreDB <b>workspace group page</b> and copy
+        SinglestoreDB endpoints by clicking in workspace Connect options.
+      </>
+    ),
+    imageSrc: CreateWorkspaceButtonSVG,
+  },
+  {
+    title: "2. Paste Workspace Group's password",
+    description: (
+      <>
+        This can be obtained from the <b>Connect Directly flyout</b>. The
+        password can be reset in the Access tab of your Workspace Group.
+      </>
+    ),
+    imageSrc: WorkspaceConnectOptionSVG,
+  },
+  {
+    title: "3. Select Martech database and connect",
+    description: (
+      <>
+        If you already have the <b>Martech dataset</b> loaded, please introduce
+        its database name. Otherwise, choose the new database name to load the
+        dataset.
+      </>
+    ),
+    imageSrc: RTDMConnectButtonSVG,
+  },
+];
+
+const StepSeparator = () => (
+  <Box
+    display="inline-flex"
+    padding={3}
+    justifyContent="center"
+    alignItems="center"
+  >
+    <Icon
+      as={HiChevronRight}
+      color={useColorModeValue("white", "#2F206E")}
+      background={useColorModeValue("#553ACF", "#CCC3F9")}
+      borderRadius="50%"
+      fontSize="1.2em"
+    />
+  </Box>
+);
+
+const SingleStepContainer = ({
+  title,
+  description,
+  imageSrc,
+}: {
+  title: string;
+  description: React.ReactNode;
+  imageSrc: string;
+}) => (
+  <GridItem
+    alignItems="center"
+    justifyContent="center"
+    display="flex"
+    flexDirection="column"
+    textAlign="center"
+    gap="8px"
+  >
+    <Image src={imageSrc} width="70%" objectFit="contain" marginBottom="16px" />
+    <Text fontSize="md" fontWeight="bold">
+      {title}
+    </Text>
+    <Text fontSize="sm">{description}</Text>
+  </GridItem>
+);
+
+const StepGridItems = () => {
+  const numOfSteps = HOW_IT_WORKS_STEPS.length;
+
+  const getStepSeparator = (index: number) => {
+    // We do not add separator after the last step.
+    if (index < numOfSteps - 1) {
+      return <StepSeparator />;
+    }
+  };
+
+  return (
+    <>
+      {HOW_IT_WORKS_STEPS.map(({ title, description, imageSrc }, index) => (
+        <React.Fragment key={index}>
+          <SingleStepContainer
+            title={title}
+            description={description}
+            imageSrc={imageSrc}
+          />
+          {/* We add a arrow separator in between each steps.*/}
+          {getStepSeparator(index)}
+        </React.Fragment>
+      ))}
+    </>
+  );
+};
+
+export const NeedHelpModal = () => {
+  const [showModal, setShowModal] = React.useState(false);
+
+  const openModal = () => setShowModal(true);
+  const closeModal = () => setShowModal(false);
+
+  return (
+    <>
+      <Link onClick={openModal}>Need help?</Link>
+      <Modal size="6xl" isOpen={showModal} onClose={closeModal} isCentered>
+        <ModalOverlay />
+        <ModalContent
+          display="flex"
+          alignItems="center"
+          padding="24px 26px 24px 26px"
+        >
+          <Stack justifyContent="center" alignItems="center" gap="26px">
+            <ModalHeader fontSize="26px" fontWeight="bold" padding="8px">
+              How to connect the Real-Time Digital marketing app to
+              SingleStoreDB?
+            </ModalHeader>
+            <ModalCloseButton _focus={{ boxShadow: "none" }} />
+            <ModalBody padding={0} margin={0}>
+              <Grid display="flex" padding={0} margin={0}>
+                <StepGridItems />
+              </Grid>
+            </ModalBody>
+            <ModalFooter margin="8px">
+              <InvertedPrimaryButton
+                onClick={closeModal}
+                fontSize="1.2rem"
+                lineHeight="20px"
+              >
+                Start now
+              </InvertedPrimaryButton>
+            </ModalFooter>
+          </Stack>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};

web/src/components/dataConfigForm/DatabaseConfigFormAutomatic.tsx

@@ -1,4 +1,4 @@
-import { Link, SimpleGrid, Stack, Text } from "@chakra-ui/react";
+import { SimpleGrid, Stack } from "@chakra-ui/react";
 import * as React from "react";
 import { useRecoilState } from "recoil";
 
@@ -29,7 +29,7 @@ export const DatabaseConfigForm = ({
   if (showDatabase) {
     databaseInput = (
       <ConfigInput
-        label="Database"
+        label="Martech Database Name"
         placeholder="martech"
         value={database}
         setValue={setDatabase}
@@ -45,30 +45,22 @@ export const DatabaseConfigForm = ({
   return (
     <Stack spacing={4}>
       <ConfigInput
-        label="Host & Port"
+        label="Workspace Host"
         placeholder="http://127.0.0.1:8808"
         value={host}
         setValue={setHost}
-        helpText={
-          <Text>
-            The protocol (http, https), host, and port for the SingleStore{" "}
-            <Link href="https://docs.singlestore.com/docs/http-api" isExternal>
-              Data API
-            </Link>
-            .
-          </Text>
-        }
+        helpText="Your workspace hostname."
       />
       <SimpleGrid columns={2} gap={2}>
         <ConfigInput
-          label="Username"
+          label="Workspace Group Username"
           helpText="Fill in the Security credentials of your workspace group."
           placeholder="admin"
           value={user}
           setValue={setUser}
         />
         <ConfigInput
-          label="Password"
+          label="Workspace Group Password"
           placeholder=""
           value={password}
           setValue={setPassword}

web/src/components/dataConfigForm/DatabaseConfigFormManual.tsx

@@ -1,12 +1,4 @@
-import {
-  Box,
-  Link,
-  SimpleGrid,
-  Stack,
-  Text,
-  Tooltip,
-  useToast,
-} from "@chakra-ui/react";
+import { Box, SimpleGrid, Stack, Tooltip, useToast } from "@chakra-ui/react";
 import * as React from "react";
 import { useRecoilState } from "recoil";
 
@@ -81,7 +73,7 @@ export const DatabaseConfigFormManual = ({
   if (showDatabase) {
     databaseInput = (
       <ConfigInput
-        label="Database"
+        label="Martech Database Name"
         placeholder="martech"
         required
         value={localDatabase}
@@ -114,32 +106,24 @@ export const DatabaseConfigFormManual = ({
   return (
     <Stack spacing={4} onKeyDown={handleEnterKeyPress}>
       <ConfigInput
-        label="Host & Port"
+        label="Workspace Host"
         placeholder="http://127.0.0.1:8808"
         value={localHost}
         required
         setValue={setLocalHost}
-        helpText={
-          <Text>
-            The protocol (http, https), host, and port for the SingleStore{" "}
-            <Link href="https://docs.singlestore.com/docs/http-api/" isExternal>
-              Data API
-            </Link>
-            .
-          </Text>
-        }
+        helpText="Your workspace hostname."
       />
       <SimpleGrid columns={2} gap={2}>
         <ConfigInput
-          label="Username"
+          label="Workspace Group Username"
           required
           helpText="Fill in the Security credentials of your workspace group."
           placeholder="admin"
           value={localUser}
           setValue={setLocalUser}
         />
         <ConfigInput
-          label="Password"
+          label="Workspace Group Password"
           required
           placeholder=""
           value={localPassword}

web/src/data/constants.ts

@@ -12,7 +12,7 @@ export const selectableCitiesData: Array<City> = [
   },
   {
     id: 120658,
-    name: "New York City",
+    name: "New York",
     centerLat: 40.71427003,
     centerLon: -74.00597003,
     diameter: 0.4,

web/src/pages/Analytics.tsx

@@ -133,7 +133,7 @@ const DashboardContainerChild = () => {
     <Stack gap={10}>
       <Stack spacing={3}>
         <Stack spacing={2}>
-          <Heading fontSize="md">Engagement</Heading>
+          <Heading fontSize="xl">Engagement</Heading>
           <Text overflowWrap="break-word">
             Conversion rate with subscribers
           </Text>
@@ -142,7 +142,7 @@ const DashboardContainerChild = () => {
       </Stack>
       <Stack spacing={3}>
         <Stack spacing={2}>
-          <Heading fontSize="md">Top Performing Customers</Heading>
+          <Heading fontSize="xl">Top Performing Customers</Heading>
           <Text overflowWrap="break-word">
             Companies with the highest conversion rate
           </Text>

web/src/pages/Configure.tsx

@@ -114,17 +114,17 @@ const CollapsibleSection = ({
     <div style={containerStyle}>
       <Button
         justifyContent="space-between"
-        size="sm"
+        size="md"
         width="100%"
         style={buttonStyle}
         onClick={() => setSectionOpen(!sectionOpen)}
       >
         {title}
         {accordionIcon}
       </Button>
-      <div style={childContainerStyle}>
+      <Box style={childContainerStyle}>
         <Collapse in={sectionOpen}>{childComponent}</Collapse>
-      </div>
+      </Box>
     </div>
   );
 };
@@ -1103,7 +1103,7 @@ export const Configure = () => {
     >
       <Flex gap={5} justifyContent="space-between" marginBottom="50px">
         <Stack spacing={2}>
-          <Heading fontSize="md">Setting up Your Application</Heading>
+          <Heading fontSize="xl">Setting up Your Application</Heading>
           <Text size="xs" overflowWrap="break-word">
             Connect to a SingleStoreDB workspace to see how we power the
             real-time Digital Marketing applications. If you have any questions

web/src/pages/Dashboard.tsx

@@ -51,7 +51,7 @@ const RealtimeChart = () => {
       <Stack spacing={4}>
         <Stack spacing={3}>
           <Stack spacing={2}>
-            <Heading size="md">Key Metrics</Heading>
+            <Heading fontSize="xl">Key Metrics</Heading>
             <Text>Serving ads real-time to simulated subscribers</Text>
           </Stack>
         </Stack>
@@ -195,7 +195,7 @@ const StatsWrapper = () => {
       <Stack spacing={4}>
         <Stack spacing={3}>
           <Stack spacing={2}>
-            <Heading fontSize="md">Locations</Heading>
+            <Heading fontSize="xl">Locations</Heading>
             <Text overflowWrap="break-word">
               Select cities to add to the dataset
             </Text>
@@ -266,7 +266,7 @@ export const NotificationsMap = () => {
         left={0}
         top={0}
         overflow={isSmallScreen ? undefined : "auto"}
-        width={isSmallScreen ? "100%" : "30%"}
+        width={isSmallScreen ? "100%" : "31%"}
         height={isSmallScreen ? "auto" : "100%"}
         borderBottomRightRadius="10px"
         padding="36px 48px 36px 48px"