Finished secret snapshots

frontend/components/basic/Layout.tsx

@@ -121,7 +121,7 @@ export default function Layout({ children }: LayoutProps) {
             }
           });
         }
-        router.push("/dashboard/" + newWorkspaceId + "?Development");
+        router.push("/dashboard/" + newWorkspaceId);
         setIsOpen(false);
         setNewWorkspaceName("");
       } else {
@@ -141,8 +141,7 @@ export default function Layout({ children }: LayoutProps) {
       {
         href:
           "/dashboard/" +
-          workspaceMapping[workspaceSelected as any] +
-          "?Development",
+          workspaceMapping[workspaceSelected as any],
         title: t("nav:menu.secrets"),
         emoji: <FontAwesomeIcon icon={faKey} />,
       },
@@ -199,7 +198,7 @@ export default function Layout({ children }: LayoutProps) {
             .map((workspace: { _id: string }) => workspace._id)
             .includes(intendedWorkspaceId)
         ) {
-          router.push("/dashboard/" + userWorkspaces[0]._id + "?Development");
+          router.push("/dashboard/" + userWorkspaces[0]._id);
         } else {
           setWorkspaceList(
             userWorkspaces.map((workspace: any) => workspace.name)
@@ -242,8 +241,7 @@ export default function Layout({ children }: LayoutProps) {
       ) {
         router.push(
           "/dashboard/" +
-            workspaceMapping[workspaceSelected as any] +
-            "?Development"
+            workspaceMapping[workspaceSelected as any]
         );
         localStorage.setItem(
           "projectData.id",

frontend/components/basic/buttons/Button.tsx

@@ -115,7 +115,7 @@ export default function Button(props: ButtonProps): JSX.Element {
           <FontAwesomeIcon
             icon={props.icon}
             className={`flex my-auto font-extrabold ${
-              props.size == "icon-sm" ? "text-sm" : "text-md"
+              props.size == "icon-sm" ? "text-sm" : "text-sm"
             } ${(props.text || props.textDisabled) && "mr-2"}`}
           />
         )}

frontend/components/context/Notifications/Notification.tsx

@@ -36,7 +36,7 @@ const Notification = ({
 
   return (
     <div
-      className="relative w-full flex items-center justify-between px-4 py-6 rounded-md border border-bunker-500 pointer-events-auto bg-bunker-500"
+      className="relative w-full flex items-center justify-between px-4 py-4 rounded-md border border-bunker-500 pointer-events-auto bg-bunker-500"
       role="alert"
     >
       {notification.type === 'error' && (
@@ -56,7 +56,7 @@ const Notification = ({
         onClick={() => clearNotification(notification.text)}
       >
         <FontAwesomeIcon
-          className="text-white w-4 h-3 hover:text-red"
+          className="text-white pl-2 w-4 h-3 hover:text-red"
           icon={faX}
         />
       </button>

frontend/components/context/Notifications/NotificationProvider.tsx

@@ -38,7 +38,7 @@ const NotificationProvider = ({ children }: NotificationProviderProps) => {
   const createNotification = ({
     text,
     type = 'success',
-    timeoutMs = 5000
+    timeoutMs = 4000
   }: Notification) => {
     const doesNotifExist = notifications.some((notif) => notif.text === text);
 

frontend/components/dashboard/KeyPair.tsx

@@ -21,6 +21,7 @@ interface KeyPairProps {
   isDuplicate: boolean;
   toggleSidebar: (id: string) => void;
   sidebarSecretId: string;
+  isSnapshot: boolean;
 }
 
 /**
@@ -33,6 +34,7 @@ interface KeyPairProps {
  * @param {boolean} obj.isDuplicate - list of all the duplicates secret names on the dashboard
  * @param {function} obj.toggleSidebar - open/close/switch sidebar
  * @param {string} obj.sidebarSecretId - the id of a secret for the side bar is displayed
+ * @param {boolean} obj.isSnapshot - whether this keyPair is in a snapshot. If so, it won't have some features like sidebar 
  * @returns
  */
 const KeyPair = ({
@@ -42,10 +44,11 @@ const KeyPair = ({
   isBlurred,
   isDuplicate,
   toggleSidebar,
-  sidebarSecretId
+  sidebarSecretId,
+  isSnapshot
 }: KeyPairProps) => {
   return (
-    <div className={`mx-1 flex flex-col items-center ml-1 ${keyPair.id == sidebarSecretId && "bg-mineshaft-500 duration-200"} rounded-md`}>
+    <div className={`mx-1 flex flex-col items-center ml-1 ${isSnapshot && "pointer-events-none"} ${keyPair.id == sidebarSecretId && "bg-mineshaft-500 duration-200"} rounded-md`}>
       <div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-14 my-1 items-start px-1">
       {keyPair.type == "personal" && <div className="group font-normal group absolute top-[1rem] left-[0.2rem] z-40 inline-block text-gray-300 underline hover:text-primary duration-200">
         <div className='w-1 h-1 rounded-full bg-primary z-40'></div>
@@ -65,7 +68,7 @@ const KeyPair = ({
           </div>
         </div>
         <div className="w-full min-w-xl">
-          <div className="flex min-w-xl items-center pr-1.5 rounded-lg mt-4 md:mt-0 max-h-10">
+          <div className={`flex min-w-xl items-center ${!isSnapshot && "pr-1.5"} rounded-lg mt-4 md:mt-0 max-h-10`}>
             <DashboardInputField
               onChangeHandler={modifyValue}
               type="value"
@@ -76,15 +79,15 @@ const KeyPair = ({
             />
           </div>
         </div>
-        <div onClick={() => toggleSidebar(keyPair.id)} className="cursor-pointer w-[2.35rem] h-[2.35rem] bg-mineshaft-700 hover:bg-chicago-700 rounded-md flex flex-row justify-center items-center duration-200">
+        {!isSnapshot && <div onClick={() => toggleSidebar(keyPair.id)} className="cursor-pointer w-[2.35rem] h-[2.35rem] bg-mineshaft-700 hover:bg-chicago-700 rounded-md flex flex-row justify-center items-center duration-200">
           <FontAwesomeIcon
             className="text-gray-300 px-2.5 text-lg mt-0.5"
             icon={faEllipsis}
           />
-        </div>
+        </div>}
       </div>
     </div>
   );
 };
 
-export default React.memo(KeyPair);
+export default KeyPair;