gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update to the latest version of @coreui/react

Browse Source
This commit is contained in:
Łukasz Holeczek 2021-03-23 01:34:27 +01:00
parent e95c7e34bb
commit 9870bfdf7e
18 changed files with 191 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/containers/TheLayout.js
View File

@ -9,9 +9,9 @@ import {
const TheLayout = () => {
return (
<div className="d-flex bg-light">
<div>
<TheSidebar/>
<div className="wrapper">
<div className="wrapper d-flex flex-column min-vh-100 bg-light">
<TheHeader/>
<div className="body">
<TheContent/>

2
src/containers/TheSidebar.js
View File

@ -27,7 +27,7 @@ const TheSidebar = () => {
return (
<CSidebar
position="sticky"
position="fixed"
selfHiding="md"
// onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })}
>

71
src/containers/_nav.js
View File

@ -1,6 +1,6 @@
import React from 'react'
import CIcon from '@coreui/icons-react'
import { NavLink } from "react-router-dom";
import { NavLink } from "react-router-dom"
const _nav = [
{
@ -256,38 +256,41 @@ const _nav = [
// {
// _component: 'CSidebarNavDivider'
// },
// {
// _component: 'CSidebarNavTitle',
// items: ['Extras'],
// },
// {
// _component: 'CNavGroup',
// anchor: 'Pages',
// route: '/pages',
// icon: 'cil-star',
// items: [
// {
// _component: 'CNavItem',
// anchor: 'Login',
// to: '/login',
// },
// {
// _component: 'CNavItem',
// anchor: 'Register',
// to: '/register',
// },
// {
// _component: 'CNavItem',
// anchor: 'Error 404',
// to: '/404',
// },
// {
// _component: 'CNavItem',
// anchor: 'Error 500',
// to: '/500',
// },
// ],
// },
{
_component: 'CNavTitle',
anchor: 'Extras',
},
{
_component: 'CNavGroup',
anchor: 'Pages',
icon: 'cil-star',
items: [
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Login',
to: '/pages/login',
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Register',
to: '/pages/register',
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Error 404',
to: '/pages/404',
},
{
_component: 'CNavItem',
as: NavLink,
anchor: 'Error 500',
to: '/pages/500',
},
],
},
// {
// _component: 'CNavItem',
// anchor: 'Disabled',
@ -304,7 +307,7 @@ const _nav = [
// classanchor: 'm-2'
// },
// {
// _component: 'CSidebarNavTitle',
// _component: 'CNavTitle',
// items: ['Labels']
// },
// {

5
src/routes.js
View File

@ -38,6 +38,9 @@ const Widgets = React.lazy(() => import('./views/widgets/Widgets'));
const Users = React.lazy(() => import('./views/users/Users'));
const User = React.lazy(() => import('./views/users/User'));
const Login = React.lazy(() => import('./views/pages/login/Login'));
const Register = React.lazy(() => import('./views/pages/register/Register'));
const routes = [
{ path: '/', exact: true, name: 'Home' },
{ path: '/dashboard', name: 'Dashboard', component: Dashboard },
@ -76,6 +79,8 @@ const routes = [
{ path: '/notifications/badges', name: 'Badges', component: Badges },
{ path: '/notifications/modals', name: 'Modals', component: Modals },
{ path: '/notifications/toaster', name: 'Toaster', component: Toaster },
{ path: '/pages/login', name: 'Login', component: Login },
{ path: '/pages/register', name: 'Register', component: Register },
{ path: '/widgets', name: 'Widgets', component: Widgets },
{ path: '/users', exact: true, name: 'Users', component: Users },
{ path: '/users/:id', exact: true, name: 'User Details', component: User }

7
src/scss/_layout.scss Normal file
View File

@ -0,0 +1,7 @@
.wrapper {
width: 100%;
@include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
transform: translateZ(0);
will-change: auto;
@include transition(padding .15s);
}

12
src/scss/style.scss
View File

@ -1,11 +1,13 @@
// If you want to override variables do it here
@import "variables";
// Import CoreUI styles
@import "~@coreui/coreui/scss/coreui.scss";
$enable-ltr: true;
$enable-rtl: true;
// Some temp fixes
@import "fixes";
// Import styles
@import "@coreui/coreui/scss/coreui";
// If you want to add something do it here
@import "layout";
// If you want to add custom CSS you can put it here.
@import "custom";

24
src/views/base/forms/BasicForms.js
View File

@ -3,7 +3,6 @@ import {
CFade,
CValidFeedback,
CInvalidFeedback,
CTextarea,
CSwitch
} from '@coreui/react'
import {
@ -18,27 +17,15 @@ import {
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
// CFade,
CForm,
CFormCheck,
CFormControl,
CFormLabel,
CFormText,
CFormSelect,
// CValidFeedback,
// CInvalidFeedback,
// CTextarea,
// CInput,
// CInputFile,
// CInputRadio,
CInputGroup,
// CInputGroupAppend,
// CInputGroupPrepend,
CInputGroupText,
// CLabel,
// CSelect,
CRow,
// CSwitch
} from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'
import { DocsLink } from 'src/reusable'
@ -227,7 +214,8 @@ const BasicForms = () => {
<CFormLabel htmlFor="textarea-input">Textarea</CFormLabel>
</CCol>
<CCol xs="12" md="9">
<CTextarea
<CFormControl
component="textarea"
name="textarea-input"
id="textarea-input"
rows="9"
@ -759,10 +747,10 @@ const BasicForms = () => {
<CRow className="mb-3">
<CCol md="12">
<CInputGroup className="mb-3">
<CDropdown className="input-group-prepend">
<CDropdownToggle caret color="primary">
Dropdown
</CDropdownToggle>
<CDropdown>
<CDropdownToggle caret color="primary">
Dropdown
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another Action</CDropdownItem>

16
src/views/base/navbars/Navbars.js
View File

@ -1,8 +1,6 @@
import React, { useState } from 'react'
import {
CToggler,
CForm,
CInput,
CImg
} from '@coreui/react'
import {
@ -13,6 +11,8 @@ import {
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
CForm,
CFormControl,
CNavbar,
CNavbarNav,
CNavbarBrand,
@ -48,8 +48,8 @@ const CNavbars = () => {
<CNavLink>Link</CNavLink>
</CNavbarNav>
<CNavbarNav className="ms-auto">
<CForm inline>
<CInput
<CForm className="d-flex">
<CFormControl
className="me-sm-2"
placeholder="Search"
size="sm"
@ -171,8 +171,8 @@ const CNavbars = () => {
</CCardHeader>
<CCardBody>
<CNavbar light color="light">
<CForm inline>
<CInput
<CForm className="d-flex">
<CFormControl
className="me-sm-2"
placeholder="Search"
size="sm"
@ -189,8 +189,8 @@ const CNavbars = () => {
</CCardHeader>
<CCardBody>
<CNavbar light color="light">
<CForm inline>
<CInput
<CForm className="d-flex">
<CFormControl
className="me-sm-2"
placeholder="Username"
/>

38
src/views/buttons/button-dropdowns/ButtonDropdowns.js
View File

@ -13,11 +13,10 @@ import {
CDropdownMenu,
CDropdownToggle,
CRow,
CFormGroup,
CLabel,
CInput,
CInputCheckbox
} from '@coreui/react'
CFormLabel,
CFormControl,
CFormCheck
} from '@coreui/react-ts'
import { DocsLink } from 'src/reusable'
const ButtonDropdowns = () => {
@ -393,24 +392,23 @@ const ButtonDropdowns = () => {
</CDropdownToggle>
<CDropdownMenu>
<CForm className="px-4 py-3" >
<CFormGroup>
<CLabel htmlFor="exampleDropdownFormEmail1">Email address</CLabel>
<CInput className="form-control" id="exampleDropdownFormEmail1" type="email" placeholder="email@example.com" autoComplete="email"/>
</CFormGroup>
<CFormGroup>
<CLabel htmlFor="exampleDropdownFormPassword1">Password</CLabel>
<CInput className="form-control" id="exampleDropdownFormPassword1" type="password" placeholder="Password" autoComplete="current-password"/>
</CFormGroup>
<CFormGroup variant="custom-checkbox" className="form-group">
<CInputCheckbox custom id="exampleDropdownFormCheckbox1" />
<CLabel variant="custom-checkbox" htmlFor="exampleDropdownFormCheckbox1">Remember me</CLabel>
</CFormGroup>
<CFormGroup className="mt-2">
<div className="mb-3">
<CFormLabel htmlFor="exampleDropdownFormEmail1">Email address</CFormLabel>
<CFormControl id="exampleDropdownFormEmail1" type="email" placeholder="email@example.com" autoComplete="email"/>
</div>
<div className="mb-3">
<CFormLabel htmlFor="exampleDropdownFormPassword1">Password</CFormLabel>
<CFormControl id="exampleDropdownFormPassword1" type="password" placeholder="Password" autoComplete="current-password"/>
</div>
<div className="mb-3">
<CFormCheck custom id="exampleDropdownFormCheckbox1" label="Remember me"/>
</div>
<div className="mb-3">
<CButton color="primary" type="submit">Sign in</CButton>
</CFormGroup>
</div>
</CForm>
<CDropdownDivider/>
<CDropdownItem to="/register" >Register</CDropdownItem>
<CDropdownItem href="#/pages/register" >Register</CDropdownItem>
<CDropdownItem>Forgot password?</CDropdownItem>
</CDropdownMenu>
</CDropdown>

19
src/views/buttons/button-groups/ButtonGroups.js
View File

@ -10,14 +10,13 @@ import {
CDropdownItem,
CDropdownMenu,
CDropdownToggle,
CFormControl,
CInputGroup,
CInputGroupText,
CRow,
} from '@coreui/react-ts'
import {
CButtonToolbar,
CInput,
CInputGroup,
CInputGroupPrepend,
CInputGroupText,
CCallout
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
@ -82,10 +81,8 @@ const ButtonGroups = () => {
<CButton color="secondary">4</CButton>
</CButtonGroup>
<CInputGroup>
<CInputGroupPrepend>
<CInputGroupText>@</CInputGroupText>
</CInputGroupPrepend>
<CInput placeholder="Input group example" />
<CInputGroupText>@</CInputGroupText>
<CFormControl placeholder="Input group example" />
</CInputGroup>
</CButtonToolbar>
<CButtonToolbar justify="between">
@ -96,10 +93,8 @@ const ButtonGroups = () => {
<CButton color="secondary">4</CButton>
</CButtonGroup>
<CInputGroup>
<CInputGroupPrepend>
<CInputGroupText>@</CInputGroupText>
</CInputGroupPrepend>
<CInput placeholder="Input group example" />
<CInputGroupText>@</CInputGroupText>
<CFormControl placeholder="Input group example" />
</CInputGroup>
</CButtonToolbar>
</CCardBody>

2
src/views/icons/brands/Brands.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'
import { brandSet } from '@coreui/icons'
import { DocsLink } from 'src/reusable'

2
src/views/icons/coreui-icons/CoreUIIcons.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react-ts'
import { freeSet } from '@coreui/icons'
import { getIconsView } from '../brands/Brands.js'
import { DocsLink } from 'src/reusable'

2
src/views/icons/flags/Flags.js
View File

@ -1,5 +1,5 @@
import React from 'react'
import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react-ts'
import { getIconsView } from '../brands/Brands.js'
import { flagSet } from '@coreui/icons'
import { DocsLink } from 'src/reusable'

25
src/views/pages/login/Login.js
View File

@ -8,12 +8,11 @@ import {
CCol,
CContainer,
CForm,
CInput,
CFormControl,
CInputGroup,
CInputGroupPrepend,
CInputGroupText,
CRow
} from '@coreui/react'
} from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'
const Login = () => {
@ -29,20 +28,16 @@ const Login = () => {
<h1>Login</h1>
<p className="text-muted">Sign In to your account</p>
<CInputGroup className="mb-3">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-user" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput type="text" placeholder="Username" autoComplete="username" />
<CInputGroupText>
<CIcon name="cil-user" />
</CInputGroupText>
<CFormControl placeholder="Username" autoComplete="username" />
</CInputGroup>
<CInputGroup className="mb-4">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput type="password" placeholder="Password" autoComplete="current-password" />
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
<CFormControl type="password" placeholder="Password" autoComplete="current-password" />
</CInputGroup>
<CRow>
<CCol xs="6">

41
src/views/pages/register/Register.js
View File

@ -7,12 +7,11 @@ import {
CCol,
CContainer,
CForm,
CInput,
CFormControl,
CInputGroup,
CInputGroupPrepend,
CInputGroupText,
CRow
} from '@coreui/react'
} from '@coreui/react-ts'
import CIcon from '@coreui/icons-react'
const Register = () => {
@ -27,34 +26,26 @@ const Register = () => {
<h1>Register</h1>
<p className="text-muted">Create your account</p>
<CInputGroup className="mb-3">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-user" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput type="text" placeholder="Username" autoComplete="username" />
<CInputGroupText>
<CIcon name="cil-user" />
</CInputGroupText>
<CFormControl placeholder="Username" autoComplete="username" />
</CInputGroup>
<CInputGroup className="mb-3">
<CInputGroupPrepend>
<CInputGroupText>@</CInputGroupText>
</CInputGroupPrepend>
<CInput type="text" placeholder="Email" autoComplete="email" />
<CInputGroupText>@</CInputGroupText>
<CFormControl placeholder="Email" autoComplete="email" />
</CInputGroup>
<CInputGroup className="mb-3">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput type="password" placeholder="Password" autoComplete="new-password" />
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
<CFormControl type="password" placeholder="Password" autoComplete="new-password" />
</CInputGroup>
<CInputGroup className="mb-4">
<CInputGroupPrepend>
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
</CInputGroupPrepend>
<CInput type="password" placeholder="Repeat password" autoComplete="new-password" />
<CInputGroupText>
<CIcon name="cil-lock-locked" />
</CInputGroupText>
<CFormControl type="password" placeholder="Repeat password" autoComplete="new-password" />
</CInputGroup>
<CButton color="success" block>Create Account</CButton>
</CForm>

63
src/views/widgets/Widgets.js
View File

@ -28,33 +28,30 @@ const Widgets = () => {
<WidgetsDropdown />
<CRow>
<CCol xs="12" sm="6" lg="3">
<CWidgetProgress color="success" header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
<CWidgetProgress className="mb-4" color="success" header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetProgress color="info" header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
<CWidgetProgress className="mb-4" color="info" header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetProgress color="warning" header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
<CWidgetProgress className="mb-4" color="warning" header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetProgress header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim.">
<CProgress color="danger" animated size="xs" className="my-3" value={75}/>
</CWidgetProgress>
<CWidgetProgress className="mb-4" header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." />
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetProgress inverse color="success" variant="inverse" header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
<CWidgetProgress className="mb-4" inverse color="success" variant="inverse" header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetProgress inverse color="info" variant="inverse" header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
<CWidgetProgress className="mb-4" inverse color="info" variant="inverse" header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetProgress inverse color="warning" variant="inverse" header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
<CWidgetProgress className="mb-4" inverse color="warning" variant="inverse" header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
</CCol>
<CCol xs="12" sm="6" lg="3">
<CWidgetProgress inverse color="danger" variant="inverse" value={95} header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
<CWidgetProgress className="mb-4" inverse color="danger" variant="inverse" value={95} header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
</CCol>
</CRow>
<CRow>
@ -118,7 +115,7 @@ const Widgets = () => {
footerSlot={
<CCardFooter className="card-footer px-3 py-2">
<CLink
className="font-weight-bold font-xs btn-block text-muted"
className="font-weight-bold font-xs btn-block text-muted"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
@ -139,21 +136,21 @@ const Widgets = () => {
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="gradient-info"
color="info"
>
<CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="385"
text="New Clients"
color="gradient-success"
color="success"
>
<CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon>
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="gradient-warning"
color="warning"
>
<CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon>
@ -166,7 +163,7 @@ const Widgets = () => {
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="gradient-danger"
color="danger"
progressSlot={
<CProgress color="danger" size="xs" value={75} animated className="my-3"
/>}
@ -178,7 +175,7 @@ const Widgets = () => {
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="gradient-info"
color="info"
inverse
>
<CIcon name="cil-people" height="36"/>
@ -186,7 +183,7 @@ const Widgets = () => {
<CWidgetProgressIcon
header="385"
text="New Clients"
color="gradient-success"
color="success"
inverse
>
<CIcon name="cil-userFollow" height="36"/>
@ -194,7 +191,7 @@ const Widgets = () => {
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="gradient-warning"
color="warning"
inverse
>
<CIcon name="cil-basket" height="36"/>
@ -202,7 +199,7 @@ const Widgets = () => {
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
color="gradient-primary"
color="primary"
inverse
>
<CIcon name="cil-chartPie" height="36"/>
@ -210,7 +207,7 @@ const Widgets = () => {
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="gradient-danger"
color="danger"
inverse
>
<CIcon name="cil-speedometer" height="36"/>
@ -221,7 +218,7 @@ const Widgets = () => {
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="gradient-info"
color="info"
>
<CIcon name="cil-people" height="36"/>
</CWidgetProgressIcon>
@ -230,7 +227,7 @@ const Widgets = () => {
<CWidgetProgressIcon
header="385"
text="New Clients"
color="gradient-success"
color="success"
>
<CIcon name="cil-userFollow" height="36"/>
</CWidgetProgressIcon>
@ -239,7 +236,7 @@ const Widgets = () => {
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="gradient-warning"
color="warning"
>
<CIcon name="cil-basket" height="36"/>
</CWidgetProgressIcon>
@ -248,7 +245,7 @@ const Widgets = () => {
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
color="gradient-primary"
color="primary"
>
<CIcon name="cil-chartPie" height="36"/>
</CWidgetProgressIcon>
@ -257,7 +254,7 @@ const Widgets = () => {
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="gradient-danger"
color="danger"
>
<CIcon name="cil-speedometer" height="36"/>
</CWidgetProgressIcon>
@ -266,7 +263,7 @@ const Widgets = () => {
<CWidgetProgressIcon
header="972"
text="comments"
color="gradient-info"
color="info"
>
<CIcon name="cil-speech" height="36"/>
</CWidgetProgressIcon>
@ -277,7 +274,7 @@ const Widgets = () => {
<CWidgetProgressIcon
header="87.500"
text="Visitors"
color="gradient-info"
color="info"
inverse
>
<CIcon name="cil-people" height="36"/>
@ -287,7 +284,7 @@ const Widgets = () => {
<CWidgetProgressIcon
header="385"
text="New Clients"
color="gradient-success"
color="success"
inverse
>
<CIcon name="cil-userFollow" height="36"/>
@ -297,7 +294,7 @@ const Widgets = () => {
<CWidgetProgressIcon
header="1238"
text="Products sold"
color="gradient-warning"
color="warning"
inverse
>
<CIcon name="cil-basket" height="36"/>
@ -307,7 +304,7 @@ const Widgets = () => {
<CWidgetProgressIcon
header="28%"
text="Returning Visitors"
color="gradient-primary"
color="primary"
inverse
>
<CIcon name="cil-chartPie" height="36"/>
@ -317,7 +314,7 @@ const Widgets = () => {
<CWidgetProgressIcon
header="5:34:11"
text="Avg. Time"
color="gradient-danger"
color="danger"
inverse
>
<CIcon name="cil-speedometer" height="36"/>
@ -327,7 +324,7 @@ const Widgets = () => {
<CWidgetProgressIcon
header="972"
text="comments"
color="gradient-info"
color="info"
inverse
>
<CIcon name="cil-speech" height="36"/>

40
src/views/widgets/WidgetsBrand.js
View File

@ -12,11 +12,14 @@ const WidgetsBrand = ({withCharts})=>{
<CRow>
<CCol sm="6" lg="3">
<CWidgetBrand
color="facebook"
className="mb-4"
rightHeader="89k"
rightFooter="friends"
leftHeader="459"
leftFooter="feeds"
style={{
"--cui-card-cap-bg": "#3b5998"
}}
>
<CIcon
name="cib-facebook"
@ -35,11 +38,14 @@ const WidgetsBrand = ({withCharts})=>{
<CCol sm="6" lg="3">
<CWidgetBrand
color="twitter"
className="mb-4"
rightHeader="973k"
rightFooter="followers"
leftHeader="1.792"
leftFooter="tweets"
style={{
"--cui-card-cap-bg": "#00aced"
}}
>
<CIcon
name="cib-twitter"
@ -58,11 +64,14 @@ const WidgetsBrand = ({withCharts})=>{
<CCol sm="6" lg="3">
<CWidgetBrand
color="linkedin"
className="mb-4"
rightHeader="500+"
rightFooter="contracts"
leftHeader="292"
leftFooter="feeds"
style={{
"--cui-card-cap-bg": "#4875b4"
}}
>
<CIcon
name="cib-linkedin"
@ -77,15 +86,16 @@ const WidgetsBrand = ({withCharts})=>{
labels="months"
/>
</CWidgetBrand>
</CCol>
</CCol>
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
rightHeader="12"
rightFooter="events"
leftHeader="4"
leftFooter="meetings"
color="gradient-warning"
color="warning"
>
<CIcon
name="cil-calendar"
@ -102,15 +112,18 @@ const WidgetsBrand = ({withCharts})=>{
</CWidgetBrand>
</CCol>
</CRow> :
<CRow>
<CCol sm="6" lg="3">
<CWidgetBrand
color="facebook"
className="mb-4"
rightHeader="89k"
rightFooter="friends"
leftHeader="459"
leftFooter="feeds"
style={{
"--cui-card-cap-bg": "#3b5998"
}}
>
<CIcon
name="cib-facebook"
@ -122,11 +135,14 @@ const WidgetsBrand = ({withCharts})=>{
<CCol sm="6" lg="3">
<CWidgetBrand
color="twitter"
className="mb-4"
rightHeader="973k"
rightFooter="followers"
leftHeader="1.792"
leftFooter="tweets"
style={{
"--cui-card-cap-bg": "#00aced"
}}
>
<CIcon
name="cib-twitter"
@ -138,11 +154,14 @@ const WidgetsBrand = ({withCharts})=>{
<CCol sm="6" lg="3">
<CWidgetBrand
color="linkedin"
className="mb-4"
rightHeader="500+"
rightFooter="contracts"
leftHeader="292"
leftFooter="feeds"
style={{
"--cui-card-cap-bg": "#4875b4"
}}
>
<CIcon
name="cib-linkedin"
@ -154,11 +173,12 @@ const WidgetsBrand = ({withCharts})=>{
<CCol sm="6" lg="3">
<CWidgetBrand
className="mb-4"
rightHeader="12"
rightFooter="events"
leftHeader="4"
leftFooter="meetings"
color="gradient-warning"
color="warning"
>
<CIcon
name="cil-calendar"

8
src/views/widgets/WidgetsDropdown.js
View File

@ -17,7 +17,7 @@ const WidgetsDropdown = () => {
return (
<CRow>
<CCol sm="6" lg="3">
<CWidgetDropdown
<CWidgetDropdown className="mb-4"
color="primary"
header="9.823"
text="Members online"
@ -48,7 +48,7 @@ const WidgetsDropdown = () => {
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
<CWidgetDropdown className="mb-4"
color="info"
header="9.823"
text="Members online"
@ -80,7 +80,7 @@ const WidgetsDropdown = () => {
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
<CWidgetDropdown className="mb-4"
color="warning"
header="9.823"
text="Members online"
@ -112,7 +112,7 @@ const WidgetsDropdown = () => {
</CCol>
<CCol sm="6" lg="3">
<CWidgetDropdown
<CWidgetDropdown className="mb-4"
color="danger"
header="9.823"
text="Members online"