Skip to content

Commit 064369b

Browse files
author
Ihar
committed
fix: reader writer styles[5018]
1 parent 829e860 commit 064369b

File tree

8 files changed

+361
-262
lines changed

8 files changed

+361
-262
lines changed

‎frontend/src/app/modules/policy-engine/policy-viewer/blocks/global-events-reader-block/global-events-reader-block.component.html‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
<div class="ger-table">
3535
<div class="ger-row ger-row-head">
3636
<div class="ger-cell ger-col-topic">
37-
EVENT TOPIC ID
37+
TOPIC ID
3838
</div>
3939

4040
<div class="ger-cell ger-col-status">
@@ -71,7 +71,7 @@
7171
</div>
7272

7373
<span class="ger-default-pill" *ngIf="row.isDefault">
74-
DEFAULT
74+
DEFAULT TOPIC
7575
</span>
7676
</div>
7777

@@ -81,7 +81,7 @@
8181
[class.ger-status-processing]="row.status === 'PROCESSING'"
8282
[class.ger-status-error]="row.status === 'ERROR'"
8383
>
84-
{{ row.status }}
84+
<span class="ger-status-text">{{ row.status }}</span>
8585
</span>
8686
</div>
8787

@@ -92,15 +92,12 @@
9292
</div>
9393

9494
<div class="ger-cell ger-col-active">
95-
<label class="ger-checkbox">
96-
<input
97-
type="checkbox"
98-
[checked]="row.active"
99-
(change)="onActiveChanged(row, $any($event.target).checked)"
100-
[disabled]="readonly || loading || row.saving"
101-
/>
102-
<span></span>
103-
</label>
95+
<p-checkbox
96+
[(ngModel)]="row.active"
97+
[binary]="true"
98+
[disabled]="readonly || loading || row.saving"
99+
(onChange)="onActiveChanged(row, $event.checked)"
100+
></p-checkbox>
104101
</div>
105102

106103
<div class="ger-cell ger-col-conditions">
@@ -147,7 +144,7 @@
147144
[visible]="addTopicModalOpen"
148145
[loading]="loading"
149146
(cancel)="closeAddTopicModal()"
150-
(add)="confirmAddTopicModal()"
147+
(add)="confirmAddTopicModal($event)"
151148
>
152149
</app-add-event-topic-modal>
153150

‎frontend/src/app/modules/policy-engine/policy-viewer/blocks/global-events-reader-block/global-events-reader-block.component.scss‎

Lines changed: 99 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
border: 1px solid var(--color-grey-3, #e1e7ef);
44
border-radius: 12px;
55
padding: 16px;
6+
margin-bottom: 50px;
67
}
78

89
.ger-header {
@@ -14,8 +15,7 @@
1415
}
1516

1617
.ger-title {
17-
font-family: var(--font-family-poppins, 'Poppins', sans-serif);
18-
font-size: 14px;
18+
font-size: 18px;
1919
font-weight: 600;
2020
color: var(--color-grey-black-1, #181818);
2121
}
@@ -26,6 +26,7 @@
2626
align-items: center;
2727
gap: 12px;
2828
margin-bottom: 12px;
29+
margin-top: 16px;
2930
}
3031

3132
.ger-toolbar-left {
@@ -41,13 +42,12 @@
4142
}
4243

4344
:host ::ng-deep .ger-header-actions .p-button {
44-
height: 28px;
45-
padding: 0 12px;
45+
height: 40px;
46+
padding: 0 16px;
4647
border-radius: 8px;
47-
font-size: 12px;
48+
font-size: 14px;
4849
font-weight: 600;
4950
line-height: 16px;
50-
font-family: var(--font-family-inter, 'Inter', sans-serif);
5151
}
5252

5353
:host ::ng-deep .ger-toolbar-left .p-dropdown {
@@ -62,27 +62,62 @@
6262
line-height: 16px;
6363
color: var(--color-grey-black-1, #181818);
6464
padding: 0 12px;
65-
font-family: var(--font-family-inter, 'Inter', sans-serif);
6665
}
6766

6867
:host ::ng-deep .ger-toolbar-left .p-dropdown .p-dropdown-trigger {
6968
width: 32px;
7069
}
7170

7271
.ger-table {
73-
border: 1px solid var(--color-grey-3, #e1e7ef);
74-
border-radius: 10px;
7572
overflow: hidden;
7673
background: var(--color-grey-white, #ffffff);
7774
}
7875

7976
.ger-row {
8077
display: grid;
81-
grid-template-columns: 1fr 110px 160px 88px 220px 110px 44px;
78+
grid-template-columns: 1fr 110px 160px 88px 220px 50px;
8279
align-items: center;
83-
padding: 12px 16px;
84-
border-top: 1px solid var(--color-grey-2, #eff3f7);
80+
padding: 16px 16px;
8581
background: var(--color-grey-white, #ffffff);
82+
83+
border: 0;
84+
border-radius: 0;
85+
}
86+
87+
.ger-row-head {
88+
padding: 10px 16px;
89+
border: 0;
90+
}
91+
92+
.ger-row:not(.ger-row-head) {
93+
border-left: 1px solid var(--color-grey-3, #e1e7ef);
94+
border-right: 1px solid var(--color-grey-3, #e1e7ef);
95+
border-top: 1px solid var(--color-grey-3, #e1e7ef);
96+
border-bottom: 0;
97+
}
98+
99+
.ger-row:nth-child(2) {
100+
border-top-left-radius: 10px;
101+
border-top-right-radius: 10px;
102+
}
103+
104+
.ger-row:last-child {
105+
border-bottom: 1px solid var(--color-grey-3, #e1e7ef);
106+
border-bottom-left-radius: 10px;
107+
border-bottom-right-radius: 10px;
108+
}
109+
110+
.ger-row:nth-child(2):last-child {
111+
border-radius: 10px;
112+
border-bottom: 1px solid var(--color-grey-3, #e1e7ef);
113+
}
114+
115+
.ger-empty {
116+
padding: 14px 16px;
117+
text-align: center;
118+
font-size: 12px;
119+
color: var(--color-grey-5, #848fa9);
120+
border-top: 0;
86121
}
87122

88123
.ger-col-status,
@@ -97,11 +132,10 @@
97132
.ger-muted {
98133
font-size: 14px;
99134
line-height: 16px;
100-
color: var(--color-grey-6, #848fa9);
101135
white-space: nowrap;
102136
overflow: hidden;
103137
text-overflow: ellipsis;
104-
font-family: var(--font-family-inter, 'Inter', sans-serif);
138+
color: var(--text-color);
105139
}
106140

107141
.ger-row:first-child {
@@ -114,11 +148,10 @@
114148

115149
.ger-row-head .ger-cell {
116150
font-size: 10px;
117-
font-weight: 700;
151+
font-weight: 400;
118152
letter-spacing: 0.06em;
119153
color: var(--color-grey-5, #848fa9);
120154
text-transform: uppercase;
121-
font-family: var(--font-family-inter, 'Inter', sans-serif);
122155
}
123156

124157
.ger-row-saving {
@@ -143,15 +176,14 @@
143176
}
144177

145178
.ger-topic-value {
146-
font-size: 12px;
179+
font-size: 14px;
147180
line-height: 16px;
148-
color: var(--color-grey-black-1, #181818);
181+
color: var(--text-color);
149182
user-select: text;
150183
white-space: nowrap;
151184
overflow: hidden;
152185
text-overflow: ellipsis;
153186
min-width: 0;
154-
font-family: var(--font-family-inter, 'Inter', sans-serif);
155187
}
156188

157189
.ger-default-pill {
@@ -168,14 +200,13 @@
168200
background: rgba(65, 105, 226, 0.12);
169201
color: var(--color-primary, #4169E2);
170202
white-space: nowrap;
171-
font-family: var(--font-family-inter, 'Inter', sans-serif);
172203
}
173204

174205
.ger-status-pill {
175206
height: 22px;
176-
padding: 0 10px;
207+
padding: 16px 18px;
177208
border-radius: 8px;
178-
font-size: 12px;
209+
font-size: 16px;
179210
line-height: 16px;
180211
display: inline-flex;
181212
align-items: center;
@@ -184,7 +215,15 @@
184215
background: var(--color-grey-2, #eff3f7);
185216
color: var(--color-grey-black-1, #181818);
186217
white-space: nowrap;
187-
font-family: var(--font-family-inter, 'Inter', sans-serif);
218+
text-transform: capitalize !important;
219+
}
220+
221+
.ger-status-text {
222+
text-transform: lowercase;
223+
}
224+
225+
.ger-status-text::first-letter {
226+
text-transform: uppercase;
188227
}
189228

190229
.ger-status-processing {
@@ -199,9 +238,9 @@
199238

200239
.ger-conditions-pill {
201240
height: 22px;
202-
padding: 0 10px;
241+
padding: 16px 18px;
203242
border-radius: 8px;
204-
font-size: 12px;
243+
font-size: 16px;
205244
line-height: 16px;
206245
display: inline-flex;
207246
align-items: center;
@@ -210,7 +249,6 @@
210249
background: var(--color-grey-2, #eff3f7);
211250
color: var(--color-grey-black-1, #181818);
212251
white-space: nowrap;
213-
font-family: var(--font-family-inter, 'Inter', sans-serif);
214252
}
215253

216254
.ger-conditions-custom {
@@ -219,16 +257,16 @@
219257
}
220258

221259
.ger-icon-btn {
222-
width: 28px;
223-
height: 28px;
260+
width: 30px;
261+
height: 30px;
224262
border-radius: 8px;
225263
border: none;
226264
background: transparent;
227265
display: grid;
228266
place-items: center;
229267
cursor: pointer;
230268
transition: background 0.15s ease, transform 0.06s ease;
231-
color: var(--color-grey-5, #848fa9);
269+
color: var(--color-primary, #4169E2);
232270
}
233271

234272
.ger-icon-btn:active {
@@ -245,15 +283,15 @@
245283
}
246284

247285
.ger-icon-btn-edit:hover:not(:disabled) {
248-
background: rgba(176, 181, 186, 0.18); /* grey-4 with alpha */
286+
background: rgba(176, 181, 186, 0.18);
249287
}
250288

251289
.ger-icon-btn-danger {
252290
color: var(--color-accent-red-1, #ff432a);
253291
}
254292

255293
.ger-icon-btn-danger:hover:not(:disabled) {
256-
background: rgba(255, 67, 42, 0.10); /* red-1 with alpha */
294+
background: rgba(255, 67, 42, 0.10);
257295
}
258296

259297
.ger-empty {
@@ -262,39 +300,6 @@
262300
font-size: 12px;
263301
color: var(--color-grey-5, #848fa9);
264302
border-top: 1px solid var(--color-grey-2, #eff3f7);
265-
font-family: var(--font-family-inter, 'Inter', sans-serif);
266-
}
267-
268-
.ger-checkbox {
269-
position: relative;
270-
width: 16px;
271-
height: 16px;
272-
display: inline-flex;
273-
align-items: center;
274-
justify-content: center;
275-
}
276-
277-
.ger-checkbox input {
278-
position: absolute;
279-
inset: 0;
280-
opacity: 0;
281-
cursor: pointer;
282-
margin: 0;
283-
}
284-
285-
.ger-checkbox span {
286-
width: 14px;
287-
height: 14px;
288-
border: 1px solid var(--color-grey-3, #e1e7ef);
289-
border-radius: 3px;
290-
background: var(--color-grey-white, #ffffff);
291-
display: inline-block;
292-
}
293-
294-
.ger-checkbox input:checked + span {
295-
background: var(--color-primary, #4169E2);
296-
border-color: var(--color-primary, #4169E2);
297-
box-shadow: 0 0 0 2px rgba(65, 105, 226, 0.18);
298303
}
299304

300305
.gew-card {
@@ -365,3 +370,33 @@
365370
}
366371
}
367372
}
373+
374+
::ng-deep .create-topic-custom-confirm-dialog .p-dialog-content {
375+
border-radius: 10px
376+
}
377+
378+
::ng-deep .create-topic-custom-confirm-dialog .dialog-header {
379+
display: flex;
380+
align-items: center;
381+
justify-content: space-between;
382+
padding: 16px 0 0 0;
383+
}
384+
385+
::ng-deep .create-topic-custom-confirm-dialog .header-text {
386+
font-size: 18px;
387+
font-weight: 600;
388+
line-height: 24px;
389+
}
390+
391+
::ng-deep .create-topic-custom-confirm-dialog .dialog-body {
392+
padding: 12px 0 0 0;
393+
min-height: auto;
394+
}
395+
396+
::ng-deep .create-topic-custom-confirm-dialog .confirmation-text {
397+
margin-top: 12px;
398+
font-size: 14px;
399+
font-weight: 400;
400+
line-height: 18px;
401+
white-space: pre-line;
402+
}

0 commit comments

Comments
 (0)