adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-18 21:22:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

improve billing banners on mobile

Browse Source
This commit is contained in:
Gregor Vostrak
2024-09-17 19:29:01 +02:00
committed by Constantin Graf
parent 7e5374d5b1
commit d5b35ef420
1 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
resources/js/Components/Billing/BillingBanner.vue
View File

@@ -42,18 +42,20 @@ const showFreeUpgradeBanner = computed(
<template> <template>
<div <div
v-if="showTrialBanner" v-if="showTrialBanner"
class="bg-accent-600/50 text-sm py-0.5 border-b border-border-secondary"> class="bg-accent-600/50 text-xs lg:text-sm py-0.5 border-b border-border-secondary">
<MainContainer class="flex items-center justify-between"> <MainContainer class="flex items-center justify-between">
<div class="flex items-center space-x-1.5"> <div class="flex items-center space-x-1.5">
<CheckBadgeIcon class="w-4 text-white/50"></CheckBadgeIcon> <CheckBadgeIcon class="w-4 text-white/50"></CheckBadgeIcon>
<div class="lg:flex flex-1 items-center flex-col md:flex-row">
<span class="font-medium"> <span class="font-medium">
Your trial expires in {{ daysLeftInTrial() }} days. Your trial expires in {{ daysLeftInTrial() }} days.
</span> </span>
<span> <span>
To continue using all features & support the development of To continue using all features & support the development
solidtime, please upgrade your plan. of solidtime, please upgrade your plan.
</span> </span>
</div> </div>
</div>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<Link v-if="canManageBilling()" href="/billing"> <Link v-if="canManageBilling()" href="/billing">
<div <div
@@ -70,18 +72,20 @@ const showFreeUpgradeBanner = computed(
</div> </div>
<div <div
v-if="showBlockedBanner" v-if="showBlockedBanner"
class="bg-red-600/50 text-sm py-0.5 border-b border-border-secondary"> class="bg-red-600/50 text-xs lg:text-sm py-0.5 border-b border-border-secondary">
<MainContainer class="flex items-center justify-between"> <MainContainer class="flex items-center justify-between">
<div class="flex items-center space-x-1.5"> <div class="flex items-center space-x-1.5">
<XCircleIcon class="w-4 text-white/50"></XCircleIcon> <XCircleIcon class="w-4 text-white/50"></XCircleIcon>
<div class="lg:flex flex-1 items-center flex-col md:flex-row">
<span class="font-medium"> <span class="font-medium">
Your organization is currently blocked. Your organization is currently blocked.
</span> </span>
<span> <span>
Please upgrade to a premium plan or remove all users except Please upgrade to a premium plan or remove all users
the owner to unblock your organization. except the owner to unblock your organization.
</span> </span>
</div> </div>
</div>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<Link <Link
v-if="isBillingActivated() && canManageBilling()" v-if="isBillingActivated() && canManageBilling()"
@@ -100,11 +104,11 @@ const showFreeUpgradeBanner = computed(
</div> </div>
<div <div
v-if="showFreeUpgradeBanner" v-if="showFreeUpgradeBanner"
class="bg-tertiary text-sm py-0.5 border-b border-border-secondary"> class="bg-tertiary text-xs lg:text-sm py-0.5 border-b border-border-secondary">
<MainContainer class="flex items-center justify-between"> <MainContainer class="flex items-center justify-between">
<div class="flex items-center space-x-1.5"> <div class="flex items-center space-x-1.5">
<XCircleIcon class="w-4 text-white/50"></XCircleIcon> <XCircleIcon class="w-4 text-white/50"></XCircleIcon>
<div class="flex items-center flex-col md:flex-row"> <div class="lg:flex flex-1 items-center flex-col md:flex-row">
<span class="font-medium"> <span class="font-medium">
You are currently using the Free Plan. You are currently using the Free Plan.
</span> </span>