refactor: update images

src/components/header/AppHeaderDropdown.js

@@ -22,11 +22,13 @@ import {
 } from '@coreui/icons'
 import CIcon from '@coreui/icons-react'
 
+import avatar8 from './../../assets/images/avatars/8.jpg'
+
 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={avatar8} 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

@@ -1,6 +1,9 @@
 import React from 'react'
 import {
+  CCard,
+  CCardBody,
   CCardGroup,
+  CCardHeader,
   CCol,
   CLink,
   CRow,
@@ -26,6 +29,7 @@ import {
   cilUserFollow,
 } from '@coreui/icons'
 import { CChartBar, CChartLine } from '@coreui/react-chartjs'
+import { DocsExample } from 'src/components'
 
 import WidgetsBrand from './WidgetsBrand'
 import WidgetsDropdown from './WidgetsDropdown'
@@ -34,8 +38,13 @@ const Widgets = () => {
   const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
 
   return (
-    <>
+    <CCard>
+      <CCardHeader>Widgets</CCardHeader>
+      <CCardBody>
+        <DocsExample href="/components/widgets/#cwidgetstatsa">
           <WidgetsDropdown />
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsb">
           <CRow>
             <CCol xs={12} sm={6} lg={3}>
               <CWidgetStatsB
@@ -73,6 +82,10 @@ const Widgets = () => {
                 text="Lorem ipsum dolor sit amet enim."
               />
             </CCol>
+          </CRow>
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsb">
+          <CRow>
             <CCol xs={12} sm={6} lg={3}>
               <CWidgetStatsB
                 className="mb-4"
@@ -89,7 +102,6 @@ const Widgets = () => {
                 className="mb-4"
                 color="info"
                 inverse
-            textColor="white"
                 value="12.124"
                 title="Widget title"
                 progress={{ value: 89.9 }}
@@ -101,7 +113,6 @@ const Widgets = () => {
                 className="mb-4"
                 color="warning"
                 inverse
-            textColor="white"
                 value="$98.111,00"
                 title="Widget title"
                 progress={{ value: 89.9 }}
@@ -113,7 +124,6 @@ const Widgets = () => {
                 className="mb-4"
                 color="primary"
                 inverse
-            textColor="white"
                 value="2 TB"
                 title="Widget title"
                 progress={{ value: 89.9 }}
@@ -121,6 +131,8 @@ const Widgets = () => {
               />
             </CCol>
           </CRow>
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatse">
           <CRow>
             <CCol sm={4} lg={2}>
               <CWidgetStatsE
@@ -579,6 +591,8 @@ const Widgets = () => {
               />
             </CCol>
           </CRow>
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsf">
           <CRow>
             <CCol xs={12} sm={6} lg={3}>
               <CWidgetStatsF
@@ -616,6 +630,10 @@ const Widgets = () => {
                 color="danger"
               />
             </CCol>
+          </CRow>
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsf">
+          <CRow>
             <CCol xs={12} sm={6} lg={3}>
               <CWidgetStatsF
                 className="mb-3"
@@ -696,6 +714,10 @@ const Widgets = () => {
                 }
               />
             </CCol>
+          </CRow>
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsf">
+          <CRow>
             <CCol xs={12} sm={6} lg={3}>
               <CWidgetStatsF
                 className="mb-3"
@@ -737,8 +759,14 @@ const Widgets = () => {
               />
             </CCol>
           </CRow>
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsd">
           <WidgetsBrand />
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsd">
           <WidgetsBrand withCharts />
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsc">
           <CCardGroup className="mb-4">
             <CWidgetStatsC
               icon={<CIcon icon={cilPeople} height={36} />}
@@ -771,6 +799,8 @@ const Widgets = () => {
               progress={{ color: 'danger', value: 75 }}
             />
           </CCardGroup>
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsc">
           <CRow>
             <CCol sm={6} md={2}>
               <CWidgetStatsC
@@ -827,6 +857,8 @@ const Widgets = () => {
               />
             </CCol>
           </CRow>
+        </DocsExample>
+        <DocsExample href="/components/widgets/#cwidgetstatsc">
           <CRow>
             <CCol sm={6} md={2}>
               <CWidgetStatsC
@@ -895,7 +927,9 @@ const Widgets = () => {
               />
             </CCol>
           </CRow>
-    </>
+        </DocsExample>
+      </CCardBody>
+    </CCard>
   )
 }
 

src/views/dashboard/Dashboard.js

@@ -44,6 +44,13 @@ import {
   cilUserFemale,
 } from '@coreui/icons'
 
+import avatar1 from './../../assets/images/avatars/1.jpg'
+import avatar2 from './../../assets/images/avatars/2.jpg'
+import avatar3 from './../../assets/images/avatars/3.jpg'
+import avatar4 from './../../assets/images/avatars/4.jpg'
+import avatar5 from './../../assets/images/avatars/5.jpg'
+import avatar6 from './../../assets/images/avatars/6.jpg'
+
 const WidgetsDropdown = lazy(() => import('../components/widgets/WidgetsDropdown.js'))
 const WidgetsBrand = lazy(() => import('../components/widgets/WidgetsBrand.js'))
 
@@ -397,7 +404,7 @@ const Dashboard = () => {
                 <CTableBody>
                   <CTableRow>
                     <CTableDataCell className="text-center">
-                      <CAvatar size="md" src="/avatars/1.jpg" status="success" />
+                      <CAvatar size="md" src={avatar1} status="success" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div>Yiorgos Avraamu</div>
@@ -431,7 +438,7 @@ const Dashboard = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell className="text-center">
-                      <CAvatar size="md" src="/avatars/2.jpg" status="danger" />
+                      <CAvatar size="md" src={avatar2} status="danger" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div>Avram Tarasios</div>
@@ -465,7 +472,7 @@ const Dashboard = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell className="text-center">
-                      <CAvatar size="md" src="/avatars/3.jpg" status="warning" />
+                      <CAvatar size="md" src={avatar3} status="warning" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div>Quintin Ed</div>
@@ -499,7 +506,7 @@ const Dashboard = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell className="text-center">
-                      <CAvatar size="md" src="/avatars/4.jpg" status="secondary" />
+                      <CAvatar size="md" src={avatar4} status="secondary" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div>Enéas Kwadwo</div>
@@ -533,7 +540,7 @@ const Dashboard = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell className="text-center">
-                      <CAvatar size="md" src="/avatars/5.jpg" status="success" />
+                      <CAvatar size="md" src={avatar5} status="success" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div>Agapetus Tadeáš</div>
@@ -567,7 +574,7 @@ const Dashboard = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell className="text-center">
-                      <CAvatar size="md" src="/avatars/6.jpg" status="danger" />
+                      <CAvatar size="md" src={avatar6} status="danger" />
                     </CTableDataCell>
                     <CTableDataCell>
                       <div>Friderik Dávid</div>