Bug/typo/style fixes and some minor improvements

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -38,7 +38,7 @@ import {
   Select,
   SelectItem
 } from '@app/components/v2';
-import { useOrgnization, useUser, useWorkspace } from '@app/context';
+import { useOrganization, useUser, useWorkspace } from '@app/context';
 import { usePopUp } from '@app/hooks';
 import { fetchOrgUsers, useAddUserToWs, useCreateWorkspace, useUploadWsKey } from '@app/hooks/api';
 import getOrganizations from '@app/pages/api/organization/getOrgs';
@@ -61,8 +61,10 @@ export const AppLayout = ({ children }: LayoutProps) => {
   const router = useRouter();
   const { createNotification } = useNotificationContext();
 
-  const { workspaces, currentWorkspace } = useWorkspace();
-  const { currentOrg } = useOrgnization();
+  // eslint-disable-next-line prefer-const
+  let { workspaces, currentWorkspace } = useWorkspace();
+  const { currentOrg } = useOrganization();
+  workspaces = workspaces.filter(ws => ws.organization === currentOrg?._id)
   const { user } = useUser();
 
   const createWs = useCreateWorkspace();
@@ -210,35 +212,35 @@ export const AppLayout = ({ children }: LayoutProps) => {
 
   return (
     <>
-      <div className="hidden h-screen w-full flex-col overflow-x-hidden md:flex">
+      <div className="hidden h-screen w-full flex-col overflow-x-hidden md:flex dark">
         <Navbar />
         <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
-          <aside className="w-full border-r border-mineshaft-500 bg-mineshaft-800 md:w-60">
+          <aside className="w-full border-r border-mineshaft-500 bg-mineshaft-900 md:w-60">
             <nav className="items-between flex h-full flex-col justify-between">
               <div>
-                <div className="w-full p-4">
-                  <p className="mb-2 text-sm font-medium uppercase text-gray-400">Projects</p>
+                <div className="w-full p-4 mt-3 mb-4">
+                  <p className="text-xs font-semibold ml-1.5 mb-1 uppercase text-gray-400">Project</p>
                   <Select
                     defaultValue={currentWorkspace?._id}
                     value={currentWorkspace?._id}
-                    className="w-full"
+                    className="w-full py-2.5 bg-mineshaft-600 font-medium"
                     onValueChange={(value) => {
                       router.push(`/dashboard/${value}`);
                     }}
                     position="popper"
-                    dropdownContainerClassName="left-0"
+                    dropdownContainerClassName="left-0 text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 z-50"
                   >
                     {workspaces.map(({ _id, name }) => (
-                      <SelectItem key={`ws-layout-list-${_id}`} value={_id}>
+                      <SelectItem key={`ws-layout-list-${_id}`} value={_id} className={`${currentWorkspace?._id === _id && "bg-mineshaft-600"}`}>
                         {name}
                       </SelectItem>
                     ))}
-                    <hr className="my-4 h-px border-0 bg-gray-700" />
-                    <div className="w-full px-2 pb-2">
+                    <hr className="mt-1 mb-1 h-px border-0 bg-gray-700" />
+                    <div className="w-full">
                       <Button
-                        className="w-full py-2"
+                        className="w-full py-2 text-bunker-200 bg-mineshaft-500 hover:bg-primary/90 hover:text-black"
                         color="mineshaft"
-                        size="xs"
+                        size="sm"
                         onClick={() => handlePopUpOpen('addNewWs')}
                         leftIcon={<FontAwesomeIcon icon={faPlus} />}
                       >
@@ -361,7 +363,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
           >
             <ModalContent
               title="Create a new project"
-              subTitle="This project will contain your environment variables"
+              subTitle="This project will contain your secrets and configurations."
             >
               <form onSubmit={handleSubmit(onCreateProject)}>
                 <Controller
@@ -378,7 +380,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                     </FormControl>
                   )}
                 />
-                <div>
+                <div className='pl-1 mt-4'>
                   <Controller
                     control={control}
                     name="addMembers"
@@ -395,7 +397,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                     )}
                   />
                 </div>
-                <div className="mt-8 flex items-center">
+                <div className="mt-7 flex items-center">
                   <Button
                     isDisabled={isSubmitting}
                     isLoading={isSubmitting}
@@ -405,14 +407,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
                   >
                     Create Project
                   </Button>
-                  <Button
-                    key="layout-cancel-create-project"
-                    onClick={() => handlePopUpClose('addNewWs')}
-                    variant="plain"
-                    colorSchema="secondary"
-                  >
-                    Cancel
-                  </Button>
                 </div>
               </form>
             </ModalContent>

frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx

@@ -19,7 +19,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Menu, Transition } from '@headlessui/react';
 
 import guidGenerator from '@app/components/utilities/randomId';
-import { useOrgnization, useUser } from '@app/context';
+import { useOrganization, useUser } from '@app/context';
 import { useLogoutUser } from '@app/hooks/api';
 
 const supportOptions = (t: TFunction) => [
@@ -63,7 +63,7 @@ export interface IUser {
 export const Navbar = () => {
   const router = useRouter();
 
-  const { currentOrg, orgs } = useOrgnization();
+  const { currentOrg, orgs } = useOrganization();
   const { user } = useUser();
 
   const logout = useLogoutUser();
@@ -84,7 +84,7 @@ export const Navbar = () => {
   };
 
   return (
-    <div className="z-50 flex w-full flex-row justify-between border-b border-mineshaft-500 bg-mineshaft-900 text-white">
+    <div className="z-[70] flex w-full flex-row justify-between border-b border-mineshaft-500 bg-mineshaft-900 text-white">
       <div className="m-auto mx-4 flex items-center justify-start">
         <div className="flex flex-row items-center">
           <div className="flex justify-center py-4">
@@ -157,8 +157,8 @@ export const Navbar = () => {
             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 divide-y divide-gray-700 rounded-md border border-mineshaft-700 bg-bunker shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
-              <div className="px-1 py-1 ">
+            <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>
@@ -244,7 +244,7 @@ export const Navbar = () => {
                   </div>
                 </button>
               </div>
-              {Boolean(orgs) && (
+              {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')}