Add back button in generate page form (#6559)

app/client/src/constants/Colors.tsx

@@ -23,6 +23,7 @@ export const Colors = {
   BLACK: "#000000",
   BLACK_PEARL: "#040627",
   CODE_GRAY: "#090707",
+  DIESEL: "#0C0000",
   SHARK: "#21282C",
   SHARK2: "#232324",
   MINE_SHAFT: "#262626",

app/client/src/pages/Editor/DataSourceEditor/BackButton.tsx

@@ -5,6 +5,7 @@ import Text, { TextType } from "components/ads/Text";
 import { useHistory } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { getIsGeneratePageInitiator } from "utils/GenerateCrudUtil";
+import { Colors } from "constants/Colors";
 import {
   getCurrentApplicationId,
   getCurrentPageId,
@@ -15,13 +16,11 @@ import {
 } from "../../../constants/routes";
 
 const Back = styled.span`
-  //width: 100%;
   height: 30px;
   display: flex;
   align-items: center;
   cursor: pointer;
   padding-left: 16px;
-  /* background-color: ${(props) => props.theme.colors.apiPane.iconHoverBg}; */
 `;
 
 function BackButton() {
@@ -38,7 +37,10 @@ function BackButton() {
   return (
     <Back onClick={goBack}>
       <Icon icon="chevron-left" iconSize={16} />
-      <Text style={{ color: "#0c0000", lineHeight: "14px" }} type={TextType.P1}>
+      <Text
+        style={{ color: Colors.DIESEL, lineHeight: "14px" }}
+        type={TextType.P1}
+      >
         Back
       </Text>
     </Back>

app/client/src/pages/Editor/GeneratePage/index.tsx

@@ -2,13 +2,15 @@ import React from "react";
 import styled from "styled-components";
 import PageContent from "./components/PageContent";
 import { getTypographyByKey } from "../../../constants/DefaultTheme";
+import { Colors } from "constants/Colors";
+import { Icon } from "@blueprintjs/core";
+import Text, { TextType } from "components/ads/Text";
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 20px;
 `;
 
 const HeadingContainer = styled.div`
@@ -32,7 +34,19 @@ const Heading = styled.h1`
 const SubHeading = styled.p`
   ${(props) => getTypographyByKey(props, "p1")};
   margin: 20px 0px;
-  color: #000000;
+  color: ${Colors.BLACK};
+`;
+
+const Back = styled.span`
+  height: 30px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding-left: 16px;
+`;
+
+const Header = styled.div`
+  width: 100%;
 `;
 
 function GeneratePage() {
@@ -41,6 +55,20 @@ function GeneratePage() {
 
   return (
     <Container>
+      {isGenerateFormPage ? (
+        <Header>
+          <Back onClick={() => history.back()}>
+            <Icon icon="chevron-left" iconSize={16} />
+            <Text
+              style={{ color: Colors.DIESEL, lineHeight: "14px" }}
+              type={TextType.P1}
+            >
+              Back
+            </Text>
+          </Back>
+        </Header>
+      ) : null}
+
       <HeadingContainer>
         <Heading> {heading}</Heading>
       </HeadingContainer>