Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: added margin top to the onboarding flow if banner visible (#31497)

Browse Source 
## 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
This commit is contained in:
Aman Agarwal 2024-03-07 05:49:42 +05:30 committed by GitHub
parent 63cd84936d
commit 6ba2f350bf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/client/src/ce/pages/Applications/CreateNewAppsOption.tsx
View File

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