ui Updated

src/components/AppFooter.js

@@ -3,7 +3,7 @@ import { CFooter } from '@coreui/react'
 
 const AppFooter = () => {
   return (
-    <CFooter className="px-4">
+    <CFooter style={{ background: '#179FAF' }} className="px-4">
       {/* <div>
         <a href="https://coreui.io" target="_blank" rel="noopener noreferrer">
           CoreUI

src/components/AppHeader.js

@@ -45,7 +45,18 @@ const AppHeader = () => {
   }, [])
 
   return (
-    <CHeader position="sticky" className="mb-4 p-0" ref={headerRef}>
+    <CHeader
+      position="sticky"
+      style={{
+        background: '#B4D1E5',
+        border: 'none',
+        marginLeft: '2rem',
+        marginRight: '2rem',
+        borderRadius: '20px',
+        marginTop: '1rem',
+        marginBottom: '2rem',
+      }}
+    >
       <CContainer className="border-bottom px-4" fluid>
         <CHeaderToggler
           onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}

src/components/AppSidebar.js

@@ -13,7 +13,7 @@ import CIcon from '@coreui/icons-react'
 
 import { AppSidebarNav } from './AppSidebarNav'
 
-import logo from 'src/assets/logo.jpg'
+import logo from 'src/assets/Cheminova.png'
 import { sygnet } from 'src/assets/brand/sygnet'
 
 // sidebar nav config
@@ -31,18 +31,19 @@ const AppSidebar = () => {
       position="fixed"
       unfoldable={unfoldable}
       visible={sidebarShow}
+      style={{ background: '#179FAF' }}
       onVisibleChange={(visible) => {
         dispatch({ type: 'set', sidebarShow: visible })
       }}
     >
-      <CSidebarHeader className="border-bottom">
+      <CSidebarHeader>
         <CSidebarBrand to="/">
           {/* <CIcon customClassName="sidebar-brand-full" icon={logo} height={32} /> */}
           <img
             className="sidebar-brand-full"
             src={logo}
-            height={32}
-            style={{ marginLeft: '-0.8rem' }}
+            height={40}
+            // style={{ marginLeft: '-0.8rem' }}
           />
           <CIcon customClassName="sidebar-brand-narrow" icon={sygnet} height={32} />
         </CSidebarBrand>
@@ -52,7 +53,18 @@ const AppSidebar = () => {
           onClick={() => dispatch({ type: 'set', sidebarShow: false })}
         />
       </CSidebarHeader>
-      <AppSidebarNav items={navigation} />
+      <div
+        style={{
+          background: '#B4D1E5',
+          margin: '0.5rem',
+          border: 'none',
+          borderRadius: '20px',
+          height: '100%',
+        }}
+      >
+        <AppSidebarNav items={navigation} />
+      </div>
+
       <CSidebarFooter className="border-top d-none d-lg-flex">
         <CSidebarToggler
           onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}

src/components/AppSidebarNav.js

@@ -1,3 +1,79 @@
+// import React from 'react'
+// import { NavLink } from 'react-router-dom'
+// import PropTypes from 'prop-types'
+
+// import SimpleBar from 'simplebar-react'
+// import 'simplebar-react/dist/simplebar.min.css'
+
+// import { CBadge, CNavLink, CSidebarNav } from '@coreui/react'
+
+// export const AppSidebarNav = ({ items }) => {
+//   const navLink = (name, icon, badge, indent = false) => {
+//     return (
+//       <>
+//         {icon
+//           ? icon
+//           : indent && (
+//               <span className="nav-icon" >
+//                 <span className="nav-icon-bullet"></span>
+//               </span>
+//             )}
+//         {name && name}
+//         {badge && (
+//           <CBadge color={badge.color} style={{ color: 'red' }} className="ms-auto">
+//             {badge.text}
+//           </CBadge>
+//         )}
+//       </>
+//     )
+//   }
+
+//   const navItem = (item, index, indent = false) => {
+//     const { component, name, badge, icon, ...rest } = item
+//     const Component = component
+//     return (
+//       <Component as="div" key={index}>
+//         {rest.to || rest.href ? (
+//           <CNavLink style={{ background: 'blue' }} {...(rest.to && { as: NavLink })} {...rest}>
+//             {navLink(name, icon, badge, indent)}
+//           </CNavLink>
+//         ) : (
+//           navLink(name, icon, badge, indent)
+//         )}
+//       </Component>
+//     )
+//   }
+
+//   const navGroup = (item, index) => {
+//     const { component, name, icon, items, to, ...rest } = item
+//     const Component = component
+//     return (
+//       <Component
+//         style={{ background: 'blue' }}
+//         compact
+//         as="div"
+//         key={index}
+//         toggler={navLink(name, icon)}
+//         {...rest}
+//       >
+//         {item.items?.map((item, index) =>
+//           item.items ? navGroup(item, index) : navItem(item, index, true),
+//         )}
+//       </Component>
+//     )
+//   }
+
+//   return (
+//     <CSidebarNav as={SimpleBar}>
+//       {items &&
+//         items.map((item, index) => (item.items ? navGroup(item, index) : navItem(item, index)))}
+//     </CSidebarNav>
+//   )
+// }
+
+// AppSidebarNav.propTypes = {
+//   items: PropTypes.arrayOf(PropTypes.any).isRequired,
+// }
 import React from 'react'
 import { NavLink } from 'react-router-dom'
 import PropTypes from 'prop-types'
@@ -34,7 +110,19 @@ export const AppSidebarNav = ({ items }) => {
     return (
       <Component as="div" key={index}>
         {rest.to || rest.href ? (
-          <CNavLink {...(rest.to && { as: NavLink })} {...rest}>
+          <CNavLink
+            as={NavLink}
+            {...rest}
+            style={({ isActive }) => ({
+              backgroundColor: isActive ? '#0B0689' : 'white',
+              color: isActive ? 'white' : 'black',
+              display: 'flex',
+              alignItems: 'center',
+              padding: '10px 15px',
+              textDecoration: 'none',
+              marginBottom: '0.3rem',
+            })}
+          >
             {navLink(name, icon, badge, indent)}
           </CNavLink>
         ) : (
@@ -45,12 +133,12 @@ export const AppSidebarNav = ({ items }) => {
   }
 
   const navGroup = (item, index) => {
-    const { component, name, icon, items, to, ...rest } = item
+    const { component, name, icon, items, ...rest } = item
     const Component = component
     return (
       <Component compact as="div" key={index} toggler={navLink(name, icon)} {...rest}>
-        {item.items?.map((item, index) =>
-          item.items ? navGroup(item, index) : navItem(item, index, true),
+        {items?.map((subItem, subIndex) =>
+          subItem.items ? navGroup(subItem, subIndex) : navItem(subItem, subIndex, true),
         )}
       </Component>
     )

src/components/DocsCallout.js

@@ -10,7 +10,7 @@ const DocsCallout = (props) => {
   const _href = `https://coreui.io/react/docs/${href}`
 
   return (
-    <CCallout color="info" className="bg-white">
+    <CCallout>
       {content
         ? content
         : `A React ${name} component ${

src/components/header/AppHeaderDropdown.js

@@ -40,13 +40,13 @@ const AppHeaderDropdown = () => {
   const [user, setUser] = useState(null)
   const token = isAutheticated()
   const getData = async () => {
-    let res = await Axios.get(`/api/rd-get-me`, {
+    let res = await Axios.get(`/api/v1/user/details`, {
       headers: {
         Authorization: `Bearer ${token}`,
       },
     })
-    if (res.status === 200) {
-      setUser({ ...res.data.myData })
+    if (res.data.success) {
+      setUser({ ...res.data.user })
     }
   }
   useEffect(() => {

src/layout/DefaultLayout.js

@@ -3,7 +3,7 @@ import { AppContent, AppSidebar, AppFooter, AppHeader } from '../components/inde
 
 const DefaultLayout = () => {
   return (
-    <div>
+    <div style={{ background: '#179FAF' }}>
       <AppSidebar />
       <div className="wrapper d-flex flex-column min-vh-100">
         <AppHeader />

src/views/pages/forgetPassword.js

@@ -43,7 +43,10 @@ const ForgetPassword = () => {
   }
   return (
     <>
-      <div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+      <div
+        style={{ background: '#179FAF' }}
+        className="min-vh-100 d-flex flex-row align-items-center"
+      >
         <CContainer>
           <CRow className="justify-content-center">
             <CCol md={8}>

src/views/pages/login/Login.js

@@ -116,7 +116,10 @@ const Login = () => {
   }
 
   return (
-    <div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
+    <div
+      style={{ background: '#179FAF' }}
+      className=" min-vh-100 d-flex flex-row align-items-center"
+    >
       <CContainer>
         <CRow className="justify-content-center">
           <CCol md={8}>