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/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"

web/src/pages/HomePage.tsx

@@ -1,3 +1,4 @@
+import { InfoIcon } from "@chakra-ui/icons";
 import {
   Flex,
   Grid,
@@ -12,6 +13,7 @@ import {
   TabPanels,
   Tabs,
   Text,
+  Tooltip,
   useColorModeValue,
   useMediaQuery,
 } from "@chakra-ui/react";
@@ -23,13 +25,65 @@ import GraphicalBackground2 from "@/assets/graphical-background-2.svg";
 import SingleStoreLogoDark from "@/assets/singlestore-logo-dark.svg";
 import SinglestoreLogo from "@/assets/singlestore-logo-filled-sm.svg";
 import { DatabaseConfigFormManual } from "@/components/dataConfigForm/DatabaseConfigFormManual";
+import { HowItWorksModal } from "@/components/HowItWorksModal";
 import { useUpdateCityList } from "@/data/models/useUpdateCityList";
 import { useConnectionState } from "@/view/hooks/hooks";
 
+const ConnectSection: React.FC = () => {
+  const fontColor = useColorModeValue("#553ACF", "#CCC3F9");
+
+  return (
+    <Stack spacing={4}>
+      <Heading>
+        <Image src={useColorModeValue(SinglestoreLogo, SingleStoreLogoDark)} />
+      </Heading>
+      <Heading>
+        <Text>Real-Time Digital Marketing</Text>
+      </Heading>
+      <Text size="1.2em">
+        Watch{" "}
+        <Link
+          fontWeight="bold"
+          href="https://portal.singlestore.com"
+          isExternal
+        >
+          SingleStoreDB
+        </Link>{" "}
+        serve ads to millions of simulated subscribers based on their behavior,
+        purchases, request history, and geolocation.
+      </Text>
+      <Tabs variant="unstyled">
+        <TabList>
+          <Tab
+            justifyContent="center"
+            _selected={{
+              color: fontColor,
+              borderBottom: `2px solid ${useColorModeValue(
+                "#553ACF",
+                "#CCC3F9"
+              )}`,
+            }}
+            fontWeight="bold"
+            gap={1}
+          >
+                Connect to Singlestore
+          </Tab>
+        </TabList>
+        <TabPanels padding={0} margin={0}>
+          <TabPanel paddingLeft={0} paddingTop={5} margin={0}>
+            <DatabaseConfigFormManual showDatabase />
+            <br />
+            <HowItWorksModal />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </Stack>
+  );
+};
+
 export const HomePage: React.FC = () => {
   const { connected } = useConnectionState();
   const navigate = useNavigate();
-  const fontColor = useColorModeValue("#553ACF", "#CCC3F9");
   const [isSmallScreen] = useMediaQuery("(max-width: 640px)");
   const { updateCityList } = useUpdateCityList();
 
@@ -49,51 +103,7 @@ export const HomePage: React.FC = () => {
       alignItems="center"
     >
       <GridItem padding="10% 10% 10% 20%">
-        <Stack spacing={4}>
-          <Heading>
-            <Image
-              src={useColorModeValue(SinglestoreLogo, SingleStoreLogoDark)}
-            />
-          </Heading>
-          <Heading>
-            <Text>Real-Time Digital Marketing</Text>
-          </Heading>
-          <Text size="1.2em">
-            Watch{" "}
-            <Link
-              fontWeight="bold"
-              href="https://portal.singlestore.com"
-              isExternal
-            >
-              SingleStoreDB
-            </Link>{" "}
-            serve ads to millions of simulated subscribers based on their
-            behavior, purchases, request history, and geolocation.
-          </Text>
-          <Tabs variant="unstyled">
-            <TabList>
-              <Tab
-                justifyContent="center"
-                _selected={{
-                  color: fontColor,
-                  borderBottom: `2px solid ${useColorModeValue(
-                    "#553ACF",
-                    "#CCC3F9"
-                  )}`,
-                }}
-                fontWeight="bold"
-                gap={1}
-              >
-                Connect to Singlestore
-              </Tab>
-            </TabList>
-            <TabPanels padding={0} margin={0}>
-              <TabPanel paddingLeft={0} paddingTop={5} margin={0}>
-                <DatabaseConfigFormManual showDatabase />
-              </TabPanel>
-            </TabPanels>
-          </Tabs>
-        </Stack>
+        <ConnectSection />
       </GridItem>
       <GridItem
         backgroundImage={GraphicalBackground2}