From 6ba2f350bf1f01958b49debbfb3c9470eda87ae4 Mon Sep 17 00:00:00 2001
From: Aman Agarwal <aman@appsmith.com>
Date: Thu, 7 Mar 2024 05:49:42 +0530
Subject: [PATCH] fix: added margin top to the onboarding flow if banner
 visible (#31497)

## Description
Earlier the since the license banner had fixed position which was making
the skip section gets hidden. Hence as the page header is positioned
40px below the banner if it is visible. We are doing the same for the
onboarding flow.
<img width="1439" alt="Screenshot 2024-03-05 at 11 33 47 PM"
src="https://github.com/appsmithorg/appsmith/assets/7565635/e7912fb5-b84d-49fd-86fa-3baa888c51fa">

#### PR fixes following issue(s)
Fixes #30953

#### Media


https://github.com/appsmithorg/appsmith/assets/7565635/c090e06a-0cee-49a4-a48d-5b14dd79bf19
---
 .../pages/Applications/CreateNewAppsOption.tsx  | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx b/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx
index 6c4f49ef49..f0e99e5f25 100644
--- a/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx
+++ b/app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx
@@ -59,13 +59,16 @@ import StartWithTemplatesWrapper from "./StartWithTemplatesWrapper";
 import { useFeatureFlag } from "utils/hooks/useFeatureFlag";
 import { FEATURE_FLAG } from "@appsmith/entities/FeatureFlag";
 import type { Template } from "api/TemplatesApi";
+import { shouldShowLicenseBanner } from "@appsmith/selectors/tenantSelectors";
 
-const SectionWrapper = styled.div`
+const SectionWrapper = styled.div<{ isBannerVisible: boolean }>`
   display: flex;
   flex-direction: column;
   padding: 0 var(--ads-v2-spaces-7) var(--ads-v2-spaces-7);
   ${(props) => `
-    margin-top: ${props.theme.homePage.header}px;
+    margin-top: ${
+      props.theme.homePage.header + (props.isBannerVisible ? 40 : 0)
+    }px;
   `}
   background: var(--ads-v2-color-gray-50);
   ${(props) => `
@@ -73,12 +76,12 @@ const SectionWrapper = styled.div`
   `}
 `;
 
-const BackWrapper = styled.div<{ hidden?: boolean }>`
+const BackWrapper = styled.div<{ hidden?: boolean; isBannerVisible: boolean }>`
   position: sticky;
   display: flex;
   justify-content: space-between;
   ${(props) => `
-    top: ${props.theme.homePage.header}px;
+    top: ${props.theme.homePage.header + (props.isBannerVisible ? 40 : 0)}px;
     `}
   background: inherit;
   padding: var(--ads-v2-spaces-3);
@@ -202,6 +205,8 @@ const CreateNewAppsOption = ({
     FEATURE_FLAG.ab_start_with_data_default_enabled,
   );
 
+  const isBannerVisible = useSelector(shouldShowLicenseBanner);
+
   const dispatch = useDispatch();
   const onClickStartFromTemplate = () => {
     AnalyticsUtil.logEvent("CREATE_APP_FROM_TEMPLATE");
@@ -496,8 +501,8 @@ const CreateNewAppsOption = ({
   };
 
   return (
-    <SectionWrapper>
-      <BackWrapper hidden={!useType}>
+    <SectionWrapper isBannerVisible={!!isBannerVisible}>
+      <BackWrapper hidden={!useType} isBannerVisible={!!isBannerVisible}>
         <LinkWrapper
           className="t--create-new-app-option-goback"
           data-testid="t--create-new-app-option-goback"