From 54ec737b9402b030b9e1358504213f37b8988fce Mon Sep 17 00:00:00 2001
From: Sanyam Jain <sanyamjain6667@gmail.com>
Date: Wed, 10 Jan 2024 23:37:20 +0530
Subject: [PATCH] Create File Functionality added (#22)

---
 .../CreateFile/CreateFile.jsx                 | 249 +++++++++---------
 .../FileComponent/CodeEditor.css              |  47 ++++
 .../FileComponent/CodeEditor.jsx              | 138 +++++-----
 .../FileComponent/FileComponent.jsx           |  73 +++--
 .../FileComponent/FileComponentDelete.jsx     |   7 +-
 .../FileComponent/Header.css                  | 152 +++++++++++
 .../FileComponent/Header.jsx                  | 117 ++++----
 .../FolderComponent/FolderComponent.jsx       |   2 +-
 .../ShowItems/ShowItems.jsx                   |   4 +-
 .../DashboardComponents/SubBar/SubBar.css     |   3 +-
 .../DashboardComponents/SubBar/SubBar.jsx     |   9 +-
 .../UploadFile/UploadFile.jsx                 |   3 +-
 src/pages/DashboardPage/DashboardPage.css     |   6 +-
 src/pages/DashboardPage/DashboardPage.jsx     |   6 +-
 .../fileFoldersActionCreator.js               |   4 +-
 15 files changed, 528 insertions(+), 292 deletions(-)
 create mode 100644 src/components/DashboardComponents/FileComponent/Header.css

diff --git a/src/components/DashboardComponents/CreateFile/CreateFile.jsx b/src/components/DashboardComponents/CreateFile/CreateFile.jsx
index 51ab34c..bbb9073 100644
--- a/src/components/DashboardComponents/CreateFile/CreateFile.jsx
+++ b/src/components/DashboardComponents/CreateFile/CreateFile.jsx
@@ -1,145 +1,134 @@
-
-import {useEffect, useState} from 'react'
-import { faTimes } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { shallowEqual, useSelector,useDispatch } from 'react-redux'
-// import { createFolder } from '../../../redux/actionCreators/fileFoldersActionCreator'
-import { createFile } from '../../../redux/actionCreators/fileFoldersActionCreator'
-import { toast } from 'react-toastify';
-const CreateFile = ({setIsCreateFileOpen}) => {
-
-
-    const [fileName, setFileName] = useState('')
-    const [success, setSuccess] = useState(false)
-
-    const{ userFiles , user, currentFolder, currentFolderData} = useSelector(
-      (state) => ({
-      userFiles : state.filefolders.userFiles,
-      user : state.auth.user,
-      currentFolder : state.filefolders.currentFolder,
-      currentFolderData : state.filefolders.userFolders.find(
-        (folder)=> folder.docId === state.filefolders.currentFolder),
+import { useState, useEffect } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTimes } from "@fortawesome/free-solid-svg-icons";
+import { useSelector, shallowEqual, useDispatch } from "react-redux";
+import { toast } from "react-toastify";
+
+import { createFile } from "../../../redux/actionCreators/fileFoldersActionCreator";
+
+const CreateFile = ({ setIsCreateFileOpen }) => {
+  const [fileName, setFileName] = useState("");
+  const [success, setSuccess] = useState(false);
+
+  const { userFiles, user, currentFolder, currentFolderData } = useSelector(
+    (state) => ({
+      userFiles: state.filefolders.userFiles,
+      user: state.auth.user,
+      currentFolder: state.filefolders.currentFolder,
+      currentFolderData: state.filefolders.userFolders.find(
+        (folder) => folder.docId === state.filefolders.currentFolder
+      ),
     }),
     shallowEqual
-    
-    );
-    const dispatch = useDispatch();
-
-    useEffect(() => {
-      if(success){
-        setIsCreateFileOpen(false)
-        setFileName('')
-        setSuccess(false)
-      }
-    }, [success])
-
-
-    const checkFileAlreadyPresent = (name,extension) => {
-      if(!extension){
-        name = `${name}.txt`
-      }
-
-
-     const filePresent = userFiles
-     .filter((file)=>
-     file.data.parent === currentFolder).find((fldr)=> fldr.data.name === name);
-      if(filePresent){
-        return true;
-      }
-      else{
-        return false;
-      }
+  );
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (success) {
+      setFileName("");
+      setSuccess(false);
+      setIsCreateFileOpen(false);
     }
-    const handleSubmit = (e) => {
-
-      e.preventDefault()
-      if(fileName)  {
-       
-        if(fileName.length > 3 ){
+  }, [success]);
 
-          let extension =false;
-          if(fileName.split('.').length > 1){
+  const checkFileAlreadyPresent = (name, ext) => {
+    if (!ext) {
+      name = name + ".txt";
+    }
+    const filePresent = userFiles
+      .filter((file) => file.data.parent === currentFolder)
+      .find((fldr) => fldr.data.name === name);
+    if (filePresent) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (fileName) {
+      if (fileName.length > 3) {
+        //check file extension
+        let extension = false;
+        if (fileName.split(".").length > 1) {
           extension = true;
-          }
-          if(!checkFileAlreadyPresent(fileName,extension)){
-
-
-             
-            const data = {
-              createdAt : new Date(),
-              name : extension ? fileName : `${fileName}.txt`,
-              userId : user.uid,
-              createdBy : user.displayName,
-              path : currentFolder === "root" ? [] : [ ...currentFolderData?.data.path,currentFolder],
-              parent : currentFolder ,
-              lastAccessed : null,
-              updatedAt : new Date(),
-              extension : extension ? fileName.split('.')[1] : 'txt',
-              data : '',
-              url :null
-
-            };
-           
-        
-            dispatch(createFile(data,setSuccess))
-           
-          }
-          else{
-            toast.error('File already present')
-          }
         }
-        else{
-            toast.error('File name must be greater than 3 characters')
+        if (!checkFileAlreadyPresent(fileName, extension)) {
+          const data = {
+            createdAt: new Date(),
+            name: extension ? fileName : `${fileName}.txt`,
+            userId: user.uid,
+            createdBy: user.displayName,
+            path:
+              currentFolder === "root"
+                ? []
+                : [...currentFolderData?.data.path, currentFolder],
+            parent: currentFolder,
+            lastAccessed: null,
+            updatedAt: new Date(),
+            extension: extension ? fileName.split(".")[1] : "txt",
+            data: "",
+            url: null,
+          };
+          dispatch(createFile(data, setSuccess));
+        } else {
+          toast.info("File already present");
         }
-      }else{
-            toast.error('File name is required')
+      } else {
+        toast.info("File name must be at least 3 characters");
       }
+    } else {
+      toast.info("File name cannot be empty");
     }
+  };
+
   return (
     <div
-    className='col-md-12  position-fixed top-0 left-0 w-100'
-     style={{
-        background: "rgba(0,0,0,0.4)" , zIndex: 9999
-    }}
+      className="col-md-12 position-fixed top-0 left-0 w-100 h-100"
+      style={{ background: "rgba(0, 0, 0, 0.4)", zIndex: 9999 }}
     >
-        <div className='row align-items-center justify-content-center'>
-        <div className='col-md-4 mt-5 bg-white rounded p-4'>
-        <div  className='d-flex justify-content-between'>
-        <h4>Create File </h4>
-        <button className='btn' onClick={()=> setIsCreateFileOpen(false)}> 
-            <FontAwesomeIcon icon={faTimes}
-            className='text-black'
-            size='sm'
-
-            />
-        </button>
-        </div>
-        <hr/>
-        <div  className='d-flex flex-column align-items-center'>
-        <form  className='mt-3 w-100'  onSubmit={handleSubmit}>
-        <div className='form-group'>
-            <input
-            type='text'
-            className='form-control'
-            id='fileName'
-            placeholder='File Name e.g. file.txt'
-            value={fileName}
-            onChange={(e)=> setFileName(e.target.value)}
-            />
-
-             
-        </div>
-            <button type='submit' className='btn btn-primary mt-5 form-control'>
-                Create File
+      <div className="row align-items-cnter justify-content-center">
+        <div className="col-md-4 mt-5 bg-white rounded p-4">
+          <div className="d-flex justify-content-between">
+            <h4>Create File</h4>
+            <button
+              className="btn"
+              onClick={() => setIsCreateFileOpen(false)}
+            >
+              <FontAwesomeIcon
+                icon={faTimes}
+                className="text-black"
+                size="sm"
+              />
             </button>
-        </form>
-            
-        </div>
-        </div>
-
+          </div>
+          <hr />
+          <div className="d-flex flex-column align-items-center">
+            <form className=" mt-3 w-100" onSubmit={handleSubmit}>
+              <div className="form-group">
+                <input
+                  type="text"
+                  className="form-control"
+                  id="fileName"
+                  placeholder="File name e,g. file.txt, index.html, index.php, index.ts, index.js"
+                  value={fileName}
+                  onChange={(e) => setFileName(e.target.value)}
+                />
+              </div>
+
+              <button
+                type="submit"
+                className="btn btn-primary mt-5 form-control"
+              >
+                Create File
+              </button>
+            </form>
+          </div>
         </div>
-     </div>
-  )
-}
+      </div>
+    </div>
+  );
+};
 
-export default CreateFile
\ No newline at end of file
+export default CreateFile;
\ No newline at end of file
diff --git a/src/components/DashboardComponents/FileComponent/CodeEditor.css b/src/components/DashboardComponents/FileComponent/CodeEditor.css
index e69de29..f6b8f13 100644
--- a/src/components/DashboardComponents/FileComponent/CodeEditor.css
+++ b/src/components/DashboardComponents/FileComponent/CodeEditor.css
@@ -0,0 +1,47 @@
+/* Code Editor Styles */
+.code-editor-row {
+    margin-right: 0px;
+    margin-left: 0px;
+  }
+  
+  .code-editor-container {
+    
+    
+    border-radius: 1rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin-top: 1rem;
+  }
+  
+  .code-input {
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    padding: 0.5rem;
+    width: 100%;
+  }
+  
+  .code-output {
+    margin-top: 1rem;
+    overflow-x: auto;
+  }
+  
+  /* Syntax Highlighter Styles */
+  .code-output pre {
+    margin: 0;
+    white-space: pre-wrap;
+  }
+  
+  /* Responsive Styles */
+  @media (max-width: 767px) {
+    .code-editor-container {
+      padding: 0.5rem;
+    }
+  
+    .code-input {
+      padding: 0.25rem;
+    }
+  
+    .code-output {
+      margin-top: 0.5rem;
+    }
+  }
+  
\ No newline at end of file
diff --git a/src/components/DashboardComponents/FileComponent/CodeEditor.jsx b/src/components/DashboardComponents/FileComponent/CodeEditor.jsx
index 56b74bb..53e1456 100644
--- a/src/components/DashboardComponents/FileComponent/CodeEditor.jsx
+++ b/src/components/DashboardComponents/FileComponent/CodeEditor.jsx
@@ -1,75 +1,75 @@
 import { useState } from "react";
-
-import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
-import {atomDark} from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { duotoneLight } from "react-syntax-highlighter/dist/esm/styles/prism";
 import "./CodeEditor.css";
-const CodeEditor = ({fileName = "index.txt",data,setData}) => {
-   
-
-    
-    const codes = {
-            html : "xml",
-            php : "php",
-            js : "javascript",
-            jsx : "jsx",
-            txt:"textfile",
-            xml : "xml",
-            css : "css",
-            c : "c",
-            cpp : "cpp",
-            java : "java",
-            py : "python",
-            json : "json",
-            sql : "sql",
-    };
-    let languageType = fileName && typeof fileName === 'string' ? codes[fileName.split(".")[1]] : "textfile";
-    const handleKeyDown = (evt) => {
-        let value=content,
-        selStartPos = evt.currentTarget.selectionStart;
-        console.log(evt.currentTarget);
-        if(evt.key === "Tab"){
-            value =
-             value.substring(0, selStartPos) +
-              "   " +
-               value.substring(selStartPos, value.length);
-            evt.currentTarget.selectionStart = selStartPos + 3;
-            evt.currentTarget.selectionEnd = selStartPos + 3;
-            evt.preventDefault();
-            setData(value);
-        }
-    }
-    return (
-        
-        <div className="row px-5 mt-3">
-        <div  className="col-md-12 mx-auto code-edit-container p-3">
-        <textarea
-        className="code-input w-100"
-        value = {data}
-        // onKeyDown={handleKeyDown}
-        onChange={(e) => setData(e.target.value)}
-        />
-
-        <pre className="code-output">
-        
-        <SyntaxHighlighter 
-        language={languageType} 
-        showLineNumbers = {true}
-        style={atomDark}
-        wrapLines={true}
-        startingLineNumber={1}
+import { shallowEqual, useSelector } from "react-redux";
 
-        >
-        {data}
-        </SyntaxHighlighter>
-
-
-        </pre>
+const CodeEditor = ({ fileName, data, setData }) => {
+  const { user } = useSelector((state) => ({
+    user: state.auth.user,
+  }), shallowEqual);
 
+  const getCodeLanguage = (fileExtension) => {
+    const codeMappings = {
+      html: "xml",
+      php: "php",
+      js: "javascript",
+      jsx: "jsx",
+      txt: "textile",
+      xml: "xml",
+      css: "css",
+      c: "clike",
+      cpp: "clike",
+      java: "java",
+      cs: "clike",
+      py: "python",
+      json: "javascript",
+      docx: "docx",
+      doc: "doc",
+    };
+    return codeMappings[fileExtension] || 'plaintext';
+  };
 
-        </div>
-            
-        </div>
-    )
-}
+  return (
+    <div className="code-editor-row">
+      <div className="code-editor-container">
+        {user.uid === "T3XBsF3xtDMgTRQIi7xVQYqffpe2" ? (
+          <>
+            <textarea
+              className="code-input"
+              value={data}
+              onChange={(e) => setData(e.target.value)}
+            />
+            <pre className="code-output">
+              <SyntaxHighlighter
+                language={getCodeLanguage(fileName.split(".")[1])}
+                showLineNumbers
+                style={duotoneLight}
+                wrapLines
+                startingLineNumber={1}
+              >
+                {data}
+              </SyntaxHighlighter>
+            </pre>
+          </>
+        ) : (
+          <>
+            <pre className="code-output">
+              <SyntaxHighlighter
+                language={getCodeLanguage(fileName.split(".")[1])}
+                showLineNumbers
+                style={duotoneLight}
+                wrapLines
+                startingLineNumber={1}
+              >
+                {data}
+              </SyntaxHighlighter>
+            </pre>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
 
-export default CodeEditor
\ No newline at end of file
+export default CodeEditor;
diff --git a/src/components/DashboardComponents/FileComponent/FileComponent.jsx b/src/components/DashboardComponents/FileComponent/FileComponent.jsx
index f9663b3..68f563f 100644
--- a/src/components/DashboardComponents/FileComponent/FileComponent.jsx
+++ b/src/components/DashboardComponents/FileComponent/FileComponent.jsx
@@ -3,12 +3,14 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useSelector, shallowEqual, useDispatch } from 'react-redux';
-
+import Header from "./Header";
+import CodeEditor from "./CodeEditor";
 import './FileComponent.css';
 
 const FileComponent = () => {
   const { fileId } = useParams();
   const [fileData, setFileData] = useState('');
+  const [prevFileData, setPrevFileData] = useState("");
   const navigate = useNavigate();
   const dispatch = useDispatch();
 
@@ -26,12 +28,15 @@ const FileComponent = () => {
       navigate('/');
     }
   }, [isAuthenticated, navigate]);
-console.log(currentFile.docId+"fileId from filecomponent");
+
+  console.log(currentFile?.docId + " fileId from filecomponent");
+
   useEffect(() => {
     if (currentFile) {
-      setFileData(currentFile.data.data);
+      setFileData(currentFile?.data?.data);
+      setPrevFileData(currentFile?.data?.data);
     }
-  }, [currentFile, currentFile?.data.data]);
+  }, [currentFile, currentFile?.data?.data]);
 
   const downloadFile = () => {
     const link = document.createElement('a');
@@ -43,39 +48,51 @@ console.log(currentFile.docId+"fileId from filecomponent");
     document.body.removeChild(link);
   };
 
-
   useEffect(() => {
     downloadFile();
   }, [fileId]);
 
   return (
     <>
-      {user.uid === "T3XBsF3xtDMgTRQIi7xVQYqffpe2" ? (<div className='center-div'>
-      <h4 >File Opened in New Tab</h4>
-      <h4 className='phone-msg'>File is Downloaded</h4>
-      <div>
-      <button className='glow-on-hover bottom-space' onClick={() => navigate(-1)}>
-              Go Back ! 😎
-            </button>
-            </div>
-      </div>) : (
+      {isAuthenticated  && fileData !== null ? (
         <>
-
-          <div className='center-div'>
-
-            <h4 >File Opened in New Tab</h4>
-            <h4 className='phone-msg'>File is Downloaded</h4>
-
-            <button className='glow-on-hover bottom-space' onClick={() => navigate(-1)}>
-              Go Back ! 😎
-            </button>
-          </div>
+          <Header
+            fileName={currentFile?.data?.name}
+            fileData={fileData}
+            prevFileData={prevFileData}
+            fileId={fileId}
+          />
+          <CodeEditor
+            fileName={currentFile?.data?.name}
+            data={fileData}
+            setData={setFileData}
+          />
         </>
-      )
-      }</>
+      ) : (
+        <>
+          {user.uid === "T3XBsF3xtDMgTRQIi7xVQYqffpe2" ? (
+            <div className='center-div'>
+              <h4>File Opened in New Tab</h4>
+              <h4 className='phone-msg'>File is Downloaded</h4>
+              <div>
+                <button className='glow-on-hover bottom-space' onClick={() => navigate(-1)}>
+                  Go Back ! 😎
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className='center-div'>
+              <h4>File Opened in New Tab</h4>
+              <h4 className='phone-msg'>File is Downloaded</h4>
+              <button className='glow-on-hover bottom-space' onClick={() => navigate(-1)}>
+                Go Back ! 😎
+              </button>
+            </div>
+          )}
+        </>
+      )}
+    </>
   );
-
 };
 
-
 export default FileComponent;
diff --git a/src/components/DashboardComponents/FileComponent/FileComponentDelete.jsx b/src/components/DashboardComponents/FileComponent/FileComponentDelete.jsx
index 42e42fa..3fdf452 100644
--- a/src/components/DashboardComponents/FileComponent/FileComponentDelete.jsx
+++ b/src/components/DashboardComponents/FileComponent/FileComponentDelete.jsx
@@ -33,7 +33,7 @@ const FileComponentDelete = () => {
       setFileData(currentFile.data.data);
     }
   }, [currentFile, currentFile?.data.data]);
-  console.log(currentFile.docId+"fileId from filecomponentDelete");
+  console.log(currentFile.docId+" fileId from file component Delete");
 
   const handleDeleteFile = () => {
 
@@ -45,8 +45,9 @@ const FileComponentDelete = () => {
     console.log('FileName:', fileName);
   
     dispatch(deleteFile(fileId, fileName));   //yaha se ye redux ko bhejega ki iss id ki file ko delete kr do.
-    navigate(-1);
-    window.location.reload(true);
+    
+    //  window.location.reload(true);
+     navigate(`/dashboard/folder/${currentFile.data.parent}`);
   };
   
   
diff --git a/src/components/DashboardComponents/FileComponent/Header.css b/src/components/DashboardComponents/FileComponent/Header.css
new file mode 100644
index 0000000..4dae763
--- /dev/null
+++ b/src/components/DashboardComponents/FileComponent/Header.css
@@ -0,0 +1,152 @@
+/* Custom Navbar */
+.custom-navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  
+  /* Custom Navbar Brand */
+  .custom-navbar-brand, .custom-navbar-brand2 {
+    margin: 0 auto;
+    font-weight: bold;
+    font-size: 1.50rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #ffc107;
+  }
+  .custom-navbar-brand:hover, .custom-navbar-brand2:hover {
+    scale: 1.1;;
+  }
+   
+
+  .custom-navbar-brand2 {
+    margin-left:400px;
+    font-weight: bold;
+    font-size: 2rem;
+   
+  }
+ 
+  /* Modified Indicator */
+  .custom-navbar-brand .modified-indicator {
+    margin-left: 0.5rem;
+    color: #ffc107; /* Bootstrap's warning color */
+  }
+  
+  /* Custom Navbar Nav */
+  .custom-navbar-nav {
+    list-style: none;
+    display: flex;
+    margin: 0;
+    padding: 0;
+  }
+  
+  /* Custom Nav Item */
+  .custom-nav-item {
+    margin-right: 1rem;
+  }
+  
+  /* Custom Button */
+  .custom-btn {
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 1.5rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    transition: background-color 0.3s ease;
+  }
+  .custom-btn2 {
+    margin-top: 1em;
+    margin-left: 1.5em;
+    font-weight: bold;
+    background-color: #fbf7ea;
+    color: black;
+    border-radius: 10px !important;
+  }
+
+ 
+ 
+  .custom-btn2:hover {
+    color: red;
+    scale: 1.2;
+   }
+   
+  
+  /* Save Button */
+  .custom-btn-success {
+    background-color: #28a745; /* Bootstrap's success color */
+    color: #fff;
+  }
+  
+  /* Disabled Save Button */
+  .custom-btn-success:disabled {
+    background-color: #6c757d; /* Bootstrap's secondary color */
+    cursor: not-allowed;
+  }
+  
+  /* Back Button */
+  .custom-btn-dark {
+    background-color: #5badff; /* Bootstrap's dark color */
+    color: #fff;
+  }
+  
+  /* Tooltip */
+  [data-tooltip] {
+    position: relative;
+  }
+  
+  [data-tooltip]:before {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: 125%; /* Position above the element */
+    left: 50%;
+    transform: translateX(-50%);
+    white-space: nowrap;
+    padding: 0.25rem 0.5rem;
+    background-color: #333;
+    color: #fff;
+    border-radius: 0.25rem;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+  }
+  
+  [data-tooltip]:hover:before {
+    opacity: 1;
+    visibility: visible;
+  }
+ 
+  @media (max-width: 767px) {
+    .custom-navbar {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  
+    .custom-navbar-brand {
+      margin-bottom: 1rem;
+    }
+    .custom-navbar-brand2 {
+        margin: 0;
+        font-size: 2em;
+      }
+    
+    .custom-navbar-nav {
+      margin-top: 1rem;
+    }
+  
+    .custom-nav-item {
+      margin-right: 0.5rem;
+    }
+  
+    .custom-btn {
+      margin-top: 0.5rem;
+    }
+    .custom-btn2 {
+      margin-top: 1rem;
+    }
+
+  }
\ No newline at end of file
diff --git a/src/components/DashboardComponents/FileComponent/Header.jsx b/src/components/DashboardComponents/FileComponent/Header.jsx
index c214a00..b839af9 100644
--- a/src/components/DashboardComponents/FileComponent/Header.jsx
+++ b/src/components/DashboardComponents/FileComponent/Header.jsx
@@ -1,57 +1,72 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faSave, faArrowLeftLong } from "@fortawesome/free-solid-svg-icons"
-import { useNavigate, } from "react-router-dom"
-import { useDispatch } from "react-redux"
-import { updateFileData } from "../../../redux/actionCreators/fileFoldersActionCreator"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSave, faArrowLeftLong, faPencilAlt } from "@fortawesome/free-solid-svg-icons";
+import { useNavigate } from "react-router-dom";
+import { updateFileData } from "../../../redux/actionCreators/fileFoldersActionCreator";
+import { useDispatch, useSelector } from "react-redux";
+import "./Header.css";
 
+const Header = ({ fileName, fileId, fileData, prevFileData }) => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const { user } = useSelector((state) => ({
+    user: state.auth.user,
+  }));
 
-const Header = ({ fileName,fileId,fileData,prevFileData }) => {
-    const navigate = useNavigate();
-    const dispatch = useDispatch();
+  const isFileModified = fileData !== prevFileData;
 
+  const handleSave = () => {
+    if (isFileModified) {
+      // Show a confirmation modal before saving if needed
+      dispatch(updateFileData(fileId, fileData));
+    }
+  };
 
+  // Inside the Header component
+  return (
+    <nav className= "custom-navbar" >
+    
+      {user.uid === "T3XBsF3xtDMgTRQIi7xVQYqffpe2" ? (
+        <>  <p className="custom-navbar-brand">
+        {fileName}
+        {isFileModified && <FontAwesomeIcon icon={faPencilAlt} className="modified-indicator" />}
+      </p>
+        <ul className="custom-navbar-nav">
+          <li className="custom-nav-item" data-tooltip="Save Changes">
+            <button
+              className={`custom-btn ${isFileModified ? "custom-btn-success" : "custom-btn-secondary"}`}
+              disabled={!isFileModified}
+              onClick={handleSave}
+            >
+              <FontAwesomeIcon icon={faSave} /> Save
+            </button>
+          </li>
+          <li className="custom-nav-item" data-tooltip="Go Back">
+            <button className="custom-btn custom-btn-dark" onClick={() => navigate(-1)}>
+              <FontAwesomeIcon icon={faArrowLeftLong} /> Back
+            </button>
+          </li>
+        </ul></>
+      
+      )
+      :(
+        
+       
+      <ul className="custom-navbar-nav">
+      <li className="custom-navbar-brand2">
+        {fileName}
+        {isFileModified && <FontAwesomeIcon icon={faPencilAlt} className="modified-indicator" />}
+      </li>
+      <li className="custom-nav-item" data-tooltip="Go Back">
+            <button className="custom-btn2 custom-btn-dark" onClick={() => navigate(-1)}>
+            ⬅️ Go Back !  
+            </button>
+          </li>
+      </ul>
 
-    return (
-        <nav className="navbar navbar-expand-lg mt-1 navbar-light bg-white shadow-sm">
-            <p className="navbar-brand my-0 fw-bold ms-5">
-                {fileName}
+      )
+      }
+    </nav>
+  );
+};
 
-            </p>
-
-            {
-                fileData !== prevFileData&& (
-                   <h5  className="my-0 fw-bold ms-2 text-danger">
-                    *[modified]
-                   </h5>
-                )
-            }
-            <ul className="navbar-nav ms-auto me-5">
-                <li className="nav-item mx-2">
-                    <button className="btn btn-success" 
-                    disabled={fileData = prevFileData}
-                    onClick={()=>{
-                        dispatch(updateFileData(fileId , fileData))
-                    }
-                    }
-                    >
-
-                        <FontAwesomeIcon icon={faSave} />
-                        Save
-                    </button>
-
-                </li>
-
-
-                <li className="nav-item ">
-                    <button className="btn btn-dark" onClick={() => navigate(-1)}>
-                        <FontAwesomeIcon icon={faArrowLeftLong} />
-                        Go Back
-                    </button>
-
-                </li>
-            </ul>
-        </nav>
-    )
-}
-
-export default Header
\ No newline at end of file
+export default Header;
diff --git a/src/components/DashboardComponents/FolderComponent/FolderComponent.jsx b/src/components/DashboardComponents/FolderComponent/FolderComponent.jsx
index 6bc4409..ec38620 100644
--- a/src/components/DashboardComponents/FolderComponent/FolderComponent.jsx
+++ b/src/components/DashboardComponents/FolderComponent/FolderComponent.jsx
@@ -55,7 +55,7 @@ const FolderComponent = () => {
         </>
       ) :
         (
-          <p className="text-center my-5 color-white"> Notes will be updated Soon...</p>
+          <p className="text-center my-5 text-white"> Notes will be updated Soon ...</p>
         )
 
 
diff --git a/src/components/DashboardComponents/ShowItems/ShowItems.jsx b/src/components/DashboardComponents/ShowItems/ShowItems.jsx
index fd2a893..ca5513e 100644
--- a/src/components/DashboardComponents/ShowItems/ShowItems.jsx
+++ b/src/components/DashboardComponents/ShowItems/ShowItems.jsx
@@ -20,12 +20,12 @@ const ShowItems = ({ title, items, type }) => {
   };
 
   const handleRightClick = (event,itemId) => {
-    console.log(itemId+"fileid from showitem components")
+    console.log(itemId+" fileid from showitem components")
       event.preventDefault(); // Prevent the default context menu from showing up
     //  const fileId = currentFile.docId; 
     if (type !== "folder") {
     navigate(`/dashboard/file/${itemId}/deletefile`);
-      }else {alert("You can not delete folder !send delete request through Google form")}
+      }else {navigate(`/dashboard/folder/${itemId}`)}
     };
 
   // Sort items by name in ascending order
diff --git a/src/components/DashboardComponents/SubBar/SubBar.css b/src/components/DashboardComponents/SubBar/SubBar.css
index d09f72b..727598e 100644
--- a/src/components/DashboardComponents/SubBar/SubBar.css
+++ b/src/components/DashboardComponents/SubBar/SubBar.css
@@ -10,9 +10,10 @@
   border: none;
   outline: none;
   box-shadow: none;
-  color: rgb(131, 255, 253);
+  color: blue;
   font-size: large;
   padding-left: 10px;
+  font-weight: bold;
 }
 
 .breadcrumb-nav:hover {
diff --git a/src/components/DashboardComponents/SubBar/SubBar.jsx b/src/components/DashboardComponents/SubBar/SubBar.jsx
index b0d443f..1343b0a 100644
--- a/src/components/DashboardComponents/SubBar/SubBar.jsx
+++ b/src/components/DashboardComponents/SubBar/SubBar.jsx
@@ -92,7 +92,14 @@ const Subbar = ({
                   </button>
                 </li>
                
-                
+                <li className="nav-item mx-2">
+                  <button
+                    className="btn btn-outline-dark"
+                    onClick={() => setIsCreateFileOpen(true)}
+                  >
+                    <FontAwesomeIcon icon={faFileAlt} /> &nbsp; Create File
+                  </button>
+                </li>
             
           </ul>
         </>
diff --git a/src/components/DashboardComponents/UploadFile/UploadFile.jsx b/src/components/DashboardComponents/UploadFile/UploadFile.jsx
index 3e259b5..d089bdf 100644
--- a/src/components/DashboardComponents/UploadFile/UploadFile.jsx
+++ b/src/components/DashboardComponents/UploadFile/UploadFile.jsx
@@ -8,6 +8,7 @@ import './UploadFile.css';
 
 const UploadFile = ({ setIsFileUploadOpen }) => {
   const [file, setFile] = useState(null);
+  const [success, setSuccess] = useState(false);
   const dispatch = useDispatch();
 
   const { userFiles, user, currentFolder, currentFolderData } = useSelector(
@@ -49,7 +50,7 @@ const UploadFile = ({ setIsFileUploadOpen }) => {
           };
 
           // Use the async/await pattern to wait for the file upload process
-          await dispatch(uploadFile(file, data));
+          await dispatch(uploadFile(file, data,setSuccess));
 
           // Reset the file state after successful upload
           setFile(null);
diff --git a/src/pages/DashboardPage/DashboardPage.css b/src/pages/DashboardPage/DashboardPage.css
index 0d663be..e3144ef 100644
--- a/src/pages/DashboardPage/DashboardPage.css
+++ b/src/pages/DashboardPage/DashboardPage.css
@@ -10,7 +10,11 @@
   animation: colorTransition 10s linear infinite;
   font-style: italic;
 }
-
+.delete-ins{
+  text-align: center;
+  color: #ffc107;
+  font-size: 1.6em;
+}
 .contribute-button {
   background: linear-gradient(to right, #373b44, #2f3031);
   border: none;
diff --git a/src/pages/DashboardPage/DashboardPage.jsx b/src/pages/DashboardPage/DashboardPage.jsx
index 2a1b5f8..1e8f9f6 100644
--- a/src/pages/DashboardPage/DashboardPage.jsx
+++ b/src/pages/DashboardPage/DashboardPage.jsx
@@ -80,12 +80,14 @@ const DashboardPage = () => {
           ) : (
  
  
-            <p className='search-ins'>Use Sub Bar for Navigation</p>
+            <p className='search-ins'>Use Sub Navbar for Navigation</p>
  
           )}
        
 
-      
+      {userId==="T3XBsF3xtDMgTRQIi7xVQYqffpe2" ?(
+        <h1 className='delete-ins'>Right click on  Any file to delete it</h1>
+      ):(<div></div>)}
         <SubBar
           setIsCreateFolderOpen={setIsCreateFolderOpen}
           setIsCreateFileOpen={setIsCreateFileOpen}
diff --git a/src/redux/actionCreators/fileFoldersActionCreator.js b/src/redux/actionCreators/fileFoldersActionCreator.js
index 87e0064..fff8f79 100644
--- a/src/redux/actionCreators/fileFoldersActionCreator.js
+++ b/src/redux/actionCreators/fileFoldersActionCreator.js
@@ -162,7 +162,7 @@ export const updateFileData = (fileId,data) =>(dispatch) => {
     .update({data})
     .then(()=>{
         dispatch(setFileData({fileId,data}))
-        alert('File updated successfully')
+        toast.success('File updated successfully')
     }).catch((err)=>{
         console.log(err)
     })
@@ -236,7 +236,7 @@ export const deleteFile = (fileId, fileName) => async (dispatch, getState) => {
   
       // Dispatch an action to update the UI (you need to implement this action)
       dispatch(fileDeleted(fileId));
-      toast.success('File deleted successfully! Please refresh the page to see the changes');
+      toast.success('File deleted successfully ! 👍😎, Please refresh to see changes. ');
       setSuccess(true);
     } catch (error) {
       console.error('Error deleting file:', error.message);