From 46dc357651afeb4bec614602938dc5b0b549b93c Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Tue, 11 Jul 2023 00:04:14 -0700
Subject: [PATCH] final changes to sidebars

---
 frontend/src/layouts/AppLayout/AppLayout.tsx  |   6 +-
 .../AppLayout/components/NavBar/NavBar.tsx    | 359 ------------------
 .../AppLayout/components/NavBar/index.tsx     |   1 -
 .../src/pages/org/[id]/overview/index.tsx     |  22 +-
 .../BillingCloudTab/CurrentPlanSection.tsx    |   2 +-
 .../BillingCloudTab/PreviewSection.tsx        |   2 +-
 .../BillingDetailsTab/CompanyNameSection.tsx  |   2 +-
 .../BillingDetailsTab/InvoiceEmailSection.tsx |   2 +-
 .../BillingDetailsTab/PmtMethodsSection.tsx   |   2 +-
 .../BillingDetailsTab/TaxIDSection.tsx        |   2 +-
 .../BillingReceiptsTab/BillingReceiptsTab.tsx |   2 +-
 .../BillingTabGroup/BillingTabGroup.tsx       |   2 +-
 12 files changed, 18 insertions(+), 386 deletions(-)
 delete mode 100644 frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx
 delete mode 100644 frontend/src/layouts/AppLayout/components/NavBar/index.tsx

diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx
index 05c1c1532..1f3d8cc9b 100644
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -155,9 +155,9 @@ export const AppLayout = ({ children }: LayoutProps) => {
       }
 
       if (currentOrg && (
-        (workspaces?.length === 0 && !router.asPath.includes("org") && !router.asPath.includes("personal") && !router.asPath.includes("integration")) 
+        (workspaces?.length === 0 && router.asPath.includes("project")) 
         || router.asPath.includes("/project/undefined")
-        || !orgs?.includes(router.query.id)
+        || (!orgs?.includes(router.query.id) && !router.asPath.includes("project") && !router.asPath.includes("integration"))
       )) {
         router.push(`/org/${currentOrg?._id}/overview`);
       } 
@@ -186,7 +186,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
     };
     putUserInOrg();
     onboardingCheck({});
-  }, [currentOrg]);
+  }, [router.query.id]);
 
   const onCreateProject = async ({ name, addMembers }: TAddProjectFormData) => {
     // type check
diff --git a/frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx b/frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx
deleted file mode 100644
index b263a25ff..000000000
--- a/frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx
+++ /dev/null
@@ -1,359 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-/* eslint-disable react/jsx-key */
-import { Fragment, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
-import { faCircleQuestion } from "@fortawesome/free-regular-svg-icons";
-import {
-  faAngleDown,
-  faBook,
-  faCoins,
-  faEnvelope,
-  faGear,
-  faPlus,
-  faRightFromBracket
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Menu, Transition } from "@headlessui/react";
-import {TFunction} from "i18next";
-
-import guidGenerator from "@app/components/utilities/randomId";
-import { useOrganization, useSubscription,useUser } from "@app/context";
-import { useLogoutUser } from "@app/hooks/api";
-
-const supportOptions = (t: TFunction) => [
-  [
-    <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faSlack} />,
-    t("nav.support.slack"),
-    "https://infisical.com/slack"
-  ],
-  [
-    <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faBook} />,
-    t("nav.support.docs"),
-    "https://infisical.com/docs/documentation/getting-started/introduction"
-  ],
-  [
-    <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faGithub} />,
-    t("nav.support.issue"),
-    "https://github.com/Infisical/infisical-cli/issues"
-  ],
-  [
-    <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faEnvelope} />,
-    t("nav.support.email"),
-    "mailto:support@infisical.com"
-  ]
-];
-
-export interface ICurrentOrg {
-  name: string;
-}
-
-export interface IUser {
-  firstName: string;
-  lastName: string;
-  email: string;
-}
-
-/**
- * This is the navigation bar in the main app.
- * It has two main components: support options and user menu (inlcudes billing, logout, org/user settings)
- * @returns NavBar
- */
-export const Navbar = () => {
-  const router = useRouter();
-  const { subscription } = useSubscription();
-
-  const { currentOrg, orgs } = useOrganization();
-  const { user } = useUser();
-
-  const logout = useLogoutUser();
-
-  const { t } = useTranslation();
-
-  // remove this memo
-  const supportOptionsList = useMemo(() => supportOptions(t), [t]);
-
-  const closeApp = async () => {
-    try {
-      console.log("Logging out...")
-      await logout.mutateAsync();
-      localStorage.removeItem("protectedKey");
-      localStorage.removeItem("protectedKeyIV");
-      localStorage.removeItem("protectedKeyTag");
-      localStorage.removeItem("publicKey");
-      localStorage.removeItem("encryptedPrivateKey");
-      localStorage.removeItem("iv");
-      localStorage.removeItem("tag");
-      localStorage.removeItem("PRIVATE_KEY");
-      localStorage.removeItem("orgData.id");
-      localStorage.removeItem("projectData.id");
-      router.push("/login");
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  function formatPlanSlug(slug: string) {
-    return slug
-      .replace(/(\b[a-z])/g, match => match.toUpperCase())
-      .replace(/-/g, " ");
-  }
-
-  const calculateRemainingDays = (date: number) => {
-    const now = new Date();
-    const endDate = new Date(date * 1000);
-    
-    const differenceInTime = endDate.getTime() - now.getTime();
-    const differenceInDays = Math.ceil(differenceInTime / (1000 * 3600 * 24));
-    
-    return differenceInDays;
-  }
-
-  const formatDate = (date: number) => {
-    const endDate = new Date(date * 1000);
-    const day: number = endDate.getDate();
-    const month: number = endDate.getMonth() + 1;
-    const year: number = endDate.getFullYear();
-    
-    const formattedDate: string = `${day}/${month}/${year}`;
-    const remainingDays: number = calculateRemainingDays(date);
-
-    return {
-      formattedDate,
-      remainingDays
-    };
-  }
-
-  return (
-    <div className="z-[70] border-b border-mineshaft-500 bg-mineshaft-900 text-white">
-      <div className="flex w-full justify-between px-4">
-      <div className="flex flex-row items-center">
-        <div className="flex justify-center py-4">
-          <Image src="/images/logotransparent.png" height={23} width={57} alt="logo" />
-        </div>
-        <a href="#" className="mx-2 text-2xl font-semibold text-white">
-          Infisical
-        </a>
-      </div>
-      <div className="relative z-40 mx-2 flex items-center justify-start">
-        <a
-          href="https://infisical.com/docs/documentation/getting-started/introduction"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="mr-4 flex items-center rounded-md px-3 py-2 text-sm text-gray-200 duration-200 hover:bg-white/10"
-        >
-          <FontAwesomeIcon icon={faBook} className="mr-2 text-xl" />
-          Docs
-        </a>
-        <Menu as="div" className="relative inline-block text-left">
-          <div className="mr-4">
-            <Menu.Button className="inline-flex w-full justify-center rounded-md px-2 py-2 text-sm font-medium text-gray-200 duration-200 hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
-              <FontAwesomeIcon className="text-xl" icon={faCircleQuestion} />
-            </Menu.Button>
-          </div>
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            <Menu.Items className="absolute right-0 z-20 mt-0.5 w-64 origin-top-right rounded-md border border-mineshaft-700 bg-bunker px-2 py-1.5 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-              {supportOptionsList.map(([icon, text, url]) => (
-                <a
-                  key={guidGenerator()}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  href={String(url)}
-                  className="flex w-full items-center rounded-md py-0.5 font-normal text-gray-300 duration-200"
-                >
-                  <div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md py-2 px-2 text-gray-400 duration-200 hover:bg-white/10 hover:text-gray-200">
-                    {icon}
-                    <div className="text-sm">{text}</div>
-                  </div>
-                </a>
-              ))}
-            </Menu.Items>
-          </Transition>
-        </Menu>
-        <Menu as="div" className="relative mr-4 inline-block text-left">
-          <div>
-            <Menu.Button className="inline-flex w-full justify-center rounded-md py-2 pr-2 pl-2 text-sm font-medium text-gray-200 duration-200 hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
-              {user?.firstName} {user?.lastName}
-              <FontAwesomeIcon
-                icon={faAngleDown}
-                className="ml-2 mt-1 text-sm text-gray-300 hover:text-lime-100"
-              />
-            </Menu.Button>
-          </div>
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-100"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
-          >
-            <Menu.Items className="absolute right-0 z-[125] mt-0.5 w-68 origin-top-right divide-y divide-mineshaft-700 drop-shadow-2xl rounded-md border border-mineshaft-700 bg-mineshaft-900 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-              <div className="px-1 py-1">
-                <div className="ml-2 mt-2 self-start text-xs font-semibold tracking-wide text-gray-400">
-                  {t("nav.user.signed-in-as")}
-                </div>
-                <div
-                  onKeyDown={() => null}
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => router.push(`/settings/personal/${router.query.id}`)}
-                  className="mx-1 my-1 flex cursor-pointer flex-row items-center rounded-md px-1 hover:bg-white/5"
-                >
-                  <div className="flex h-8 w-9 items-center justify-center rounded-full bg-white/10 text-gray-300">
-                    {user?.firstName?.charAt(0)}
-                  </div>
-                  <div className="flex w-full items-center justify-between">
-                    <div>
-                      <p className="px-2 pt-1 text-sm text-gray-300">
-                        {" "}
-                        {user?.firstName} {user?.lastName}
-                      </p>
-                      <p className="px-2 pb-1 text-xs text-gray-400">{user?.email}</p>
-                    </div>
-                    <FontAwesomeIcon
-                      icon={faGear}
-                      className="mr-1 cursor-pointer rounded-md p-2 text-lg text-gray-400 hover:bg-white/10"
-                    />
-                  </div>
-                </div>
-              </div>
-              <div className="px-2 pt-2">
-                <div className="ml-2 mt-2 self-start text-xs font-semibold tracking-wide text-gray-400">
-                  {t("nav.user.current-organization")}
-                </div>
-                <div
-                  onKeyDown={() => null}
-                  role="button"
-                  tabIndex={0}
-                  onClick={() => router.push(`/settings/org/${router.query.id}`)}
-                  className="mt-2 flex cursor-pointer flex-row items-center rounded-md px-2 py-1 hover:bg-white/5"
-                >
-                  <div className="flex h-7 w-8 items-center justify-center rounded-md bg-white/10 text-gray-300">
-                    {currentOrg?.name?.charAt(0)}
-                  </div>
-                  <div className="flex w-full items-center justify-between">
-                    <p className="px-2 text-sm text-gray-300">{currentOrg?.name}</p>
-                    <FontAwesomeIcon
-                      icon={faGear}
-                      className="cursor-pointer rounded-md p-2 text-lg text-gray-400 hover:bg-white/10"
-                    />
-                  </div>
-                </div>
-                {subscription && subscription.slug !== null && (
-                  <button
-                    // onClick={buttonAction}
-                    type="button"
-                    className="w-full cursor-pointer"
-                  >
-                    <div
-                      onKeyDown={() => null}
-                      role="button"
-                      tabIndex={0}
-                      onClick={() => router.push(`/settings/billing/${router.query.id}`)}
-                      className="relative mt-1 flex cursor-pointer select-none justify-start rounded-md py-2 px-2 text-gray-400 duration-200 hover:bg-white/5 hover:text-gray-200"
-                    >
-                      <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faCoins} />
-                      <div className="text-sm">{t("nav.user.usage-billing")}</div>
-                    </div>
-                  </button>
-                )}
-                <button
-                  type="button"
-                  // onClick={buttonAction}
-                  className="mb-2 w-full cursor-pointer"
-                >
-                  <div
-                    onKeyDown={() => null}
-                    role="button"
-                    tabIndex={0}
-                    onClick={() => router.push(`/settings/org/${router.query.id}?invite`)}
-                    className="relative mt-1 flex cursor-pointer select-none justify-start rounded-md py-2 pl-10 pr-4 text-gray-400 duration-200 hover:bg-primary/100 hover:font-semibold hover:text-black"
-                  >
-                    <span className="absolute inset-y-0 left-0 flex items-center rounded-lg pl-3 pr-4">
-                      <FontAwesomeIcon icon={faPlus} className="ml-1" />
-                    </span>
-                    <div className="ml-1 text-sm">{t("nav.user.invite")}</div>
-                  </div>
-                </button>
-              </div>
-              {orgs && orgs?.length > 1 && (
-                <div className="px-1 pt-1">
-                  <div className="ml-2 mt-2 self-start text-xs font-semibold tracking-wide text-gray-400">
-                    {t("nav.user.other-organizations")}
-                  </div>
-                  <div className="mt-3 mb-2 flex flex-col items-start px-1">
-                    {orgs
-                      ?.filter((org: { _id: string }) => org._id !== currentOrg?._id)
-                      .map((org: { _id: string; name: string }) => (
-                        <div
-                          onKeyDown={() => null}
-                          role="button"
-                          tabIndex={0}
-                          key={guidGenerator()}
-                          onClick={() => {
-                            localStorage.setItem("orgData.id", org._id);
-                            router.reload();
-                          }}
-                          className="flex w-full cursor-pointer flex-row items-center justify-start rounded-md p-1.5 hover:bg-white/5"
-                        >
-                          <div className="flex h-7 w-8 items-center justify-center rounded-md bg-white/10 text-gray-300">
-                            {org.name.charAt(0)}
-                          </div>
-                          <div className="flex w-full items-center justify-between">
-                            <p className="px-2 text-sm text-gray-300">{org.name}</p>
-                          </div>
-                        </div>
-                      ))}
-                  </div>
-                </div>
-              )}
-              <div className="px-1 py-1">
-                <Menu.Item>
-                  {({ active }) => (
-                    <button
-                      type="button"
-                      onClick={closeApp}
-                      className={`${
-                        active ? "bg-red font-semibold text-white" : "text-gray-400"
-                      } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
-                    >
-                      <div className="relative flex cursor-pointer select-none items-center justify-start">
-                        <FontAwesomeIcon
-                          className="ml-1.5 mr-3 text-lg"
-                          icon={faRightFromBracket}
-                        />
-                        {t("common.logout")}
-                      </div>
-                    </button>
-                  )}
-                </Menu.Item>
-              </div>
-            </Menu.Items>
-          </Transition>
-        </Menu>
-      </div>
-      </div>
-      {subscription && subscription.status === "trialing" && subscription.trial_end && (
-        <div className="w-full mx-auto border-t border-mineshaft-500">
-          <p className="text-center py-4 text-sm">
-            {`Currently trialing the ${formatPlanSlug(subscription.slug)} plan until ${formatDate(subscription.trial_end).formattedDate} - ${formatDate(subscription.trial_end).remainingDays} day(s) left. `}
-            <Link href={`/settings/billing/${localStorage.getItem("projectData.id")}`}>Add a card to avoid being downgraded to the Starter plan afterward &rarr;</Link>
-          </p>
-        </div>
-      )}
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/frontend/src/layouts/AppLayout/components/NavBar/index.tsx b/frontend/src/layouts/AppLayout/components/NavBar/index.tsx
deleted file mode 100644
index 29a826d1a..000000000
--- a/frontend/src/layouts/AppLayout/components/NavBar/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { Navbar } from "./NavBar";
diff --git a/frontend/src/pages/org/[id]/overview/index.tsx b/frontend/src/pages/org/[id]/overview/index.tsx
index d7512a168..cc086937c 100644
--- a/frontend/src/pages/org/[id]/overview/index.tsx
+++ b/frontend/src/pages/org/[id]/overview/index.tsx
@@ -289,7 +289,7 @@ export default function Organization() {
           </div>
         )}
       </div>
-      <div className="flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl mb-4">
+      {((new Date()).getTime() - (new Date(user?.createdAt)).getTime()) < 30 * 24 * 60 * 60 * 1000 && <div className="flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl mb-4">
         <p className="mr-4 font-semibold text-white mb-4">Onboarding Guide</p>
         {learningItem({
           text: "Watch a video about Infisical",
@@ -300,7 +300,7 @@ export default function Organization() {
           userAction: "intro_cta_clicked",
           link: "https://www.youtube.com/watch?v=PK23097-25I"
         })}
-        {learningItem({
+        {workspaces.length !== 0 && learningItem({
           text: "Add your secrets",
           subText: "Click to see example secrets, and add your own.",
           complete: hasUserPushedSecrets,
@@ -309,7 +309,7 @@ export default function Organization() {
           userAction: "first_time_secrets_pushed",
           link: `/project/${workspaces[0]?._id}/secrets`
         })}
-        <div className="group text-mineshaft-100 relative mb-3 flex h-full w-full cursor-default flex-col items-center justify-between overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-800 pl-2 pr-2 pt-4 pb-2 shadow-xl duration-200">
+        {workspaces.length !== 0 && <div className="group text-mineshaft-100 relative mb-3 flex h-full w-full cursor-default flex-col items-center justify-between overflow-hidden rounded-md border border-mineshaft-600 bg-mineshaft-800 pl-2 pr-2 pt-4 pb-2 shadow-xl duration-200">
           <div className="mb-4 flex w-full flex-row items-center pr-4">
             <div className="mr-4 flex w-full flex-row items-center">
               <FontAwesomeIcon icon={faNetworkWired} className="mx-2 w-16 text-4xl" />
@@ -331,8 +331,8 @@ export default function Organization() {
           </div>
           <TabsObject />
           {false && <div className="absolute bottom-0 left-0 h-1 w-full bg-green" />}
-        </div>
-        {learningItem({
+        </div>}
+        {workspaces.length !== 0 && learningItem({
           text: "Integrate Infisical with your infrastructure",
           subText: "Connect Infisical to various 3rd party services and platforms.",
           complete: false,
@@ -346,7 +346,7 @@ export default function Organization() {
           complete: usersInOrg,
           icon: faUserPlus,
           time: "2 min",
-          link: `/settings/org/${router.query.id}?invite`
+          link: `/org/${router.query.id}/members?action=invite`
         })}
         {learningItem({
           text: "Join Infisical Slack",
@@ -357,15 +357,7 @@ export default function Organization() {
           userAction: "slack_cta_clicked",
           link: "https://join.slack.com/t/infisical-users/shared_invite/zt-1ye0tm8ab-899qZ6ZbpfESuo6TEikyOQ"
         })}
-        {/* <div className="mt-4 w-full grid grid-flow-dense gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(256px, 4fr))" }}>
-          {workspaces.map(workspace => <div key={workspace._id} className="h-40 w-72 rounded-md bg-mineshaft-800 border border-mineshaft-600 p-4 flex flex-col justify-between">
-            <div className="text-lg text-mineshaft-100 mt-0">{workspace.name}</div>
-            <Link href="/dashbaord">
-              <div className="group cursor-default hover:bg-primary-800/20 text-sm text-mineshaft-300 hover:text-mineshaft-200 bg-mineshaft-900 py-2 px-4 rounded-full w-max border border-mineshaft-600 hover:border-primary-500/80">Explore <FontAwesomeIcon icon={faArrowRight} className="pl-1.5 pr-0.5 group-hover:pl-2 group-hover:pr-0 duration-200" /></div>
-            </Link>
-          </div>)}
-        </div> */}
-      </div>
+      </div>}
       <div className="flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl mb-4 pb-6">
         <p className="mr-4 font-semibold text-white">Explore More</p>
         <div className="mt-4 w-full grid grid-flow-dense gap-4" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(256px, 4fr))" }}>
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/CurrentPlanSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/CurrentPlanSection.tsx
index d5255043b..3caad28c5 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/CurrentPlanSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/CurrentPlanSection.tsx
@@ -43,7 +43,7 @@ export const CurrentPlanSection = () => {
     }
 
     return (
-        <div className="p-4 bg-mineshaft-900 mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600">
+        <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 mb-8">Current Usage</h2>
             <TableContainer className="mt-4">
                 <Table>
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
index 23a4be24d..e1a39ca06 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingCloudTab/PreviewSection.tsx
@@ -45,7 +45,7 @@ export const PreviewSection = () => {
     return (
         <div>
             {!isSubscriptionLoading && subscription?.slug !== "enterprise" && subscription?.slug !== "pro" && subscription?.slug !== "pro-annual" && (
-                <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600 mb-6 flex items-center bg-mineshaft-600 max-w-screen-lg">
+                <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600 mb-6 flex items-center bg-mineshaft-600">
                     <div className="flex-1">
                         <h2 className="text-xl font-semibold text-mineshaft-50">Become Infisical</h2>
                         <p className="text-gray-400 mt-4">Unlimited members, projects, RBAC, smart alerts, and so much more</p>
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx
index 61204eb3b..e763691d5 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/CompanyNameSection.tsx
@@ -63,7 +63,7 @@ export const CompanyNameSection = () => {
     return (
         <form 
             onSubmit={handleSubmit(onFormSubmit)}
-            className="p-4 bg-mineshaft-900 mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600"
+            className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
         >
             <h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">
                 Business name
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/InvoiceEmailSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/InvoiceEmailSection.tsx
index 2e9ba649a..441cb9cb4 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/InvoiceEmailSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/InvoiceEmailSection.tsx
@@ -64,7 +64,7 @@ export const InvoiceEmailSection = () => {
     return (
         <form 
             onSubmit={handleSubmit(onFormSubmit)}
-            className="p-4 bg-mineshaft-900 mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600"
+            className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
         >
             <h2 className="text-xl font-semibold flex-1 text-white mb-8">
                 Invoice email recipient
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx
index 30af879e3..7f566c5f3 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/PmtMethodsSection.tsx
@@ -26,7 +26,7 @@ export const PmtMethodsSection = () => {
     }
     
     return (
-        <div className="p-4 bg-mineshaft-900 mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600">
+        <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">
                     Payment Methods
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx
index b918205e6..198e02f62 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingDetailsTab/TaxIDSection.tsx
@@ -14,7 +14,7 @@ export const TaxIDSection = () => {
     ] as const);
 
     return (
-        <div className="p-4 bg-mineshaft-900 mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600">
+        <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
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx
index 574435afc..e6b75a0cb 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingReceiptsTab/BillingReceiptsTab.tsx
@@ -2,7 +2,7 @@ import { InvoicesTable } from "./InvoicesTable";
 
 export const BillingReceiptsTab = () => {
     return (
-        <div className="p-4 bg-mineshaft-900 mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600">
+        <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>
diff --git a/frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/BillingTabGroup.tsx b/frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/BillingTabGroup.tsx
index a87b0de79..417f06165 100644
--- a/frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/BillingTabGroup.tsx
+++ b/frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/BillingTabGroup.tsx
@@ -14,7 +14,7 @@ const tabs = [
 export const BillingTabGroup = () => {
     return (
         <Tab.Group>
-            <Tab.List className="mt-8 mb-6 border-b-2 border-mineshaft-800 max-w-screen-lg">
+            <Tab.List className="mt-8 mb-6 border-b-2 border-mineshaft-800">
                 {tabs.map((tab) => (
                     <Tab as={Fragment} key={tab.key}> 
                         {({ selected }) => (