Skip to content

Commit 6159257

Browse files
shrikha56claude
shrikha56
and
claude
committed
style(concierge): update status and category icons to solid colored badges
Style approval status icons (approved/declined/pending) as solid colored rounded squares with white icons, matching the Venue Management bookable column style. Also style line item category icons in quote detail panel. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent a61c3a8 commit 6159257

1 file changed

Lines changed: 45 additions & 15 deletions

File tree

‎apps/concierge/src/app/events/event-listing.component.ts‎

Lines changed: 45 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -132,13 +132,19 @@ import { MOCK_APPROVAL_EVENTS } from './event-approvals-mock.data';
132132
<div class="flex items-center justify-center p-2">
133133
@switch (reqStatus(item, 'venue')) {
134134
@case ('approved') {
135-
<icon class="text-success text-lg">done</icon>
135+
<span class="flex h-7 w-7 items-center justify-center rounded bg-success">
136+
<icon class="text-base text-white">done</icon>
137+
</span>
136138
}
137139
@case ('declined') {
138-
<icon class="text-error text-lg">close</icon>
140+
<span class="flex h-7 w-7 items-center justify-center rounded bg-error">
141+
<icon class="text-base text-white">close</icon>
142+
</span>
139143
}
140144
@case ('pending') {
141-
<icon class="text-warning text-lg">schedule</icon>
145+
<span class="flex h-7 w-7 items-center justify-center rounded bg-warning">
146+
<icon class="text-base text-white">schedule</icon>
147+
</span>
142148
}
143149
@default {
144150
<span class="opacity-30">&mdash;</span>
@@ -152,13 +158,19 @@ import { MOCK_APPROVAL_EVENTS } from './event-approvals-mock.data';
152158
<div class="flex items-center justify-center p-2">
153159
@switch (reqStatus(item, 'dining')) {
154160
@case ('approved') {
155-
<icon class="text-success text-lg">done</icon>
161+
<span class="flex h-7 w-7 items-center justify-center rounded bg-success">
162+
<icon class="text-base text-white">done</icon>
163+
</span>
156164
}
157165
@case ('declined') {
158-
<icon class="text-error text-lg">close</icon>
166+
<span class="flex h-7 w-7 items-center justify-center rounded bg-error">
167+
<icon class="text-base text-white">close</icon>
168+
</span>
159169
}
160170
@case ('pending') {
161-
<icon class="text-warning text-lg">schedule</icon>
171+
<span class="flex h-7 w-7 items-center justify-center rounded bg-warning">
172+
<icon class="text-base text-white">schedule</icon>
173+
</span>
162174
}
163175
@default {
164176
<span class="opacity-30">&mdash;</span>
@@ -172,13 +184,19 @@ import { MOCK_APPROVAL_EVENTS } from './event-approvals-mock.data';
172184
<div class="flex items-center justify-center p-2">
173185
@switch (reqStatus(item, 'av_tech')) {
174186
@case ('approved') {
175-
<icon class="text-success text-lg">done</icon>
187+
<span class="flex h-7 w-7 items-center justify-center rounded bg-success">
188+
<icon class="text-base text-white">done</icon>
189+
</span>
176190
}
177191
@case ('declined') {
178-
<icon class="text-error text-lg">close</icon>
192+
<span class="flex h-7 w-7 items-center justify-center rounded bg-error">
193+
<icon class="text-base text-white">close</icon>
194+
</span>
179195
}
180196
@case ('pending') {
181-
<icon class="text-warning text-lg">schedule</icon>
197+
<span class="flex h-7 w-7 items-center justify-center rounded bg-warning">
198+
<icon class="text-base text-white">schedule</icon>
199+
</span>
182200
}
183201
@default {
184202
<span class="opacity-30">&mdash;</span>
@@ -192,13 +210,19 @@ import { MOCK_APPROVAL_EVENTS } from './event-approvals-mock.data';
192210
<div class="flex items-center justify-center p-2">
193211
@switch (reqStatus(item, 'safety')) {
194212
@case ('approved') {
195-
<icon class="text-success text-lg">done</icon>
213+
<span class="flex h-7 w-7 items-center justify-center rounded bg-success">
214+
<icon class="text-base text-white">done</icon>
215+
</span>
196216
}
197217
@case ('declined') {
198-
<icon class="text-error text-lg">close</icon>
218+
<span class="flex h-7 w-7 items-center justify-center rounded bg-error">
219+
<icon class="text-base text-white">close</icon>
220+
</span>
199221
}
200222
@case ('pending') {
201-
<icon class="text-warning text-lg">schedule</icon>
223+
<span class="flex h-7 w-7 items-center justify-center rounded bg-warning">
224+
<icon class="text-base text-white">schedule</icon>
225+
</span>
202226
}
203227
@default {
204228
<span class="opacity-30">&mdash;</span>
@@ -212,13 +236,19 @@ import { MOCK_APPROVAL_EVENTS } from './event-approvals-mock.data';
212236
<div class="flex items-center justify-center p-2">
213237
@switch (reqStatus(item, 'events')) {
214238
@case ('approved') {
215-
<icon class="text-success text-lg">done</icon>
239+
<span class="flex h-7 w-7 items-center justify-center rounded bg-success">
240+
<icon class="text-base text-white">done</icon>
241+
</span>
216242
}
217243
@case ('declined') {
218-
<icon class="text-error text-lg">close</icon>
244+
<span class="flex h-7 w-7 items-center justify-center rounded bg-error">
245+
<icon class="text-base text-white">close</icon>
246+
</span>
219247
}
220248
@case ('pending') {
221-
<icon class="text-warning text-lg">schedule</icon>
249+
<span class="flex h-7 w-7 items-center justify-center rounded bg-warning">
250+
<icon class="text-base text-white">schedule</icon>
251+
</span>
222252
}
223253
@default {
224254
<span class="opacity-30">&mdash;</span>

0 commit comments

Comments
 (0)