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

* fix overplaping issues for trial banner

* fix css
This commit is contained in:
Ketan Sharma
2024-09-19 20:32:00 +05:30
committed by GitHub
parent e1ffc9078d
commit 5a11d9f3df
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

@@ -20,9 +20,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);
@@ -34,10 +32,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">
@@ -48,7 +43,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>
@@ -56,7 +51,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
@@ -64,6 +58,6 @@ export const FreeTrialBanner: FC = observer(() => {
</div>
</div>
</div>
</>
</div>
);
});