Skip to content

Commit 2848732

Browse files
antoine92190antoine92190
committed
(refactor) theme color names
1 parent 0b095bd commit 2848732

File tree

6 files changed

+57
-55
lines changed

6 files changed

+57
-55
lines changed

‎src/ChatWindow/ChatMessage.vue

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -288,8 +288,8 @@ export default {
288288
font-size: 12px;
289289
text-transform: uppercase;
290290
padding: 4px;
291-
color: var(--chat-color-message-date);
292-
background: var(--chat-bg-color-message-date);
291+
color: var(--chat-message-color-date);
292+
background: var(--chat-message-bg-color-date);
293293
display: block;
294294
overflow-wrap: break-word;
295295
position: relative;
@@ -319,8 +319,8 @@ export default {
319319
}
320320
321321
.message-card {
322-
background: var(--chat-bg-color-message);
323-
color: var(--chat-color-message-text);
322+
background: var(--chat-message-bg-color);
323+
color: var(--chat-message-color);
324324
border-radius: 4px;
325325
font-size: 14px;
326326
padding: 6px 9px 3px;
@@ -344,14 +344,14 @@ export default {
344344
}
345345
346346
.message-current {
347-
background: var(--chat-bg-color-message-me) !important;
347+
background: var(--chat-message-bg-color-me) !important;
348348
}
349349
350350
.message-deleted {
351-
color: var(--chat-color-message-deleted) !important;
351+
color: var(--chat-message-color-deleted) !important;
352352
font-size: 13px !important;
353353
font-style: italic !important;
354-
background: var(--chat-bg-color-message-deleted) !important;
354+
background: var(--chat-message-bg-color-deleted) !important;
355355
}
356356
357357
.image-container {
@@ -361,7 +361,7 @@ export default {
361361
362362
.message-image {
363363
position: relative;
364-
background-color: var(--chat-bg-color-message-image) !important;
364+
background-color: var(--chat-message-bg-color-image) !important;
365365
background-size: cover !important;
366366
background-position: center center !important;
367367
background-repeat: no-repeat !important;
@@ -377,27 +377,27 @@ export default {
377377
}
378378
379379
.reply-message {
380-
background: var(--chat-bg-color-message-reply);
380+
background: var(--chat-message-bg-color-reply);
381381
border-radius: 4px;
382382
margin: -1px -5px 8px;
383383
padding: 8px 10px;
384384
385385
.reply-username {
386-
color: var(--chat-color-message-reply-username);
386+
color: var(--chat-message-color-reply-username);
387387
font-size: 12px;
388388
line-height: 15px;
389389
margin-bottom: 2px;
390390
}
391391
392392
.reply-content {
393393
font-size: 12px;
394-
color: var(--chat-color-message-reply-content);
394+
color: var(--chat-message-color-reply-content);
395395
}
396396
}
397397
398398
.text-username {
399399
font-size: 13px;
400-
color: var(--chat-color-message-username);
400+
color: var(--chat-message-color-username);
401401
margin-bottom: 2px;
402402
}
403403
@@ -407,7 +407,7 @@ export default {
407407
408408
.text-timestamp {
409409
font-size: 10px;
410-
color: var(--chat-color-message-timestamp);
410+
color: var(--chat-message-color-timestamp);
411411
text-align: right;
412412
}
413413

‎src/ChatWindow/ChatWindow.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ export default {
155155
border-radius: 4px;
156156
display: block;
157157
max-width: 100%;
158-
background: var(--chat-bg-color);
158+
background: var(--chat-sidemenu-bg-color);
159159
color: var(--chat-color);
160160
overflow-wrap: break-word;
161161
position: relative;

‎src/ChatWindow/MessagesList.vue

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -438,7 +438,7 @@ export default {
438438
}
439439
440440
.container-scroll {
441-
background: var(--chat-bg-color-content);
441+
background: var(--chat-content-bg-color);
442442
height: calc(100% - 120px);
443443
overflow-y: auto;
444444
margin-right: 1px;
@@ -485,7 +485,7 @@ export default {
485485
486486
.box-footer {
487487
display: flex;
488-
background: var(--chat-bg-color-footer);
488+
background: var(--chat-footer-bg-color);
489489
padding: 8px;
490490
491491
* {
@@ -496,29 +496,29 @@ export default {
496496
.reply-container {
497497
display: flex;
498498
padding: 10px 10px 0;
499-
background: var(--chat-bg-color-footer);
499+
background: var(--chat-footer-bg-color);
500500
z-index: -1;
501501
align-items: center;
502502
max-width: 100%;
503503
504504
.reply-box {
505505
width: 100%;
506506
overflow: hidden;
507-
background: var(--chat-bg-color-message-reply);
507+
background: var(--chat-message-bg-color-reply);
508508
border-radius: 4px;
509509
padding: 8px 10px;
510510
}
511511
512512
.reply-username {
513-
color: var(--chat-color-message-reply-username);
513+
color: var(--chat-message-color-reply-username);
514514
font-size: 12px;
515515
line-height: 15px;
516516
margin-bottom: 2px;
517517
}
518518
519519
.reply-content {
520520
font-size: 12px;
521-
color: var(--chat-color-message-reply-content);
521+
color: var(--chat-message-color-reply-content);
522522
}
523523
524524
.icon-reply {

‎src/ChatWindow/RoomsList.vue

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -170,18 +170,18 @@ input {
170170
}
171171
172172
:hover {
173-
background: var(--chat-bg-color-hover);
173+
background: var(--chat-sidemenu-bg-color-hover);
174174
-webkit-transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
175175
transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
176176
}
177177
}
178178
179179
.room-selected {
180-
color: var(--chat-color-active) !important;
181-
background: var(--chat-bg-color-active) !important;
180+
color: var(--chat-sidemenu-color-active) !important;
181+
background: var(--chat-sidemenu-bg-color-active) !important;
182182
183183
:hover {
184-
background: var(--chat-bg-color-active);
184+
background: var(--chat-sidemenu-bg-color-active);
185185
}
186186
}
187187
@@ -217,16 +217,17 @@ input {
217217
text-overflow: ellipsis;
218218
white-space: nowrap;
219219
line-height: 22px;
220+
color: var(--chat-room-color-username);
220221
}
221222
222223
.text-last {
223-
color: var(--chat-color-room-last) !important;
224+
color: var(--chat-room-color-message) !important;
224225
font-size: 12px;
225226
line-height: 16px;
226227
}
227228
228229
.text-date {
229-
color: var(--chat-color-room-timestamp) !important;
230+
color: var(--chat-room-color-timestamp) !important;
230231
font-size: 11px;
231232
line-height: 16px;
232233
}

‎src/styles/menu.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
border-radius: 4px;
33
display: block;
44
cursor: pointer;
5-
background: var(--chat-bg-menu);
5+
background: var(--chat-dropdown-bg-color);
66

77
:hover {
8-
background: var(--chat-bg-menu-hover);
8+
background: var(--chat-dropdown-bg-color-hover);
99
-webkit-transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
1010
transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
1111
}

‎src/themes/index.js

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ export const defaultThemeColors = {
33
general: {
44
color: '#0a0a0a',
55
backgroundInput: '#fff',
6-
colorPlaceholder: '#0a0a0a',
6+
colorPlaceholder: '#9ca6af',
77
colorCaret: '#1976d2',
88
colorSpinner: '#333',
99
colorBorder: '#d3dde7',
@@ -81,7 +81,7 @@ export const defaultThemeColors = {
8181
general: {
8282
color: '#fff',
8383
backgroundInput: '#202223',
84-
colorPlaceholder: '#fff',
84+
colorPlaceholder: '#596269',
8585
colorCaret: '#1976d2',
8686
colorSpinner: '#fff',
8787
colorBorder: '#63686e',
@@ -103,7 +103,7 @@ export const defaultThemeColors = {
103103

104104
sidemenu: {
105105
background: '#181a1b',
106-
backgroundHover: '#202024',
106+
backgroundHover: '#202224',
107107
backgroundActive: '#151617',
108108
colorActive: '#fff'
109109
},
@@ -182,41 +182,42 @@ export const cssThemeVars = ({
182182
'--chat-header-bg-color': header.background,
183183

184184
// footer
185-
'--chat-bg-color-footer': footer.background,
185+
'--chat-footer-bg-color': footer.background,
186186
'--chat-border-color-input-selected': footer.borderInputSelected,
187187

188188
// content
189-
'--chat-bg-color-content': content.background,
189+
'--chat-content-bg-color': content.background,
190190

191191
// sidemenu
192-
'--chat-bg-color': sidemenu.background,
193-
'--chat-bg-color-hover': sidemenu.backgroundHover,
194-
'--chat-bg-color-active': sidemenu.backgroundActive,
195-
'--chat-color-active': sidemenu.colorActive,
192+
'--chat-sidemenu-bg-color': sidemenu.background,
193+
'--chat-sidemenu-bg-color-hover': sidemenu.backgroundHover,
194+
'--chat-sidemenu-bg-color-active': sidemenu.backgroundActive,
195+
'--chat-sidemenu-color-active': sidemenu.colorActive,
196196

197197
// dropdown
198-
'--chat-bg-menu': dropdown.background,
199-
'--chat-bg-menu-hover': dropdown.backgroundHover,
198+
'--chat-dropdown-bg-color': dropdown.background,
199+
'--chat-dropdown-bg-color-hover': dropdown.backgroundHover,
200200

201201
// message
202-
'--chat-bg-color-message': message.background,
203-
'--chat-bg-color-message-me': message.backgroundMe,
204-
'--chat-bg-color-message-deleted': message.backgroundDeleted,
205-
'--chat-color-message-deleted': message.colorDeleted,
206-
'--chat-color-message-username': message.colorUsername,
207-
'--chat-color-message-timestamp': message.colorTimestamp,
208-
'--chat-bg-color-message-date': message.backgroundDate,
209-
'--chat-color-message-date': message.colorDate,
210-
'--chat-color-message-text': message.color,
211-
'--chat-bg-color-message-reply': message.backgroundReply,
212-
'--chat-color-message-reply-username': message.colorReplyUsername,
213-
'--chat-color-message-reply-content': message.colorReply,
214-
'--chat-bg-color-message-image': message.backgroundImage,
202+
// '--chat-bg-color-message-image': message.backgroundImage,
203+
'--chat-message-bg-color': message.background,
204+
'--chat-message-bg-color-me': message.backgroundMe,
205+
'--chat-message-bg-color-deleted': message.backgroundDeleted,
206+
'--chat-message-color-deleted': message.colorDeleted,
207+
'--chat-message-color-username': message.colorUsername,
208+
'--chat-message-color-timestamp': message.colorTimestamp,
209+
'--chat-message-bg-color-date': message.backgroundDate,
210+
'--chat-message-color-date': message.colorDate,
211+
'--chat-message-color': message.color,
212+
'--chat-message-bg-color-reply': message.backgroundReply,
213+
'--chat-message-color-reply-username': message.colorReplyUsername,
214+
'--chat-message-color-reply-content': message.colorReply,
215+
'--chat-message-bg-color-image': message.backgroundImage,
215216

216217
// room
217-
'--chat-color-room-username': room.colorUsername,
218-
'--chat-color-room-last': room.colorMessage,
219-
'--chat-color-room-timestamp': room.colorTimestamp,
218+
'--chat-room-color-username': room.colorUsername,
219+
'--chat-room-color-message': room.colorMessage,
220+
'--chat-room-color-timestamp': room.colorTimestamp,
220221

221222
// icons
222223
'--chat-icon-color-search': icons.search,

0 commit comments

Comments
 (0)