refactor: update views

src/_nav.js

@@ -8,7 +8,7 @@ const _nav = [
     as: NavLink,
     anchor: 'Dashboard',
     to: '/dashboard',
-    icon: <CIcon name="cil-speedometer" customClasses="nav-icon" />,
+    icon: <CIcon name="cil-speedometer" customClassName="nav-icon" />,
     badge: {
       color: 'info',
       text: 'NEW',
@@ -23,14 +23,14 @@ const _nav = [
     as: NavLink,
     anchor: 'Colors',
     to: '/theme/colors',
-    icon: <CIcon name="cil-drop" customClasses="nav-icon" />,
+    icon: <CIcon name="cil-drop" customClassName="nav-icon" />,
   },
   {
     _component: 'CNavItem',
     as: NavLink,
     anchor: 'Typography',
     to: '/theme/typography',
-    icon: <CIcon name="cil-pencil" customClasses="nav-icon" />,
+    icon: <CIcon name="cil-pencil" customClassName="nav-icon" />,
   },
   {
     _component: 'CNavTitle',
@@ -41,7 +41,7 @@ const _nav = [
     as: NavLink,
     anchor: 'Base',
     to: '/to',
-    icon: <CIcon name="cil-puzzle" customClasses="nav-icon" />,
+    icon: <CIcon name="cil-puzzle" customClassName="nav-icon" />,
     items: [
       {
         _component: 'CNavItem',
@@ -126,7 +126,7 @@ const _nav = [
   {
     _component: 'CNavGroup',
     anchor: 'Buttons',
-    icon: <CIcon name="cil-cursor" customClasses="nav-icon" />,
+    icon: <CIcon name="cil-cursor" customClassName="nav-icon" />,
     items: [
       {
         _component: 'CNavItem',
@@ -151,7 +151,7 @@ const _nav = [
   {
     _component: 'CNavGroup',
     anchor: 'Forms',
-    icon: <CIcon name="cil-notes" customClasses="nav-icon" />,
+    icon: <CIcon name="cil-notes" customClassName="nav-icon" />,
     items: [
       {
         _component: 'CNavItem',
@@ -208,12 +208,12 @@ const _nav = [
     as: NavLink,
     anchor: 'Charts',
     to: '/charts',
-    icon: <CIcon name="cil-chart-pie" customClasses="nav-icon" />,
+    icon: <CIcon name="cil-chart-pie" customClassName="nav-icon" />,
   },
   {
     _component: 'CNavGroup',
     anchor: 'Icons',
-    icon: <CIcon name="cil-star" customClasses="nav-icon" />,
+    icon: <CIcon name="cil-star" customClassName="nav-icon" />,
     items: [
       {
         _component: 'CNavItem',
@@ -242,7 +242,7 @@ const _nav = [
   {
     _component: 'CNavGroup',
     anchor: 'Notifications',
-    icon: <CIcon name="cil-bell" customClasses="nav-icon" />,
+    icon: <CIcon name="cil-bell" customClassName="nav-icon" />,
     items: [
       {
         _component: 'CNavItem',
@@ -275,7 +275,7 @@ const _nav = [
     as: NavLink,
     anchor: 'Widgets',
     to: '/widgets',
-    icon: <CIcon name="cil-calculator" customClasses="nav-icon" />,
+    icon: <CIcon name="cil-calculator" customClassName="nav-icon" />,
     badge: {
       color: 'info',
       text: 'NEW',
@@ -288,7 +288,7 @@ const _nav = [
   {
     _component: 'CNavGroup',
     anchor: 'Pages',
-    icon: <CIcon name="cil-star" customClasses="nav-icon" />,
+    icon: <CIcon name="cil-star" customClassName="nav-icon" />,
     items: [
       {
         _component: 'CNavItem',

src/assets/icons/index.js

@@ -35,6 +35,7 @@ import {
   cilAlignLeft,
   cilAlignRight,
   cilApplicationsSettings,
+  cilArrowBottom,
   cilArrowRight,
   cilArrowTop,
   cilAsterisk,
@@ -138,6 +139,7 @@ export const icons = Object.assign(
     cilAlignLeft,
     cilAlignRight,
     cilApplicationsSettings,
+    cilArrowBottom,
     cilArrowRight,
     cilArrowTop,
     cilAsterisk,

src/components/header/AppHeaderDropdown.js

@@ -15,7 +15,7 @@ const AppHeaderDropdown = () => {
   return (
     <CDropdown variant="nav-item">
       <CDropdownToggle placement="bottom-end" className="py-0" caret={false}>
-        <CAvatar src="avatars/8.jpg" size="md" />
+        <CAvatar src="/avatars/8.jpg" size="md" />
       </CDropdownToggle>
       <CDropdownMenu className="pt-0" placement="bottom-end">
         <CDropdownHeader className="bg-light fw-semibold py-2">Account</CDropdownHeader>

src/views/components/widgets/Widgets.js

@@ -117,7 +117,7 @@ const Widgets = () => {
         <CCol xs="12" sm="6" lg="3">
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} name="cil-settings" className="icon icon-xl" />}
+            icon={<CIcon width={24} name="cil-settings" size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -127,7 +127,7 @@ const Widgets = () => {
         <CCol xs="12" sm="6" lg="3">
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} name="cil-user" className="icon icon-xl" />}
+            icon={<CIcon width={24} name="cil-user" size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -137,7 +137,7 @@ const Widgets = () => {
         <CCol xs="12" sm="6" lg="3">
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} name="cil-moon" className="icon icon-xl" />}
+            icon={<CIcon width={24} name="cil-moon" size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -147,7 +147,7 @@ const Widgets = () => {
         <CCol xs="12" sm="6" lg="3">
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} name="cil-bell" className="icon icon-xl" />}
+            icon={<CIcon width={24} name="cil-bell" size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -157,7 +157,7 @@ const Widgets = () => {
         <CCol xs="12" sm="6" lg="3">
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} name="cil-settings" className="icon icon-xl" />}
+            icon={<CIcon width={24} name="cil-settings" size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -178,7 +178,7 @@ const Widgets = () => {
         <CCol xs="12" sm="6" lg="3">
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} name="cil-laptop" className="icon icon-xl" />}
+            icon={<CIcon width={24} name="cil-laptop" size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -199,7 +199,7 @@ const Widgets = () => {
         <CCol xs="12" sm="6" lg="3">
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} name="cil-moon" className="icon icon-xl" />}
+            icon={<CIcon width={24} name="cil-moon" size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -220,7 +220,7 @@ const Widgets = () => {
         <CCol xs="12" sm="6" lg="3">
           <CWidgetIcon
             className="mb-3"
-            icon={<CIcon width={24} name="cil-bell" className="icon icon-xl" />}
+            icon={<CIcon width={24} name="cil-bell" size="xl" />}
             iconPadding={3}
             title="income"
             value="$1.999,50"
@@ -242,7 +242,7 @@ const Widgets = () => {
           <CWidgetIcon
             className="mb-3"
             padding={0}
-            icon={<CIcon width={24} name="cil-settings" className="icon icon-xl" />}
+            icon={<CIcon width={24} name="cil-settings" size="xl" />}
             iconPadding={4}
             title="income"
             value="$1.999,50"
@@ -253,7 +253,7 @@ const Widgets = () => {
           <CWidgetIcon
             className="mb-3"
             padding={0}
-            icon={<CIcon width={24} name="cil-user" className="icon icon-xl" />}
+            icon={<CIcon width={24} name="cil-user" size="xl" />}
             iconPadding={4}
             title="income"
             value="$1.999,50"
@@ -264,7 +264,7 @@ const Widgets = () => {
           <CWidgetIcon
             className="mb-3"
             padding={0}
-            icon={<CIcon width={24} name="cil-moon" className="icon icon-xl" />}
+            icon={<CIcon width={24} name="cil-moon" size="xl" />}
             iconPadding={4}
             title="income"
             value="$1.999,50"
@@ -275,7 +275,7 @@ const Widgets = () => {
           <CWidgetIcon
             className="mb-3"
             padding={0}
-            icon={<CIcon width={24} name="cil-bell" className="icon icon-xl" />}
+            icon={<CIcon width={24} name="cil-bell" size="xl" />}
             iconPadding={4}
             title="income"
             value="$1.999,50"
@@ -287,34 +287,34 @@ const Widgets = () => {
       <WidgetsBrand withCharts />
       <CCardGroup className="mb-4">
         <CWidgetProgressIcon
-          icon={<CIcon name="cil-people" className="icon icon-2xl" />}
+          icon={<CIcon name="cil-people" height="36" />}
           value="87.500"
           title="Visitors"
           progressColor="info"
           progressValue={75}
         />
         <CWidgetProgressIcon
-          icon={<CIcon name="cil-userFollow" className="icon icon-2xl" />}
+          icon={<CIcon name="cil-userFollow" height="36" />}
           value="385"
           title="New Clients"
           progressColor="success"
           progressValue={75}
         />
         <CWidgetProgressIcon
-          icon={<CIcon name="cil-basket" className="icon icon-2xl" />}
+          icon={<CIcon name="cil-basket" height="36" />}
           value="1238"
           title="Products sold"
           progressColor="warning"
           progressValue={75}
         />
         <CWidgetProgressIcon
-          icon={<CIcon name="cil-chartPie" className="icon icon-2xl" />}
+          icon={<CIcon name="cil-chartPie" height="36" />}
           value="28%"
           title="Returning Visitors"
           progressValue={75}
         />
         <CWidgetProgressIcon
-          icon={<CIcon name="cil-speedometer" className="icon icon-2xl" />}
+          icon={<CIcon name="cil-speedometer" height="36" />}
           value="5:34:11"
           title="Avg. Time"
           progressColor="danger"

src/views/components/widgets/WidgetsDropdown.js

@@ -19,8 +19,13 @@ const WidgetsDropdown = () => {
         <CWidgetDropdown
           className="mb-4"
           color="primary"
-          value="9.823"
-          title="Members online"
+          value="26K"
+          change={
+            <>
+              (-12.4% <CIcon name="cil-arrow-bottom" />)
+            </>
+          }
+          title="Users"
           action={
             <CDropdown alignment="end">
               <CDropdownToggle color="transparent" caret={false} className="p-0">
@@ -99,8 +104,13 @@ const WidgetsDropdown = () => {
         <CWidgetDropdown
           className="mb-4"
           color="info"
-          value="9.823"
-          title="Members online"
+          value="$6.200"
+          change={
+            <>
+              (40.9% <CIcon name="cil-arrow-top" />)
+            </>
+          }
+          title="Income"
           action={
             <CDropdown alignment="end">
               <CDropdownToggle color="transparent" caret={false} className="p-0">
@@ -130,6 +140,21 @@ const WidgetsDropdown = () => {
                   },
                 ],
               }}
+              getDatasetAtEvent={(dataset, event) => {
+                console.log('init1')
+                console.log(dataset)
+                console.log(event)
+              }}
+              getElementAtEvent={(element, event) => {
+                console.log('init2')
+                console.log(element)
+                console.log(event)
+              }}
+              getElementsAtEvent={(element, event) => {
+                console.log('init3')
+                console.log(element)
+                console.log(event)
+              }}
               options={{
                 plugins: {
                   legend: {
@@ -178,8 +203,13 @@ const WidgetsDropdown = () => {
         <CWidgetDropdown
           className="mb-4"
           color="warning"
-          value="9.823"
-          title="Members online"
+          value="2.49%"
+          change={
+            <>
+              (84.7% <CIcon name="cil-arrow-top" />)
+            </>
+          }
+          title="Conversion Rate"
           action={
             <CDropdown alignment="end">
               <CDropdownToggle color="transparent" caret={false} className="p-0">
@@ -244,8 +274,13 @@ const WidgetsDropdown = () => {
         <CWidgetDropdown
           className="mb-4"
           color="danger"
-          value="9.823"
-          title="Members online"
+          value="44K"
+          change={
+            <>
+              (-23.6% <CIcon name="cil-arrow-bottom" />)
+            </>
+          }
+          title="Sessions"
           action={
             <CDropdown alignment="end">
               <CDropdownToggle color="transparent" caret={false} className="p-0">

src/views/dashboard/Dashboard.js

@@ -146,28 +146,28 @@ const Dashboard = () => {
           />
         </CCardBody>
         <CCardFooter>
-          <CRow className="text-center">
-            <CCol md sm="12" className="mb-sm-2 mb-0">
+          <CRow xs={{ cols: 1 }} md={{ cols: 5 }} className="text-center">
+            <CCol className="mb-sm-2 mb-0">
               <div className="text-medium-emphasis">Visits</div>
               <strong>29.703 Users (40%)</strong>
               <CProgress thin className="mt-2" precision={1} color="success" value={40} />
             </CCol>
-            <CCol md sm="12" className="mb-sm-2 mb-0">
+            <CCol className="mb-sm-2 mb-0">
               <div className="text-medium-emphasis">Unique</div>
               <strong>24.093 Users (20%)</strong>
               <CProgress thin className="mt-2" precision={1} color="info" value={40} />
             </CCol>
-            <CCol md sm="12" className="mb-sm-2 mb-0">
+            <CCol className="mb-sm-2 mb-0">
               <div className="text-medium-emphasis">Pageviews</div>
               <strong>78.706 Views (60%)</strong>
               <CProgress thin className="mt-2" precision={1} color="warning" value={40} />
             </CCol>
-            <CCol md sm="12" className="mb-sm-2 mb-0">
+            <CCol className="mb-sm-2 mb-0">
               <div className="text-medium-emphasis">New Users</div>
               <strong>22.123 Users (80%)</strong>
               <CProgress thin className="mt-2" precision={1} color="danger" value={40} />
             </CCol>
-            <CCol md sm="12" className="mb-sm-2 mb-0">
+            <CCol className="mb-sm-2 mb-0">
               <div className="text-medium-emphasis">Bounce Rate</div>
               <strong>Average Rate (40.15%)</strong>
               <CProgress thin className="mt-2" precision={1} value={40} />
@@ -375,7 +375,7 @@ const Dashboard = () => {
                 <CTableBody>
                   <CTableRow>
                     <CTableDataCell className="text-center">
-                      <CAvatar size="md" src="avatars/1.jpg" status="success" />
+                      <CAvatar size="md" src="/avatars/1.jpg" status="success" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div>Yiorgos Avraamu</div>
@@ -409,7 +409,7 @@ const Dashboard = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell className="text-center">
-                      <CAvatar size="md" src="avatars/2.jpg" status="danger" />
+                      <CAvatar size="md" src="/avatars/2.jpg" status="danger" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div>Avram Tarasios</div>
@@ -443,7 +443,7 @@ const Dashboard = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell className="text-center">
-                      <CAvatar size="md" src="avatars/3.jpg" status="warning" />
+                      <CAvatar size="md" src="/avatars/3.jpg" status="warning" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div>Quintin Ed</div>
@@ -477,7 +477,7 @@ const Dashboard = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell className="text-center">
-                      <CAvatar size="md" src="avatars/4.jpg" status="secondary" />
+                      <CAvatar size="md" src="/avatars/4.jpg" status="secondary" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div>Enéas Kwadwo</div>
@@ -511,7 +511,7 @@ const Dashboard = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell className="text-center">
-                      <CAvatar size="md" src="avatars/5.jpg" status="success" />
+                      <CAvatar size="md" src="/avatars/5.jpg" status="success" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div>Agapetus Tadeáš</div>
@@ -545,7 +545,7 @@ const Dashboard = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell className="text-center">
-                      <CAvatar size="md" src="avatars/6.jpg" status="danger" />
+                      <CAvatar size="md" src="/avatars/6.jpg" status="danger" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div>Friderik Dávid</div>

src/views/theme/colors/Colors.js

@@ -84,40 +84,6 @@ const Colors = () => {
           </CRow>
         </CCardBody>
       </CCard>
-      <CCard className="mb-4">
-        <CCardHeader>Grays</CCardHeader>
-        <CCardBody>
-          <CRow className="mb-3">
-            <ThemeColor className="bg-gray-100">
-              <h6>Gray 100 Color</h6>
-            </ThemeColor>
-            <ThemeColor className="bg-gray-200">
-              <h6>Gray 200 Color</h6>
-            </ThemeColor>
-            <ThemeColor className="bg-gray-300">
-              <h6>Gray 300 Color</h6>
-            </ThemeColor>
-            <ThemeColor className="bg-gray-400">
-              <h6>Gray 400 Color</h6>
-            </ThemeColor>
-            <ThemeColor className="bg-gray-500">
-              <h6>Gray 500 Color</h6>
-            </ThemeColor>
-            <ThemeColor className="bg-gray-600">
-              <h6>Gray 600 Color</h6>
-            </ThemeColor>
-            <ThemeColor className="bg-gray-700">
-              <h6>Gray 700 Color</h6>
-            </ThemeColor>
-            <ThemeColor className="bg-gray-800">
-              <h6>Gray 800 Color</h6>
-            </ThemeColor>
-            <ThemeColor className="bg-gray-900">
-              <h6>Gray 900 Color</h6>
-            </ThemeColor>
-          </CRow>
-        </CCardBody>
-      </CCard>
     </>
   )
 }