Skip to content

Commit eeb7a56

Browse files
xidedixxidedix
committed
refactor: Colors
1 parent c46cb84 commit eeb7a56

File tree

2 files changed

+150
-72
lines changed

2 files changed

+150
-72
lines changed

‎src/views/Theme/Colors/Colors.js

Lines changed: 149 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,63 @@
11
import React, { Component } from 'react';
2+
import ReactDOM from 'react-dom';
3+
import classNames from 'classnames';
4+
import { Row, Col } from 'reactstrap'
5+
import { rgbToHex }from '@coreui/coreui/js/src/utilities/'
6+
7+
class ThemeView extends Component {
8+
constructor(props) {
9+
super(props);
10+
this.state = {
11+
bgColor: 'rgb(255, 0, 0)'
12+
}
13+
}
14+
15+
componentDidMount () {
16+
const elem = ReactDOM.findDOMNode(this).parentNode.firstChild
17+
const color = window.getComputedStyle(elem).getPropertyValue('background-color')
18+
this.setState({
19+
bgColor: color
20+
})
21+
}
22+
23+
render() {
24+
25+
return (
26+
<table className="w-100">
27+
<tbody>
28+
<tr>
29+
<td className="text-muted">HEX:</td>
30+
<td className="font-weight-bold">{ rgbToHex(this.state.bgColor) }</td>
31+
</tr>
32+
<tr>
33+
<td className="text-muted">RGB:</td>
34+
<td className="font-weight-bold">{ this.state.bgColor }</td>
35+
</tr>
36+
</tbody>
37+
</table>
38+
)
39+
}
40+
}
41+
42+
class ThemeColor extends Component {
43+
constructor(props) {
44+
super(props);
45+
}
46+
render() {
47+
48+
const { className, children, ...attributes } = this.props
49+
50+
const classes = classNames(className, 'theme-color w-75 rounded mb-3')
51+
52+
return (
53+
<Col xl="2" md="4" sm="6" xs="12" className="mb-4">
54+
<div className={classes} style={{paddingTop: '75%'}}></div>
55+
{children}
56+
<ThemeView/>
57+
</Col>
58+
)
59+
}
60+
}
261

362
class Colors extends Component {
463
render() {
@@ -9,91 +68,110 @@ class Colors extends Component {
968
<i className="icon-drop"></i> Theme colors
1069
</div>
1170
<div className="card-body">
12-
<div className="row">
13-
<div className="col-md-4">
14-
<div className="p-3 mb-3 bg-primary">Primary</div>
15-
</div>
16-
<div className="col-md-4">
17-
<div className="p-3 mb-3 bg-secondary">Secondary</div>
18-
</div>
19-
<div className="col-md-4">
20-
<div className="p-3 mb-3 bg-success">Success</div>
21-
</div>
22-
<div className="col-md-4">
23-
<div className="p-3 mb-3 bg-danger">Danger</div>
24-
</div>
25-
<div className="col-md-4">
26-
<div className="p-3 mb-3 bg-warning">Warning</div>
27-
</div>
28-
<div className="col-md-4">
29-
<div className="p-3 mb-3 bg-info">Info</div>
30-
</div>
31-
<div className="col-md-4">
32-
<div className="p-3 mb-3 bg-light">Light</div>
33-
</div>
34-
<div className="col-md-4">
35-
<div className="p-3 mb-3 bg-dark">Dark</div>
36-
</div>
37-
</div>
71+
<Row>
72+
<ThemeColor className="bg-primary">
73+
<h6>Brand Primary Color</h6>
74+
</ThemeColor>
75+
<ThemeColor className="bg-secondary">
76+
<h6>Brand Secondary Color</h6>
77+
</ThemeColor>
78+
<ThemeColor className="bg-success">
79+
<h6>Brand Success Color</h6>
80+
</ThemeColor>
81+
<ThemeColor className="bg-danger">
82+
<h6>Brand Danger Color</h6>
83+
</ThemeColor>
84+
<ThemeColor className="bg-warning">
85+
<h6>Brand Warning Color</h6>
86+
</ThemeColor>
87+
<ThemeColor className="bg-info">
88+
<h6>Brand Info Color</h6>
89+
</ThemeColor>
90+
<ThemeColor className="bg-light">
91+
<h6>Brand Light Color</h6>
92+
</ThemeColor>
93+
<ThemeColor className="bg-dark">
94+
<h6>Brand Dark Color</h6>
95+
</ThemeColor>
96+
</Row>
3897
</div>
3998
</div>
4099
<div className="card">
41100
<div className="card-header">
42101
<i className="icon-drop"></i> Grays
43102
</div>
44103
<div className="card-body">
45-
<div className="row mb-3">
46-
<div className="col-md-4">
47-
<div className="p-3 bg-gray-100">100</div>
48-
<div className="p-3 bg-gray-200">200</div>
49-
<div className="p-3 bg-gray-300">300</div>
50-
<div className="p-3 bg-gray-400">400</div>
51-
<div className="p-3 bg-gray-500">500</div>
52-
<div className="p-3 bg-gray-600">600</div>
53-
<div className="p-3 bg-gray-700">700</div>
54-
<div className="p-3 bg-gray-800">800</div>
55-
<div className="p-3 bg-gray-900">900</div>
56-
</div>
57-
</div>
104+
<Row className="mb-3">
105+
<ThemeColor className="bg-gray-100">
106+
<h6>Gray 100 Color</h6>
107+
</ThemeColor>
108+
<ThemeColor className="bg-gray-200">
109+
<h6>Gray 200 Color</h6>
110+
</ThemeColor>
111+
<ThemeColor className="bg-gray-300">
112+
<h6>Gray 300 Color</h6>
113+
</ThemeColor>
114+
<ThemeColor className="bg-gray-400">
115+
<h6>Gray 400 Color</h6>
116+
</ThemeColor>
117+
<ThemeColor className="bg-gray-500">
118+
<h6>Gray 500 Color</h6>
119+
</ThemeColor>
120+
<ThemeColor className="bg-gray-600">
121+
<h6>Gray 600 Color</h6>
122+
</ThemeColor>
123+
<ThemeColor className="bg-gray-700">
124+
<h6>Gray 700 Color</h6>
125+
</ThemeColor>
126+
<ThemeColor className="bg-gray-800">
127+
<h6>Gray 800 Color</h6>
128+
</ThemeColor>
129+
<ThemeColor className="bg-gray-900">
130+
<h6>Gray 900 Color</h6>
131+
</ThemeColor>
132+
</Row>
58133
</div>
59134
</div>
60135
<div className="card">
61136
<div className="card-header">
62137
<i className="icon-drop"></i> Additional colors
63138
</div>
64139
<div className="card-body">
65-
<div className="row">
66-
<div className="col-md-4">
67-
<div className="p-3 mb-3 bg-blue">Blue</div>
68-
</div>
69-
<div className="col-md-4">
70-
<div className="p-3 mb-3 bg-indigo">Indigo</div>
71-
</div>
72-
<div className="col-md-4">
73-
<div className="p-3 mb-3 bg-purple">Purple</div>
74-
</div>
75-
<div className="col-md-4">
76-
<div className="p-3 mb-3 bg-pink">Pink</div>
77-
</div>
78-
<div className="col-md-4">
79-
<div className="p-3 mb-3 bg-red">Red</div>
80-
</div>
81-
<div className="col-md-4">
82-
<div className="p-3 mb-3 bg-orange">Orange</div>
83-
</div>
84-
<div className="col-md-4">
85-
<div className="p-3 mb-3 bg-yellow">Yellow</div>
86-
</div>
87-
<div className="col-md-4">
88-
<div className="p-3 mb-3 bg-green">Green</div>
89-
</div>
90-
<div className="col-md-4">
91-
<div className="p-3 mb-3 bg-teal">Teal</div>
92-
</div>
93-
<div className="col-md-4">
94-
<div className="p-3 mb-3 bg-cyan">Cyan</div>
95-
</div>
96-
</div>
140+
<Row>
141+
<ThemeColor className="bg-blue">
142+
<h6>Blue Color</h6>
143+
</ThemeColor>
144+
<ThemeColor className="bg-light-blue">
145+
<h6>Light Blue Color</h6>
146+
</ThemeColor>
147+
<ThemeColor className="bg-indigo">
148+
<h6>Indigo Color</h6>
149+
</ThemeColor>
150+
<ThemeColor className="bg-purple">
151+
<h6>Purple Color</h6>
152+
</ThemeColor>
153+
<ThemeColor className="bg-pink">
154+
<h6>Pink Color</h6>
155+
</ThemeColor>
156+
<ThemeColor className="bg-red">
157+
<h6>Red Color</h6>
158+
</ThemeColor>
159+
<ThemeColor className="bg-orange">
160+
<h6>Orange Color</h6>
161+
</ThemeColor>
162+
<ThemeColor className="bg-yellow">
163+
<h6>Yellow Color</h6>
164+
</ThemeColor>
165+
<ThemeColor className="bg-green">
166+
<h6>Green Color</h6>
167+
</ThemeColor>
168+
<ThemeColor className="bg-teal">
169+
<h6>Teal Color</h6>
170+
</ThemeColor>
171+
<ThemeColor className="bg-cyan">
172+
<h6>Cyan Color</h6>
173+
</ThemeColor>
174+
</Row>
97175
</div>
98176
</div>
99177
</div>

‎src/views/Theme/Colors/Colors.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ it('renders without crashing', () => {
66
const div = document.createElement('div');
77
ReactDOM.render(<Colors />, div);
88
ReactDOM.unmountComponentAtNode(div);
9-
});
9+
});

0 commit comments

Comments
 (0)