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 = () => { const TheLayout = () => {
return ( return (
<div className="d-flex bg-light"> <div>
<TheSidebar/> <TheSidebar/>
<div className="wrapper"> <div className="wrapper d-flex flex-column min-vh-100 bg-light">
<TheHeader/> <TheHeader/>
<div className="body"> <div className="body">
<TheContent/> <TheContent/>

2
src/containers/TheSidebar.js
View File

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

71
src/containers/_nav.js
View File

@ -1,6 +1,6 @@
import React from 'react' import React from 'react'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom"
const _nav = [ const _nav = [
{ {
@ -256,38 +256,41 @@ const _nav = [
// { // {
// _component: 'CSidebarNavDivider' // _component: 'CSidebarNavDivider'
// }, // },
// { {
// _component: 'CSidebarNavTitle', _component: 'CNavTitle',
// items: ['Extras'], anchor: 'Extras',
// }, },
// { {
// _component: 'CNavGroup', _component: 'CNavGroup',
// anchor: 'Pages', anchor: 'Pages',
// route: '/pages', icon: 'cil-star',
// icon: 'cil-star', items: [
// items: [ {
// { _component: 'CNavItem',
// _component: 'CNavItem', as: NavLink,
// anchor: 'Login', anchor: 'Login',
// to: '/login', to: '/pages/login',
// }, },
// { {
// _component: 'CNavItem', _component: 'CNavItem',
// anchor: 'Register', as: NavLink,
// to: '/register', anchor: 'Register',
// }, to: '/pages/register',
// { },
// _component: 'CNavItem', {
// anchor: 'Error 404', _component: 'CNavItem',
// to: '/404', as: NavLink,
// }, anchor: 'Error 404',
// { to: '/pages/404',
// _component: 'CNavItem', },
// anchor: 'Error 500', {
// to: '/500', _component: 'CNavItem',
// }, as: NavLink,
// ], anchor: 'Error 500',
// }, to: '/pages/500',
},
],
},
// { // {
// _component: 'CNavItem', // _component: 'CNavItem',
// anchor: 'Disabled', // anchor: 'Disabled',
@ -304,7 +307,7 @@ const _nav = [
// classanchor: 'm-2' // classanchor: 'm-2'
// }, // },
// { // {
// _component: 'CSidebarNavTitle', // _component: 'CNavTitle',
// items: ['Labels'] // 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 Users = React.lazy(() => import('./views/users/Users'));
const User = React.lazy(() => import('./views/users/User')); 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 = [ const routes = [
{ path: '/', exact: true, name: 'Home' }, { path: '/', exact: true, name: 'Home' },
{ path: '/dashboard', name: 'Dashboard', component: Dashboard }, { path: '/dashboard', name: 'Dashboard', component: Dashboard },
@ -76,6 +79,8 @@ const routes = [
{ path: '/notifications/badges', name: 'Badges', component: Badges }, { path: '/notifications/badges', name: 'Badges', component: Badges },
{ path: '/notifications/modals', name: 'Modals', component: Modals }, { path: '/notifications/modals', name: 'Modals', component: Modals },
{ path: '/notifications/toaster', name: 'Toaster', component: Toaster }, { 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: '/widgets', name: 'Widgets', component: Widgets },
{ path: '/users', exact: true, name: 'Users', component: Users }, { path: '/users', exact: true, name: 'Users', component: Users },
{ path: '/users/:id', exact: true, name: 'User Details', component: User } { 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 // If you want to override variables do it here
@import "variables"; @import "variables";
// Import CoreUI styles $enable-ltr: true;
@import "~@coreui/coreui/scss/coreui.scss"; $enable-rtl: true;
// Some temp fixes // Import styles
@import "fixes"; @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"; @import "custom";

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

@ -3,7 +3,6 @@ import {
CFade, CFade,
CValidFeedback, CValidFeedback,
CInvalidFeedback, CInvalidFeedback,
CTextarea,
CSwitch CSwitch
} from '@coreui/react' } from '@coreui/react'
import { import {
@ -18,27 +17,15 @@ import {
CDropdownItem, CDropdownItem,
CDropdownMenu, CDropdownMenu,
CDropdownToggle, CDropdownToggle,
// CFade,
CForm, CForm,
CFormCheck, CFormCheck,
CFormControl, CFormControl,
CFormLabel, CFormLabel,
CFormText, CFormText,
CFormSelect, CFormSelect,
// CValidFeedback,
// CInvalidFeedback,
// CTextarea,
// CInput,
// CInputFile,
// CInputRadio,
CInputGroup, CInputGroup,
// CInputGroupAppend,
// CInputGroupPrepend,
CInputGroupText, CInputGroupText,
// CLabel,
// CSelect,
CRow, CRow,
// CSwitch
} from '@coreui/react-ts' } from '@coreui/react-ts'
import CIcon from '@coreui/icons-react' import CIcon from '@coreui/icons-react'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'
@ -227,7 +214,8 @@ const BasicForms = () => {
<CFormLabel htmlFor="textarea-input">Textarea</CFormLabel> <CFormLabel htmlFor="textarea-input">Textarea</CFormLabel>
</CCol> </CCol>
<CCol xs="12" md="9"> <CCol xs="12" md="9">
<CTextarea <CFormControl
component="textarea"
name="textarea-input" name="textarea-input"
id="textarea-input" id="textarea-input"
rows="9" rows="9"
@ -759,10 +747,10 @@ const BasicForms = () => {
<CRow className="mb-3"> <CRow className="mb-3">
<CCol md="12"> <CCol md="12">
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CDropdown className="input-group-prepend"> <CDropdown>
<CDropdownToggle caret color="primary"> <CDropdownToggle caret color="primary">
Dropdown Dropdown
</CDropdownToggle> </CDropdownToggle>
<CDropdownMenu> <CDropdownMenu>
<CDropdownItem>Action</CDropdownItem> <CDropdownItem>Action</CDropdownItem>
<CDropdownItem>Another 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 React, { useState } from 'react'
import { import {
CToggler, CToggler,
CForm,
CInput,
CImg CImg
} from '@coreui/react' } from '@coreui/react'
import { import {
@ -13,6 +11,8 @@ import {
CDropdownItem, CDropdownItem,
CDropdownMenu, CDropdownMenu,
CDropdownToggle, CDropdownToggle,
CForm,
CFormControl,
CNavbar, CNavbar,
CNavbarNav, CNavbarNav,
CNavbarBrand, CNavbarBrand,
@ -48,8 +48,8 @@ const CNavbars = () => {
<CNavLink>Link</CNavLink> <CNavLink>Link</CNavLink>
</CNavbarNav> </CNavbarNav>
<CNavbarNav className="ms-auto"> <CNavbarNav className="ms-auto">
<CForm inline> <CForm className="d-flex">
<CInput <CFormControl
className="me-sm-2" className="me-sm-2"
placeholder="Search" placeholder="Search"
size="sm" size="sm"
@ -171,8 +171,8 @@ const CNavbars = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CNavbar light color="light"> <CNavbar light color="light">
<CForm inline> <CForm className="d-flex">
<CInput <CFormControl
className="me-sm-2" className="me-sm-2"
placeholder="Search" placeholder="Search"
size="sm" size="sm"
@ -189,8 +189,8 @@ const CNavbars = () => {
</CCardHeader> </CCardHeader>
<CCardBody> <CCardBody>
<CNavbar light color="light"> <CNavbar light color="light">
<CForm inline> <CForm className="d-flex">
<CInput <CFormControl
className="me-sm-2" className="me-sm-2"
placeholder="Username" placeholder="Username"
/> />

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

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

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

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

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

@ -1,5 +1,5 @@
import React from 'react' 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 CIcon from '@coreui/icons-react'
import { brandSet } from '@coreui/icons' import { brandSet } from '@coreui/icons'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'

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

@ -1,5 +1,5 @@
import React from 'react' 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 { freeSet } from '@coreui/icons'
import { getIconsView } from '../brands/Brands.js' import { getIconsView } from '../brands/Brands.js'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'

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

@ -1,5 +1,5 @@
import React from 'react' 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 { getIconsView } from '../brands/Brands.js'
import { flagSet } from '@coreui/icons' import { flagSet } from '@coreui/icons'
import { DocsLink } from 'src/reusable' import { DocsLink } from 'src/reusable'

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

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

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

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

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

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

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

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

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

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