changes are done

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

@@ -31,11 +31,12 @@ 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
@@ -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/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/scss/_theme.scss

@@ -4,10 +4,10 @@ body {
 
 .wrapper {
   width: 100%;
-  @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
-  @include ltr-rtl("padding-right", var(--cui-sidebar-occupy-end, 0));
+  @include ltr-rtl('padding-left', var(--cui-sidebar-occupy-start, 0));
+  @include ltr-rtl('padding-right', var(--cui-sidebar-occupy-end, 0));
   will-change: auto;
-  @include transition(padding .15s);
+  @include transition(padding 0.15s);
 }
 
 .header > .container-fluid,
@@ -33,13 +33,13 @@ body {
 }
 
 .sidebar-toggler {
-  @include ltr-rtl("margin-left", auto);
+  @include ltr-rtl('margin-left', auto);
 }
 
 .sidebar-narrow,
 .sidebar-narrow-unfoldable:not(:hover) {
   .sidebar-toggler {
-    @include ltr-rtl("margin-right", auto);
+    @include ltr-rtl('margin-right', auto);
   }
 }
 

src/views/orders/Order.js

@@ -125,7 +125,7 @@ const Order = () => {
                   <TableCell>
                     <Button
                       variant="contained"
-                      color="primary"
+                      color="success"
                       onClick={() => navigate(`/orders-placed/${order._id}`)}
                     >
                       View

src/views/orders/OrderDetails.js

@@ -89,7 +89,7 @@ const OrderDetails = () => {
           <Typography variant="h4" sx={{ flexGrow: 1, textAlign: 'center' }}>
             Order ID: {uniqueId}
           </Typography>
-          <Button color="primary" onClick={() => navigate('/orders-placed')} variant="contained">
+          <Button color="success" onClick={() => navigate('/orders-placed')} variant="contained">
             Back
           </Button>
         </Box>

src/views/pages/Kyc/kyc.js

@@ -221,7 +221,7 @@ const Kyc = () => {
                         <Tooltip title="View">
                           <Button
                             sx={{ mr: '1rem', textTransform: 'unset' }}
-                            color="primary"
+                            color="warning"
                             variant="contained"
                             onClick={() => handleViewClick(row._id)}
                           >

src/views/pages/Kyc/kycDetails.js

@@ -183,7 +183,7 @@ const KycDetails = () => {
         </Typography>
         <Button
           onClick={() => navigate('/kyc')}
-          color="primary"
+          color="warning"
           sx={{ padding: '0.5rem 1rem' }}
           variant="contained"
         >

src/views/pages/cart/addressAndPayment.js

@@ -155,7 +155,7 @@ const AddressAndPayment = ({
           <Button
             variant="contained"
             size="large"
-            color="primary"
+            color="warning"
             onClick={handleReviewOrderClick}
             sx={{ width: '200px' }}
           >

src/views/pages/cart/reviewOrder.js

@@ -180,7 +180,7 @@ const ReviewOrder = ({
           </Grid>
         </Grid>
         <Box display={'flex'} justifyContent={'center'} mt={4} gap={10}>
-          <Button variant="contained" color="primary" onClick={(e) => handleTabChange(e, 0)}>
+          <Button variant="contained" color="warning" onClick={(e) => handleTabChange(e, 0)}>
             Update Order
           </Button>
           <Button variant="contained" color="success" onClick={handleConfirmOrder}>

src/views/pages/cart/shopingCart.js

@@ -175,7 +175,7 @@ const ShoppingCart = ({ handleTabChange }) => {
         <Button
           variant="contained"
           size="large"
-          color="primary"
+          color="warning"
           onClick={(e) => handleTabChange(e, 1)}
           sx={{
             width: '200px',

src/views/pages/rdOrders/invoiceView.js

@@ -156,7 +156,7 @@ const ViewInvoices = () => {
         <Typography variant="h4" sx={{ flexGrow: 1, textAlign: 'center' }}>
           Invoice Id : {invoice?.invoiceId}
         </Typography>
-        <Button color="primary" onClick={() => navigate(-1)} variant="contained">
+        <Button color="warning" onClick={() => navigate(-1)} variant="contained">
           Back
         </Button>
       </Box>
@@ -370,7 +370,21 @@ const ViewInvoices = () => {
           )}
 
           {invoiceStatus && (
-            <Button variant="contained" color="primary" onClick={handleUpdateClick} sx={{ mt: 2 }}>
+            <Button
+              sx={{
+                backgroundColor: 'white',
+                color: 'black',
+                textTransform: 'unset',
+                mt: 2,
+                '&:hover': {
+                  backgroundColor: '#0B0689',
+                  color: 'white',
+                },
+              }}
+              variant="contained"
+              color="primary"
+              onClick={handleUpdateClick}
+            >
               Update Status
             </Button>
           )}

src/views/pages/rdOrders/viewOrders.js

@@ -497,7 +497,21 @@ const ViewOrders = () => {
           )}
 
           {orderStatus && (
-            <Button variant="contained" color="primary" onClick={handleUpdateClick} sx={{ mt: 2 }}>
+            <Button
+              sx={{
+                backgroundColor: 'white',
+                color: 'black',
+                textTransform: 'unset',
+                mt: 2,
+                '&:hover': {
+                  backgroundColor: '#0B0689',
+                  color: 'white',
+                },
+              }}
+              variant="contained"
+              color="primary"
+              onClick={handleUpdateClick}
+            >
               Update Status
             </Button>
           )}

src/views/pages/stock/stockTable.js

@@ -138,7 +138,19 @@ function StockTable() {
         />
       </TableContainer>
       <Box mt={2} display="flex" justifyContent="flex-end">
-        <Button variant="contained" color="primary" onClick={handleSubmit}>
+        <Button
+          sx={{
+            backgroundColor: 'white',
+            color: 'black',
+            textTransform: 'unset',
+            '&:hover': {
+              backgroundColor: '#0B0689',
+              color: 'white',
+            },
+          }}
+          variant="contained"
+          onClick={handleSubmit}
+        >
           Update Stock
         </Button>
       </Box>

src/views/shops/Shop.js

@@ -159,16 +159,15 @@ const Shop = () => {
                   ))}
                 </TableBody>
               </Table>
+              <Box my={3} display="flex" justifyContent="center">
+                <Pagination
+                  count={Math.ceil(totalData / itemsPerPage)}
+                  page={currentPage}
+                  onChange={handlePageChange}
+                  color="primary"
+                />
+              </Box>
             </TableContainer>
-
-            <Box mt={3} display="flex" justifyContent="center">
-              <Pagination
-                count={Math.ceil(totalData / itemsPerPage)}
-                page={currentPage}
-                onChange={handlePageChange}
-                color="primary"
-              />
-            </Box>
           </>
         )}
       </Box>

src/views/shops/shopCard.js

@@ -20,7 +20,7 @@ const ShopCard = ({ item }) => {
     <div>
       <Button
         variant="contained"
-        color="primary"
+        color="warning"
         // fullWidth
         disabled={isProductInCart}
         onClick={handleAddToCart}