second iteration of the new sidebar

frontend/src/views/Settings/BillingSettingsPage/BillingSettingsPage.tsx

@@ -1,7 +1,5 @@
 import { useTranslation } from "react-i18next";
 
-import NavHeader from "@app/components/navigation/NavHeader";
-
 import {
   BillingTabGroup
 } from "./components";
@@ -10,9 +8,8 @@ export const BillingSettingsPage = () => {
     const { t } = useTranslation();
     return (
       <div className="flex justify-center bg-bunker-800 text-white w-full h-full px-6">
-        <div className="max-w-screen-lg w-full">
-          <NavHeader pageName={t("billing.title")} />
-          <div className="my-8">
+        <div className="max-w-7xl w-full">
+          <div className="my-6">
               <p className="text-3xl font-semibold text-gray-200">{t("billing.title")}</p>
             <div />
           </div>

frontend/src/views/Settings/BillingSettingsPage/components/BillingTabGroup/BillingTabGroup.tsx

@@ -20,7 +20,7 @@ export const BillingTabGroup = () => {
                         {({ selected }) => (
                             <button 
                                 type="button"
-                                className={`w-30 p-4 font-semibold outline-none ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"}`}
+                                className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${selected ? "border-b border-white text-white" : "text-mineshaft-400"}`}
                             >
                                 {tab.name}
                             </button>

frontend/src/views/Settings/OrgSettingsPage/OrgSettingsPage.tsx

@@ -1,10 +1,7 @@
 import { useTranslation } from "react-i18next";
 
-import NavHeader from "@app/components/navigation/NavHeader";
-
 import {
   OrgIncidentContactsSection,
-  OrgMembersSection,
   OrgNameChangeSection,
   OrgServiceAccountsTable
 } from "./components";
@@ -13,53 +10,16 @@ export const OrgSettingsPage = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="flex justify-center bg-bunker-800 text-white w-full h-full px-6">
-		<div className="max-w-screen-lg w-full">
-      <NavHeader pageName={t("settings.org.title")} />
-      <div className="my-8">
-        <p className="text-3xl font-semibold text-gray-200">{t("settings.org.title")}</p>
-      </div>
-        <OrgNameChangeSection />
-        <OrgMembersSection />
-        <OrgIncidentContactsSection />
-        <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
-          <OrgServiceAccountsTable />
-        </div>
-        {/* <div className="border-l border-red pb-4 pl-6 flex flex-col items-start flex flex-col items-start w-full mb-6 mt-4 pt-2 max-w-6xl">
-			<p className="text-xl font-bold text-red">
-				Danger Zone
-			</p>
-			<p className="mt-4 text-md text-gray-400">
-				As soon as you delete an organization, you will
-				not be able to undo it. This will immediately
-				remove all organization members and cancel your
-				subscription. If you still want to do that,
-				please enter the name of the organization below.
-			</p>
-			<div className="max-h-28 w-full max-w-xl mr-auto mt-8 max-w-xl">
-				<InputField
-					label="Organization to be Deleted"
-					onChangeHandler={
-						setWorkspaceToBeDeletedName
-					}
-					type="varName"
-					value={workspaceToBeDeletedName}
-					placeholder=""
-					isRequired
-				/>
+    <div className="flex justify-center bg-bunker-800 text-white w-full py-6">
+		<div className="max-w-7xl w-full px-6">
+			<div className="mb-4">
+				<p className="text-3xl font-semibold text-gray-200">{t("settings.org.title")}</p>
+			</div>
+			<OrgNameChangeSection />
+			<OrgIncidentContactsSection />
+			<div className="p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+				<OrgServiceAccountsTable />
 			</div>
-			<button
-				type="button"
-				className="mt-6 w-full max-w-xl inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2.5 text-sm font-medium text-gray-400 hover:bg-red hover:text-white hover:font-bold hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-				onClick={executeDeletingWorkspace}
-			>
-				Delete Project
-			</button>
-			<p className="mt-0.5 ml-1 text-xs text-gray-500">
-				Note: You can only delete a project in case you
-				have more than one.
-			</p>
-		</div> */}
 		</div>
     </div>
   );

frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/OrgIncidentContactsSection.tsx

@@ -17,8 +17,8 @@ export const OrgIncidentContactsSection = () => {
     ] as const);
 
     return (
-        <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
-            <div className="flex justify-between mb-8">
+        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+            <div className="flex justify-between mb-4">
                 <p className="min-w-max text-xl font-semibold">
                     {t("section.incident.incident-contacts")}
                 </p>

frontend/src/views/Settings/OrgSettingsPage/components/OrgMembersSection/OrgMembersSection.tsx

@@ -21,8 +21,8 @@ export const OrgMembersSection = () => {
     const isMoreMembersAllowed = subscription?.memberLimit ? (subscription.membersUsed < subscription.memberLimit) : true;
 
     return (
-        <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
-            <div className="flex justify-between mb-8">
+        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
+            <div className="flex justify-between mb-4">
                 <p className="text-xl font-semibold text-mineshaft-100">
                     Organization members
                 </p>

frontend/src/views/Settings/OrgSettingsPage/components/OrgNameChangeSection/OrgNameChangeSection.tsx

@@ -52,9 +52,9 @@ export const OrgNameChangeSection = (): JSX.Element => {
   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"
     >
-        <p className="text-xl font-semibold text-mineshaft-100 mb-8">
+        <p className="text-xl font-semibold text-mineshaft-100 mb-4">
           Organization name
         </p>
         <div className="mb-2 max-w-md">
@@ -71,8 +71,8 @@ export const OrgNameChangeSection = (): JSX.Element => {
         </div>
         <Button
           isLoading={isLoading}
-          color="primary"
-          colorSchema="secondary"
+          colorSchema="primary"
+          variant="outline_bg"
           type="submit"
         >
           Save

frontend/src/views/Settings/OrgSettingsPage/components/OrgServiceAccountsTable/OrgServiceAccountsTable.tsx

@@ -277,7 +277,7 @@ export const OrgServiceAccountsTable = () => {
     
     return (
         <div className="w-full">
-            <div className="flex justify-between mb-8">
+            <div className="flex justify-between mb-4">
                 <p className="text-xl font-semibold text-mineshaft-100">Service Accounts</p>
                 <Button
                     colorSchema="secondary"

frontend/src/views/Settings/PersonalSettingsPage/APIKeySection/APIKeySection.tsx

@@ -15,7 +15,7 @@ export const APIKeySection = () => {
     ] as const);
 
     return (
-        <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
+        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
             <div className="flex justify-between mb-8">
                 <p className="text-xl font-semibold text-mineshaft-100">
                     {t("settings.personal.api-keys.title")}

frontend/src/views/Settings/PersonalSettingsPage/ChangePasswordSection/ChangePasswordSection.tsx

@@ -90,7 +90,7 @@ export const ChangePasswordSection = () => {
     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">
                 Change password

frontend/src/views/Settings/PersonalSettingsPage/EmergencyKitSection/EmergencyKitSection.tsx

@@ -54,7 +54,7 @@ export const EmergencyKitSection = () => {
     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">
                 Emergency Kit

frontend/src/views/Settings/PersonalSettingsPage/PersonalSettingsPage.tsx

@@ -1,16 +1,13 @@
 import { useTranslation } from "react-i18next";
 
-import NavHeader from "@app/components/navigation/NavHeader";
-
 import { PersonalTabGroup } from "./PersonalTabGroup";
 
 export const PersonalSettingsPage = () => {
     const { t } = useTranslation();
     return (
-        <div className="flex justify-center bg-bunker-800 text-white w-full h-full px-6">
-            <div className="max-w-screen-lg w-full">
-                <NavHeader pageName={t("settings.personal.title")} isProjectRelated={false} />
-                <div className="my-8">
+        <div className="flex justify-center bg-bunker-800 text-white w-full px-6">
+            <div className="max-w-6xl w-full">
+                <div className="mt-6 mb-6">
                     <p className="text-3xl font-semibold text-gray-200">
                         {t("settings.personal.title")}
                     </p>

frontend/src/views/Settings/PersonalSettingsPage/PersonalTabGroup/PersonalTabGroup.tsx

@@ -18,7 +18,7 @@ export const PersonalTabGroup = () => {
                         {({ selected }) => (
                             <button 
                                 type="button"
-                                className={`w-30 p-4 font-semibold outline-none ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"}`}
+                                className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${selected ? "border-b border-white text-white" : "text-mineshaft-400"}`}
                             >
                                 {tab.name}
                             </button>

frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/SecuritySection.tsx

@@ -51,7 +51,7 @@ export const SecuritySection = () => {
   return (
     <>
     <form>
-      <div className="p-4 mb-6 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
+      <div className="p-4 mb-6 bg-mineshaft-900 max-w-6xl rounded-lg border border-mineshaft-600">
         <p className="text-xl font-semibold text-mineshaft-100 mb-8">
           Two-factor Authentication
         </p>

frontend/src/views/Settings/PersonalSettingsPage/SessionsSection/SessionsSection.tsx

@@ -21,7 +21,7 @@ export const SessionsSection = () => {
     }
     
     return (
-        <div className="p-4 mb-6 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
+        <div className="p-4 mb-6 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
             <div className="flex justify-between mb-8">
                 <h2 className="text-xl font-semibold flex-1 text-mineshaft-100">
                     Sessions

frontend/src/views/Settings/ProjectSettingsPage/ProjectSettingsPage.tsx

@@ -1,18 +1,13 @@
 import { useTranslation } from "react-i18next";
 
-import NavHeader from "@app/components/navigation/NavHeader";
-
 import { ProjectTabGroup } from "./components";
 
 export const ProjectSettingsPage = () => {
   const { t } = useTranslation();
   return (
-    <div className="flex justify-center bg-bunker-800 text-white w-full h-full px-6">
-      <div className="max-w-screen-lg w-full">
-        <div className="relative right-5 ml-4">
-          <NavHeader pageName={t("settings.project.title")} isProjectRelated />
-        </div>
-        <div className="my-8">
+    <div className="flex justify-center bg-bunker-800 text-white w-full">
+      <div className="max-w-7xl w-full px-6">
+        <div className="mt-6 mb-6">
             <p className="text-3xl font-semibold text-gray-200">
               {t("settings.project.title")}
             </p>

frontend/src/views/Settings/ProjectSettingsPage/components/AutoCapitalizationSection/AutoCapitalizationSection.tsx

@@ -35,7 +35,7 @@ export const AutoCapitalizationSection = () => {
   }
 
   return (
-    <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
+    <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
       <p className="mb-3 text-xl font-semibold">{t("settings.project.auto-capitalization")}</p>
       <Checkbox
         className="data-[state=checked]:bg-primary"

frontend/src/views/Settings/ProjectSettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { Button, FormControl, Input } from "@app/components/v2";
-import { useWorkspace } from "@app/context";
+import { useOrganization, useWorkspace } from "@app/context";
 import { useToggle } from "@app/hooks";
 import {
     useDeleteWorkspace
@@ -14,7 +14,8 @@ export const DeleteProjectSection = () => {
     const { t } = useTranslation();
     const router = useRouter();
     const { createNotification } = useNotificationContext();
-    const { currentWorkspace, workspaces } = useWorkspace();
+    const { currentWorkspace } = useWorkspace();
+    const { currentOrg } = useOrganization()
     const [isDeleting, setIsDeleting] = useToggle();
     const [deleteProjectInput, setDeleteProjectInput] = useState("");
     const deleteWorkspace = useDeleteWorkspace();
@@ -26,12 +27,9 @@ export const DeleteProjectSection = () => {
       await deleteWorkspace.mutateAsync({ 
         workspaceID: currentWorkspace?._id
     });
-      // redirect user to first workspace user is part of
-      const ws = workspaces.find(({ _id }) => _id !== currentWorkspace?._id);
-      if (!ws) {
-        router.push("/noprojects");
-      }
-      router.push(`/dashboard/${ws?._id}`);
+      // redirect user to the org overview
+      router.push(`/org/${currentOrg?._id}/overview`);
+
       createNotification({
         text: "Successfully deleted workspace",
         type: "success"
@@ -48,7 +46,7 @@ export const DeleteProjectSection = () => {
   };
 
     return (
-        <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-red">
+        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-red">
           <p className="mb-3 text-xl font-semibold text-red">{t("settings.project.danger-zone")}</p>
           <p className="text-gray-400 mb-8">{t("settings.project.danger-zone-note")}</p>
           <div className="mr-auto mt-4 max-h-28 w-full max-w-md">

frontend/src/views/Settings/ProjectSettingsPage/components/E2EESection/E2EESection.tsx

@@ -93,7 +93,7 @@ export const E2EESection = () => {
     };
 
     return bot ? (
-      <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
+      <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
         <p className="mb-3 text-xl font-semibold">End-to-End Encryption</p>
         <p className="text-gray-400 mb-8">
             Disabling, end-to-end encryption (E2EE) unlocks capabilities like native integrations to cloud providers as well as HTTP calls to get secrets back raw but enables the server to read/decrypt your secret values.

frontend/src/views/Settings/ProjectSettingsPage/components/EnvironmentSection/EnvironmentSection.tsx

@@ -58,7 +58,7 @@ export const EnvironmentSection = () => {
   };
 
   return (
-    <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
+    <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
       <div className="flex justify-between mb-8">
         <p className="text-xl font-semibold text-mineshaft-100">
           Environments

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectIndexSecretsSection/ProjectIndexSecretsSection.tsx

@@ -54,7 +54,7 @@ export const ProjectIndexSecretsSection = () => {
   };
 
     return (!isBlindIndexedLoading && !isBlindIndexed) ? (
-        <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
+        <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
             <p className="mb-3 text-xl font-semibold">Blind Indices</p>
             <p className="text-gray-400 mb-8">
                 Your project, created before the introduction of blind indexing, contains unindexed secrets. To access individual secrets by name through the SDK and public API, please enable blind indexing.

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectNameChangeSection/ProjectNameChangeSection.tsx

@@ -64,7 +64,7 @@ export const ProjectNameChangeSection = () => {
   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">
         {t("common.display-name")}      

frontend/src/views/Settings/ProjectSettingsPage/components/ProjectTabGroup/ProjectTabGroup.tsx

@@ -18,7 +18,7 @@ export const ProjectTabGroup = () => {
                         {({ selected }) => (
                             <button 
                                 type="button"
-                                className={`w-30 p-4 font-semibold outline-none ${selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"}`}
+                                className={`w-30 py-2 mx-2 mr-4 font-medium text-sm outline-none ${selected ? "border-b border-white text-white" : "text-mineshaft-400"}`}
                             >
                                 {tab.name}
                             </button>

frontend/src/views/Settings/ProjectSettingsPage/components/SecretTagsSection/SecretTagsSection.tsx

@@ -45,7 +45,7 @@ export const SecretTagsSection = (): JSX.Element => {
   };
 
   return (
-    <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg rounded-lg border border-mineshaft-600">
+    <div className="mb-6 p-4 bg-mineshaft-900 rounded-lg border border-mineshaft-600">
       <div className="flex justify-between mb-8">
         <p className="mb-3 text-xl font-semibold">Secret Tags</p>
         <Button 

frontend/src/views/Settings/ProjectSettingsPage/components/ServiceTokenSection/ServiceTokenSection.tsx

@@ -43,7 +43,7 @@ export const ServiceTokenSection = () => {
   };
 
   return (
-    <div className="mb-6 max-w-screen-lg rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
       <div className="mb-2 flex justify-between">
         <p className="text-xl font-semibold text-mineshaft-100">
           {t("section.token.service-tokens")}