feat: upgraded to tw v4

This commit is contained in:
=
2025-10-09 22:37:42 +05:30
parent 2da35b389d
commit 7b0a51f5cf
669 changed files with 2856 additions and 3143 deletions
@@ -39,7 +39,7 @@ export const CurrentPlanSection = () => {
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<h2 className="mb-8 flex-1 text-xl font-semibold text-white">Current usage</h2>
<h2 className="mb-8 flex-1 text-xl font-medium text-white">Current usage</h2>
<TableContainer className="mt-4">
<Table>
<THead>
@@ -19,16 +19,16 @@ export const ManagePlansModal = ({ popUp, handlePopUpToggle }: Props) => {
handlePopUpToggle("managePlan", isOpen);
}}
>
<ModalContent className="max-w-screen-lg" title="Infisical Cloud Plans">
<ModalContent className="max-w-(--breakpoint-lg)" title="Infisical Cloud Plans">
<Tab.Group>
<Tab.List className="max-w-screen-lg border-b-2 border-mineshaft-600">
<Tab.List className="max-w-(--breakpoint-lg) border-b-2 border-mineshaft-600">
<Tab as={Fragment}>
{({ selected }) => (
<button
type="button"
className={`p-4 ${
selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"
} w-30 font-semibold outline-none`}
} w-30 font-medium outline-hidden`}
>
Bill monthly
</button>
@@ -40,7 +40,7 @@ export const ManagePlansModal = ({ popUp, handlePopUpToggle }: Props) => {
type="button"
className={`p-4 ${
selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"
} w-30 font-semibold outline-none`}
} w-30 font-medium outline-hidden`}
>
Bill yearly
</button>
@@ -114,7 +114,7 @@ export const PreviewSection = () => {
<div className="flex-1">
<h2 className="text-xl font-medium text-mineshaft-100">
Unleash the full power of{" "}
<span className="bg-gradient-to-r from-primary-500 to-yellow bg-clip-text font-semibold text-transparent">
<span className="bg-linear-to-r from-primary-500 to-yellow bg-clip-text font-medium text-transparent">
Infisical
</span>
</h2>
@@ -137,8 +137,8 @@ export const PreviewSection = () => {
)}
</OrgPermissionCan>
</div>
<div className="mb-6 flex w-full max-w-[12rem] flex-col items-center rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
<div className="mb-4 flex w-full justify-center font-semibold text-mineshaft-200">
<div className="mb-6 flex w-full max-w-48 flex-col items-center rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
<div className="mb-4 flex w-full justify-center font-medium text-mineshaft-200">
Want to learn more?{" "}
</div>
<div className="flex w-full justify-center">
@@ -163,7 +163,7 @@ export const PreviewSection = () => {
<div className="mb-6 flex">
<div className="mr-4 flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<p className="mb-2 text-gray-400">Current plan</p>
<p className="mb-8 text-2xl font-semibold text-mineshaft-50">
<p className="mb-8 text-2xl font-medium text-mineshaft-50">
{`${formatPlanSlug(subscription.slug)} ${
subscription.status === "trialing" ? "(Trial)" : ""
}`}
@@ -192,7 +192,7 @@ export const PreviewSection = () => {
</div>
<div className="mr-4 flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<p className="mb-2 text-gray-400">Price</p>
<p className="mb-8 text-2xl font-semibold text-mineshaft-50">
<p className="mb-8 text-2xl font-medium text-mineshaft-50">
{subscription.status === "trialing"
? "$0.00 / month"
: `${formatAmount(data.amount)} / ${data.interval}`}
@@ -200,7 +200,7 @@ export const PreviewSection = () => {
</div>
<div className="flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<p className="mb-2 text-gray-400">Subscription renews on</p>
<p className="mb-8 text-2xl font-semibold text-mineshaft-50">
<p className="mb-8 text-2xl font-medium text-mineshaft-50">
{data.currentPeriodEnd ? formatDate(data.currentPeriodEnd) : "-"}
</p>
</div>
@@ -61,7 +61,7 @@ export const CompanyNameSection = () => {
onSubmit={handleSubmit(onFormSubmit)}
className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
>
<h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Business name</h2>
<h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">Business name</h2>
<div className="max-w-md">
<Controller
defaultValue=""
@@ -62,7 +62,7 @@ export const InvoiceEmailSection = () => {
onSubmit={handleSubmit(onFormSubmit)}
className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
>
<h2 className="mb-8 flex-1 text-xl font-semibold text-white">Invoice email recipient</h2>
<h2 className="mb-8 flex-1 text-xl font-medium text-white">Invoice email recipient</h2>
<div className="max-w-md">
<Controller
defaultValue=""
@@ -26,7 +26,7 @@ export const PmtMethodsSection = () => {
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-8 flex items-center">
<h2 className="flex-1 text-xl font-semibold text-white">Payment methods</h2>
<h2 className="flex-1 text-xl font-medium text-white">Payment methods</h2>
<OrgPermissionCan
I={OrgPermissionBillingActions.ManageBilling}
a={OrgPermissionSubjects.Billing}
@@ -17,7 +17,7 @@ export const TaxIDSection = () => {
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-8 flex items-center">
<h2 className="flex-1 text-xl font-semibold text-white">Tax ID</h2>
<h2 className="flex-1 text-xl font-medium text-white">Tax ID</h2>
<OrgPermissionCan
I={OrgPermissionBillingActions.ManageBilling}
a={OrgPermissionSubjects.Billing}
@@ -3,7 +3,7 @@ import { InvoicesTable } from "./InvoicesTable";
export const BillingReceiptsTab = () => {
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<h2 className="flex-1 text-xl font-semibold text-white">Invoices</h2>
<h2 className="flex-1 text-xl font-medium text-white">Invoices</h2>
<InvoicesTable />
</div>
);
@@ -20,7 +20,7 @@ export const LicensesSection = () => {
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<h2 className="mb-8 flex-1 text-xl font-semibold text-white">Enterprise licenses</h2>
<h2 className="mb-8 flex-1 text-xl font-medium text-white">Enterprise licenses</h2>
<TableContainer className="mt-4">
<Table>
<THead>