Update package-lock.json

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>
 );