[WEB-2489] fix: overlapping issues for trial banner (#1178) (#1240)

* fix overplaping issues for trial banner

* fix css

Co-authored-by: Ketan Sharma <sharma01ketan@gmail.com>
This commit is contained in:
Prateek Shourya
2024-09-23 17:11:43 +05:30
committed by GitHub
parent 9e0c1ddd3a
commit 3e134f97eb
2 changed files with 4 additions and 12 deletions

View File

@@ -85,10 +85,8 @@ export default function RootLayout({ children }: { children: React.ReactNode })
"app-container"
)}
>
<div className="flex-shrink-0">
{/* free trial banner */}
<FreeTrialBanner />
</div>
<div className="w-full h-full overflow-hidden relative">{children}</div>
</div>
</AppProvider>

View File

@@ -18,9 +18,7 @@ export const FreeTrialBanner: FC = observer(() => {
const { config } = useInstance();
const { allowPermissions } = useUserPermissions();
const { currentWorkspace } = useWorkspace();
const { currentWorkspaceSubscribedPlanDetail: subscriptionDetail } = useWorkspaceSubscription();
// states
const [pricingModalOpen, setPricingModalOpen] = useState(false);
const { currentWorkspaceSubscribedPlanDetail: subscriptionDetail, togglePaidPlanModal } = useWorkspaceSubscription();
// derived values
const canPerformWorkspaceAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
@@ -32,10 +30,7 @@ export const FreeTrialBanner: FC = observer(() => {
if (!subscriptionDetail.show_trial_banner) return <></>;
return (
<>
{/* This modal is intentionally placed inside the condition to avoid unnecessary calls to list product endpoint. */}
<CloudUpgradeModal isOpen={pricingModalOpen} handleClose={() => setPricingModalOpen(false)} />
<div className="flex-shrink-0 w-full z-[20] bg-custom-background-100">
<div className="bg-custom-primary-100/10 text-custom-primary-100 py-2 px-5">
<div className="relative container mx-auto flex justify-center items-center gap-2">
<div className="text-sm font-medium">
@@ -46,7 +41,7 @@ export const FreeTrialBanner: FC = observer(() => {
.
</div>
<div className="flex gap-2 flex-shrink-0">
<Button variant="outline-primary" size="sm" className="py-1" onClick={() => setPricingModalOpen(true)}>
<Button variant="outline-primary" size="sm" className="py-1" onClick={() => togglePaidPlanModal(true)}>
<Crown className="w-3.5 h-3.5" />
Upgrade to Pro
</Button>
@@ -54,7 +49,6 @@ export const FreeTrialBanner: FC = observer(() => {
href="https://cal.com/plane/"
target="_blank"
className={cn(getButtonStyling("neutral-primary", "sm"), "py-1")}
onClick={() => setPricingModalOpen(true)}
>
<Phone className="w-3.5 h-3.5" />
Get 1:1 help
@@ -62,6 +56,6 @@ export const FreeTrialBanner: FC = observer(() => {
</div>
</div>
</div>
</>
</div>
);
});