Skip to content

Commit b2bf4d3

Browse files
guardofparadiseguardofparadise
authored
Merge pull request #6 from flatlogic/colors_update
Colors update
2 parents 87dbb23 + 7637ca1 commit b2bf4d3

File tree

62 files changed

+537
-410
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+537
-410
lines changed

‎src/components/ColorPicker/ColorPicker.module.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
flex-wrap: wrap;
66

77
.colorBox {
8-
min-width: 30px;
9-
height: 30px;
10-
border: 2px solid $border-color;
11-
border-radius: $border-radius;
8+
min-width: 25px;
9+
height: 25px;
10+
border: 1px solid $border-color;
11+
border-radius: 0;
1212
cursor: pointer;
1313
margin: 3px;
1414
transition: $transition-base;

‎src/components/Header/Header.js

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -62,24 +62,24 @@ class Header extends React.Component {
6262
run: true,
6363
steps: [
6464
{
65-
content: 'You can adjust sidebar, or leave it closed 🤩',
65+
content: 'You can adjust sidebar, or leave it closed 😃',
6666
placement: 'bottom',
6767
target: '#toggleSidebar',
6868
textAlign: 'center',
6969
disableBeacon: true
7070
},
7171
{
72-
content: "Admin can check out his messages and tasks easily 🤔",
72+
content: "Admin can check out his messages and tasks easily 😃",
7373
placement: 'bottom',
7474
target: '.dropdown-toggle',
7575
},
7676
{
77-
content: "Clickable cog can provide you with link to important pages 🤠",
77+
content: "Clickable cog can provide you with link to important pages 😄",
7878
placement: 'bottom',
7979
target: '.tutorial-dropdown',
8080
},
8181
{
82-
content: 'Check out chat, do not miss new ideas 🧐',
82+
content: 'Check out chat, do not miss new ideas 🙂',
8383
placement: 'bottom',
8484
target: '#toggle-chat',
8585
},
@@ -217,11 +217,12 @@ class Header extends React.Component {
217217
display: 'none'
218218
},
219219
buttonNext: {
220-
backgroundColor: "#FFC247",
220+
backgroundColor: "#21AE8C",
221221
fontSize: 13,
222222
borderRadius: 4,
223223
color: "#ffffff",
224-
fontWeight: "bold"
224+
fontWeight: "bold",
225+
outline: "none"
225226
},
226227
buttonBack: {
227228
color: "#798892",
@@ -306,7 +307,7 @@ class Header extends React.Component {
306307
)}
307308
</span>
308309
<span className={`small ${this.props.sidebarStatic ? s.adminEmail : ''} ${chroma(navbarColor).luminance() < 0.4 ? "text-white" : ""}`}>{user.name || user.email || "Philip smith"}</span>
309-
<span className="ml-1 circle bg-warning text-white fw-bold">13</span>
310+
<span className="ml-1 circle bg-primary text-white fw-bold">13</span>
310311
</DropdownToggle>
311312
<DropdownMenu right className={`${s.notificationsWrapper} py-0 animated animated-fast fadeInUp`}>
312313
<Notifications />

‎src/components/Header/Header.module.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616
margin-right: $content-padding-sm;
1717
}
1818
}
19-
19+
a {
20+
color: #495057
21+
}
2022
@include media-breakpoint-down(sm) {
2123
padding: 7px 0;
2224
}

‎src/components/Helper/Helper.js

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,29 +28,29 @@ class Helper extends Component {
2828
run: false,
2929
steps: [
3030
{
31-
content: 'Easily adjust navbar 🤔',
31+
content: 'Easily adjust navbar 😃',
3232
placement: 'left',
3333
target: '.navbar-type-switcher',
3434
textAlign: 'center',
3535
disableBeacon: true,
3636
},
3737
{
38-
content: "Choose a color for navbar, create unique layout ✌️",
38+
content: "Choose a color for navbar, create unique layout 😄",
3939
placement: 'left',
4040
target: '.navbar-color-picker',
4141
},
4242
{
43-
content: "Also customize sidebar type, it's cool 👌",
43+
content: "Also customize sidebar type, it's cool 🙂",
4444
placement: 'left',
4545
target: '.sidebar-type-switcher',
4646
},
4747
{
48-
content: 'We also have different colors for sidebar, pick one from palette 😇',
48+
content: 'We also have different colors for sidebar, pick one from palette 😃',
4949
placement: 'left',
5050
target: '.sidebar-color-picker',
5151
},
5252
{
53-
content: 'Purchase out template if you like it, we appreciate it 🤗!',
53+
content: 'Purchase out template if you like it, we appreciate it 😄!',
5454
placement: 'left',
5555
target: '.purchase-button'
5656
},
@@ -116,6 +116,7 @@ class Helper extends Component {
116116
steps={this.state.steps}
117117
disableOverlay={true}
118118
disableScrolling
119+
outline="none"
119120
styles={{
120121
options: {
121122
arrowColor: '#ffffff',
@@ -144,7 +145,7 @@ class Helper extends Component {
144145
display: 'none'
145146
},
146147
buttonNext: {
147-
backgroundColor: "#FFC247",
148+
backgroundColor: "#21AE8C",
148149
fontSize: 13,
149150
borderRadius: 4,
150151
color: "#ffffff",
@@ -163,7 +164,7 @@ class Helper extends Component {
163164
}}
164165
/>
165166

166-
<div className={`${s.themeHelperBtn} bg-warning helper-button`} onClick={this.toggle}>
167+
<div className={`${s.themeHelperBtn} bg-primary helper-button`} onClick={this.toggle}>
167168
<div className={cx(s.themeHelperSpinner, 'text-white')}>
168169
<i className="la la-cog" />
169170
<i className="la la-cog" />
@@ -226,14 +227,15 @@ class Helper extends Component {
226227
href="https://flatlogic.com/admin-dashboards/sing-app-react"
227228
target="_blank"
228229
className="btn-rounded-f btn-block fs-mini purchase-button"
229-
color="warning"
230+
color="info"
230231
>
231232
<span className="text-white">Purchase</span>
232233
</Button>
233234
<Button
234235
href="http://demo.flatlogic.com/sing-app/documentation/"
235236
target="_blank"
236237
className="btn-rounded-f btn-block fs-mini text-white"
238+
color="primary"
237239
>
238240
Documentation
239241
</Button>

‎src/components/Sidebar/LinksGroup/LinksGroup.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ class LinksGroup extends Component {
7676
<span className={classnames('icon', s.icon)}>
7777
<i className={`fi ${this.props.iconName}`} />
7878
</span>
79-
{this.props.header} {this.props.label && <sup className={`${s.headerLabel}`}>{this.props.label}</sup>}
79+
{this.props.header} {this.props.label && <sup className={`${s.headerLabel} ${s.headerUpdate}`}>{this.props.label}</sup>}
8080
{this.props.badge && <Badge className={s.badge} pill>9</Badge>}
8181
</NavLink>
8282
</li>

‎src/components/Sidebar/LinksGroup/LinksGroup.module.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
line-height: 8px;
6666
margin-top: 9px;
6767
margin-right: 15px;
68-
background: var(--sidebar-item-active-color);
68+
background: $blue;
6969
color: var(--badge-item-color);
7070
@media (min-width: map_get($grid-breakpoints, lg)) and (min-height: $screen-lg-height), (max-width: map_get($grid-breakpoints, md) - 1px) {
7171
margin-top: 16px;
@@ -76,6 +76,10 @@
7676
color: var(--important-notification)
7777
}
7878

79+
.headerUpdate {
80+
color: var(--update-notification)
81+
}
82+
7983
a.headerLinkActive {
8084
color: var(--sidebar-item-active-color);
8185
font-weight: $font-weight-normal;
@@ -119,7 +123,6 @@
119123
box-shadow: none;
120124
margin: 0;
121125
border-radius: 0;
122-
background-color: var(--sidebar-panel-bg-color);
123126

124127
a.headerLinkActive {
125128
font-weight: $font-weight-semi-bold;

‎src/components/Sidebar/Sidebar.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -409,19 +409,19 @@ class Sidebar extends React.Component {
409409
<ul className={s.sidebarLabels}>
410410
<li>
411411
<a href="#">
412-
<i className="fa fa-circle text-warning mr-2" />
412+
<i className="fa fa-circle text-danger mr-2" />
413413
<span className={s.labelName}>My Recent</span>
414414
</a>
415415
</li>
416416
<li>
417417
<a href="#">
418-
<i className="fa fa-circle text-gray mr-2" />
418+
<i className="fa fa-circle text-info mr-2" />
419419
<span className={s.labelName}>Starred</span>
420420
</a>
421421
</li>
422422
<li>
423423
<a href="#">
424-
<i className="fa fa-circle text-danger mr-2" />
424+
<i className="fa fa-circle text-primary mr-2" />
425425
<span className={s.labelName}>Background</span>
426426
</a>
427427
</li>

‎src/components/Widget/Widget.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,7 @@ class Widget extends React.Component {
331331
>
332332
<div className={`${s.widgetBody} widget-body ${bodyClass}`}>
333333
{reloading || fetchingData ? <Loader className={s.widgetLoader} size={40}/> : customBody ? (
334-
<div className="jumbotron handle bg-gray text-white mb-0">
334+
<div className="jumbotron handle bg-inverse text-white mb-0">
335335
<div className="container">
336336
<h1>Draggable story!</h1>
337337
<p className="lead">

‎src/config.js

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,15 @@ export default {
1414
},
1515
app: {
1616
colors: {
17-
dark: "#313947",
18-
light: "#ffffff",
19-
blue: "#547fff",
20-
gray: "#3D5C70",
21-
green: "#3abf94",
22-
violet: "#B077FF",
23-
yellow: "#ffc247",
24-
danger: "#f55d5d",
17+
dark: "#002B49",
18+
light: "#FFFFFF",
19+
sea: "#004472",
20+
sky: "#E9EBEF",
21+
wave: "#D1E7F6",
22+
rain: "#CCDDE9",
23+
middle: "#D7DFE6",
24+
black: "#13191D",
25+
salat: "#21AE8C",
2526
},
2627
}
2728
};

‎src/pages/analytics/Analytics.js

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,9 @@ class Analytics extends Component {
7272
dataLabels: {
7373
enabled: false
7474
},
75+
borderWidth: 0,
7576
showInLegend: true,
76-
innerSize: 80,
77+
innerSize: 60,
7778
size: 100,
7879
states: {
7980
hover: {
@@ -84,13 +85,13 @@ class Analytics extends Component {
8485
}
8586
}
8687
},
87-
colors: ['#ffc247', '#f55d5d', '#9964e3'],
88+
colors: ['#FD5F00', '#005792', '#1A86D0'],
8889
legend: {
8990
align: 'right',
9091
verticalAlign: 'middle',
9192
layout: 'vertical',
9293
itemStyle: {
93-
color: '#798892',
94+
color: '#788898',
9495
fontWeight: 400,
9596
},
9697
itemHoverStyle: {
@@ -128,7 +129,7 @@ class Analytics extends Component {
128129
fetchingData={isReceiving}
129130
title={<h5>Visits Today</h5>}
130131
>
131-
<div className="d-flex justify-content-between align-items-center mb">
132+
<div className="d-flex justify-content-between align-items-center mb h3">
132133
<h2 style={{fontSize: '2.1rem'}}>{visits.count}</h2>
133134
<i className="la la-arrow-right text-success rotate-315"/>
134135
</div>
@@ -179,23 +180,23 @@ class Analytics extends Component {
179180
>
180181
<p className="text-muted d-flex flex-wrap">
181182
<small className="mr-lg d-flex align-items-center">
182-
<span className="circle bg-success text-success mr-xs" style={{ fontSize: '4px' }}>.</span>
183+
<span className="circle bg-danger text-success mr-xs" style={{ fontSize: '4px' }}>.</span>
183184
This Period
184185
</small>
185186
<small className="mr-lg d-flex align-items-center">
186-
<span className="circle bg-warning text-warning mr-xs" style={{ fontSize: '4px' }}>.</span>
187+
<span className="circle bg-primary text-warning mr-xs" style={{ fontSize: '4px' }}>.</span>
187188
Last Period
188189
</small>
189190
</p>
190191
<h6 className="fs-sm text-muted">SDK</h6>
191-
<Progress color="success" className="progress-sm" style={{height: '3px', marginBottom: '5px'}}
192+
<Progress color="primary" className="progress-sm" style={{height: '3px', marginBottom: '5px'}}
192193
value={performance.sdk?.this_period_pct}/>
193-
<Progress color="info" className="progress-sm" style={{height: '3px'}}
194+
<Progress color="danger" className="progress-sm" style={{height: '3px'}}
194195
value={performance.sdk?.last_period_pct}/>
195196
<h6 className="mt fs-sm text-muted">Integration</h6>
196-
<Progress color="success" className="progress-sm" style={{height: '3px', marginBottom: '5px'}}
197+
<Progress color="primary" className="progress-sm" style={{height: '3px', marginBottom: '5px'}}
197198
value={performance.integration?.this_period_pct}/>
198-
<Progress color="info" className="progress-sm" style={{height: '3px'}}
199+
<Progress color="danger" className="progress-sm" style={{height: '3px'}}
199200
value={performance.integration?.last_period_pct}/>
200201
</Widget>
201202
</div>
@@ -213,9 +214,10 @@ class Analytics extends Component {
213214
<p className="width-150"><small>{server[1]?.pct}% <span style={{ color: '#a3aeb7' }}>/</span> {server[1]?.temp}°С <span style={{ color: '#a3aeb7' }}>/</span> {server[1]?.frequency} Ghz</small></p>
214215
<div style={{width: "calc(100% - 150px)"}}>
215216
<Trend
216-
gradient={['#ffc247']}
217+
gradient={['#FD5F00']}
217218
height={30}
218219
smooth
220+
strokeWidth="4"
219221
data={this.getRandomData()}
220222
/>
221223
</div>
@@ -224,9 +226,10 @@ class Analytics extends Component {
224226
<p className="width-150"><small>{server[2]?.pct}% <span style={{ color: '#a3aeb7' }}>/</span> {server[2]?.temp}°С <span style={{ color: '#a3aeb7' }}>/</span> {server[2]?.frequency} Ghz</small></p>
225227
<div style={{width: "calc(100% - 150px)"}}>
226228
<Trend
227-
gradient={['#F55D5D']}
229+
gradient={['#005792']}
228230
height={30}
229231
smooth
232+
strokeWidth="4"
230233
data={this.getRandomData()}
231234
/>
232235
</div>
@@ -235,9 +238,10 @@ class Analytics extends Component {
235238
<p className="width-150"><small>{server[2]?.pct}% <span style={{ color: '#a3aeb7' }}>/</span> {server[2]?.temp}°С <span style={{ color: '#a3aeb7' }}>/</span> {server[2]?.frequency} Ghz</small></p>
236239
<div style={{width: "calc(100% - 150px)"}}>
237240
<Trend
238-
gradient={['#3abf94']}
241+
gradient={['#1A86D0']}
239242
height={30}
240243
smooth
244+
strokeWidth="4"
241245
data={this.getRandomData()}
242246
/>
243247
</div>
@@ -284,7 +288,7 @@ class Analytics extends Component {
284288
className="widget"
285289
bodyClass={cx(s.notifications, 'w-100 mt-lg')}
286290
title={
287-
<h4>Notifications <span className="badge badge-pill badge-success fw-normal pull-right mt-xs">{mock.notifications.length}</span></h4>
291+
<h4>Notifications <span className="badge badge-pill badge-primary fw-normal pull-right mt-xs">{mock.notifications.length}</span></h4>
288292
}
289293
>
290294
{mock.notifications.map(({ id, icon, color, content }) => (

‎src/pages/analytics/components/BigStat/BigStat.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ class BigStat extends Component {
7171
<h4 className="fw-semi-bold mb-lg px-4">{total}</h4>
7272
<div className="d-flex border-top">
7373
<div className="w-50 border-right py-3 pr-2 pl-4">
74-
<div className="d-flex align-items-start">
74+
<div className="d-flex align-items-start h3">
7575
<h6>+{registrations.value}</h6>
7676
<i
7777
className={`la la-arrow-right ml-sm text-${registrations.profit ? 'success' : 'danger'}
@@ -81,7 +81,7 @@ class BigStat extends Component {
8181
<p className="text-muted mb-0 mr"><small>Registrations</small></p>
8282
</div>
8383
<div className="w-50 py-3 pl-2">
84-
<div className="d-flex align-items-start">
84+
<div className="d-flex align-items-start h3">
8585
<h6>{bounce.value}%</h6>
8686
<i
8787
className={`la la-arrow-right ml-sm text-${bounce.profit ? 'success' : 'danger'}

0 commit comments

Comments
 (0)