mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-21 15:28:12 +00:00
fix: correct lint
This commit is contained in:
@@ -11,13 +11,13 @@ export const BillingPage = () => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="bg-bunker-800 h-full">
|
||||
<div className="h-full bg-bunker-800">
|
||||
<Helmet>
|
||||
<title>{t("common.head-title", { title: t("billing.title") })}</title>
|
||||
<link rel="icon" href="/infisical.ico" />
|
||||
<meta property="og:image" content="/images/message.png" />
|
||||
</Helmet>
|
||||
<div className="bg-bunker-800 flex h-full w-full justify-center text-white">
|
||||
<div className="flex h-full w-full justify-center bg-bunker-800 text-white">
|
||||
<div className="w-full max-w-7xl px-6">
|
||||
<PageHeader
|
||||
title={t("billing.title")}
|
||||
|
||||
+1
-1
@@ -38,7 +38,7 @@ export const CurrentPlanSection = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
|
||||
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
|
||||
<h2 className="mb-8 flex-1 text-xl font-medium text-white">Current usage</h2>
|
||||
<TableContainer className="mt-4">
|
||||
<Table>
|
||||
|
||||
+3
-3
@@ -21,14 +21,14 @@ export const ManagePlansModal = ({ popUp, handlePopUpToggle }: Props) => {
|
||||
>
|
||||
<ModalContent className="max-w-(--breakpoint-lg)" title="Infisical Cloud Plans">
|
||||
<Tab.Group>
|
||||
<Tab.List className="max-w-(--breakpoint-lg) border-mineshaft-600 border-b-2">
|
||||
<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 outline-hidden whitespace-nowrap font-medium`}
|
||||
} w-30 font-medium whitespace-nowrap 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 outline-hidden font-medium`}
|
||||
} w-30 font-medium outline-hidden`}
|
||||
>
|
||||
Bill yearly
|
||||
</button>
|
||||
|
||||
+11
-11
@@ -110,9 +110,9 @@ export const PreviewSection = () => {
|
||||
subscription?.slug !== "pro" &&
|
||||
subscription?.slug !== "pro-annual" && (
|
||||
<div className="flex flex-row space-x-6">
|
||||
<div className="border-primary/40 bg-primary/10 mb-6 flex flex-1 items-center rounded-lg border p-4">
|
||||
<div className="mb-6 flex flex-1 items-center rounded-lg border border-primary/40 bg-primary/10 p-4">
|
||||
<div className="flex-1">
|
||||
<h2 className="text-mineshaft-100 text-xl font-medium">
|
||||
<h2 className="text-xl font-medium text-mineshaft-100">
|
||||
Unleash the full power of{" "}
|
||||
<span className="bg-linear-to-r from-primary-500 to-yellow bg-clip-text font-medium text-transparent">
|
||||
Infisical
|
||||
@@ -137,8 +137,8 @@ export const PreviewSection = () => {
|
||||
)}
|
||||
</OrgPermissionCan>
|
||||
</div>
|
||||
<div className="border-mineshaft-600 bg-mineshaft-800 mb-6 flex w-full max-w-48 flex-col items-center rounded-lg border p-4">
|
||||
<div className="text-mineshaft-200 mb-4 flex w-full justify-center font-medium">
|
||||
<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">
|
||||
@@ -147,7 +147,7 @@ export const PreviewSection = () => {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span className="border-mineshaft-500 bg-mineshaft-600 hover:border-primary/40 hover:bg-primary/10 cursor-pointer rounded-full border px-4 py-2 duration-200">
|
||||
<span className="cursor-pointer rounded-full border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 duration-200 hover:border-primary/40 hover:bg-primary/10">
|
||||
Book a demo{" "}
|
||||
<FontAwesomeIcon
|
||||
icon={faArrowUpRightFromSquare}
|
||||
@@ -161,9 +161,9 @@ export const PreviewSection = () => {
|
||||
)}
|
||||
{!isPending && subscription && data && (
|
||||
<div className="mb-6 flex">
|
||||
<div className="border-mineshaft-600 bg-mineshaft-900 mr-4 flex-1 rounded-lg border p-4">
|
||||
<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="text-mineshaft-50 mb-8 text-2xl font-medium">
|
||||
<p className="mb-8 text-2xl font-medium text-mineshaft-50">
|
||||
{`${formatPlanSlug(subscription.slug)} ${
|
||||
subscription.status === "trialing" ? "(Trial)" : ""
|
||||
}`}
|
||||
@@ -190,17 +190,17 @@ export const PreviewSection = () => {
|
||||
</OrgPermissionCan>
|
||||
)}
|
||||
</div>
|
||||
<div className="border-mineshaft-600 bg-mineshaft-900 mr-4 flex-1 rounded-lg border p-4">
|
||||
<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="text-mineshaft-50 mb-8 text-2xl font-medium">
|
||||
<p className="mb-8 text-2xl font-medium text-mineshaft-50">
|
||||
{subscription.status === "trialing"
|
||||
? "$0.00 / month"
|
||||
: `${formatAmount(data.amount)} / ${data.interval}`}
|
||||
</p>
|
||||
</div>
|
||||
<div className="border-mineshaft-600 bg-mineshaft-900 flex-1 rounded-lg border p-4">
|
||||
<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="text-mineshaft-50 mb-8 text-2xl font-medium">
|
||||
<p className="mb-8 text-2xl font-medium text-mineshaft-50">
|
||||
{data.currentPeriodEnd ? formatDate(data.currentPeriodEnd) : "-"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
+2
-2
@@ -59,9 +59,9 @@ export const CompanyNameSection = () => {
|
||||
return (
|
||||
<form
|
||||
onSubmit={handleSubmit(onFormSubmit)}
|
||||
className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
|
||||
className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
|
||||
>
|
||||
<h2 className="text-mineshaft-100 mb-8 flex-1 text-xl font-medium">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
@@ -60,7 +60,7 @@ export const InvoiceEmailSection = () => {
|
||||
return (
|
||||
<form
|
||||
onSubmit={handleSubmit(onFormSubmit)}
|
||||
className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
|
||||
className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
|
||||
>
|
||||
<h2 className="mb-8 flex-1 text-xl font-medium text-white">Invoice email recipient</h2>
|
||||
<div className="max-w-md">
|
||||
|
||||
+1
-1
@@ -24,7 +24,7 @@ export const PmtMethodsSection = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
|
||||
<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-medium text-white">Payment methods</h2>
|
||||
<OrgPermissionCan
|
||||
|
||||
+1
-1
@@ -15,7 +15,7 @@ export const TaxIDSection = () => {
|
||||
] as const);
|
||||
|
||||
return (
|
||||
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
|
||||
<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-medium text-white">Tax ID</h2>
|
||||
<OrgPermissionCan
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@ import { InvoicesTable } from "./InvoicesTable";
|
||||
|
||||
export const BillingReceiptsTab = () => {
|
||||
return (
|
||||
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
|
||||
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
|
||||
<h2 className="flex-1 text-xl font-medium text-white">Invoices</h2>
|
||||
<InvoicesTable />
|
||||
</div>
|
||||
|
||||
+1
-1
@@ -19,7 +19,7 @@ export const LicensesSection = () => {
|
||||
const { data, isPending } = useGetOrgLicenses(currentOrg?.id ?? "");
|
||||
|
||||
return (
|
||||
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
|
||||
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
|
||||
<h2 className="mb-8 flex-1 text-xl font-medium text-white">Enterprise licenses</h2>
|
||||
<TableContainer className="mt-4">
|
||||
<Table>
|
||||
|
||||
Reference in New Issue
Block a user