style: implement new navigation

frontend/src/pages/secret-scanning/SecretScanningDataSourceByIdPage/SecretScanningDataSourceByIdPage.tsx

@@ -55,8 +55,8 @@ const PageContent = () => {
   }
 
   return (
-    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 font-inter text-white">
-      <div className="mx-auto mb-6 w-full max-w-7xl">
+    <div className="mx-auto flex flex-col justify-between bg-bunker-800 font-inter text-white">
+      <div className="mx-auto mb-6 w-full max-w-8xl">
         <Button
           variant="link"
           type="submit"

frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/SecretScanningDataSourcesPage.tsx

@@ -23,8 +23,8 @@ export const SecretScanningDataSourcesPage = () => {
         a={ProjectPermissionSub.SecretScanningDataSources}
       >
         <div className="h-full bg-bunker-800">
-          <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
-            <div className="mx-auto mb-6 w-full max-w-7xl">
+          <div className="mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+            <div className="mx-auto mb-6 w-full max-w-8xl">
               <PageHeader
                 scope="project"
                 title="Data Sources"

frontend/src/pages/secret-scanning/SecretScanningFindingsPage/SecretScanningFindingsPage.tsx

@@ -21,8 +21,8 @@ export const SecretScanningFindingsPage = () => {
         a={ProjectPermissionSub.SecretScanningFindings}
       >
         <div className="h-full bg-bunker-800">
-          <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
-            <div className="mx-auto mb-6 w-full max-w-7xl">
+          <div className="mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+            <div className="mx-auto mb-6 w-full max-w-8xl">
               <PageHeader
                 scope="project"
                 title="Findings"

frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx

@@ -17,16 +17,20 @@ export const SettingsPage = () => {
       <Helmet>
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
       </Helmet>
-      <div className="w-full max-w-7xl">
+      <div className="w-full max-w-8xl">
         <PageHeader
           scope="project"
           title="Settings"
           description="Configure your Secret Scanning product's configurations."
         />
-        <Tabs defaultValue="tab-project-general">
+        <Tabs orientation="vertical" defaultValue="tab-project-general">
           <TabList>
-            <Tab value="tab-project-general">General</Tab>
-            <Tab value="tab-project-secret-scanning">Scanning Settings</Tab>
+            <Tab variant="project" value="tab-project-general">
+              General
+            </Tab>
+            <Tab variant="project" value="tab-project-secret-scanning">
+              Scanning Settings
+            </Tab>
           </TabList>
           <TabPanel value="tab-project-general">
             <ProjectGeneralTab />