Finish preliminary standardization of project settings page

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

@@ -4,29 +4,27 @@ import {
     decryptAssymmetric,
     encryptAssymmetric
 } from "@app/components/utilities/cryptography/crypto";
-import {
-    Checkbox
-} from "@app/components/v2";
+import { Checkbox } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
 
 import getBot from "../../../../../pages/api/bot/getBot";
 import setBotActiveStatus from "../../../../../pages/api/bot/setBotActiveStatus";
 import getLatestFileKey from "../../../../../pages/api/workspace/getLatestFileKey";
 
-type Props = {
-    workspaceId: string;
-}
-
-export const E2EESection = ({
-    workspaceId
-}: Props) => {
+export const E2EESection = () => {
+    const { currentWorkspace } = useWorkspace();
     const [bot, setBot] = useState<any>(null);
 
     useEffect(() => {
         (async () => {
-            // get project bot
-            setBot(await getBot({ workspaceId })); 
+            if (currentWorkspace) {
+                // get project bot
+                setBot(await getBot({ 
+                    workspaceId: currentWorkspace._id
+                })); 
+            }
         })();
-    }, []);
+    }, [currentWorkspace]);
 
     /**
    * Activate bot for project by performing the following steps:
@@ -38,12 +36,16 @@ export const E2EESection = ({
     const toggleBotActivate = async () => {
         let botKey;
         try {
+            if (!currentWorkspace?._id) return;
+
             if (bot) {
                 // case: there is a bot
                 
                 if (!bot.isActive) {
                     // bot is not active -> activate bot
-                    const key = await getLatestFileKey({ workspaceId });
+                    const key = await getLatestFileKey({ 
+                        workspaceId: currentWorkspace._id
+                    });
                     const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY");
 
                     if (!PRIVATE_KEY) {
@@ -91,12 +93,12 @@ export const E2EESection = ({
     };
 
     return bot ? (
-      <div className="mb-6 mt-4 flex w-full flex-col items-start rounded-md bg-mineshaft-900 px-6 pb-6 pt-2">
-        <p className="mb-4 mt-2 text-xl font-semibold">End-to-End Encryption</p>
-        <p className="text-md my-2 text-gray-400">
+      <div className="mb-6 p-4 bg-mineshaft-900 max-w-screen-lg 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.
         </p>
-        <p className="text-md my-2 mb-4 text-gray-400">
+        <p className="text-gray-400 mb-8">
             Note that, even with E2EE disabled, your secrets are always encrypted at rest.
         </p>
         <Checkbox