New How it works modal on HomePage and minor UX tweeks

.gitignore

@@ -1 +1,2 @@
-credentials.sql
+credentials.sql
+previewConfig.json

web/src/components/GithubButtons.tsx

@@ -32,7 +32,6 @@ export const GithubStargazer: React.FC<GithubStargazerProps> = ({
   repoName,
 }) => {
   const [stargazersCount, setStargazersCount] = React.useState(0);
-
   const handleFlexRedirect = () => {
     window.open(`https://github.com/${owner}/${repoName}`, "_blank");
   };

web/src/components/HowItWorksModal.tsx

@@ -0,0 +1,171 @@
+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 WorkspaceConnectDirectOptionSVG 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: WorkspaceConnectDirectOptionSVG,
+  },
+  {
+    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: CreateWorkspaceButtonSVG,
+  },
+  {
+    title: "3. Select Martech database and connect",
+    description: (
+      <>
+        Follow the <b>Try with sample data</b> tutorial in SingleStoreDB help
+        menu to know how to create and connect to a Martech database.
+      </>
+    ),
+    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>
+);
+
+export const HowItWorksModal = () => {
+  const [showModal, setShowModal] = React.useState(false);
+
+  const openModal = () => setShowModal(true);
+  const closeModal = () => setShowModal(false);
+
+  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"
+        background="#FFFFFF"
+        marginBottom="16px"
+      />
+      <Text fontSize="md" fontWeight="bold">
+        {title}
+      </Text>
+      <Text fontSize="sm">{description}</Text>
+    </GridItem>
+  );
+
+  const StepGridItems = () => {
+    const numOfSteps = HOW_IT_WORKS_STEPS.length;
+    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.*/}
+            {index < numOfSteps - 1 && <StepSeparator />}
+          </React.Fragment>
+        ))}
+      </>
+    );
+  };
+
+  return (
+    <>
+      <Link onClick={openModal}>How it works?</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 Real-Time Digital marketing app works?
+            </ModalHeader>
+            <ModalCloseButton
+              _focus={{ boxShadow: "none" }}
+              // onClick={closeModal}
+            />
+            <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, Text } 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={<Text>Your workspace hostname.</Text>}
       />
       <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,6 +1,5 @@
 import {
   Box,
-  Link,
   SimpleGrid,
   Stack,
   Text,
@@ -81,7 +80,7 @@ export const DatabaseConfigFormManual = ({
   if (showDatabase) {
     databaseInput = (
       <ConfigInput
-        label="Database"
+        label="Martech Database name"
         placeholder="martech"
         required
         value={localDatabase}
@@ -114,32 +113,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={<Text>Your workspace hostname.</Text>}
       />
       <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"