second iteration of the new sidebar

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"