From 4b8fdbf142ac88777a45b1e4f5f6f49284d860cf Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Mon, 1 Apr 2019 12:09:38 +0200
Subject: [PATCH] fix: small fixes

---
 src/views/Dashboard.vue                       |  10 +-
 src/views/base/Cards.vue                      |   4 +-
 src/views/base/Navbars.vue                    |  37 ++-
 src/views/widgets/Widgets.vue                 | 285 ++++++++++++------
 .../{Widgets06.vue => WidgetsDropdown.vue}    |  22 +-
 .../{Widgets04.vue => WidgetsSocial.vue}      |  26 +-
 6 files changed, 254 insertions(+), 130 deletions(-)
 rename src/views/widgets/{Widgets06.vue => WidgetsDropdown.vue} (90%)
 rename src/views/widgets/{Widgets04.vue => WidgetsSocial.vue} (90%)

diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index dccfd558..8b92032e 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="animated fadeIn">
-    <Widgets06/>
+    <WidgetsDropdown/>
     <CCard>
       <CCardBody>
         <CRow>
@@ -334,8 +334,8 @@
 
 <script>
 import MainChartExample from './dashboard/MainChartExample'
-import Widgets06 from './widgets/Widgets06'
-import Widgets04 from './widgets/Widgets04'
+import WidgetsDropdown from './widgets/WidgetsDropdown'
+import WidgetsSocial from './widgets/WidgetsSocial'
 import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
 import CalloutChartExample from './dashboard/CalloutChartExample'
 
@@ -345,8 +345,8 @@ export default {
     MainChartExample,
     SocialBoxChartExample,
     CalloutChartExample,
-    Widgets06,
-    Widgets04
+    WidgetsDropdown,
+    WidgetsSocial
   },
   data: function () {
     return {
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index 4064c874..8ae89394 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -9,7 +9,7 @@
       </CCol>
       <CCol sm="6" md="4">
         <CCard
-          header="<i class='fa fa-check'></i> Card with icon"
+          headerHtml="<i class='fa fa-check'></i> Card with icon"
           :bodyHtml="loremIpsum"
         />
       </CCol>
@@ -116,7 +116,7 @@
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard class="card-accent-warning" header="Card with warning accent">
+        <CCard class="card-accent-warning" header="Card with warning accent" bodyWrapper>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
         </CCard>
       </CCol>
diff --git a/src/views/base/Navbars.vue b/src/views/base/Navbars.vue
index 039fb6da..d899230d 100644
--- a/src/views/base/Navbars.vue
+++ b/src/views/base/Navbars.vue
@@ -41,12 +41,15 @@
           </div> -->
         </CCardHeader>
         <CCardBody>
-          <CNavbar toggleable="md" type="dark" variant="info">
+          <CNavbar
+            toggleable="md"
+            type="dark"
+            variant="info"
+            sticky
+          >
             <CNavbarToggle @click="show=!show"/>
             <CNavbarBrand href="#">NavBar</CNavbarBrand>
-            <CCollapse :show="show"
-                       navbar
-            >
+            <CCollapse :show="show" navbar>
               <CNavbarNav>
                 <CNavItem href="#">Link</CNavItem>
                 <CNavItem href="#" disabled>Disabled</CNavItem>
@@ -63,9 +66,10 @@
                   <CButton size="sm" class="my-2 my-sm-0" type="submit">Search</CButton>
                 </CForm>
 
-                <CDropdown buttonContent="Lang"
-                           nav
-                           placement="bottom-end"
+                <CDropdown
+                  buttonHtml="Lang"
+                  nav
+                  placement="bottom-end"
                 >
                     <CDropdownItem>EN</CDropdownItem>
                     <CDropdownItem>ES</CDropdownItem>
@@ -73,9 +77,10 @@
                     <CDropdownItem>FA</CDropdownItem>
                 </CDropdown>
 
-                <CDropdown nav
-                           buttonContent="<em>User</em>"
-                           placement="bottom-end"
+                <CDropdown
+                  nav
+                  buttonHtml="<em>User</em>"
+                  placement="bottom-end"
                 >
                   <CDropdownItem>Profile</CDropdownItem>
                   <CDropdownItem>Signout</CDropdownItem>
@@ -130,13 +135,21 @@
                 <CNavItem href="#">Home</CNavItem>
                 <CNavItem href="#">Link</CNavItem>
                 <!-- Navbar dropdowns -->
-                <CDropdown buttonContent="Lang" right nav>
+                <CDropdown
+                  buttonHtml="Lang"
+                  right
+                  nav
+                >
                   <CDropdownItem>EN</CDropdownItem>
                   <CDropdownItem>ES</CDropdownItem>
                   <CDropdownItem>RU</CDropdownItem>
                   <CDropdownItem>FA</CDropdownItem>
                 </CDropdown>
-                <CDropdown buttonContent="User" right nav>
+                <CDropdown
+                  buttonHtml="User"
+                  right
+                  nav
+                >
                   <CDropdownItem>Account</CDropdownItem>
                   <CDropdownItem>Settings</CDropdownItem>
                 </CDropdown>
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index a6e718a6..f335601a 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -2,236 +2,347 @@
   <div class="animated fadeIn">
     <CRow>
       <CCol sm="6" lg="3">
-        <CWidget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
-          <CProgress variant="success" :value="25" class="progress-xs my-3 mb-0"/>
-        </CWidget01>
+        <CWidgetProgress
+          header="89.9%"
+          text="Lorem ipsum..."
+          footer="Lorem ipsum dolor sit amet enim."
+        >
+          <CProgress
+            variant="success"
+            :value="25"
+            class="progress-xs my-3 mb-0"
+          />
+        </CWidgetProgress>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
-                  variant="info" :value="25"/>
+        <CWidgetProgress
+          header="12.124"
+          text="Lorem ipsum..."
+          footer="Lorem ipsum dolor sit amet enim."
+          variant="info"
+          :value="25"
+        />
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+        <CWidgetProgress header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                   variant="warning" :value="25"/>
       </CCol>
       <CCol sm="6" lg="3">
-          <CWidget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+          <CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                     variant="danger" :value="25"/>
       </CCol>
     </CRow><!--/.row-->
     <CRow>
       <CCol sm="6" lg="3">
-        <CWidget01 header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+        <CWidgetProgress header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                   variant="success" inverse :value="25"/>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidget01 header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+        <CWidgetProgress header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                   variant="info" inverse :value="25"/>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidget01 header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+        <CWidgetProgress header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                   variant="warning" inverse :value="25"/>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidget01 header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
+        <CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."
                   variant="danger" inverse :value="25"/>
       </CCol>
     </CRow><!--/.row-->
     <CRow>
       <CCol cols="12" sm="6" lg="3">
-        <CWidget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income"/>
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          addIconClasses="fa fa-cogs bg-primary"
+        />
       </CCol>
       <CCol cols="12" sm="6" lg="3">
-        <CWidget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income"/>
+        <CWidgetIcon
+          header="$1.999,50"
+          addIconClasses="fa fa-laptop bg-info"
+          text="Income"
+        />
       </CCol>
       <CCol cols="12" sm="6" lg="3">
-        <CWidget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income"/>
+        <CWidgetIcon
+          header="$1.999,50"
+          addIconClasses="fa fa-moon-o bg-warning"
+          text="Income"
+        />
       </CCol>
       <CCol cols="12" sm="6" lg="3">
-        <CWidget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income"/>
+        <CWidgetIcon
+          header="$1.999,50"
+          addIconClasses="fa fa-bell bg-danger"
+          text="Income"
+        />
       </CCol>
     </CRow><!--/.row-->
     <CRow>
       <CCol cols="12" sm="6" lg="3">
-        <CWidget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" text="Income" link="#"/>
+        <CWidgetIcon
+          header="$1.999,50"
+          addIconClasses="fa fa-cogs bg-primary"
+          text="Income"
+          link="#"
+        />
       </CCol>
       <CCol cols="12" sm="6" lg="3">
-        <CWidget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" text="Income" link="#"/>
+        <CWidgetIcon
+          header="$1.999,50"
+          addIconClasses="fa fa-laptop bg-info"
+          text="Income"
+          link="#"
+        />
       </CCol>
       <CCol cols="12" sm="6" lg="3">
-        <CWidget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" text="Income" link="#"/>
+        <CWidgetIcon
+          header="$1.999,50"
+          addIconClasses="fa fa-moon-o bg-warning bg-primary"
+          text="Income" link="#"
+        />
       </CCol>
       <CCol cols="12" sm="6" lg="3">
-        <CWidget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" text="Income" link="#"/>
+        <CWidgetIcon
+          header="$1.999,50"
+          addIconClasses="fa fa-bell bg-danger"
+          text="Income"
+          link="#"
+        />
       </CCol>
     </CRow><!--/.row-->
     <CRow>
       <CCol cols="12" sm="6" lg="3">
-        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary"/>
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          addIconClasses="fa fa-cogs bg-primary"
+          noPadding
+        />
       </CCol>
       <CCol cols="12" sm="6" lg="3">
-        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info"/>
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          addIconClasses="fa fa-laptop bg-info"
+          noPadding
+        />
       </CCol>
       <CCol cols="12" sm="6" lg="3">
-        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          addIconClasses="fa fa-moon-o bg-warning bg-primary"
+          noPadding
+        />
       </CCol>
       <CCol cols="12" sm="6" lg="3">
-        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-bell bg-danger"/>
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          addIconClasses="fa fa-bell bg-danger"
+          noPadding
+        />
       </CCol>
     </CRow><!--/.row-->
     <CRow>
       <CCol cols="12" sm="6" lg="4">
-        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-cogs bg-primary px-5"/>
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          addIconClasses="fa fa-cogs bg-primary px-5"
+          noPadding
+        />
       </CCol>
       <CCol cols="12" sm="6" lg="4">
-        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-laptop bg-info px-5"/>
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          addIconClasses="fa fa-laptop bg-info px-5"
+          noPadding
+        />
       </CCol>
       <CCol cols="12" sm="6" lg="4">
-        <CWidget03 header="$1.999,50" text="Income" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          addIconClasses="fa fa-moon-o bg-warning bg-primary px-5"
+          noPadding
+        />
       </CCol>
-
     </CRow><!--/.row-->
-    <Widgets04 noCharts/>
-    <Widgets04/>
+    <CRow>
+      <CCol cols="12" sm="6" lg="4">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          addIconClasses="fa fa-cogs bg-primary px-5"
+          noPadding
+          link="#"
+        />
+      </CCol>
+      <CCol cols="12" sm="6" lg="4">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          addIconClasses="fa fa-laptop bg-info px-5"
+          noPadding
+          link="#"
+        />
+      </CCol>
+      <CCol cols="12" sm="6" lg="4">
+        <CWidgetIcon
+          header="$1.999,50"
+          text="Income"
+          addIconClasses="fa fa-moon-o bg-warning bg-primary px-5"
+          noPadding
+          link="#"
+        />
+      </CCol>
+    </CRow><!--/.row-->
+    <WidgetsSocial noCharts/>
+    <WidgetsSocial/>
     <CCardGroup class="mb-4">
-      <CWidget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
-      <CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
-      <CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
-      <CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
-      <CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
+      <CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
+      <CWidgetProgressIcon iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
+      <CWidgetProgressIcon iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
+      <CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
+      <CWidgetProgressIcon iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
     </CCardGroup>
     <CCardGroup class="mb-4">
-      <CWidget05 iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/>
-      <CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
-      <CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
-      <CWidget05 iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/>
-      <CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
+      <CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="Visitors" variant="info" inverse/>
+      <CWidgetProgressIcon iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
+      <CWidgetProgressIcon iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
+      <CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" variant="primary" text="Returning Visitors" inverse/>
+      <CWidgetProgressIcon iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
     </CCardGroup>
     <CRow>
       <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
+        <CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
       </CCol>
       <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
+        <CWidgetProgressIcon iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
       </CCol>
       <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
+        <CWidgetProgressIcon iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
       </CCol>
       <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
+        <CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
       </CCol>
       <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" >
+        <CWidgetProgressIcon iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" >
           <CProgress variant="danger" :value="25" class="progress-xs my-3 mb-0"/>
-        </CWidget05>
+        </CWidgetProgressIcon>
       </CCol>
       <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
+        <CWidgetProgressIcon iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
       </CCol>
     </CRow>
     <CRow>
       <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-people" header="87.500" text="visitors" variant="info" inverse/>
+        <CWidgetProgressIcon iconClasses="icon-people" header="87.500" text="visitors" variant="info" inverse/>
       </CCol>
       <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
+        <CWidgetProgressIcon iconClasses="icon-user-follow" header="385" text="New Clients" variant="success" inverse/>
       </CCol>
       <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
+        <CWidgetProgressIcon iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning" inverse/>
       </CCol>
       <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="primary" inverse/>
+        <CWidgetProgressIcon iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="primary" inverse/>
       </CCol>
       <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
+        <CWidgetProgressIcon iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger" inverse/>
       </CCol>
       <CCol sm="6" md="2">
-        <CWidget05 iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/>
+        <CWidgetProgressIcon iconClasses="icon-speech" header="972" text="Comments" variant="info" inverse/>
       </CCol>
     </CRow>
-    <Widgets06/>
+    <WidgetsDropdown/>
     <CRow>
       <CCol sm="6" lg="3">
-        <CWidget07 rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <CSimpleLineChart style="height:40px" chartId="CWidget07_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+        <CWidgetSmallText rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+          <CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
           <CSimpleBarChart style="height:40px"
                            :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
                            label="Sales"
           />
-        </CWidget07>
+        </CWidgetSmallText>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidget07 variant='success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <CSimpleLineChart style="height:40px" chartId="CWidget07_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-          <CSimpleBarChart style="height:40px" chartId="CWidget07_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-        </CWidget07>
+        <CWidgetSmallText variant='success' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+          <CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <CSimpleBarChart style="height:40px" chartId="CWidgetSmallText_bar2" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+        </CWidgetSmallText>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidget07 variant='danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <CSimpleLineChart style="height:40px" chartId="CWidget07_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-          <CSimpleBarChart style="height:40px" chartId="CWidget07_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-        </CWidget07>
+        <CWidgetSmallText variant='danger' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+          <CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <CSimpleBarChart style="height:40px" chartId="CWidgetSmallText_bar3" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+        </CWidgetSmallText>
       </CCol>
       <CCol sm="6" lg="3">
-        <CWidget07 variant='warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
-          <CSimpleLineChart style="height:40px" chartId="CWidget07_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-          <CSimpleBarChart style="height:40px" chartId="CWidget07_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
-        </CWidget07>
+        <CWidgetSmallText variant='warning' rightHeader='SALE' rightFooter='Today 6:43 AM' leftHeader='$1.890,65' leftFooter='+432,50 (15,78%)'>
+          <CSimpleLineChart style="height:40px" chartId="CWidgetSmallText_line4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+          <CSimpleBarChart style="height:40px" chartId="CWidgetSmallText_bar4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]' label='Sales'/>
+        </CWidgetSmallText>
       </CCol>
     </CRow>
     <CRow>
       <CCol sm="4" lg="2">
-        <CWidget08 header='title' text='1,123'>
-          <CSimpleLineChart style="height:40px" chartId="CWidget08_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+        <CWidgetSimple header='title' text='1,123'>
+          <CSimpleLineChart style="height:40px" chartId="CWidgetSimple_1" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                        label='Sales' borderColor='danger'/>
-        </CWidget08>
+        </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
-        <CWidget08 header='title' text='1,123'>
+        <CWidgetSimple header='title' text='1,123'>
           <CSimpleLineChart style="height:40px" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                        label='Sales' borderColor='primary'/>
-        </CWidget08>
+        </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
-        <CWidget08 header='title' text='1,123'>
+        <CWidgetSimple header='title' text='1,123'>
                        <CSimpleLineChart style="height:40px"
                                         :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
                                         label="Sales"
                                         borderColor="success"
                        />
-        </CWidget08>
+        </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
-        <CWidget08  header='title' text='1,123'>
-          <CSimpleBarChart style="height:40px" chartId="CWidget08_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+        <CWidgetSimple  header='title' text='1,123'>
+          <CSimpleBarChart style="height:40px" chartId="CWidgetSimple_4" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                       label='Sales' color='danger'/>
-        </CWidget08>
+        </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
-        <CWidget08  header='title' text='1,123'>
-          <CSimpleBarChart style="height:40px" chartId="CWidget08_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
+        <CWidgetSimple  header='title' text='1,123'>
+          <CSimpleBarChart style="height:40px" chartId="CWidgetSimple_5" :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                       label='Sales' color='primary'/>
-        </CWidget08>
+        </CWidgetSimple>
       </CCol>
       <CCol sm="4" lg="2">
-        <CWidget08  header='title' text='1,123'>
+        <CWidgetSimple  header='title' text='1,123'>
           <CSimpleBarChart style="height:40px"  :data='[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]'
                       label='Sales' color='success'/>
-        </CWidget08>
+        </CWidgetSimple>
       </CCol>
     </CRow>
   </div>
 </template>
 
 <script>
-import Widgets04 from './Widgets04'
-import Widgets06 from './Widgets06'
+import WidgetsSocial from './WidgetsSocial'
+import WidgetsDropdown from './WidgetsDropdown'
 
 export default {
   name: 'Widgets',
   components: {
-    Widgets04,
-    Widgets06
+    WidgetsSocial,
+    WidgetsDropdown
   }
 }
 </script>
diff --git a/src/views/widgets/Widgets06.vue b/src/views/widgets/WidgetsDropdown.vue
similarity index 90%
rename from src/views/widgets/Widgets06.vue
rename to src/views/widgets/WidgetsDropdown.vue
index e44122cf..69f17d24 100644
--- a/src/views/widgets/Widgets06.vue
+++ b/src/views/widgets/WidgetsDropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <CRow>
     <CCol sm="6" lg="3">
-      <CWidget06 header="9.823" text="Members online">
+      <CWidgetDropdown header="9.823" text="Members online">
         <template #dropdown>
           <CDropdown
             class="float-right"
@@ -23,10 +23,10 @@
           label="Members"
           pointHoverColor="primary"
         />
-      </CWidget06>
+      </CWidgetDropdown>
     </CCol>
     <CCol sm="6" lg="3">
-      <CWidget06 variant="info" header="9.823" text="Members online">
+      <CWidgetDropdown variant="info" header="9.823" text="Members online">
         <template #dropdown>
           <CDropdown
             class="float-right"
@@ -50,10 +50,10 @@
           :options="{ elements: { line: { tension: 0.00001 }}}"
           pointHoverColor="info"
         />
-      </CWidget06>
+      </CWidgetDropdown>
     </CCol>
     <CCol sm="6" lg="3">
-      <CWidget06
+      <CWidgetDropdown
         variant="warning"
         header="9.823"
         text="Members online"
@@ -74,7 +74,7 @@
         </template>
 
         <CSimpleLineChart
-          chartId="CWidget06_3"
+          chartId="CWidgetDropdown_3"
           :data="[78, 81, 80, 45, 34, 12, 40]"
           :labels="months"
           style="height:70px"
@@ -83,10 +83,10 @@
           :options="{elements: {line: {borderWidth: 2.5}}}"
           pointHoverColor="warning"
         />
-      </CWidget06>
+      </CWidgetDropdown>
     </CCol>
     <CCol sm="6" lg="3">
-      <CWidget06
+      <CWidgetDropdown
         variant="danger"
         header="9.823"
         text="Members online"
@@ -107,20 +107,20 @@
         </template>
 
         <CSimpleBarChart
-          chartId="CWidget06_4"
+          chartId="CWidgetDropdown_4"
           :data="[10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]"
           label="Members"
           color="rgb(250, 152, 152)"
           style="height:70px"
         />
-      </CWidget06>
+      </CWidgetDropdown>
     </CCol>
   </CRow>
 </template>
 
 <script>
 export default {
-  name: 'Widgets06',
+  name: 'WidgetsDropdown',
   data () {
     return {
       months: ['January', 'February', 'March', 'April', 'May', 'June', 'July']
diff --git a/src/views/widgets/Widgets04.vue b/src/views/widgets/WidgetsSocial.vue
similarity index 90%
rename from src/views/widgets/Widgets04.vue
rename to src/views/widgets/WidgetsSocial.vue
index 6408c97b..7b21c5a8 100644
--- a/src/views/widgets/Widgets04.vue
+++ b/src/views/widgets/WidgetsSocial.vue
@@ -2,7 +2,7 @@
   <CRow>
     <template v-if="!props.noCharts">
       <CCol md="3" sm="6">
-        <CWidget04
+        <CWidgetSocial
           variant="facebook"
           rightHeader="89k"
           rightFooter="friends"
@@ -17,10 +17,10 @@
             style="height:100px"
             color="rgba(255,255,255,.1)"
           />
-        </CWidget04>
+        </CWidgetSocial>
        </CCol>
        <CCol md="3" sm="6">
-        <CWidget04
+        <CWidgetSocial
           variant="twitter"
           rightHeader="973k"
           rightFooter="followers"
@@ -35,10 +35,10 @@
             style="height:100px"
             color="rgba(255,255,255,.1)"
           />
-        </CWidget04>
+        </CWidgetSocial>
        </CCol>
        <CCol md="3" sm="6">
-        <CWidget04
+        <CWidgetSocial
           variant="linkedin"
           rightHeader="500+"
           rightFooter="contracts"
@@ -53,10 +53,10 @@
             style="height:100px"
             color="rgba(255,255,255,.1)"
           />
-        </CWidget04>
+        </CWidgetSocial>
        </CCol>
        <CCol md="3" sm="6">
-        <CWidget04
+        <CWidgetSocial
           variant="google-plus"
           rightHeader="894"
           rightFooter="followers"
@@ -71,12 +71,12 @@
             style="height:100px"
             color="rgba(255,255,255,.1)"
           />
-        </CWidget04>
+        </CWidgetSocial>
       </CCol>
     </template>
     <template v-else>
       <CCol md="3" sm="6">
-        <CWidget04
+        <CWidgetSocial
           variant="facebook"
           rightHeader="89k"
           rightFooter="friends"
@@ -85,7 +85,7 @@
         />
       </CCol>
       <CCol md="3" sm="6">
-        <CWidget04
+        <CWidgetSocial
           variant="twitter"
           rightHeader="973k"
           rightFooter="followers"
@@ -94,7 +94,7 @@
         />
       </CCol>
       <CCol md="3" sm="6">
-        <CWidget04
+        <CWidgetSocial
           variant="linkedin"
           rightHeader="500+"
           rightFooter="contracts"
@@ -103,7 +103,7 @@
         />
       </CCol>
       <CCol md="3" sm="6">
-        <CWidget04
+        <CWidgetSocial
           variant="warning"
           iconClasses="fa fa-battery-1"
           rightHeader="0:57"
@@ -118,7 +118,7 @@
 
 <script>
 export default {
-  name: 'Widgets04',
+  name: 'WidgetsSocial',
   props: {
     noCharts: Boolean
   }