adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-17 20:52:14 +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

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

@@ -42,17 +42,19 @@ 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>
<span class="font-medium"> <div class="lg:flex flex-1 items-center flex-col md:flex-row">
Your trial expires in {{ daysLeftInTrial() }} days. <span class="font-medium">
</span> Your trial expires in {{ daysLeftInTrial() }} days.
<span> </span>
To continue using all features & support the development of <span>
solidtime, please upgrade your plan. To continue using all features & support the development
</span> of solidtime, please upgrade your plan.
</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">
@@ -70,17 +72,19 @@ 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>
<span class="font-medium"> <div class="lg:flex flex-1 items-center flex-col md:flex-row">
Your organization is currently blocked. <span class="font-medium">
</span> Your organization is currently blocked.
<span> </span>
Please upgrade to a premium plan or remove all users except <span>
the owner to unblock your organization. Please upgrade to a premium plan or remove all users
</span> except the owner to unblock your organization.
</span>
</div>
</div> </div>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<Link <Link
@@ -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>