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

View File

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

View File

@ -17,7 +17,7 @@ import CIcon from '@coreui/icons-react'
const Login = () => { const Login = () => {
return ( 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> <CContainer>
<CRow className="justify-content-center"> <CRow className="justify-content-center">
<CCol md="8"> <CCol md="8">
@ -26,7 +26,7 @@ const Login = () => {
<CCardBody> <CCardBody>
<CForm> <CForm>
<h1>Login</h1> <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"> <CInputGroup className="mb-3">
<CInputGroupText> <CInputGroupText>
<CIcon name="cil-user" /> <CIcon name="cil-user" />
@ -58,7 +58,7 @@ const Login = () => {
</CForm> </CForm>
</CCardBody> </CCardBody>
</CCard> </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"> <CCardBody className="text-center">
<div> <div>
<h2>Sign up</h2> <h2>Sign up</h2>

View File

@ -12,14 +12,16 @@ import CIcon from '@coreui/icons-react'
const Page404 = () => { const Page404 = () => {
return ( 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> <CContainer>
<CRow className="justify-content-center"> <CRow className="justify-content-center">
<CCol md="6"> <CCol md="6">
<div className="clearfix"> <div className="clearfix">
<h1 className="float-start display-3 me-4">404</h1> <h1 className="float-start display-3 me-4">404</h1>
<h4 className="pt-3">Oops! You{"'"}re lost.</h4> <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> </div>
<CInputGroup className="input-prepend"> <CInputGroup className="input-prepend">
<CInputGroupText> <CInputGroupText>

View File

@ -12,14 +12,14 @@ import CIcon from '@coreui/icons-react'
const Page500 = () => { const Page500 = () => {
return ( 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> <CContainer>
<CRow className="justify-content-center"> <CRow className="justify-content-center">
<CCol md="6"> <CCol md="6">
<span className="clearfix"> <span className="clearfix">
<h1 className="float-start display-3 me-4">500</h1> <h1 className="float-start display-3 me-4">500</h1>
<h4 className="pt-3">Houston, we have a problem!</h4> <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. The page you are looking for is temporarily unavailable.
</p> </p>
</span> </span>

View File

@ -16,7 +16,7 @@ import CIcon from '@coreui/icons-react'
const Register = () => { const Register = () => {
return ( 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> <CContainer>
<CRow className="justify-content-center"> <CRow className="justify-content-center">
<CCol md="9" lg="7" xl="6"> <CCol md="9" lg="7" xl="6">
@ -24,7 +24,7 @@ const Register = () => {
<CCardBody className="p-4"> <CCardBody className="p-4">
<CForm> <CForm>
<h1>Register</h1> <h1>Register</h1>
<p className="text-muted">Create your account</p> <p className="text-medium-emphasis">Create your account</p>
<CInputGroup className="mb-3"> <CInputGroup className="mb-3">
<CInputGroupText> <CInputGroupText>
<CIcon name="cil-user" /> <CIcon name="cil-user" />

View File

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

View File

@ -168,7 +168,7 @@ const Widgets = () => {
color="primary" color="primary"
footer={ footer={
<CLink <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/" href="https://coreui.io/"
rel="noopener norefferer" rel="noopener norefferer"
target="_blank" target="_blank"
@ -189,7 +189,7 @@ const Widgets = () => {
color="info" color="info"
footer={ footer={
<CLink <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/" href="https://coreui.io/"
rel="noopener norefferer" rel="noopener norefferer"
target="_blank" target="_blank"
@ -210,7 +210,7 @@ const Widgets = () => {
color="warning" color="warning"
footer={ footer={
<CLink <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/" href="https://coreui.io/"
rel="noopener norefferer" rel="noopener norefferer"
target="_blank" target="_blank"
@ -231,7 +231,7 @@ const Widgets = () => {
color="danger" color="danger"
footer={ footer={
<CLink <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/" href="https://coreui.io/"
rel="noopener norefferer" rel="noopener norefferer"
target="_blank" target="_blank"