mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-21 05:00:56 +00:00
feat: upgraded to tw v4
This commit is contained in:
+1
-1
@@ -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>
|
||||
|
||||
+4
-4
@@ -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>
|
||||
|
||||
+6
-6
@@ -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>
|
||||
|
||||
+1
-1
@@ -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=""
|
||||
|
||||
+1
-1
@@ -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=""
|
||||
|
||||
+1
-1
@@ -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}
|
||||
|
||||
+1
-1
@@ -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}
|
||||
|
||||
+1
-1
@@ -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>
|
||||
);
|
||||
|
||||
+1
-1
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user