Updated the dashabord, members, and settings pages

frontend/src/components/dashboard/DashboardInputField.tsx

@@ -1,9 +1,10 @@
 import { memo, SyntheticEvent, useRef } from 'react';
-import { faCircle, faExclamationCircle, faEye, faLayerGroup } from '@fortawesome/free-solid-svg-icons';
+import { faCircle, faCodeBranch, faExclamationCircle, faEye } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import guidGenerator from '../utilities/randomId';
 import { HoverObject } from '../v2/HoverCard';
+import { PopoverObject } from '../v2/Popover/Popover';
 
 const REGEX = /([$]{.*?})/g;
 
@@ -112,7 +113,7 @@ const DashboardInputField = ({
           }}>
             <HoverObject 
               text={overrideEnabled ? 'This secret is overriden with your personal value' : 'You can override this secret with a personal value'}
-              icon={faLayerGroup}
+              icon={faCodeBranch}
               color={overrideEnabled ? 'primary' : 'bunker-400'}
             />
           </button>
@@ -125,24 +126,24 @@ const DashboardInputField = ({
     const error = startsWithNumber || isDuplicate;
 
     return (
-      <div title={value} className={`relative flex-col w-full h-10 ${
-        isSideBarOpen && 'bg-mineshaft-700 duration-200'
-      }`}>
-        <div
-          className={`group relative flex flex-col justify-center items-center ${
-            error ? 'w-max' : 'w-full'
-          }`}
-        >
-          <input
-            onChange={(e) => onChangeHandler(e.target.value, position)}
-            type={type}
-            value={value}
-            className='z-10 peer ph-no-capture bg-transparent py-2.5 caret-bunker-200 text-sm px-2 w-full min-w-16 outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'
-            spellCheck="false"
-            placeholder='–'
-          />
+      <PopoverObject text={value || ''} onChangeHandler={onChangeHandler} position={position}>
+        <div title={value} className={`relative flex-col w-full h-10 overflow-hidden ${
+          isSideBarOpen && 'bg-mineshaft-700 duration-200'
+        }`}>
+          <div
+            className={`group relative flex flex-col justify-center items-center h-full ${
+              error ? 'w-max' : 'w-full'
+            }`}
+          >
+            {value?.split("\n")[0] ? <span className='ph-no-capture truncate break-all bg-transparent leading-tight text-xs px-2 w-full min-w-16 outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'>
+              {value?.split("\n")[0]}
+            </span> : <span className='text-bunker-400'>-</span> }
+            {value?.split("\n")[1] && <span className='ph-no-capture truncate break-all bg-transparent leading-tight text-xs px-2 w-full min-w-16 outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'>
+              {value?.split("\n")[1]}
+            </span>}
+          </div>
         </div>
-      </div>
+      </PopoverObject>
     );
   }
   if (type === 'value') {
@@ -215,7 +216,7 @@ const DashboardInputField = ({
                 ))}
                 {value?.split('').length === 0 && <span className='text-bunker-400/80'>EMPTY</span>}
               </div>
-              <div className='invisible group-hover:visible cursor-pointer'><FontAwesomeIcon icon={faEye} /></div>
+              <div className='invisible group-hover:visible cursor-default z-[100]'><FontAwesomeIcon icon={faEye} /></div>
             </div>
           )}
         </div>

frontend/src/components/dashboard/KeyPair.tsx

@@ -132,7 +132,7 @@ const KeyPair = ({
           />
         </div>
       </div>
-      <div className="w-2/12 border-r border-mineshaft-600">
+      <div className="w-[calc(10%)] border-r border-mineshaft-600">
         <div className="flex items-center max-h-16">
           <DashboardInputField
             onChangeHandler={modifyComment}
@@ -171,12 +171,26 @@ const KeyPair = ({
         <FontAwesomeIcon className="text-bunker-300 hover:text-primary text-lg" icon={faEllipsis} />
       </div>
       <div className={`group-hover:bg-mineshaft-700 z-50 ${isSnapshot ?? 'invisible'}`}>
-        <DeleteActionButton
+        {keyPair.key || keyPair.value 
+        ? <DeleteActionButton
           onSubmit={() => { if (deleteRow) {
             deleteRow({ ids: [keyPair.id], secretName: keyPair?.key })
           }}}
           isPlain
         />
+      :  <div className='cursor-pointer w-[1.5rem] h-[2.35rem] mr-2 flex items-center justfy-center'>
+        <div
+          onKeyDown={() => null}
+          role="button"
+          tabIndex={0}
+          onClick={() => { if (deleteRow) {
+            deleteRow({ ids: [keyPair.id], secretName: keyPair?.key })
+          }}}
+          className="invisible group-hover:visible"
+        >
+          <FontAwesomeIcon className="text-bunker-300 hover:text-red pl-2 pr-6 text-lg mt-0.5" icon={faXmark} />
+        </div>
+      </div>}
       </div>
     </div>
   </div>

frontend/src/components/dashboard/SideBar.tsx

@@ -18,7 +18,7 @@ import GenerateSecretMenu from './GenerateSecretMenu';
 
 interface SecretProps {
   key: string;
-  value: string;
+  value: string | undefined;
   valueOverride: string | undefined;
   pos: number;
   id: string;
@@ -80,9 +80,9 @@ const SideBar = ({
   const { t } = useTranslation();
 
   return (
-    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-[28rem] sticky top-0 right-0 z-[70] shadow-xl flex flex-col justify-between">
+    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-full min-w-sm max-w-sm sticky top-0 right-0 z-[70] shadow-xl flex flex-col justify-between">
       {isLoading ? (
-        <div className="flex items-center justify-center h-full">
+        <div className="flex items-center justify-center h-full w-full">
           <Image
             src="/images/loading/loading.gif"
             height={60}
@@ -91,7 +91,7 @@ const SideBar = ({
           />
         </div>
       ) : (
-        <div className="h-min overflow-y-auto">
+        <div className="h-min overflow-y-auto w-full">
           <div className="flex flex-row px-4 py-3 border-b border-mineshaft-500 justify-between items-center">
             <p className="font-semibold text-lg text-bunker-200">{t('dashboard:sidebar.secret')}</p>
             <div
@@ -186,7 +186,7 @@ const SideBar = ({
           />
         </div>
       )}
-      <div className="mt-full mt-4 mb-4 flex max-w-sm flex-col justify-start space-y-2 px-4">
+      <div className="mt-full w-96 mt-4 mb-4 flex max-w-sm flex-col justify-start space-y-2 px-4">
         <div>
           <Button
             text="Compare secret across environments"
@@ -197,7 +197,7 @@ const SideBar = ({
           <CompareSecretsModal
             compareModal={compareModal}
             setCompareModal={setCompareModal}
-            currentSecret={{ key: data[0]?.key, value: data[0]?.value }}
+            currentSecret={{ key: data[0]?.key, value: data[0]?.value ?? '' }}
             workspaceEnvs={workspaceEnvs}
             selectedEnv={selectedEnv}
             workspaceId={workspaceId}