refactor: update text color classNames

This commit is contained in:
Łukasz Holeczek 2021-05-18 23:22:27 +02:00
parent b922dada46
commit 9842172b67
8 changed files with 39 additions and 37 deletions

View File

@ -115,7 +115,7 @@ const Cards = () => {
<CCard style={{ width: '18rem' }}>
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardSubtitle className="mb-2 text-muted">Card subtitle</CCardSubtitle>
<CCardSubtitle className="mb-2 text-medium-emphasis">Card subtitle</CCardSubtitle>
<CCardText>
Some quick example text to build on the card title and make up the bulk of the
card's content.
@ -329,7 +329,7 @@ const Cards = () => {
</CCardText>
<CButton href="#">Go somewhere</CButton>
</CCardBody>
<CCardFooter className="text-muted">2 days ago</CCardFooter>
<CCardFooter className="text-medium-emphasis">2 days ago</CCardFooter>
</CCard>
</Example>
</CCardBody>
@ -572,7 +572,7 @@ const Cards = () => {
additional content. This content is a little bit longer.
</CCardText>
<CCardText>
<small className="text-muted">Last updated 3 mins ago</small>
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
</CCardText>
</CCardBody>
</CCard>
@ -586,7 +586,7 @@ const Cards = () => {
additional content. This content is a little bit longer.
</CCardText>
<CCardText>
<small className="text-muted">Last updated 3 mins ago</small>
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
</CCardText>
</CCardBody>
<CCardImage
@ -777,7 +777,7 @@ const Cards = () => {
additional content. This content is a little bit longer.
</CCardText>
<CCardText>
<small className="text-muted">Last updated 3 mins ago</small>
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
</CCardText>
</CCardBody>
</CCard>
@ -807,7 +807,7 @@ const Cards = () => {
content.
</CCardText>
<CCardText>
<small className="text-muted">Last updated 3 mins ago</small>
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
</CCardText>
</CCardBody>
</CCard>
@ -838,7 +838,7 @@ const Cards = () => {
that equal height action.
</CCardText>
<CCardText>
<small className="text-muted">Last updated 3 mins ago</small>
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
</CCardText>
</CCardBody>
</CCard>
@ -876,7 +876,7 @@ const Cards = () => {
</CCardText>
</CCardBody>
<CCardFooter>
<small className="text-muted">Last updated 3 mins ago</small>
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
</CCardFooter>
</CCard>
<CCard>
@ -906,7 +906,7 @@ const Cards = () => {
</CCardText>
</CCardBody>
<CCardFooter>
<small className="text-muted">Last updated 3 mins ago</small>
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
</CCardFooter>
</CCard>
<CCard>
@ -937,7 +937,7 @@ const Cards = () => {
</CCardText>
</CCardBody>
<CCardFooter>
<small className="text-muted">Last updated 3 mins ago</small>
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
</CCardFooter>
</CCard>
</CCardGroup>
@ -989,7 +989,7 @@ const Cards = () => {
</CCardText>
</CCardBody>
<CCardFooter>
<small className="text-muted">Last updated 3 mins ago</small>
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
</CCardFooter>
</CCard>
</CCol>
@ -1021,7 +1021,7 @@ const Cards = () => {
</CCardText>
</CCardBody>
<CCardFooter>
<small className="text-muted">Last updated 3 mins ago</small>
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
</CCardFooter>
</CCard>
</CCol>
@ -1053,7 +1053,7 @@ const Cards = () => {
</CCardText>
</CCardBody>
<CCardFooter>
<small className="text-muted">Last updated 3 mins ago</small>
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
</CCardFooter>
</CCard>
</CCol>
@ -1085,7 +1085,7 @@ const Cards = () => {
</CCardText>
</CCardBody>
<CCardFooter>
<small className="text-muted">Last updated 3 mins ago</small>
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
</CCardFooter>
</CCard>
</CCol>
@ -1125,7 +1125,7 @@ const Cards = () => {
</CCardText>
</CCardBody>
<CCardFooter>
<small className="text-muted">Last updated 3 mins ago</small>
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
</CCardFooter>
</CCard>
</CCol>
@ -1157,7 +1157,7 @@ const Cards = () => {
</CCardText>
</CCardBody>
<CCardFooter>
<small className="text-muted">Last updated 3 mins ago</small>
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
</CCardFooter>
</CCard>
</CCol>
@ -1189,7 +1189,7 @@ const Cards = () => {
</CCardText>
</CCardBody>
<CCardFooter>
<small className="text-muted">Last updated 3 mins ago</small>
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
</CCardFooter>
</CCard>
</CCol>
@ -1221,7 +1221,7 @@ const Cards = () => {
</CCardText>
</CCardBody>
<CCardFooter>
<small className="text-muted">Last updated 3 mins ago</small>
<small className="text-medium-emphasis">Last updated 3 mins ago</small>
</CCardFooter>
</CCard>
</CCol>

View File

@ -283,24 +283,24 @@ const ListGroups = () => {
<CListGroupItem component="a" href="#">
<div className="d-flex w-100 justify-content-between">
<h5 className="mb-1">List group item heading</h5>
<small className="text-muted">3 days ago</small>
<small className="text-medium-emphasis">3 days ago</small>
</div>
<p className="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
varius blandit.
</p>
<small className="text-muted">Donec id elit non mi porta.</small>
<small className="text-medium-emphasis">Donec id elit non mi porta.</small>
</CListGroupItem>
<CListGroupItem component="a" href="#">
<div className="d-flex w-100 justify-content-between">
<h5 className="mb-1">List group item heading</h5>
<small className="text-muted">3 days ago</small>
<small className="text-medium-emphasis">3 days ago</small>
</div>
<p className="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
varius blandit.
</p>
<small className="text-muted">Donec id elit non mi porta.</small>
<small className="text-medium-emphasis">Donec id elit non mi porta.</small>
</CListGroupItem>
</CListGroup>
</Example>

View File

@ -17,7 +17,7 @@ import CIcon from '@coreui/icons-react'
const Login = () => {
return (
<div className="c-app c-default-layout flex-row align-items-center">
<div className="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="8">
@ -26,7 +26,7 @@ const Login = () => {
<CCardBody>
<CForm>
<h1>Login</h1>
<p className="text-muted">Sign In to your account</p>
<p className="text-medium-emphasis">Sign In to your account</p>
<CInputGroup className="mb-3">
<CInputGroupText>
<CIcon name="cil-user" />
@ -58,7 +58,7 @@ const Login = () => {
</CForm>
</CCardBody>
</CCard>
<CCard className="text-white bg-primary py-5 d-md-down-none" style={{ width: '44%' }}>
<CCard className="text-white bg-primary py-5" style={{ width: '44%' }}>
<CCardBody className="text-center">
<div>
<h2>Sign up</h2>

View File

@ -12,14 +12,16 @@ import CIcon from '@coreui/icons-react'
const Page404 = () => {
return (
<div className="c-app c-default-layout flex-row align-items-center">
<div className="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="6">
<div className="clearfix">
<h1 className="float-start display-3 me-4">404</h1>
<h4 className="pt-3">Oops! You{"'"}re lost.</h4>
<p className="text-muted float-start">The page you are looking for was not found.</p>
<p className="text-medium-emphasis float-start">
The page you are looking for was not found.
</p>
</div>
<CInputGroup className="input-prepend">
<CInputGroupText>

View File

@ -12,14 +12,14 @@ import CIcon from '@coreui/icons-react'
const Page500 = () => {
return (
<div className="c-app c-default-layout flex-row align-items-center">
<div className="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="6">
<span className="clearfix">
<h1 className="float-start display-3 me-4">500</h1>
<h4 className="pt-3">Houston, we have a problem!</h4>
<p className="text-muted float-start">
<p className="text-medium-emphasis float-start">
The page you are looking for is temporarily unavailable.
</p>
</span>

View File

@ -16,7 +16,7 @@ import CIcon from '@coreui/icons-react'
const Register = () => {
return (
<div className="c-app c-default-layout flex-row align-items-center">
<div className="bg-light min-vh-100 d-flex flex-row align-items-center">
<CContainer>
<CRow className="justify-content-center">
<CCol md="9" lg="7" xl="6">
@ -24,7 +24,7 @@ const Register = () => {
<CCardBody className="p-4">
<CForm>
<h1>Register</h1>
<p className="text-muted">Create your account</p>
<p className="text-medium-emphasis">Create your account</p>
<CInputGroup className="mb-3">
<CInputGroupText>
<CIcon name="cil-user" />

View File

@ -18,11 +18,11 @@ const ThemeView = () => {
<table className="table w-100" ref={ref}>
<tbody>
<tr>
<td className="text-muted">HEX:</td>
<td className="text-medium-emphasis">HEX:</td>
<td className="font-weight-bold">{rgbToHex(color)}</td>
</tr>
<tr>
<td className="text-muted">RGB:</td>
<td className="text-medium-emphasis">RGB:</td>
<td className="font-weight-bold">{color}</td>
</tr>
</tbody>

View File

@ -168,7 +168,7 @@ const Widgets = () => {
color="primary"
footer={
<CLink
className="font-weight-bold font-xs btn-block text-muted"
className="font-weight-bold font-xs btn-block text-medium-emphasis"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
@ -189,7 +189,7 @@ const Widgets = () => {
color="info"
footer={
<CLink
className="font-weight-bold font-xs btn-block text-muted"
className="font-weight-bold font-xs btn-block text-medium-emphasis"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
@ -210,7 +210,7 @@ const Widgets = () => {
color="warning"
footer={
<CLink
className="font-weight-bold font-xs btn-block text-muted"
className="font-weight-bold font-xs btn-block text-medium-emphasis"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
@ -231,7 +231,7 @@ const Widgets = () => {
color="danger"
footer={
<CLink
className="font-weight-bold font-xs btn-block text-muted"
className="font-weight-bold font-xs btn-block text-medium-emphasis"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"