Fix: Format entire frontend properly

2026-10-16 19:28:35 +00:00 · 2024-03-18 16:00:03 +01:00
parent 1ede551c3e
commit 9002e6cb33
230 changed files with 2752 additions and 2941 deletions
@@ -1,20 +1,18 @@
 import { useTranslation } from "react-i18next";

-import {
-  BillingTabGroup
-} from "./components";
+import { BillingTabGroup } from "./components";

 export const BillingSettingsPage = () => {
-    const { t } = useTranslation();
-    return (
-      <div className="flex justify-center bg-bunker-800 text-white w-full h-full">
-        <div className="max-w-7xl px-6 w-full">
-          <div className="my-6">
-              <p className="text-3xl font-semibold text-gray-200">{t("billing.title")}</p>
-            <div />
-          </div>
-          <BillingTabGroup />
+  const { t } = useTranslation();
+  return (
+    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
+      <div className="w-full max-w-7xl px-6">
+        <div className="my-6">
+          <p className="text-3xl font-semibold text-gray-200">{t("billing.title")}</p>
+          <div />
        </div>
+        <BillingTabGroup />
      </div>
-    );
-};
+    </div>
+  );
+};
@@ -2,10 +2,10 @@ import { CurrentPlanSection } from "./CurrentPlanSection";
 import { PreviewSection } from "./PreviewSection";

 export const BillingCloudTab = () => {
-    return (
-        <div>
-            <PreviewSection />
-            <CurrentPlanSection />
-        </div>
-    );
-}
+  return (
+    <div>
+      <PreviewSection />
+      <CurrentPlanSection />
+    </div>
+  );
+};
@@ -1,10 +1,7 @@
-import { Fragment } from "react"
-import { Tab } from "@headlessui/react"
+import { Fragment } from "react";
+import { Tab } from "@headlessui/react";

-import { 
-    Modal,
-    ModalContent
-} from "@app/components/v2";
+import { Modal, ModalContent } from "@app/components/v2";
 import { UsePopUpState } from "@app/hooks/usePopUp";

 import { ManagePlansTable } from "./ManagePlansTable";
@@ -14,51 +11,52 @@ type Props = {
  handlePopUpToggle: (popUpName: keyof UsePopUpState<["managePlan"]>, state?: boolean) => void;
 };

-export const ManagePlansModal = ({
-    popUp,
-    handlePopUpToggle 
-}: Props) => {
-    return (
+export const ManagePlansModal = ({ popUp, handlePopUpToggle }: Props) => {
+  return (
    <Modal
-            isOpen={popUp?.managePlan?.isOpen}
-            onOpenChange={(isOpen) => {
-                handlePopUpToggle("managePlan", isOpen);
-            }}
-        >
-            <ModalContent className="max-w-screen-lg" title="Infisical Cloud Plans">
-                <Tab.Group>
-                    <Tab.List className="border-b-2 border-mineshaft-600 max-w-screen-lg">
-                        <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`}
-                                >
-                                    Bill monthly
-                                </button>
-                            )}
-                        </Tab>
-                        <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`}
-                                >
-                                    Bill yearly
-                                </button>
-                            )}
-                        </Tab>
-                    </Tab.List>
-                    <Tab.Panels className="mt-4">
-                        <Tab.Panel>
-                            <ManagePlansTable billingCycle="monthly" />
-                        </Tab.Panel>
-                        <Tab.Panel>
-                            <ManagePlansTable billingCycle="yearly" />
-                        </Tab.Panel>
-                    </Tab.Panels>
-                </Tab.Group>
-            </ModalContent>
-        </Modal>
-    );
-}
+      isOpen={popUp?.managePlan?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("managePlan", isOpen);
+      }}
+    >
+      <ModalContent className="max-w-screen-lg" title="Infisical Cloud Plans">
+        <Tab.Group>
+          <Tab.List className="max-w-screen-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`}
+                >
+                  Bill monthly
+                </button>
+              )}
+            </Tab>
+            <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`}
+                >
+                  Bill yearly
+                </button>
+              )}
+            </Tab>
+          </Tab.List>
+          <Tab.Panels className="mt-4">
+            <Tab.Panel>
+              <ManagePlansTable billingCycle="monthly" />
+            </Tab.Panel>
+            <Tab.Panel>
+              <ManagePlansTable billingCycle="yearly" />
+            </Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -1 +1 @@
-export { BillingCloudTab } from "./BillingCloudTab";
+export { BillingCloudTab } from "./BillingCloudTab";
@@ -4,12 +4,12 @@ import { PmtMethodsSection } from "./PmtMethodsSection";
 import { TaxIDSection } from "./TaxIDSection";

 export const BillingDetailsTab = () => {
-    return (
-        <>
-            <CompanyNameSection />
-            <InvoiceEmailSection />
-            <PmtMethodsSection />
-            <TaxIDSection />
-        </>
-    );
-}
+  return (
+    <>
+      <CompanyNameSection />
+      <InvoiceEmailSection />
+      <PmtMethodsSection />
+      <TaxIDSection />
+    </>
+  );
+};
@@ -15,9 +15,9 @@ export const TaxIDSection = () => {
  ] as const);

  return (
-    <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
-      <div className="flex items-center mb-8">
-        <h2 className="text-xl font-semibold flex-1 text-white">Tax ID</h2>
+    <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>
        <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Billing}>
          {(isAllowed) => (
            <Button
@@ -1 +1 @@
-export { BillingDetailsTab } from "./BillingDetailsTab";
+export { BillingDetailsTab } from "./BillingDetailsTab";
@@ -1,10 +1,10 @@
 import { InvoicesTable } from "./InvoicesTable";

 export const BillingReceiptsTab = () => {
-    return (
-        <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
-          <h2 className="text-xl font-semibold flex-1 text-white">Invoices</h2>
-          <InvoicesTable />
-        </div>
-    );
-}
+  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>
+      <InvoicesTable />
+    </div>
+  );
+};
@@ -1 +1 @@
-export { BillingReceiptsTab } from "./BillingReceiptsTab";
+export { BillingReceiptsTab } from "./BillingReceiptsTab";
@@ -1,9 +1,9 @@
 import { LicensesSection } from "./LicensesSection";

 export const BillingSelfHostedTab = () => {
-    return (
-        <div>
-            <LicensesSection />
-        </div>
-    );
-}
+  return (
+    <div>
+      <LicensesSection />
+    </div>
+  );
+};
@@ -1 +1 @@
-export * from "./BillingSelfHostedTab";
+export * from "./BillingSelfHostedTab";
@@ -26,7 +26,7 @@ export const BillingTabGroup = withPermission(
              {({ selected }) => (
                <button
                  type="button"
-                  className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${
+                  className={`w-30 mx-2 mr-4 py-2 text-sm font-medium outline-none ${
                    selected ? "border-b border-white text-white" : "text-mineshaft-400"
                  }`}
                >
@@ -1 +1 @@
-export { BillingTabGroup } from "./BillingTabGroup";
+export { BillingTabGroup } from "./BillingTabGroup";
@@ -1 +1 @@
-export { BillingTabGroup } from "./BillingTabGroup";
+export { BillingTabGroup } from "./BillingTabGroup";
@@ -1 +1 @@
-export { BillingSettingsPage } from "./BillingSettingsPage";
+export { BillingSettingsPage } from "./BillingSettingsPage";