Fix dashboard bugs

frontend/src/components/basic/buttons/Button.tsx

@@ -53,9 +53,9 @@ const Button = ({
     'group m-auto md:m-0 inline-block rounded-md duration-200',
 
     // Setting background colors and hover modes
-    color === 'mineshaft' && activityStatus && 'bg-mineshaft-700 hover:bg-primary',
+    color === 'mineshaft' && activityStatus && 'bg-mineshaft-800 border border-mineshaft-600 hover:bg-primary/[0.15] hover:border-primary/60',
     color === 'mineshaft' && !activityStatus && 'bg-mineshaft',
-    (color === 'primary' || !color) && activityStatus && 'bg-primary hover:opacity-80',
+    (color === 'primary' || !color) && activityStatus && 'bg-primary border border-primary-400 opacity-80 hover:opacity-100',
     (color === 'primary' || !color) && !activityStatus && 'bg-primary',
     color === 'red' && 'bg-red',
 
@@ -74,11 +74,11 @@ const Button = ({
     'relative font-medium flex items-center',
 
     // Setting the text color for the text and icon
-    color === 'mineshaft' && 'text-gray-400',
+    color === 'mineshaft' && 'text-bunker-200',
     color !== 'mineshaft' && color !== 'red' && color !== 'none' && 'text-black',
     color === 'red' && 'text-gray-200',
     color === 'none' && 'text-gray-200 text-xl',
-    activityStatus && color !== 'red' && color !== 'none' ? 'group-hover:text-black' : '',
+    activityStatus && color !== 'red' && color !== 'mineshaft' && color !== 'none' ? 'group-hover:text-black' : '',
 
     size === 'icon' && 'flex items-center justify-center'
   );

frontend/src/components/dashboard/KeyPair.tsx

@@ -101,7 +101,7 @@ const KeyPair = ({
     }`}
   >
     <div className="relative flex flex-row justify-between w-full mr-auto max-h-14 items-center">
-      <div className="w-1/5 border-r border-mineshaft-600 flex flex-row items-center">
+      <div className="w-[23%] border-r border-mineshaft-600 flex flex-row items-center">
         <div className='text-bunker-400 text-xs flex items-center justify-center w-14 h-10 cursor-default'>{keyPair.pos + 1}</div>
         <div className="flex items-center max-h-16 w-full">
           <DashboardInputField

frontend/src/components/navigation/NavHeaderSecrets.tsx

@@ -0,0 +1,90 @@
+import { useRouter } from 'next/router';
+import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { useOrganization, useWorkspace } from '@app/context';
+
+import { Select, SelectItem, Tooltip } from '../v2';
+
+
+/**
+ * This is the component at the top of almost every page.
+ * It shows how to navigate to a certain page.
+ * It future these links should also be clickable and hoverable
+ * @param {object} obj
+ * @param {string} obj.pageName - Name of the page
+ * @param {boolean} obj.isProjectRelated - whether or not this page is related to project (determine if it's 2 or 3 navigation steps)
+ * @param {boolean} obj.isOrganizationRelated - whether or not this page is related to organization (determine if it's 2 or 3 navigation steps)
+ * @param {string} obj.currentEnv - current environment inside a project
+ * @param {string} obj.userAvailableEnvs - environments that are available to a user in this project (used for the dropdown)
+ * @param {string} obj.onEnvChange - the action that happens when an env is changed
+ * @returns
+ */
+export default function NavHeaderSecrets({
+  pageName,
+  isProjectRelated,
+  isOrganizationRelated,
+  isSnapshot,
+  currentEnv,
+  userAvailableEnvs,
+  onEnvChange
+}: {
+  pageName: string;
+  isProjectRelated?: boolean;
+  isOrganizationRelated?: boolean;
+  isSnapshot: boolean;
+  currentEnv?: string;
+  userAvailableEnvs?: any[];
+  onEnvChange?: (slug: string) => void;
+}): JSX.Element {
+  const { currentWorkspace } = useWorkspace();
+  const { currentOrg } = useOrganization();
+  const router = useRouter()
+
+  return (
+    <div className={`${!isSnapshot && "absolute"} ml-6 flex flex-row items-center pt-6 cursor-default`}>
+      <div className="mr-3 flex h-6 w-6 items-center justify-center rounded-md bg-primary-900 text-mineshaft-100">
+        {currentOrg?.name?.charAt(0)}
+      </div>
+      <div className="text-md font-medium text-bunker-300">{currentOrg?.name}</div>
+      {isProjectRelated && (
+        <>
+          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
+          <div className="text-md font-medium text-bunker-300">{currentWorkspace?.name}</div>
+        </>
+      )}
+      {isOrganizationRelated && (
+        <>
+          <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
+          <div className="text-md font-medium text-bunker-300">Organization Settings</div>
+        </>
+      )}
+      <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-3 text-sm text-gray-400" />
+      {pageName === 'Secrets'
+      ? <a className="text-md font-medium text-primary/80 hover:text-primary" href={`${router.asPath.split("?")[0]}`}>{pageName}</a>
+      : <div className="text-md text-gray-400">{pageName}</div>}
+      {currentEnv &&
+      <>
+        <FontAwesomeIcon icon={faAngleRight} className="ml-3 mr-1.5 text-sm text-gray-400" />
+        <div className='pl-3 rounded-md hover:bg-bunker-100/10'>
+          <Tooltip content="Select environment">
+            <Select
+              value={userAvailableEnvs?.filter(uae => uae.name === currentEnv)[0]?.slug}
+              onValueChange={(value) => {
+                if (value && onEnvChange) onEnvChange(value);
+              }}
+              className="text-md pl-0 font-medium text-primary/80 hover:text-primary bg-transparent"
+              dropdownContainerClassName="text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 drop-shadow-2xl"
+            >
+              {userAvailableEnvs?.map(({ name, slug }) => (
+                <SelectItem value={slug} key={slug}>
+                  {name}
+                </SelectItem>
+              ))}
+            </Select>
+          </Tooltip>
+        </div>
+      </>}
+    </div>
+  );
+}

frontend/src/components/v2/Tooltip/Tooltip.tsx

@@ -35,7 +35,7 @@ export const Tooltip = ({
       sideOffset={5}
       {...props}
       className={twMerge(
-        `z-20 select-none rounded-md bg-mineshaft-500 py-2 px-4 text-sm text-bunker-200 shadow-md 
+        `z-20 select-none max-w-[15rem] rounded-md bg-mineshaft-800 border border-mineshaft-600 py-2 px-4 font-light text-sm text-bunker-200 shadow-md 
 data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade
 data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade
 data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade
@@ -45,7 +45,7 @@ data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade
       )}
     >
       {content}
-      <TooltipPrimitive.Arrow width={11} height={5} className="fill-mineshaft-500" />
+      <TooltipPrimitive.Arrow width={11} height={5} className="fill-mineshaft-600" />
     </TooltipPrimitive.Content>
   </TooltipPrimitive.Root>
 );

frontend/src/pages/dashboard/[id].tsx

@@ -19,8 +19,8 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tag } from 'public/data/frequentInterfaces';
+import queryString from 'query-string';
 
-// import queryString from 'query-string';
 import Button from '@app/components/basic/buttons/Button';
 import BottonRightPopup from '@app/components/basic/popups/BottomRightPopup';
 import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
@@ -29,7 +29,7 @@ import DownloadSecretMenu from '@app/components/dashboard/DownloadSecretsMenu';
 import DropZone from '@app/components/dashboard/DropZone';
 import KeyPair from '@app/components/dashboard/KeyPair';
 import SideBar from '@app/components/dashboard/SideBar';
-import NavHeader from '@app/components/navigation/NavHeader';
+import NavHeaderSecrets from '@app/components/navigation/NavHeaderSecrets';
 import { decryptAssymmetric, decryptSymmetric } from '@app/components/utilities/cryptography/crypto';
 import guidGenerator from '@app/components/utilities/randomId';
 import encryptSecrets from '@app/components/utilities/secrets/encryptSecrets';
@@ -173,7 +173,7 @@ export default function Dashboard() {
   
   const { createNotification } = useNotificationContext();
   const router = useRouter();
-  // const envInURL = queryString.parse(router.asPath.split('?')[1])?.env;
+  const envInURL = queryString.parse(router.asPath.split('?')[1])?.env;
 
   const workspaceId = router.query.id as string;
   const [workspaceEnvs, setWorkspaceEnvs] = useState<WorkspaceEnv[]>([]);
@@ -816,8 +816,8 @@ export default function Dashboard() {
   };
 
   return <div>
-    {false 
-    ? <DashboardEnvOverview />
+    {!envInURL 
+    ? <DashboardEnvOverview onEnvChange={handleOnEnvironmentChange} />
     : (data ? (
     <div className="bg-bunker-800 max-h-screen h-full relative flex flex-col justify-between text-white dark">
       <Head>
@@ -843,11 +843,12 @@ export default function Dashboard() {
               .map((duplicate) => duplicate.key) ?? []
           }
         />
-        <div className="w-full max-h-96 pb-2 dark:[color-scheme:dark]">
-          <NavHeader 
+        <div className="w-full max-h-96 dark:[color-scheme:dark]">
+          <NavHeaderSecrets
             pageName={t('dashboard:title')} 
             currentEnv={selectedEnv?.name || ''} 
             isProjectRelated 
+            isSnapshot={snapshotData !== undefined}
             userAvailableEnvs={workspaceEnvs}
             onEnvChange={handleOnEnvironmentChange}
           />
@@ -876,7 +877,7 @@ export default function Dashboard() {
             )}
             <div className="flex flex-row justify-start items-center text-3xl">
               <div className="font-semibold mr-4 mt-1 flex flex-row items-center">
-                <p>{snapshotData ? 'Secret Snapshot' : t('dashboard:title')}</p>
+                <p>{snapshotData ? 'Secret Snapshot' : ''}</p>
                 {snapshotData && (
                   <span className="bg-primary-800 text-xs ml-4 mt-1 px-1.5 rounded-md w-min">
                     {new Date(snapshotData.createdAt).toLocaleString()}
@@ -968,7 +969,7 @@ export default function Dashboard() {
               <div className="w-full flex flex-row items-start">
                 {(snapshotData || data?.length !== 0) && selectedEnv && (
                   <>
-                    <div className="h-10 w-full bg-mineshaft-700 hover:bg-white/10 rounded-md flex flex-row items-center">
+                    <div className="h-10 w-full bg-mineshaft-800 border border-mineshaft-600 hover:bg-mineshaft-700 duration-200 rounded-md flex flex-row items-center">
                       <FontAwesomeIcon
                         className="bg-transparent rounded-l-md py-[0.7rem] pl-4 pr-2 text-bunker-300 text-sm"
                         icon={faMagnifyingGlass}
@@ -1032,7 +1033,7 @@ export default function Dashboard() {
                   <div ref={secretsTop} />
                   <div className="group flex flex-col items-center bg-mineshaft-800 border-b-2 border-mineshaft-500 duration-100 sticky top-0 z-[60]">
                     <div className="relative flex flex-row justify-between w-full mr-auto max-h-14 items-center">
-                      <div className="w-1/5 border-r border-mineshaft-600 flex flex-row items-center">
+                      <div className="w-[23%] border-r border-mineshaft-600 flex flex-row items-center">
                         <div className='text-transparent text-xs flex items-center justify-center w-12 h-10 cursor-default'>0</div>
                         <span className='px-2 text-bunker-300 font-semibold'>Key</span>
                         {!snapshotData && <IconButton

frontend/src/pages/settings/personal/[id].tsx

@@ -102,7 +102,7 @@ export default function PersonalSettings() {
               </div>
             </div>
             <SecuritySection />
-            <div className="bg-white/5 rounded-md px-6 flex flex-col items-start w-full mt-2 mb-8 pt-2">
+            <div className="bg-white/5 rounded-md px-6 flex flex-col items-start w-full mt-2 mb-8 pt-4">
               <div className="flex flex-row justify-between w-full">
                 <div className="flex flex-col w-full">
                   <p className="text-xl font-semibold mb-3">
@@ -112,7 +112,7 @@ export default function PersonalSettings() {
                     {t('settings-personal:api-keys.description')}
                   </p>
                 </div>
-                <div className="w-48 mt-2">
+                <div className="w-40 mt-2">
                   <Button
                     text={String(t('settings-personal:api-keys.add-new'))}
                     onButtonPressed={() => {

frontend/src/views/DashboardPage/DashboardEnvOverview.tsx

@@ -31,7 +31,7 @@ import {
 } from './DashboardPage.utils';
 
 
-export const DashboardEnvOverview = () => {
+export const DashboardEnvOverview = ({onEnvChange}: {onEnvChange: any;}) => {
   const { t } = useTranslation();
   const router = useRouter();
   const { createNotification } = useNotificationContext();
@@ -243,7 +243,8 @@ export const DashboardEnvOverview = () => {
               {userAvailableEnvs?.map(env => {
                 return <div key={`button-${env.slug}`} className="flex flex-row w-full justify-center h-10 items-center border-none mb-1 mx-2 min-w-[10rem]">
                     <Button
-                      onClick={() => router.push(`${router.asPath  }?env=${env.slug}`)}
+                      onClick={() => onEnvChange(env.slug)}
+                      // router.push(`${router.asPath  }?env=${env.slug}`)
                       variant="outline_bg"
                       colorSchema="primary"
                       isFullWidth

frontend/src/views/DashboardPage/components/EnvComparisonRow/EnvComparisonRow.tsx

@@ -118,7 +118,7 @@ export const EnvComparisonRow = ({
     <tr className="group min-w-full flex flex-row items-center hover:bg-bunker-700">
       <td className="w-10 h-10 px-4 flex items-center justify-center border-none"><div className='text-center w-10 text-xs text-bunker-400'>{index + 1}</div></td>
       <td className="flex flex-row justify-between items-center h-full min-w-[200px] lg:min-w-[220px] xl:min-w-[250px]">
-        <div className="flex flex-row items-center h-8 cursor-default">{secret?.key || ''}</div>
+        <div className="flex flex-row items-center h-8 cursor-default">{secrets![0].key || ''}</div>
         <button type="button" className='mr-2 text-bunker-400 hover:text-bunker-300 invisible group-hover:visible' onClick={() => setAreValuesHiddenThisRow(!areValuesHiddenThisRow)}>
           <FontAwesomeIcon icon={areValuesHiddenThisRow ? faEye : faEyeSlash} />
         </button>