Skip to content

Commit 0da35a3

Browse files
MarcWadaiMarcWadai
authored
Merge pull request #1459 from tchapgouv/1450-fix-new-ui-design
TCHAP: css fix for new ui design
2 parents fc29ae7 + 1fa5670 commit 0da35a3

File tree

6 files changed

+69
-23
lines changed

6 files changed

+69
-23
lines changed

‎modules/tchap-translations/tchap_translations.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1040,8 +1040,8 @@
10401040
"fr": "La sauvegarde automatique n'est pas synchronisé"
10411041
},
10421042
"encryption|key_storage_out_of_sync_description": {
1043-
"en": "Confirm your verification code to be in sync. If this persist, you can try to deactivate and reactivate the automatic messages backup, and then reconfigure your Recovery Code. <a> Learn more </a>",
1044-
"fr": "Confirmez votre code de vérification pour vous synchroniser. Si cette action persiste, vous pouvez essayer de désactiver et réactiver la sauvegarde automatique, puis reconfigurer votre Code de Récupération. <a> En savoir plus </a>"
1043+
"en": "Confirm your verification code to be in sync. If this persist, you can try to deactivate and reactivate the automatic messages backup, and then reconfigure your verification code. <a> Learn more </a>",
1044+
"fr": "Confirmez votre code de vérification pour vous synchroniser. Si cette action persiste, vous pouvez essayer de désactiver et réactiver la sauvegarde automatique, puis reconfigurer votre code de vérification. <a> En savoir plus </a>"
10451045
},
10461046
"encryption|enter_recovery_key": {
10471047
"en": "Enter verification code",

‎res/themes/tchap-common/css/_tchap_custom.pcss‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@
170170
.mx_LeftPanel {
171171
background-color: var(--cpd-color-bg-canvas-default);
172172
height: 100%;
173-
border-right: 1px solid var(--cpd-color-bg-subtle-primary);
173+
border-right: 1px solid var(--cpd-color-gray-400);
174174
}
175175
// add border on search room in left panel
176176
.mx_RoomSearch {
@@ -183,7 +183,7 @@
183183

184184
.mx_SpacePanel {
185185
background-color: var(--cpd-color-bg-canvas-default);
186-
border-right: 1px solid var(--cpd-color-bg-subtle-primary);
186+
border-right: 1px solid var(--cpd-color-gray-400);
187187
}
188188

189189
/* Separator in the room list */
@@ -229,4 +229,28 @@
229229
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer {
230230
margin: 0;
231231
padding: 15px 12px 15px;
232+
}
233+
234+
.mx_EventTile[data-layout=bubble][data-self=true] {
235+
--backgroundColor: var(--cpd-color-bg-subtle-primary);
236+
}
237+
/* not messages, but visible events */
238+
.mx_EventTile[data-layout=bubble][data-self=true].mx_EventTile_info {
239+
--backgroundColor: transparent;
240+
}
241+
242+
/* send button using ui kit blue */
243+
.mx_MessageComposer_sendMessage {
244+
background-color: var(--cpd-color-bg-action-primary-rest);
245+
}
246+
247+
/* For pills when mentionning on messages */
248+
.mx_Pill {
249+
background-color: var(--cpd-color-alpha-gray-700) !important;
250+
&:hover {
251+
background-color: var(--cpd-color-bg-action-primary-rest) !important;
252+
}
253+
}
254+
.mx_Pill.mx_UserPill_me, .mx_Pill.mx_AtRoomPill {
255+
background-color: var(--cpd-color-bg-action-primary-rest) !important;
232256
}

‎res/themes/tchap-dark/css/_tchap_custom.pcss‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,22 @@ example of how to override a style
1010
font-weight: 600;
1111
color: red; //<- new attribute
1212
}
13-
*/
13+
*/
14+
15+
/* This is for release anouncement description text*/
16+
/* otherwise the text is grey on bleu background */
17+
div[data-floating-ui-portal][data-floating-ui-inert] * {
18+
color: white;
19+
}
20+
21+
/* TODO: remove when compound is fixed */
22+
/* For tooltip hover, with grey background and black text */
23+
div[data-floating-ui-focusable][role="tooltip"] {
24+
color: black;
25+
background-color: var(--cpd-color-gray-1000)
26+
}
27+
28+
/* The first bubble description in the room, should not have blue background */
29+
.mx_RoomView_MessageList > li:nth-child(2) {
30+
--backgroundColor: transparent !important;
31+
}

‎res/themes/tchap-dark/css/_tchap_custom_vars.pcss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@ should be loaded before res/themes/light-custom/css/_custom.pcss */
66
--forum-color: #27ae60;
77
--sidebar-button-color: #9999fc;
88
--main-title-color: white;
9+
--confirmation-color: var(--cpd-color-icon-success-primary);
910
}

‎res/themes/tchap-dark/css/tchap-dark.pcss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
@import "../../../../res/themes/light/css/_mods.pcss";
1111
@import "../../../../res/css/_components.pcss";
1212
@import "../../tchap-common/css/_tchap_custom.pcss"; /* import override from the common folder */
13+
@import "_tchap_custom.pcss";
1314
/* @import "../../tchap-common/css/_fonts.pcss"; tchap custom fonts */
1415
@import url("highlight.js/styles/atom-one-light.css");
1516
@import url("github-markdown-css/github-markdown-dark.css");

‎res/themes/tchap-light/css/_tchap_custom.pcss‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,9 @@ $color_1: #2e2f32;
1212
$color_2: white;
1313
$color_3: #68707d;
1414
$hover: #f4f6fa;
15-
$background-color_1: #3E5DE7;
15+
$background-color_1: var(--cpd-color-bg-action-primary-rest);
1616
$background-color_2: transparent;
17-
$background-color_3: rgba(125, 125, 150, 0.65);
1817
$background-color_4: #c7d5e4;
19-
$border-color_1: #7e7ec4;
2018

2119
/* sometimes its red due to tchap red badge icon, so we force the green on the e2e verified color */
2220
$e2e-verified-color: var(--confirmation-color);
@@ -29,22 +27,7 @@ $e2e-verified-color: var(--confirmation-color);
2927
background-color: $background-color_2;
3028
}
3129
}
32-
.mx_Pill {
33-
background-color: $background-color_3 !important;
34-
&:hover {
35-
background-color: $background-color_1 !important;
36-
color: $color_2;
37-
}
38-
}
39-
.mx_Pill.mx_UserPill_me, .mx_Pill.mx_AtRoomPill {
40-
&:hover {
41-
background-color: $background-color_1 !important;
42-
color: $color_2;
4330

44-
}
45-
background-color: $background-color_1 !important;
46-
color: $color_2;
47-
}
4831
.mx_RoomView_body[data-layout="bubble"] {
4932
.mx_MessageComposer {
5033
width: 100%;
@@ -114,4 +97,23 @@ $e2e-verified-color: var(--confirmation-color);
11497

11598
.mx_ThreadsActivityCentreButton .mx_ThreadsActivityCentreButton_Icon {
11699
fill: $background-color_1;
100+
}
101+
102+
/* The background color of the thread container */
103+
.mx_ThreadSummary {
104+
background-color: var(--cpd-color-gray-400);
105+
border: none;
106+
}
107+
108+
/* The icons by default takes compound-tertiary color which is blue in our cases */
109+
/* There are some icons that we dont want to be this blue */
110+
.mx_EventTile_e2eIcon.mx_EventTile_e2eIcon_normal,
111+
.mx_EventTile_e2eIcon.mx_EventTile_e2eIcon_decryption_failure {
112+
&::after {
113+
background-color: var(--cpd-color-icon-secondary);
114+
}
115+
}
116+
117+
.mx_ThreadSummary > div:first-child {
118+
color: var(--cpd-color-icon-secondary);
117119
}

0 commit comments

Comments
 (0)