Skip to content

Commit fecd2b0

Browse files
hmbanan666hmbanan666
authored
chore: visual updates (#58)
* chore: visual updates * chore: config * fix: update
1 parent 01a616c commit fecd2b0

16 files changed

Lines changed: 88 additions & 58 deletions

File tree

‎apps/web-app/app/app.config.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,5 +51,10 @@ export default defineAppConfig({
5151
icon: 'shrink-0 size-7',
5252
},
5353
},
54+
card: {
55+
slots: {
56+
body: 'p-4 sm:p-4',
57+
},
58+
},
5459
},
5560
})

‎apps/web-app/app/components/KitchenCard.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
<template>
22
<ActiveCard>
3-
<div class="h-full flex flex-col gap-2 items-center justify-center text-center">
4-
<h3 class="text-xl/6 font-medium">
3+
<div class="shrink-0 w-full h-full flex flex-col gap-2 items-center justify-center text-center">
4+
<UIcon name="i-lucide-store" class="size-14 text-primary" />
5+
6+
<h3 class="text-xl md:text-xl/6 font-semibold">
57
{{ kitchen.address }}
68
</h3>
79

8-
<h3 class="text-base/5 text-muted">
10+
<h3 class="text-base/5">
911
{{ kitchen.city }}
1012
</h3>
1113
</div>

‎apps/web-app/app/components/PartnerAgreementCard.vue‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,23 @@
66
]"
77
>
88
<div class="flex flex-col gap-3">
9-
<div class="flex flex-row items-start gap-3.5">
9+
<div class="flex flex-row items-start gap-2.5">
1010
<UIcon
1111
name="i-lucide-scroll-text"
12-
class="shrink-0 size-16 text-secondary"
12+
class="shrink-0 size-14 text-primary"
1313
@click="modalUpdatePartnerAgreement.open({ agreementId: agreement.id })"
1414
/>
1515

1616
<UProgress
1717
v-model="agreementProgress"
18-
size="lg"
18+
size="md"
1919
color="secondary"
20-
status
20+
orientation="vertical"
21+
inverted
22+
class="h-14 py-1"
23+
:ui="{
24+
indicator: agreementProgress <= 15 && '!bg-error',
25+
}"
2126
/>
2227
</div>
2328

‎apps/web-app/app/components/PartnerCard.vue‎

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
:class="{ 'opacity-75 grayscale group-hover:grayscale-0 group-hover:opacity-100': imagesMode === 'grayscale' }"
99
>
1010

11-
<div class="absolute top-2 left-2 right-0 w-full">
11+
<div class="absolute top-4 left-4">
1212
<UBadge
1313
color="neutral"
1414
variant="solid"
@@ -20,15 +20,15 @@
2020
</div>
2121

2222
<div
23-
class="absolute top-2 left-0 right-0 w-full opacity-0 group-hover:opacity-100 duration-200"
23+
class="absolute top-4 left-0 right-0 w-full opacity-0 group-hover:opacity-100 duration-200"
2424
:class="[
2525
agreementProgress <= 15 && 'opacity-100',
2626
]"
2727
>
28-
<div class="mx-2 px-2 py-1 bg-default/97 rounded-lg flex flex-row items-center gap-1.5">
28+
<div class="mx-4 px-2 py-1 bg-default rounded-lg flex flex-row items-center gap-1.5">
2929
<UIcon
3030
name="i-lucide-scroll-text"
31-
class="shrink-0 size-5 text-secondary"
31+
class="shrink-0 size-5 text-primary"
3232
:class="[
3333
agreementProgress <= 15 && '!text-error animate-pulse',
3434
]"
@@ -45,26 +45,23 @@
4545
</div>
4646
</div>
4747

48-
<div class="absolute bottom-2 left-2 right-2 w-full">
49-
<UAvatarGroup
50-
:max="2"
51-
size="sm"
52-
:ui="{
53-
base: '-me-3',
54-
}"
55-
>
56-
<UAvatar
57-
v-for="user in otherUsers"
58-
:key="user.id"
59-
:src="user?.avatarUrl ?? undefined"
60-
alt=""
61-
:class="{ 'opacity-75 grayscale group-hover:grayscale-0 group-hover:opacity-100': imagesMode === 'grayscale' }"
62-
/>
63-
</UAvatarGroup>
48+
<div class="absolute bottom-4 right-4">
49+
<div class="flex flex-row justify-end">
50+
<UAvatarGroup :max="3" size="md">
51+
<UAvatar
52+
v-for="user in otherUsers"
53+
:key="user.id"
54+
:src="user?.avatarUrl ?? undefined"
55+
alt=""
56+
class="group-hover:scale-110 duration-200"
57+
:class="{ 'opacity-75 grayscale group-hover:grayscale-0 group-hover:opacity-100': imagesMode === 'grayscale' }"
58+
/>
59+
</UAvatarGroup>
60+
</div>
6461
</div>
6562
</div>
6663

67-
<div class="min-h-20 h-full px-2.5 pb-2 flex flex-col gap-2.5">
64+
<div class="min-h-20 h-full px-4 pb-2 flex flex-col gap-2.5">
6865
<h3 class="text-sm/4 font-bold">
6966
{{ partner.legalEntity?.name }}
7067
</h3>

‎apps/web-app/app/components/PartnerLegalEntityCard.vue‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<template>
2-
<UCard v-if="entity" class="h-full">
2+
<UCard
3+
v-if="entity"
4+
class="h-full"
5+
>
36
<div class="flex flex-col gap-2.5">
4-
<UIcon name="i-lucide-scale" class="size-16 text-muted/25" />
7+
<UIcon name="i-lucide-scale" class="size-14 text-primary" />
58

69
<h3 class="text-xl md:text-xl/6 font-semibold">
710
{{ entity.name }}

‎apps/web-app/app/components/PartnerPrestigeBadge.vue‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
:name="getIconByPrestige(prestige)"
55
:class="getIconClass()"
66
/>
7-
<h4 class="absolute bottom-1 left-0.5 font-bold tracking-tight text-white text-shadow-md" :class="getPrestigeClass()">
7+
<h4 class="absolute bottom-1 left-0 right-0 font-bold tracking-tight text-center text-inverted" :class="getPrestigeClass()">
88
{{ prestige }}
99
</h4>
1010
</div>
@@ -23,9 +23,9 @@ function getSizeClass() {
2323
case 'md':
2424
return 'size-12'
2525
case 'lg':
26-
return 'size-16'
26+
return 'size-14'
2727
case 'xl':
28-
return 'size-20'
28+
return 'size-18'
2929
default:
3030
return 'size-12'
3131
}
@@ -34,15 +34,15 @@ function getSizeClass() {
3434
function getPrestigeClass() {
3535
switch (size) {
3636
case 'sm':
37-
return 'pl-[0.1rem] text-[0.9rem]'
37+
return 'text-[0.9rem]'
3838
case 'md':
39-
return 'pl-[0.2rem] text-[1.4rem]'
39+
return 'text-[1.4rem]'
4040
case 'lg':
41-
return 'pl-[0.3rem] text-[1.9rem]'
41+
return 'text-[1.7rem]'
4242
case 'xl':
43-
return 'pl-[0.4rem] text-[2.4rem]'
43+
return 'text-[2.4rem]'
4444
default:
45-
return 'pl-[0.2rem] text-[1.4rem]'
45+
return 'text-[1.4rem]'
4646
}
4747
}
4848
@@ -62,15 +62,15 @@ function getIconByPrestige(prestige: number) {
6262
6363
function getColorByPrestige(score: number) {
6464
if (score < 10) {
65-
return 'text-rose-400'
65+
return 'text-rose-500'
6666
} else if (score < 20) {
67-
return 'text-orange-400'
67+
return 'text-orange-500'
6868
} else if (score < 30) {
69-
return 'text-yellow-400'
69+
return 'text-yellow-500'
7070
} else if (score < 40) {
71-
return 'text-lime-400'
71+
return 'text-lime-500'
7272
} else {
73-
return 'text-green-400'
73+
return 'text-green-500'
7474
}
7575
}
7676

‎apps/web-app/app/components/UserCard.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
:class="{ 'opacity-75 grayscale group-hover:grayscale-0 group-hover:opacity-100': imagesMode === 'grayscale' }"
1212
>
1313

14-
<div class="absolute top-2 left-2">
14+
<div class="absolute top-4 left-4">
1515
<UBadge
1616
color="neutral"
1717
variant="solid"
@@ -22,7 +22,7 @@
2222
</div>
2323
</div>
2424

25-
<div class="min-h-20 h-full px-2.5 pb-2 flex flex-col gap-2.5">
25+
<div class="min-h-16 h-full px-4 flex flex-col gap-2.5">
2626
<div class="flex flex-col gap-1">
2727
<h3 class="text-base/5 font-bold">
2828
{{ user.name }} {{ user.surname }}

‎apps/web-app/app/components/form/CreateChatMessage.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<UCard
33
variant="subtle"
44
class="mt-auto bg-elevated/25"
5-
:ui="{ body: '!p-4' }"
65
>
76
<div v-if="!user.id" class="flex flex-row items-center justify-center">
87
<Loader />

‎apps/web-app/app/components/form/CreatePostComment.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<UCard
33
variant="subtle"
44
class="mt-auto bg-elevated/25"
5-
:ui="{ body: '!p-4' }"
65
>
76
<div v-if="!userStore.id" class="text-center text-muted">
87
<Loader />

‎apps/web-app/app/components/form/CreateTicketMessage.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
<UCard
33
variant="subtle"
44
class="mt-auto bg-elevated/25"
5-
:ui="{ body: '!p-4' }"
65
>
76
<div v-if="!userStore.id" class="flex flex-row items-center justify-center">
87
<Loader />

0 commit comments

Comments
 (0)