From 70058e8c2912a83bef675c03c9507d5f275fc87f Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Wed, 13 Nov 2019 10:34:15 +0100
Subject: [PATCH] refactor: update base views

---
 src/containers/TheHeaderDropdownAccnt.vue |   2 +-
 src/views/Dashboard.vue                   | 617 +++++++++++-----------
 src/views/base/Cards.vue                  | 111 ++--
 src/views/base/Collapses.vue              |   2 +-
 src/views/base/ListGroups.vue             |  32 +-
 src/views/base/Table.vue                  |   1 +
 src/views/base/Tabs.vue                   |  12 +-
 src/views/charts/Charts.vue               |  42 +-
 src/views/pages/Login.vue                 |   4 +-
 src/views/users/Users.vue                 |  57 +-
 src/views/widgets/Widgets.vue             |  50 --
 11 files changed, 458 insertions(+), 472 deletions(-)

diff --git a/src/containers/TheHeaderDropdownAccnt.vue b/src/containers/TheHeaderDropdownAccnt.vue
index f995b1d3..58276057 100644
--- a/src/containers/TheHeaderDropdownAccnt.vue
+++ b/src/containers/TheHeaderDropdownAccnt.vue
@@ -78,6 +78,6 @@ export default {
 
 <style scoped>
   .c-icon {
-    margin-right: 0.5rem;
+    margin-right: 0.3rem;
   }
 </style>
\ No newline at end of file
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index da54744c..99a8d816 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -85,363 +85,368 @@
     <WidgetsBrand/>
     <CRow>
       <CCol md="12">
-        <CCard header-html="Traffic &amp; Sales" body-wrapper>
-          <CRow>
-            <CCol sm="12" lg="6">
-              <CRow>
-                <CCol sm="6">
-                  <CCallout color="info">
-                    <small class="text-muted">New Clients</small><br>
-                    <strong class="h4">9,123</strong>
-                  </CCallout>
-                </CCol>
-                <CCol sm="6">
-                  <CCallout color="danger">
-                    <small class="text-muted">Recurring Clients</small><br>
-                    <strong class="h4">22,643</strong>
-                  </CCallout>
-                </CCol>
-              </CRow>
-              <hr class="mt-0">
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
-                    Monday
-                  </span>
-                </div>
-                <div class="progress-group-bars">
-                  <CProgress
-                    class="progress-xs"
-                    color="info"
-                    :value="34"
-                  />
-                  <CProgress
-                    class="progress-xs"
-                    color="danger"
-                    :value="78"
-                  />
-                </div>
-              </div>
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
-                    Tuesday
-                  </span>
-                </div>
-                <div class="progress-group-bars">
-                  <CProgress
-                    class="progress-xs"
-                    :value="56"
-                    color="info"
-                  />
-                  <CProgress
-                    class="progress-xs"
-                    :value="94"
-                    color="danger"
-                  />
-                </div>
-              </div>
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
-                    Wednesday
-                  </span>
-                </div>
-                <div class="progress-group-bars">
-                  <CProgress
-                    class="progress-xs"
-                    :value="12"
-                    color="info"
-                  />
-                  <CProgress
-                    class="progress-xs"
-                    :value="67"
-                    color="danger"
-                  />
-                </div>
-              </div>
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
-                    Thursday
-                  </span>
-                </div>
-                <div class="progress-group-bars">
-                  <CProgress
-                    class="progress-xs"
-                    :value="43"
-                    color="info"
-                  />
-                  <CProgress
-                    class="progress-xs"
-                    :value="91"
-                    color="danger"
-                  />
-                </div>
-              </div>
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
-                    Friday
-                  </span>
-                </div>
-                <div class="progress-group-bars">
-                  <CProgress
-                    class="progress-xs"
-                    :value="22"
-                    color="info"
-                  />
-                  <CProgress
-                    class="progress-xs"
-                    :value="73"
-                    color="danger"
-                  />
-                </div>
-              </div>
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
-                    Saturday
-                  </span>
-                </div>
-                <div class="progress-group-bars">
-                  <CProgress
-                    class="progress-xs"
-                    :value="53"
-                    color="info"
-                  />
-                  <CProgress
-                    class="progress-xs"
-                    :value="82"
-                    color="danger"
-                  />
-                </div>
-              </div>
-              <div class="progress-group mb-4">
-                <div class="progress-group-prepend">
-                  <span class="progress-group-text">
-                    Sunday
-                  </span>
-                </div>
-                <div class="progress-group-bars">
-                  <CProgress
-                    class="progress-xs"
-                    :value="9"
-                    color="info"
-                  />
-                  <CProgress
-                    class="progress-xs"
-                    :value="69"
-                    color="danger"
-                  />
-                </div>
-              </div>
-              <div class="legend text-center">
-                <small>
-                  <sup><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
-                  New clients
-                  &nbsp;&nbsp;
-                  <sup><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
-                  Recurring clients
-                </small>
-              </div>
-            </CCol>
-            <CCol sm="12" lg="6">
-              <CRow>
-                <CCol sm="6">
-                  <CCallout color="warning">
-                    <small class="text-muted">Pageviews</small><br>
-                    <strong class="h4">78,623</strong>
-                  </CCallout>
-                </CCol>
-                <CCol sm="6">
-                  <CCallout color="success">
-                    <small class="text-muted">Organic</small><br>
-                    <strong class="h4">49,123</strong>
-                  </CCallout>
-                </CCol>
-              </CRow>
-              <hr class="mt-0">
-              <ul class="horizontal-bars type-2">
-                <div class="progress-group">
-                  <div class="progress-group-header">
-                    <CIcon name="user" class="progress-group-icon"/>
-                    <span class="title">Male</span>
-                    <span class="ml-auto font-weight-bold">43%</span>
+        <CCard>
+          <CCardHeader>
+            Traffic &amp; Sales
+          </CCardHeader>
+          <CCardBody>
+            <CRow>
+              <CCol sm="12" lg="6">
+                <CRow>
+                  <CCol sm="6">
+                    <CCallout color="info">
+                      <small class="text-muted">New Clients</small><br>
+                      <strong class="h4">9,123</strong>
+                    </CCallout>
+                  </CCol>
+                  <CCol sm="6">
+                    <CCallout color="danger">
+                      <small class="text-muted">Recurring Clients</small><br>
+                      <strong class="h4">22,643</strong>
+                    </CCallout>
+                  </CCol>
+                </CRow>
+                <hr class="mt-0">
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Monday
+                    </span>
                   </div>
                   <div class="progress-group-bars">
                     <CProgress
                       class="progress-xs"
-                      :value="43"
-                      color="warning"
+                      color="info"
+                      :value="34"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      color="danger"
+                      :value="78"
                     />
                   </div>
                 </div>
-                <div class="progress-group mb-5">
-                  <div class="progress-group-header">
-                    <CIcon name="user-female" class="progress-group-icon"/>
-                    <span class="title">Female</span>
-                    <span class="ml-auto font-weight-bold">37%</span>
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Tuesday
+                    </span>
                   </div>
                   <div class="progress-group-bars">
                     <CProgress
                       class="progress-xs"
-                      :value="37"
-                      color="warning"
+                      :value="56"
+                      color="info"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      :value="94"
+                      color="danger"
                     />
                   </div>
                 </div>
-                <div class="progress-group">
-                  <div class="progress-group-header">
-                    <CIcon name="globe-alt" class="progress-group-icon"/>
-                    <span class="title">Organic Search</span>
-                    <span class="ml-auto font-weight-bold">
-                      191,235<span class="text-muted small">(56%)</span>
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Wednesday
                     </span>
                   </div>
                   <div class="progress-group-bars">
                     <CProgress
                       class="progress-xs"
-                      :value="56"
-                      color="success"
+                      :value="12"
+                      color="info"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      :value="67"
+                      color="danger"
                     />
                   </div>
                 </div>
-                <div class="progress-group">
-                  <div class="progress-group-header">
-                    <CIcon
-                      name="facebook"
-                      height="17"
-                      class="progress-group-icon"
-                    />
-                    <span class="title">Facebook</span>
-                    <span class="ml-auto font-weight-bold">
-                      51,223 <span class="text-muted small">(15%)</span>
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Thursday
                     </span>
                   </div>
                   <div class="progress-group-bars">
                     <CProgress
                       class="progress-xs"
-                      :value="15"
-                      color="success"
+                      :value="43"
+                      color="info"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      :value="91"
+                      color="danger"
                     />
                   </div>
                 </div>
-                <div class="progress-group">
-                  <div class="progress-group-header">
-                    <CIcon
-                      name="twitter"
-                      height="17"
-                      class="progress-group-icon"
-                    />
-                    <span class="title">Twitter</span>
-                    <span class="ml-auto font-weight-bold">
-                      37,564 <span class="text-muted small">(11%)</span>
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Friday
                     </span>
                   </div>
                   <div class="progress-group-bars">
                     <CProgress
                       class="progress-xs"
-                      :value="11"
-                      color="success"
+                      :value="22"
+                      color="info"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      :value="73"
+                      color="danger"
                     />
                   </div>
                 </div>
-                <div class="progress-group">
-                  <div class="progress-group-header">
-                    <CIcon
-                      name="linkedin"
-                      height="17"
-                      class="progress-group-icon"
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Saturday
+                    </span>
+                  </div>
+                  <div class="progress-group-bars">
+                    <CProgress
+                      class="progress-xs"
+                      :value="53"
+                      color="info"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      :value="82"
+                      color="danger"
                     />
-                    <span class="title">LinkedIn</span>
-                    <span class="ml-auto font-weight-bold">
-                      27,319 <span class="text-muted small">&nbsp;(8%)</span>
+                  </div>
+                </div>
+                <div class="progress-group mb-4">
+                  <div class="progress-group-prepend">
+                    <span class="progress-group-text">
+                      Sunday
                     </span>
                   </div>
                   <div class="progress-group-bars">
                     <CProgress
                       class="progress-xs"
-                      :value="8"
-                      color="success"
+                      :value="9"
+                      color="info"
+                    />
+                    <CProgress
+                      class="progress-xs"
+                      :value="69"
+                      color="danger"
                     />
                   </div>
                 </div>
-                <div class="divider text-center">
-                  <CButton color="link" size="sm" class="text-muted">
-                    <CIcon name="options"/>
-                  </CButton>
+                <div class="legend text-center">
+                  <small>
+                    <sup><CBadge shape="pill" color="info">&nbsp;</CBadge></sup>
+                    New clients
+                    &nbsp;&nbsp;
+                    <sup><CBadge shape="pill" color="danger">&nbsp;</CBadge></sup>
+                    Recurring clients
+                  </small>
                 </div>
-              </ul>
-            </CCol>
-          </CRow>
-          <br/>
-          <CDataTable
-            class="mb-0 table-outline"
-            hover
-            :items="tableItems"
-            :fields="tableFields"
-            head-color="light"
-            no-sorting
-          >
-            <td slot="avatar" class="text-center" slot-scope="{item}">
-              <div class="c-avatar">
-                <img :src="item.avatar.url" class="c-avatar-img" alt="">
-                <span
-                  class="c-avatar-status"
-                  :class="`bg-${item.avatar.status || 'secondary'}`"
-                ></span>
-              </div>
-            </td>
-            <td slot="user" slot-scope="{item}">
-              <div>{{item.user.name}}</div>
-              <div class="small text-muted">
-                <span>
-                  <template v-if="item.user.new">New</template>
-                  <template v-else>Recurring</template>
-                </span> | Registered: {{item.user.registered}}
-              </div>
-            </td>
-            <td
-              slot="country"
-              slot-scope="{item}"
-              class="text-center"
+              </CCol>
+              <CCol sm="12" lg="6">
+                <CRow>
+                  <CCol sm="6">
+                    <CCallout color="warning">
+                      <small class="text-muted">Pageviews</small><br>
+                      <strong class="h4">78,623</strong>
+                    </CCallout>
+                  </CCol>
+                  <CCol sm="6">
+                    <CCallout color="success">
+                      <small class="text-muted">Organic</small><br>
+                      <strong class="h4">49,123</strong>
+                    </CCallout>
+                  </CCol>
+                </CRow>
+                <hr class="mt-0">
+                <ul class="horizontal-bars type-2">
+                  <div class="progress-group">
+                    <div class="progress-group-header">
+                      <CIcon name="user" class="progress-group-icon"/>
+                      <span class="title">Male</span>
+                      <span class="ml-auto font-weight-bold">43%</span>
+                    </div>
+                    <div class="progress-group-bars">
+                      <CProgress
+                        class="progress-xs"
+                        :value="43"
+                        color="warning"
+                      />
+                    </div>
+                  </div>
+                  <div class="progress-group mb-5">
+                    <div class="progress-group-header">
+                      <CIcon name="user-female" class="progress-group-icon"/>
+                      <span class="title">Female</span>
+                      <span class="ml-auto font-weight-bold">37%</span>
+                    </div>
+                    <div class="progress-group-bars">
+                      <CProgress
+                        class="progress-xs"
+                        :value="37"
+                        color="warning"
+                      />
+                    </div>
+                  </div>
+                  <div class="progress-group">
+                    <div class="progress-group-header">
+                      <CIcon name="globe-alt" class="progress-group-icon"/>
+                      <span class="title">Organic Search</span>
+                      <span class="ml-auto font-weight-bold">
+                        191,235<span class="text-muted small">(56%)</span>
+                      </span>
+                    </div>
+                    <div class="progress-group-bars">
+                      <CProgress
+                        class="progress-xs"
+                        :value="56"
+                        color="success"
+                      />
+                    </div>
+                  </div>
+                  <div class="progress-group">
+                    <div class="progress-group-header">
+                      <CIcon
+                        name="facebook"
+                        height="17"
+                        class="progress-group-icon"
+                      />
+                      <span class="title">Facebook</span>
+                      <span class="ml-auto font-weight-bold">
+                        51,223 <span class="text-muted small">(15%)</span>
+                      </span>
+                    </div>
+                    <div class="progress-group-bars">
+                      <CProgress
+                        class="progress-xs"
+                        :value="15"
+                        color="success"
+                      />
+                    </div>
+                  </div>
+                  <div class="progress-group">
+                    <div class="progress-group-header">
+                      <CIcon
+                        name="twitter"
+                        height="17"
+                        class="progress-group-icon"
+                      />
+                      <span class="title">Twitter</span>
+                      <span class="ml-auto font-weight-bold">
+                        37,564 <span class="text-muted small">(11%)</span>
+                      </span>
+                    </div>
+                    <div class="progress-group-bars">
+                      <CProgress
+                        class="progress-xs"
+                        :value="11"
+                        color="success"
+                      />
+                    </div>
+                  </div>
+                  <div class="progress-group">
+                    <div class="progress-group-header">
+                      <CIcon
+                        name="linkedin"
+                        height="17"
+                        class="progress-group-icon"
+                      />
+                      <span class="title">LinkedIn</span>
+                      <span class="ml-auto font-weight-bold">
+                        27,319 <span class="text-muted small">&nbsp;(8%)</span>
+                      </span>
+                    </div>
+                    <div class="progress-group-bars">
+                      <CProgress
+                        class="progress-xs"
+                        :value="8"
+                        color="success"
+                      />
+                    </div>
+                  </div>
+                  <div class="divider text-center">
+                    <CButton color="link" size="sm" class="text-muted">
+                      <CIcon name="options"/>
+                    </CButton>
+                  </div>
+                </ul>
+              </CCol>
+            </CRow>
+            <br/>
+            <CDataTable
+              class="mb-0 table-outline"
+              hover
+              :items="tableItems"
+              :fields="tableFields"
+              head-color="light"
+              no-sorting
             >
-              <CIcon
-                :name="item.country.flag"
-                height="25"
-              />
-            </td>
-            <td slot="usage" slot-scope="{item}">
-              <div class="clearfix">
-                <div class="float-left">
-                  <strong>{{item.usage.value}}%</strong>
+              <td slot="avatar" class="text-center" slot-scope="{item}">
+                <div class="c-avatar">
+                  <img :src="item.avatar.url" class="c-avatar-img" alt="">
+                  <span
+                    class="c-avatar-status"
+                    :class="`bg-${item.avatar.status || 'secondary'}`"
+                  ></span>
                 </div>
-                <div class="float-right">
-                  <small class="text-muted">{{item.usage.period}}</small>
+              </td>
+              <td slot="user" slot-scope="{item}">
+                <div>{{item.user.name}}</div>
+                <div class="small text-muted">
+                  <span>
+                    <template v-if="item.user.new">New</template>
+                    <template v-else>Recurring</template>
+                  </span> | Registered: {{item.user.registered}}
                 </div>
-              </div>
-              <CProgress
-                class="progress-xs"
-                v-model="item.usage.value"
-                :color="color(item.usage.value)"
-              />
-            </td>
-            <td
-              slot="payment"
-              slot-scope="{item}"
-              class="text-center"
-            >
-              <CIcon
-                :name="item.payment.icon"
-                height="25"
-              />
-            </td>
-            <td slot="activity" slot-scope="{item}">
-              <div class="small text-muted">Last login</div>
-              <strong>{{item.activity}}</strong>
-            </td>
-          </CDataTable>
+              </td>
+              <td
+                slot="country"
+                slot-scope="{item}"
+                class="text-center"
+              >
+                <CIcon
+                  :name="item.country.flag"
+                  height="25"
+                />
+              </td>
+              <td slot="usage" slot-scope="{item}">
+                <div class="clearfix">
+                  <div class="float-left">
+                    <strong>{{item.usage.value}}%</strong>
+                  </div>
+                  <div class="float-right">
+                    <small class="text-muted">{{item.usage.period}}</small>
+                  </div>
+                </div>
+                <CProgress
+                  class="progress-xs"
+                  v-model="item.usage.value"
+                  :color="color(item.usage.value)"
+                />
+              </td>
+              <td
+                slot="payment"
+                slot-scope="{item}"
+                class="text-center"
+              >
+                <CIcon
+                  :name="item.payment.icon"
+                  height="25"
+                />
+              </td>
+              <td slot="activity" slot-scope="{item}">
+                <div class="small text-muted">Last login</div>
+                <strong>{{item.activity}}</strong>
+              </td>
+            </CDataTable>
+          </CCardBody>
         </CCard>
       </CCol>
     </CRow>
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index f97af610..d74b5df3 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -22,7 +22,10 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard footer-html="Card Footer" :body-html="loremIpsum" />
+        <CCard>
+          <CCardFooter>Card Footer</CCardFooter>
+          <CCardBody>{{loremIpsum}}</CCardBody>
+        </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <CCard>
@@ -74,80 +77,84 @@
     </CRow>
     <CRow>
       <CCol sm="6" md="4">
-        <CCard
-          header="Card outline primary"
-          border-color="primary"
-          :body-html="loremIpsum"
-        />
+        <CCard border-color="primary">
+          <CCardHeader>Card outline primary</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
+        </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard
-          header="Card outline secondary"
-          border-color="secondary"
-          :body-html="loremIpsum"
-        />
+        <CCard border-color="secondary">
+          <CCardHeader>Card outline secondary</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
+        </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard
-          header="Card outline success"
-          border-color="success"
-          body-wrapper
-        >
-            {{loremIpsum}}
+        <CCard border-color="success">
+          <CCardHeader>Card outline success</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card outline info" border-color="info" body-wrapper>
-            {{loremIpsum}}
+        <CCard border-color="info">
+          <CCardHeader>Card outline info</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card outline warning" border-color="warning" body-wrapper>
-            {{loremIpsum}}
+        <CCard border-color="warning">
+          <CCardHeader>Card outline warning</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card outline danger" border-color="danger" body-wrapper>
-            {{loremIpsum}}
+        <CCard border-color="danger">
+          <CCardHeader>Card outline danger</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
     </CRow>
 
     <CRow>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-primary" header="Card with primary accent" body-wrapper>
-            {{loremIpsum}}
+        <CCard accent-color="primary">
+          <CCardHeader>Card with primary accent</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-secondary" header="Card with secondary accent" body-wrapper>
-            {{loremIpsum}}
+        <CCard accent-color="secondary">
+          <CCardHeader>Card with secondary accent</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-success" header="Card with success accent" body-wrapper>
-            {{loremIpsum}}
+        <CCard accent-color="success">
+          <CCardHeader>Card with success accent</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-info" header="Card with info accent" body-wrapper>
-            {{loremIpsum}}
+        <CCard accent-color="info">
+          <CCardHeader>Card with info accent</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-warning" header="Card with warning accent" body-wrapper>
-            {{loremIpsum}}
+        <CCard accent-color="info">
+          <CCardHeader>Card with info accent</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-danger" header="Card with danger accent" body-wrapper>
-            {{loremIpsum}}
+        <CCard accent-color="danger">
+          <CCardHeader>Card with danger accent</CCardHeader>
+          <CCardBody>{{loremIpsum}}</CCardBody>
         </CCard>
       </CCol>
     </CRow>
     <CRow>
       <CCol sm="6" md="4">
-        <CCard class="bg-primary text-center" body-wrapper>
+        <CCard color="primary" class="text-center" body-wrapper>
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -157,7 +164,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-success text-center" body-wrapper>
+        <CCard color="success" class="text-center" body-wrapper>
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -167,7 +174,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-info text-center" body-wrapper>
+        <CCard color="info" class="text-center" body-wrapper>
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -177,7 +184,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-warning text-center" body-wrapper>
+        <CCard color="warning" class="text-center" body-wrapper>
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -187,7 +194,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-danger text-center" body-wrapper>
+        <CCard color="danger" class="text-center" body-wrapper>
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -197,7 +204,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="bg-secondary text-center" body-wrapper>
+        <CCard color="secondary" class="text-center" body-wrapper>
           <blockquote class="card-blockquote">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
             <footer>Someone famous in
@@ -209,33 +216,33 @@
     </CRow>
     <CRow>
       <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="bg-primary" body-wrapper>
-            {{loremIpsum}}
+        <CCard color="primary" body-wrapper>
+          {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="bg-success" body-wrapper>
-            {{loremIpsum}}
+        <CCard color="success" body-wrapper>
+          {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="bg-info" body-wrapper>
-            {{loremIpsum}}
+        <CCard color="info" body-wrapper>
+          {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="bg-warning" body-wrapper>
-            {{loremIpsum}}
+        <CCard color="warning" body-wrapper>
+          {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card title" class="bg-danger" body-wrapper>
-            {{loremIpsum}}
+        <CCard color="danger" body-wrapper>
+          {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
         <transition name="fade">
-          <CCard class="bg-secondary" v-if="show">
+          <CCard v-if="show" color="secondary">
             <CCardHeader>
               Card with header actions
               <div class="card-header-actions">
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index ace5d3d5..9bbdf452 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -22,7 +22,7 @@
           </CButton>
           <CCollapse :show="collapse" class="mt-2">
             <CCard body-wrapper>
-              <p class="card-text">Collapse contents Here</p>
+              <CCardText>Collapse contents Here</CCardText>
               <CButton  
                 @click="innerCollapse = !innerCollapse" 
                 size="sm" 
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 0242c729..501d2c27 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -188,20 +188,26 @@
           </CCardHeader>
           <CCardBody>
             <CCardGroup deck>
-              <CCard headerHtml="<b>Card with list group</b>">
-                <CListGroup>
-                  <CListGroupItem href="#">Cras justo odio</CListGroupItem>
-                  <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
-                  <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
-                </CListGroup>
-                <p class="card-text mt-2">
-                  Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
-                  nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
-                  consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
-                  ad sit ipsum anim Lorem.
-                </p>
+              <CCard>
+                <CCardHeader>
+                  <b>Card with list group</b>
+                </CCardHeader>
+                <CCardBody>
+                  <CListGroup>
+                    <CListGroupItem href="#">Cras justo odio</CListGroupItem>
+                    <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
+                    <CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
+                  </CListGroup>
+                  <CCardText class="mt-2">
+                    Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
+                    nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
+                    consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris
+                    ad sit ipsum anim Lorem.
+                  </CCardText>
+                </CCardBody>
               </CCard>
-              <CCard header="<b>Card with flush list group</b>">
+              <CCard>
+                <CCardHeader><b>Card with flush list group</b></CCardHeader>
                 <CListGroup flush>
                   <CListGroupItem href="#">Cras justo odio</CListGroupItem>
                   <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
diff --git a/src/views/base/Table.vue b/src/views/base/Table.vue
index 55377253..bd89b2dd 100644
--- a/src/views/base/Table.vue
+++ b/src/views/base/Table.vue
@@ -15,6 +15,7 @@
         :items-per-page="small ? 10 : 5"
         :dark="dark"
         pagination
+        items-per-page-select
       >
         <template #status="{item}">
           <td>
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
index 43032a3d..9057a281 100644
--- a/src/views/base/Tabs.vue
+++ b/src/views/base/Tabs.vue
@@ -18,21 +18,21 @@
           </CCardHeader>
           <CCardBody>
             <CTabs>
-              <CTab title-html="Home" active>
+              <CTab title="Home" active>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title-html="Profile">
+              <CTab title="Profile">
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title-html="Disabled" disabled>
+              <CTab title="Disabled" disabled>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
@@ -50,21 +50,21 @@
           </CCardHeader>
           <CCardBody>
             <CTabs variant="pills">
-              <CTab title-html="Home" active>
+              <CTab title="Home" active>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title-html="Profile">
+              <CTab title="Profile">
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                 officia deserunt mollit anim id est laborum.
               </CTab>
-              <CTab title-html="Disabled" disabled>
+              <CTab title="Disabled" disabled>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
diff --git a/src/views/charts/Charts.vue b/src/views/charts/Charts.vue
index 28c93f1f..b2ea927c 100644
--- a/src/views/charts/Charts.vue
+++ b/src/views/charts/Charts.vue
@@ -19,29 +19,39 @@
           <CChartLineExample/>
         </CCardBody>
       </CCard>
-      <CCard header-html="Bar Chart" body-wrapper>
-        <CChartBarExample/>
+      <CCard>
+        <CCardHeader>Bar Chart</CCardHeader>
+        <CCardBody><CChartBarExample/></CCardBody>
       </CCard>
-      <CCard header-html="Doughnut Chart" body-wrapper>
-        <CChartDoughnutExample/>
+      <CCard>
+        <CCardHeader>Doughnut Chart</CCardHeader>
+        <CCardBody><CChartDoughnutExample/></CCardBody>
       </CCard>
-      <CCard header-html="Radar Chart" body-wrapper>
-        <CChartRadarExample/>
+      <CCard>
+        <CCardHeader>Radar Chart</CCardHeader>
+        <CCardBody><CChartRadarExample/></CCardBody>
       </CCard>
-      <CCard header-html="Pie Chart" body-wrapper>
-        <CChartPieExample/>
+      <CCard>
+         <CCardHeader>Pie Chart</CCardHeader>
+        <CCardBody><CChartPieExample/></CCardBody>
       </CCard>
-      <CCard header-html="Polar Area Chart" body-wrapper>
-        <CChartPolarAreaExample/>
+      <CCard>
+        <CCardHeader>Polar Area Chart</CCardHeader>
+        <CCardBody><CChartPolarAreaExample/></CCardBody>
       </CCard>
-      <CCard header-html="Simple line chart" body-wrapper>
-        <CChartLineSimple border-color="success" labels="months"/>
+      <CCard>
+        <CCardHeader>Simple line chart</CCardHeader>
+        <CCardBody>
+          <CChartLineSimple border-color="success" labels="months"/>
+        </CCardBody>        
       </CCard>
-      <CCard header-html="Simple pointed chart" body-wrapper>
-        <CChartLineSimple pointed border-color="warning"/>
+      <CCard>
+        <CCardHeader>Simple pointed chart</CCardHeader>
+        <CCardBody><CChartLineSimple pointed border-color="warning"/></CCardBody>
       </CCard>
-      <CCard header-html="Simple bar chart" body-wrapper>
-        <CChartBarSimple background-color="danger"/>
+      <CCard>
+        <CCardHeader>Simple bar chart</CCardHeader>
+        <CCardBody><CChartBarSimple background-color="danger"/></CCardBody>        
       </CCard>
     </CCardGroup>
   </div>
diff --git a/src/views/pages/Login.vue b/src/views/pages/Login.vue
index f8b16be4..2eaa44a3 100644
--- a/src/views/pages/Login.vue
+++ b/src/views/pages/Login.vue
@@ -33,7 +33,9 @@
             </CCardBody>
           </CCard>
           <CCard
-            class="text-white text-center bg-primary py-5 d-md-down-none"
+            color="primary"
+            text-color="white"
+            class="text-center py-5 d-md-down-none"
             style="width:44%"
             body-wrapper
           >
diff --git a/src/views/users/Users.vue b/src/views/users/Users.vue
index b13eff6b..711c69e6 100644
--- a/src/views/users/Users.vue
+++ b/src/views/users/Users.vue
@@ -2,32 +2,37 @@
   <CRow>
     <CCol col="12" xl="8">
       <transition name="slide">
-        <CCard header-html="Users" body-wrapper>
-          <CDataTable
-            hover
-            striped
-            :items="items"
-            :fields="fields"
-            :items-per-page="perPage"
-            @row-clicked="rowClicked"
-            :pagination="$options.paginationProps"
-            index-column
-            clickable-rows
-          >
-            <template #username="data">
-              <td>
-                <strong>{{data.item.username}}</strong>
-              </td>
-            </template>
-           
-            <template #status="data">
-              <td>
-                <CBadge :color="getBadge(data.item.status)">
-                  {{data.item.status}}
-                </CBadge>
-              </td>
-            </template>
-          </CDataTable>
+        <CCard>
+          <CCardHeader>
+            Users
+          </CCardHeader>
+          <CCardBody>
+            <CDataTable
+              hover
+              striped
+              :items="items"
+              :fields="fields"
+              :items-per-page="perPage"
+              @row-clicked="rowClicked"
+              :pagination="$options.paginationProps"
+              index-column
+              clickable-rows
+            >
+              <template #username="data">
+                <td>
+                  <strong>{{data.item.username}}</strong>
+                </td>
+              </template>
+            
+              <template #status="data">
+                <td>
+                  <CBadge :color="getBadge(data.item.status)">
+                    {{data.item.status}}
+                  </CBadge>
+                </td>
+              </template>
+            </CDataTable>
+          </CCardBody>
         </CCard>
       </transition>
     </CCol>
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index 888d4f53..e9c3bda6 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -453,56 +453,6 @@
       </CCol>
     </CRow>
     <WidgetsDropdown/>
-    <CRow>
-      <CCol sm="6" lg="3">
-        <CWidgetHeaderDetails
-          color="primary"
-          right-header="SALE"
-          right-footer="Today 6:43 AM"
-          left-header="$1.890,65"
-          left-footer="+432,50 (15,78%)"
-        >
-          <CChartLineSimple style="height:40px"/>
-          <CChartBarSimple style="height:40px"/>
-        </CWidgetHeaderDetails>
-      </CCol>
-      <CCol sm="6" lg="3">
-        <CWidgetHeaderDetails
-          color="success"
-          right-header="SALE"
-          right-footer="Today 6:43 AM"
-          left-header="$1.890,65"
-          left-footer="+432,50 (15,78%)"
-        >
-          <CChartLineSimple style="height:40px"/>
-          <CChartBarSimple style="height:40px"/>
-        </CWidgetHeaderDetails>
-      </CCol>
-      <CCol sm="6" lg="3">
-        <CWidgetHeaderDetails
-          color="danger"
-          right-header="SALE"
-          right-footer="Today 6:43 AM"
-          left-header="$1.890,65"
-          left-footer="+432,50 (15,78%)"
-        >
-          <CChartLineSimple style="height:40px"/>
-          <CChartBarSimple style="height:40px"/>
-        </CWidgetHeaderDetails>
-      </CCol>
-      <CCol sm="6" lg="3">
-        <CWidgetHeaderDetails
-          color="warning"
-          right-header="SALE"
-          right-footer="Today 6:43 AM"
-          left-header="$1.890,65"
-          left-footer="+432,50 (15,78%)"
-        >
-          <CChartLineSimple style="height:40px"/>
-          <CChartBarSimple style="height:40px"/>
-        </CWidgetHeaderDetails>
-      </CCol>
-    </CRow>
     <CRow>
       <CCol sm="4" lg="2">
         <CWidgetSimple header="title" text="1,123">