From e3c3b67d4c05096d916e5f4a2ffa07cdec6f0146 Mon Sep 17 00:00:00 2001
From: Gana016 <jayam.ganapathi12@gmail.com>
Date: Sun, 4 Apr 2021 11:56:38 +0530
Subject: [PATCH] bg update

---
 digital-course-file/package-lock.json     | 164 +++++++++++++++++++++-
 digital-course-file/package.json          |   1 +
 digital-course-file/src/styles.css        |  18 +--
 digital-course-file/src/user/AddFolder.js | 157 +++++++++++----------
 digital-course-file/src/user/Hero.js      | 122 ++++++++--------
 digital-course-file/src/user/Login.js     |  17 ++-
 digital-course-file/src/user/Signin.js    |   2 -
 digital-course-file/src/user/copyright.js | 104 +++++++-------
 8 files changed, 372 insertions(+), 213 deletions(-)

diff --git a/digital-course-file/package-lock.json b/digital-course-file/package-lock.json
index e4cf5d9..adb35dd 100644
--- a/digital-course-file/package-lock.json
+++ b/digital-course-file/package-lock.json
@@ -18,6 +18,7 @@
         "firebase": "^8.2.9",
         "firebaseui": "^4.7.3",
         "js-file-download": "^0.4.12",
+        "particles-bg": "^2.5.5",
         "prismic-reactjs": "^1.3.3",
         "react": "^17.0.1",
         "react-bootstrap": "^1.5.0",
@@ -1963,6 +1964,7 @@
         "jest-resolve": "^26.6.2",
         "jest-util": "^26.6.2",
         "jest-worker": "^26.6.2",
+        "node-notifier": "^8.0.0",
         "slash": "^3.0.0",
         "source-map": "^0.6.0",
         "string-length": "^4.0.1",
@@ -6905,6 +6907,40 @@
         "es6-symbol": "^3.1.1"
       }
     },
+    "node_modules/es6-map": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/es6-map/-/es6-map-0.1.5.tgz",
+      "integrity": "sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "~0.10.14",
+        "es6-iterator": "~2.0.1",
+        "es6-set": "~0.1.5",
+        "es6-symbol": "~3.1.1",
+        "event-emitter": "~0.3.5"
+      }
+    },
+    "node_modules/es6-set": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/es6-set/-/es6-set-0.1.5.tgz",
+      "integrity": "sha1-0rPsXU2ADO2BjbU40ol02wpzzLE=",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "~0.10.14",
+        "es6-iterator": "~2.0.1",
+        "es6-symbol": "3.1.1",
+        "event-emitter": "~0.3.5"
+      }
+    },
+    "node_modules/es6-set/node_modules/es6-symbol": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
+      "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
     "node_modules/es6-symbol": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
@@ -6943,7 +6979,8 @@
         "esprima": "^4.0.1",
         "estraverse": "^4.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1"
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -7576,6 +7613,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/event-emitter": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+      "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
+      "dependencies": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
     "node_modules/event-target-shim": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
@@ -10748,6 +10794,7 @@
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
+        "fsevents": "^2.1.2",
         "graceful-fs": "^4.2.4",
         "jest-regex-util": "^26.0.0",
         "jest-serializer": "^26.6.2",
@@ -13609,6 +13656,19 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/particles-bg": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/particles-bg/-/particles-bg-2.5.5.tgz",
+      "integrity": "sha512-NzjgmayGwyvH/hGq437++nNc9qUCrsV1riX+m0+kuvbJSXStyUJ3hJocejNKtvOVuml0RfUp64pRt3UmmmAgsQ==",
+      "dependencies": {
+        "proton-engine": "^4.1.3",
+        "raf-manager": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
     "node_modules/pascal-case": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
@@ -15326,6 +15386,11 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.45.tgz",
       "integrity": "sha512-703YTEp8AwQeapI0PTXDOj+Bs/mtdV/k9VcTP7z/de+lx6XjFMKdB+JhKnK+6PZ5za7omgZ3V6qm/dNkMj/Zow=="
     },
+    "node_modules/proton-engine": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/proton-engine/-/proton-engine-4.2.1.tgz",
+      "integrity": "sha512-c72hgcnwMyyvUoy7Jq/HX3HQZnAo5MUNvFbyZHiWZrwcERX9+lYzM9YyT0iueXVAJpt+r8nrPan9F3HTXj7IsA=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -15465,6 +15530,22 @@
         "performance-now": "^2.1.0"
       }
     },
+    "node_modules/raf-manager": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/raf-manager/-/raf-manager-0.3.0.tgz",
+      "integrity": "sha512-qLpVgVlUmwtlY35zoyCQwLWMOpLkVtiItPd/RxouHAh80XZjoh84CF5pFBVyIIUWXubypSJi1OBJS4jM7onOng==",
+      "dependencies": {
+        "core-js": "^2.5.7",
+        "es6-map": "^0.1.5"
+      }
+    },
+    "node_modules/raf-manager/node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.",
+      "hasInstallScript": true
+    },
     "node_modules/ramda": {
       "version": "0.26.1",
       "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.26.1.tgz",
@@ -15883,6 +15964,7 @@
         "eslint-webpack-plugin": "^2.1.0",
         "file-loader": "6.1.1",
         "fs-extra": "^9.0.1",
+        "fsevents": "^2.1.3",
         "html-webpack-plugin": "4.5.0",
         "identity-obj-proxy": "3.0.0",
         "jest": "26.6.0",
@@ -19255,8 +19337,10 @@
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
       "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
       "dependencies": {
+        "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0"
+        "neo-async": "^2.5.0",
+        "watchpack-chokidar2": "^2.0.1"
       },
       "optionalDependencies": {
         "chokidar": "^3.4.1",
@@ -19753,6 +19837,7 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
+        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -27098,6 +27183,42 @@
         "es6-symbol": "^3.1.1"
       }
     },
+    "es6-map": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/es6-map/-/es6-map-0.1.5.tgz",
+      "integrity": "sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=",
+      "requires": {
+        "d": "1",
+        "es5-ext": "~0.10.14",
+        "es6-iterator": "~2.0.1",
+        "es6-set": "~0.1.5",
+        "es6-symbol": "~3.1.1",
+        "event-emitter": "~0.3.5"
+      }
+    },
+    "es6-set": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/es6-set/-/es6-set-0.1.5.tgz",
+      "integrity": "sha1-0rPsXU2ADO2BjbU40ol02wpzzLE=",
+      "requires": {
+        "d": "1",
+        "es5-ext": "~0.10.14",
+        "es6-iterator": "~2.0.1",
+        "es6-symbol": "3.1.1",
+        "event-emitter": "~0.3.5"
+      },
+      "dependencies": {
+        "es6-symbol": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.1.tgz",
+          "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
+          "requires": {
+            "d": "1",
+            "es5-ext": "~0.10.14"
+          }
+        }
+      }
+    },
     "es6-symbol": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
@@ -27635,6 +27756,15 @@
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
     },
+    "event-emitter": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
+      "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
+      "requires": {
+        "d": "1",
+        "es5-ext": "~0.10.14"
+      }
+    },
     "event-target-shim": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
@@ -32531,6 +32661,15 @@
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
       "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
     },
+    "particles-bg": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/particles-bg/-/particles-bg-2.5.5.tgz",
+      "integrity": "sha512-NzjgmayGwyvH/hGq437++nNc9qUCrsV1riX+m0+kuvbJSXStyUJ3hJocejNKtvOVuml0RfUp64pRt3UmmmAgsQ==",
+      "requires": {
+        "proton-engine": "^4.1.3",
+        "raf-manager": "^0.3.0"
+      }
+    },
     "pascal-case": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
@@ -33952,6 +34091,11 @@
         }
       }
     },
+    "proton-engine": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/proton-engine/-/proton-engine-4.2.1.tgz",
+      "integrity": "sha512-c72hgcnwMyyvUoy7Jq/HX3HQZnAo5MUNvFbyZHiWZrwcERX9+lYzM9YyT0iueXVAJpt+r8nrPan9F3HTXj7IsA=="
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -34073,6 +34217,22 @@
         "performance-now": "^2.1.0"
       }
     },
+    "raf-manager": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/raf-manager/-/raf-manager-0.3.0.tgz",
+      "integrity": "sha512-qLpVgVlUmwtlY35zoyCQwLWMOpLkVtiItPd/RxouHAh80XZjoh84CF5pFBVyIIUWXubypSJi1OBJS4jM7onOng==",
+      "requires": {
+        "core-js": "^2.5.7",
+        "es6-map": "^0.1.5"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        }
+      }
+    },
     "ramda": {
       "version": "0.26.1",
       "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.26.1.tgz",
diff --git a/digital-course-file/package.json b/digital-course-file/package.json
index a4d0673..f0a04ea 100644
--- a/digital-course-file/package.json
+++ b/digital-course-file/package.json
@@ -14,6 +14,7 @@
     "firebase": "^8.2.9",
     "firebaseui": "^4.7.3",
     "js-file-download": "^0.4.12",
+    "particles-bg": "^2.5.5",
     "prismic-reactjs": "^1.3.3",
     "react": "^17.0.1",
     "react-bootstrap": "^1.5.0",
diff --git a/digital-course-file/src/styles.css b/digital-course-file/src/styles.css
index 3b4fd8c..28654b2 100644
--- a/digital-course-file/src/styles.css
+++ b/digital-course-file/src/styles.css
@@ -24,11 +24,11 @@ button {
   width: 100%;
   min-height: 100vh;
   padding: 0 20px;
-  background: #e9e9e9;
+
   display: flex;
 }
 
-.login .loginContainer {
+.loginContainer {
   padding: 60px;
   margin: auto;
   width: 100%;
@@ -46,7 +46,7 @@ button {
   box-shadow: 0 50px 70px -20px rgba(0, 0, 0, 0.8);
 }
 
-.login .loginContainer label {
+.loginContainer label {
   color: white;
   margin: 14px 0;
   display: block;
@@ -54,7 +54,7 @@ button {
   line-height: 1;
 }
 
-.login .loginContainer input {
+.loginContainer input {
   width: 100%;
   border: none;
   outline: none;
@@ -65,18 +65,18 @@ button {
   letter-spacing: 1px;
 }
 
-.login .loginContainer .btnContainer {
+.loginContainer .btnContainer {
   width: 100%;
   padding: 24px 0;
 }
 
-.login .loginContainer .btnContainer p {
+.loginContainer .btnContainer p {
   margin: 14px 0 0 0;
   text-align: right;
   color: #fff;
 }
 
-.login .loginContainer .btnContainer p span {
+.loginContainer .btnContainer p span {
   color: yellow;
   font-weight: 500;
   letter-spacing: 0.5px;
@@ -85,11 +85,11 @@ button {
   transition: all 400ms ease-in-out;
 }
 
-.login .loginContainer .btnContainer p span:hover {
+.loginContainer .btnContainer p span:hover {
   color: red;
 }
 
-.login .loginContainer .errorMsg {
+.loginContainer .errorMsg {
   color: red;
   font-size: 16px;
 }
diff --git a/digital-course-file/src/user/AddFolder.js b/digital-course-file/src/user/AddFolder.js
index 9271ade..9e457ed 100644
--- a/digital-course-file/src/user/AddFolder.js
+++ b/digital-course-file/src/user/AddFolder.js
@@ -1,90 +1,95 @@
-import { React , useState, Fragment } from "react";
-import { Button,Modal,Form} from 'react-bootstrap';
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFolderPlus } from "@fortawesome/free-solid-svg-icons";
+import { React, useState, Fragment } from 'react'
+import { Button, Modal, Form } from 'react-bootstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faFolderPlus } from '@fortawesome/free-solid-svg-icons'
 import { database } from '../fire.js'
 import firebase from 'firebase'
 import { ROOT_FOLDER } from '.././hooks/useFolder'
-import ReactTooltip from 'react-tooltip';
+import ReactTooltip from 'react-tooltip'
 
-export default function AddFolder( {currentFolder} ){
-    const divStyle = {
-      fontWeight: 'bold',
-      color: 'black'
-    };
-    const [open, setOpen] = useState(false);
-    const [name, setName] = useState("");
+export default function AddFolder({ currentFolder }) {
+  const divStyle = {
+    fontWeight: 'bold',
+    color: 'black',
+  }
+  const [open, setOpen] = useState(false)
+  const [name, setName] = useState('')
 
-    function openModal(){
-        setOpen(true);
-    }
-
-    function closeModal(){
-        setOpen(false);
-    }
-
-    function handleSubmit(e){
+  function openModal() {
+    setOpen(true)
+  }
 
-      if(currentFolder == null) return;
+  function closeModal() {
+    setOpen(false)
+  }
 
-      const path =  [...currentFolder.path];
-      if(currentFolder !== ROOT_FOLDER){
-          path.push( { name : currentFolder.name , id : currentFolder.id} )
-      }
+  function handleSubmit(e) {
+    if (currentFolder == null) return
 
-      const parents =  [...currentFolder.parents];
-      if(currentFolder!== ROOT_FOLDER){
-          parents.push(currentFolder.id)
-      }
-
-      e.preventDefault();
-      database.folders.add({
-        name : name,
-        parentId : currentFolder.id,
-        userId: firebase.auth().currentUser.uid,
-        path : path,
-        createdAt : database.getTime(),
-        parents : parents,
-      })
-      setName("");
-      closeModal();
+    const path = [...currentFolder.path]
+    if (currentFolder !== ROOT_FOLDER) {
+      path.push({ name: currentFolder.name, id: currentFolder.id })
     }
 
+    const parents = [...currentFolder.parents]
+    if (currentFolder !== ROOT_FOLDER) {
+      parents.push(currentFolder.id)
+    }
 
+    e.preventDefault()
+    database.folders.add({
+      name: name,
+      parentId: currentFolder.id,
+      userId: firebase.auth().currentUser.uid,
+      path: path,
+      createdAt: database.getTime(),
+      parents: parents,
+    })
+    setName('')
+    closeModal()
+  }
 
-    return (
-        <Fragment>
-          <Button data-tip data-for='addfolder' name='nf' style={{maxWidth : "80px" }} className="mr-2" onClick={openModal} variant="primary" size="sm" >
-            <FontAwesomeIcon icon={faFolderPlus} />
-          </Button>
-          <Modal show={open} onHide={closeModal} >
-            <Form onSubmit={handleSubmit}>
-              <Modal.Body>
-                <Form.Group>
-                  <Form.Label>Folder Name</Form.Label>
-                  <Form.Control
-                    type="text"
-                    required
-                    value={name}
-                    onChange={e => setName(e.target.value)}
-                  />
-                </Form.Group>
-              </Modal.Body>
-              <Modal.Footer>
-              <Button name='create_folder' variant="success" type="submit">
-                  Add Folder
-                </Button>
-                <Button variant="danger" onClick={closeModal}>
-                  Cancel
-                </Button>
-              </Modal.Footer>
-            </Form>
-          </Modal>
+  return (
+    <Fragment>
+      <Button
+        data-tip
+        data-for='addfolder'
+        name='nf'
+        style={{ maxWidth: '80px' }}
+        className='mr-2'
+        onClick={openModal}
+        variant='primary'
+        size='sm'
+      >
+        <FontAwesomeIcon icon={faFolderPlus} />
+      </Button>
+      <Modal show={open} onHide={closeModal}>
+        <Form onSubmit={handleSubmit}>
+          <Modal.Body>
+            <Form.Group>
+              <Form.Label>Folder Name</Form.Label>
+              <Form.Control
+                type='text'
+                required
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </Form.Group>
+          </Modal.Body>
+          <Modal.Footer>
+            <Button name='create_folder' variant='success' type='submit'>
+              Add Folder
+            </Button>
+            <Button variant='danger' onClick={closeModal}>
+              Cancel
+            </Button>
+          </Modal.Footer>
+        </Form>
+      </Modal>
 
-          <ReactTooltip id='addfolder' type='success' place='bottom' effect='solid'>
-            <span style={divStyle}>Add Folder</span>
-          </ReactTooltip>
-        </Fragment>
-      );
+      <ReactTooltip id='addfolder' type='success' place='bottom' effect='solid'>
+        <span style={divStyle}>Add Folder</span>
+      </ReactTooltip>
+    </Fragment>
+  )
 }
-
diff --git a/digital-course-file/src/user/Hero.js b/digital-course-file/src/user/Hero.js
index c91969c..bb564aa 100644
--- a/digital-course-file/src/user/Hero.js
+++ b/digital-course-file/src/user/Hero.js
@@ -1,4 +1,4 @@
-import React, { useState, Component } from "react"
+import React, { useState, Component } from 'react'
 import AddFolder from './AddFolder'
 import AddFile from './AddFile'
 import { Container, Button, Navbar, Nav } from 'react-bootstrap'
@@ -8,15 +8,15 @@ import FolderNav from './FolderNav'
 import Deffolders from './Deffolders'
 import Sharelink from './Sharelink'
 import Deletefolder from './Deletefolder'
-import { useParams,useLocation } from 'react-router-dom' 
+import { useParams, useLocation } from 'react-router-dom'
 import { Link } from 'react-router-dom'
 import File from './File'
-import 'firebase/storage';
-import ReactDOM from "react-dom"
-import firebase from "../fire";
+import 'firebase/storage'
+import ReactDOM from 'react-dom'
+import firebase from '../fire'
 import Loader from 'react-loader-spinner'
 import Dropzone from './Dropzone'
-
+import ParticlesBg from 'particles-bg'
 
 const Hero = ({ handleLogout }) => {
   const { folderId } = useParams()
@@ -39,73 +39,67 @@ const Hero = ({ handleLogout }) => {
     )
   }
 
-  if(folder.id!=="copyright"){
+  if (folder.id !== 'copyright') {
     return (
+      <>
+        <ParticlesBg type='square' bg={true} />
 
-    <>
-    
-      <Container fluid>
-        <div className='d-flex align-items-center'>
-          <FolderNav currentFolder={folder} />
-          <AddFolder currentFolder={folder} />
-          
-          {childFolders.length == 0 && folder.parentId == null && folder.id!=null &&  (
-            <Deffolders currentFolder={folder} />
-          )}
-          {folder.id!=null &&  ( <Sharelink currentFolder={folder} /> )}
-          {folder.id!=null &&  ( <Deletefolder currentFolder={folder} /> )}
-          {folder.id!=null &&  ( <AddFile currentFolder={folder} /> )}
-          {folder.id!=null &&  ( <Dropzone currentFolder={folder} /> )}
-        </div>
+        <Container fluid>
+          <div className='d-flex align-items-center'>
+            <FolderNav currentFolder={folder} />
+            <AddFolder currentFolder={folder} />
 
-        {childFolders.length > 0 && (
-          <div className='d-flex flex-wrap'>
-            {childFolders.map((childFolder) => (
-              <div
-                key={childFolder.id}
-                style={{ maxWidth: '250px' }}
-                className='p-2'
-              >
-                <Folder folder={childFolder}></Folder>
-              </div>
-            ))}
+            {childFolders.length == 0 &&
+              folder.parentId == null &&
+              folder.id != null && <Deffolders currentFolder={folder} />}
+            {folder.id != null && <Sharelink currentFolder={folder} />}
+            {folder.id != null && <Deletefolder currentFolder={folder} />}
+            {folder.id != null && <AddFile currentFolder={folder} />}
+            {folder.id != null && <Dropzone currentFolder={folder} />}
           </div>
-        )}
 
-        {childFolders.length > 0 && childFiles.length > 0 && <hr />}
-        {childFiles.length > 0 && (
-          <div className="d-flex flex-wrap">
-            {childFiles.map(childFile => (
-              <div
-                key={childFile.id}
-                style={{ maxWidth: "250px" }}
-                className="p-2"
-              >
-                <File file={childFile} />
-                <div id="root">
-                  
+          {childFolders.length > 0 && (
+            <div className='d-flex flex-wrap'>
+              {childFolders.map((childFolder) => (
+                <div
+                  key={childFolder.id}
+                  style={{ maxWidth: '250px' }}
+                  className='p-2'
+                >
+                  <Folder folder={childFolder}></Folder>
                 </div>
-              </div>
-            ))}
-          </div>
-        )}
-        
-      </Container>
-      <Navbar fixed='bottom' variant='light' bg='light'>
-        <Container className='ml-sm-2'>
-          <Nav.Link eventKey={2} href='copyright'>
-            &copy; Digital Course File Group 2
-          </Nav.Link>
-        </Container>
-      </Navbar>
-    </>
-  )
+              ))}
+            </div>
+          )}
 
-  }else{
+          {childFolders.length > 0 && childFiles.length > 0 && <hr />}
+          {childFiles.length > 0 && (
+            <div className='d-flex flex-wrap'>
+              {childFiles.map((childFile) => (
+                <div
+                  key={childFile.id}
+                  style={{ maxWidth: '250px' }}
+                  className='p-2'
+                >
+                  <File file={childFile} />
+                  <div id='root'></div>
+                </div>
+              ))}
+            </div>
+          )}
+        </Container>
+        <Navbar fixed='bottom' variant='light' bg='light'>
+          <Container className='ml-sm-2'>
+            <Nav.Link eventKey={2} href='copyright'>
+              &copy; Digital Course File Group 2
+            </Nav.Link>
+          </Container>
+        </Navbar>
+      </>
+    )
+  } else {
     return null
   }
-
-  
 }
 
 export default Hero
diff --git a/digital-course-file/src/user/Login.js b/digital-course-file/src/user/Login.js
index 57b3620..ea16038 100644
--- a/digital-course-file/src/user/Login.js
+++ b/digital-course-file/src/user/Login.js
@@ -2,7 +2,7 @@ import React from 'react'
 import GoogleButton from 'react-google-button'
 import GithubButton from 'react-github-login-button'
 import { Link } from 'react-router-dom'
-
+import ParticlesBg from 'particles-bg'
 
 const Login = (props) => {
   const {
@@ -20,9 +20,8 @@ const Login = (props) => {
     githubsignin,
   } = props
 
-  
   return (
-    <section className='login'>
+    <section>
       <div className='loginContainer'>
         <label>UserName</label>
         <input
@@ -46,7 +45,9 @@ const Login = (props) => {
         <div className='btnContainer'>
           {hasAccount ? (
             <>
-              <button  name='signin' onClick={handleLogin}>Sign In</button>
+              <button name='signin' onClick={handleLogin}>
+                Sign In
+              </button>
               <div className='w-100 text-center mt-3'>
                 <Link to='/forgot-password'>Forgot Password</Link>
               </div>
@@ -62,8 +63,10 @@ const Login = (props) => {
             </>
           ) : (
             <>
-              <button name='signup' onClick={handleSignup}>Sign up</button>
-              
+              <button name='signup' onClick={handleSignup}>
+                Sign up
+              </button>
+
               <p>
                 Have an account ?{' '}
                 <span onClick={() => setHasAccount(!hasAccount)}>Sign in</span>
@@ -78,6 +81,8 @@ const Login = (props) => {
           )}
         </div>
       </div>
+
+      <ParticlesBg type='cobweb' bg={true} />
     </section>
   )
 }
diff --git a/digital-course-file/src/user/Signin.js b/digital-course-file/src/user/Signin.js
index 6a4b35e..1cc6cbb 100644
--- a/digital-course-file/src/user/Signin.js
+++ b/digital-course-file/src/user/Signin.js
@@ -81,8 +81,6 @@ const Signin = () => {
     setPasswordError('')
   }
 
-  
-
   const handleLogin = () => {
     clearErrors()
     fire
diff --git a/digital-course-file/src/user/copyright.js b/digital-course-file/src/user/copyright.js
index 97f91f5..293643e 100644
--- a/digital-course-file/src/user/copyright.js
+++ b/digital-course-file/src/user/copyright.js
@@ -1,58 +1,54 @@
 import React from 'react'
-import {
-  Navbar,
-  Nav,
-  Form,
-  FormControl,
-  Button,
-  Container,
-} from 'react-bootstrap'
+import ParticlesBg from 'particles-bg'
 
 export default function copyright() {
-  return <>
-  <h2>DEVELOPERS</h2>
-  <h3>Ganapathi Subramanyam Jayam</h3>
-  <p>Contact : jayam.ganapathi12@gmail.com</p>
-  <p>Website : https://ganapathi12.github.io/</p>
-  <p>Github : @ganapathi12</p>
-  <p>From : India</p>
-  <br/>
-  <h3>Balaji D</h3>
-  <p>Contact : balajidass07@gmail.com</p>
-  <p>Website : https://balajidass07.github.io/</p>
-  <p>Github : @balajidass07</p>
-  <p>From : India</p>
-  <br/>
-  <h3>Nidharshan A</h3>
-  <p>Contact : nidharshan2001@gmail.com</p>
-  <p>Website : https://cbenu4cse18036.github.io/</p>
-  <p>Github : @cbenu4cse18036</p>
-  <p>From : India</p>
-  <br/>
-  <h3>Nishita Dash</h3>
-  <p>Contact : nishita73081@gmail.com</p>
-  <p>Website : https://nishitadash.github.io/</p>
-  <p>Github : @nishitadash</p>
-  <p>From : India</p>
-  <br/>
-  <h3>Sudhamshu Akula</h3>
-  <p>Contact : sudhamshakula@gmail.com</p>
-  <p>Website : https://akula0611.github.io/</p>
-  <p>Github : @Akula0611</p>
-  <p>From : India</p>
-  <br/>
-  <h3>Asritha V</h3>
-  <p>Contact : asrithavemireddu989@gmail.com</p>
-  <p>Website : https://asrithareddy.github.io/</p>
-  <p>Github : @asritha reddy</p>
-  <p>From : India</p>
-  <br/>
-  <h2>THANKS</h2>
-  <p>Mr. Dr. Venkataraman D (CSE) </p>
-  <br/>
-  <h2>SITE</h2>
-  <p>Language: English</p>
-  <p>Components: Firebase, React js</p>
-  <p>Editor: vscode</p>
-  </>
+  return (
+    <>
+      <ParticlesBg type='color' bg={true} />
+      <h2>DEVELOPERS</h2>
+      <h3>Ganapathi Subramanyam Jayam</h3>
+      <p>Contact : jayam.ganapathi12@gmail.com</p>
+      <p>Website : https://ganapathi12.github.io/</p>
+      <p>Github : @ganapathi12</p>
+      <p>From : India</p>
+      <br />
+      <h3>Balaji D</h3>
+      <p>Contact : balajidass07@gmail.com</p>
+      <p>Website : https://balajidass07.github.io/</p>
+      <p>Github : @balajidass07</p>
+      <p>From : India</p>
+      <br />
+      <h3>Nidharshan A</h3>
+      <p>Contact : nidharshan2001@gmail.com</p>
+      <p>Website : https://cbenu4cse18036.github.io/</p>
+      <p>Github : @cbenu4cse18036</p>
+      <p>From : India</p>
+      <br />
+      <h3>Nishita Dash</h3>
+      <p>Contact : nishita73081@gmail.com</p>
+      <p>Website : https://nishitadash.github.io/</p>
+      <p>Github : @nishitadash</p>
+      <p>From : India</p>
+      <br />
+      <h3>Sudhamshu Akula</h3>
+      <p>Contact : sudhamshakula@gmail.com</p>
+      <p>Website : https://akula0611.github.io/</p>
+      <p>Github : @Akula0611</p>
+      <p>From : India</p>
+      <br />
+      <h3>Asritha V</h3>
+      <p>Contact : asrithavemireddu989@gmail.com</p>
+      <p>Website : https://asrithareddy.github.io/</p>
+      <p>Github : @asritha reddy</p>
+      <p>From : India</p>
+      <br />
+      <h2>THANKS</h2>
+      <p>Mr. Dr. Venkataraman D (CSE) </p>
+      <br />
+      <h2>SITE</h2>
+      <p>Language: English</p>
+      <p>Components: Firebase, React js</p>
+      <p>Editor: vscode</p>
+    </>
+  )
 }
-- 
GitLab