Make https as default protocol for host and use darker color for heat…

… map blocks in analytics (#40)

* https default protocol and darkert heat map boxes

* https default protocol and darkert heat map boxes

* Optimise host rectfier function

* Use indigo 300 - 800 for Heatmap

* Revert accidental changes

---------

Co-authored-by: sbafna1 <sbafna@ip-10-170-33-212>

web/src/components/NeedHelpModal.tsx

@@ -19,9 +19,9 @@ import {
 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 CreateWorkspaceButtonSVG from "@/assets/needhelpmodal/create-workspace-button.svg";
+import RTDMConnectButtonSVG from "@/assets/needhelpmodal/rtdm-connect-button.svg";
+import WorkspaceConnectOptionSVG from "@/assets/needhelpmodal/workspace-connect-direct.svg";
 
 import { InvertedPrimaryButton } from "./customcomponents/Button";
 
@@ -93,7 +93,13 @@ const SingleStepContainer = ({
     textAlign="center"
     gap="8px"
   >
-    <Image src={imageSrc} width="70%" objectFit="contain" marginBottom="16px" />
+    <Image
+      src={imageSrc}
+      width="70%"
+      maxH="50%"
+      objectFit="contain"
+      marginBottom="16px"
+    />
     <Text fontSize="md" fontWeight="bold">
       {title}
     </Text>

web/src/data/client.ts

@@ -1,3 +1,15 @@
+const rectifyHostAddress = (hostAddress: string) => {
+  if (
+    hostAddress.toLowerCase().startsWith("http://") ||
+    hostAddress.toLocaleLowerCase().startsWith("https://") ||
+    hostAddress === ""
+  ) {
+    return hostAddress;
+  } else {
+    return `https://${hostAddress}`;
+  }
+};
+
 export type ConnectionConfig = {
   host: string;
   user: string;
@@ -131,15 +143,18 @@ const fetchEndpoint = async (
     console.log("running query", sql, args);
   }
 
-  const response = await fetch(`${config.host}/api/v2/${endpoint}`, {
-    method: "POST",
-    signal: config.ctx?.signal,
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Basic ${btoa(`${config.user}:${config.password}`)}`,
-    },
-    body: JSON.stringify({ sql, args, database: config.database }),
-  });
+  const response = await fetch(
+    `${rectifyHostAddress(config.host)}/api/v2/${endpoint}`,
+    {
+      method: "POST",
+      signal: config.ctx?.signal,
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Basic ${btoa(`${config.user}:${config.password}`)}`,
+      },
+      body: JSON.stringify({ sql, args, database: config.database }),
+    }
+  );
 
   if (!response.ok) {
     throw new SQLError(await response.text(), sql);

web/src/pages/Analytics.tsx

@@ -84,7 +84,7 @@ const NotificationZoneMap = () => {
               <Progress
                 colorScheme="transparent"
                 height={2}
-                bgGradient="linear(to-r, rgba(79, 52, 199, 1) 0%, rgba(232, 230, 245) 100%)"
+                bgGradient="linear(to-r, #3A249E 0%, #CCC3F9 100%)"
                 value={90}
               />
             </Box>
@@ -103,7 +103,7 @@ const NotificationZoneMap = () => {
         <Heatmap
           height={400}
           useCells={useConversionCells}
-          colorInterpolater={interpolateRgb("#E8E6F5", "#4F34C7")}
+          colorInterpolater={interpolateRgb("#CCC3F9", "#3A249E")}
           getCellConfig={({ conversionRate, wktPolygon }: ZoneMetrics) => ({
             value: conversionRate,
             wktPolygon,