Skip to content

Commit 88ef61c

Browse files
devnamdev2003devnamdev2003
committed
chnage ui
1 parent c264a04 commit 88ef61c

2 files changed

Lines changed: 21 additions & 24 deletions

File tree

‎src/app/component/income-components/saving/saving.component.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<main class="space-y-6">
22
<section
3-
class="relative overflow-hidden text-white transition-all duration-500 shadow-2xl rounded-3xl group animate-slide-up shadow-indigo-500/20">
3+
class="relative overflow-hidden text-white transition-all duration-500 shadow-2xl rounded-3xl group shadow-indigo-500/20">
44

55
<div
66
class="absolute inset-0 opacity-100 bg-gradient-to-br from-cyan-600 via-sky-600 to-blue-800 transition-opacity duration-500 ease-in-out">
@@ -50,7 +50,7 @@ <h2 class="mb-6 text-3xl font-bold tracking-tight md:text-5xl flex items-baselin
5050
</div>
5151
</section>
5252

53-
<section class="grid grid-cols-3 gap-3 md:gap-4 animate-slide-up" style="animation-delay: 0.1s;">
53+
<section class="grid grid-cols-3 gap-3 md:gap-4 " style="animation-delay: 0.1s;">
5454
<div class="flex flex-col justify-between p-3 transition cursor-pointer rounded-2xl hover:opacity-90"
5555
style="background-color: var(--color-bg-100); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
5656
<i class="mb-2 text-lg text-indigo-500 fa-solid fa-flag-checkered"></i>
@@ -86,7 +86,7 @@ <h2 class="mb-6 text-3xl font-bold tracking-tight md:text-5xl flex items-baselin
8686
</section>
8787

8888
<section (click)="handleGoalCardClick()"
89-
class="p-4 rounded-2xl animate-slide-up cursor-pointer hover:opacity-90 transition-all border border-transparent hover:border-indigo-500/30 group"
89+
class="p-4 rounded-2xl cursor-pointer hover:opacity-90 transition-all border border-transparent hover:border-indigo-500/30 group"
9090
style="animation-delay: 0.15s; background-color: var(--color-bg-100); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
9191
@if (currentGoal) {
9292
<div class="flex justify-between mb-2 text-xs font-semibold">
@@ -126,11 +126,11 @@ <h4 class="font-bold mb-1">Set a Savings Goal</h4>
126126
}
127127
</section>
128128

129-
<div class="flex items-end justify-between animate-slide-up" style="animation-delay: 0.2s;">
129+
<div class="flex items-end justify-between " style="animation-delay: 0.2s;">
130130
<h3 class="text-xl font-semibold">Recent Savings</h3>
131131
</div>
132132

133-
<div class="pb-16 space-y-3 animate-slide-up" style="animation-delay: 0.3s;">
133+
<div class="pb-16 space-y-3 " style="animation-delay: 0.3s;">
134134
@if (savings.length === 0) {
135135
<div class="py-10 text-center opacity-50 animate-fade-in">
136136
<i class="mb-3 text-4xl fa-solid fa-receipt"></i>
@@ -197,7 +197,7 @@ <h3 class="text-xl font-semibold">Recent Savings</h3>
197197
@if (showSavingModal) {
198198
<div class="fixed inset-0 z-50 flex justify-center p-4 bg-black/50 backdrop-blur-sm items-center"
199199
(click)="closeModals()">
200-
<div class="w-[90%] md:w-[500px] rounded-3xl p-6 shadow-2xl animate-slide-up max-h-[90vh] overflow-y-auto"
200+
<div class="w-[90%] md:w-[500px] rounded-3xl p-6 shadow-2xl max-h-[90vh] overflow-y-auto"
201201
style="background-color: var(--color-bg-100);" (click)="$event.stopPropagation()">
202202

203203
<div class="flex items-center justify-between mb-6">
@@ -296,8 +296,8 @@ <h3 class="text-xl font-bold">
296296
@if (showGoalDetailsModal && currentGoal) {
297297
<div class="fixed inset-0 z-50 flex justify-center p-4 bg-black/50 backdrop-blur-sm items-center transition-all"
298298
(click)="closeModals()">
299-
<div class="w-[90%] md:w-[500px] rounded-3xl p-6 shadow-2xl animate-slide-up"
300-
style="background-color: var(--color-bg-100);" (click)="$event.stopPropagation()">
299+
<div class="w-[90%] md:w-[500px] rounded-3xl p-6 shadow-2xl " style="background-color: var(--color-bg-100);"
300+
(click)="$event.stopPropagation()">
301301

302302
<div class="flex items-start justify-between mb-6">
303303
<div>
@@ -364,7 +364,7 @@ <h3 class="text-xl font-bold mb-1">Goal Details</h3>
364364
@if (showGoalModal) {
365365
<div class="fixed inset-0 z-50 flex justify-center p-4 bg-black/50 backdrop-blur-sm items-center"
366366
(click)="closeModals()">
367-
<div class="w-[90%] md:w-[500px] rounded-3xl p-6 shadow-2xl animate-slide-up max-h-[90vh] overflow-y-auto"
367+
<div class="w-[90%] md:w-[500px] rounded-3xl p-6 shadow-2xl max-h-[90vh] overflow-y-auto"
368368
style="background-color: var(--color-bg-100);" (click)="$event.stopPropagation()">
369369

370370
<div class="flex items-center justify-between mb-6">

‎src/app/features/salary/salary.component.html‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -61,33 +61,30 @@
6161

6262
@if (viewMode === 'saving') {
6363

64-
<div class="animate-fade-in">
64+
<div>
6565
<app-saving></app-saving>
6666
</div>
6767

6868
} @else {
6969

7070
<main class="space-y-6">
7171

72-
<section
73-
class="relative overflow-hidden text-white transition-all duration-500 rounded-3xl group animate-slide-up"
72+
<section class="relative overflow-hidden text-white transition-all duration-500 rounded-3xl group"
7473
[ngClass]="viewMode === 'salary' ? 'shadow-2xl shadow-indigo-500/20' : 'shadow-2xl shadow-emerald-500/20'">
7574

76-
<div class="absolute inset-0 bg-gradient-to-br from-indigo-600 via-purple-600 to-indigo-800 transition-opacity duration-500 ease-in-out"
75+
<div class="absolute inset-0 bg-gradient-to-br from-indigo-600 via-purple-600 to-indigo-800"
7776
[class.opacity-100]="viewMode === 'salary'" [class.opacity-0]="viewMode !== 'salary'">
7877
</div>
7978

80-
<div class="absolute inset-0 bg-gradient-to-br from-emerald-600 via-teal-600 to-emerald-800 transition-opacity duration-500 ease-in-out"
79+
<div class="absolute inset-0 bg-gradient-to-br from-emerald-600 via-teal-600 to-emerald-800"
8180
[class.opacity-100]="viewMode === 'budget'" [class.opacity-0]="viewMode !== 'budget'">
8281
</div>
8382

84-
<div class="absolute top-0 right-0 p-4 transition-all duration-500 transform"
85-
[ngClass]="viewMode === 'salary' ? 'opacity-20 translate-y-0 rotate-12' : 'opacity-0 translate-y-4 rotate-0'">
83+
<div class="absolute top-0 right-0 p-4" [ngClass]="viewMode === 'salary' ? 'opacity-20' : 'opacity-0'">
8684
<i class="fa-solid fa-sack-dollar text-9xl"></i>
8785
</div>
8886

89-
<div class="absolute top-0 right-0 p-4 transition-all duration-500 transform"
90-
[ngClass]="viewMode === 'budget' ? 'opacity-20 translate-y-0 rotate-12' : 'opacity-0 translate-y-4 rotate-0'">
87+
<div class="absolute top-0 right-0 p-4" [ngClass]="viewMode === 'budget' ? 'opacity-20' : 'opacity-0'">
9188
<i class="fa-solid fa-chart-pie text-9xl"></i>
9289
</div>
9390

@@ -138,7 +135,7 @@ <h2 class="mb-6 text-3xl font-bold tracking-tight md:text-5xl">
138135
</div>
139136
</section>
140137

141-
<section class="grid grid-cols-3 gap-3 md:gap-4 animate-slide-up" style="animation-delay: 0.1s;">
138+
<section class="grid grid-cols-3 gap-3 md:gap-4 " style="animation-delay: 0.1s;">
142139
<div class="flex flex-col justify-between p-3 transition cursor-pointer rounded-2xl hover:opacity-90"
143140
style="background-color: var(--color-bg-100); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
144141

@@ -210,7 +207,7 @@ <h2 class="mb-6 text-3xl font-bold tracking-tight md:text-5xl">
210207
</div>
211208
</section>
212209

213-
<section class="p-4 rounded-2xl animate-slide-up"
210+
<section class="p-4 rounded-2xl "
214211
style="animation-delay: 0.15s; background-color: var(--color-bg-100); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
215212
<div class="flex justify-between mb-2 text-xs opacity-60">
216213
<span>{{ viewMode === 'salary' ? 'Income Usage' : 'Budget Usage' }}</span>
@@ -225,7 +222,7 @@ <h2 class="mb-6 text-3xl font-bold tracking-tight md:text-5xl">
225222
<p class="text-[10px] text-center italic" [ngClass]="analysisTextClass">{{ analysisText }}</p>
226223
</section>
227224

228-
<div class="flex items-end justify-between animate-slide-up" style="animation-delay: 0.2s;">
225+
<div class="flex items-end justify-between " style="animation-delay: 0.2s;">
229226
<h3 class="text-xl font-semibold">
230227
{{ viewMode === 'salary' ? 'Income Transactions' : 'Budget History' }}
231228
</h3>
@@ -253,7 +250,7 @@ <h3 class="text-xl font-semibold">
253250
</div>
254251
}
255252

256-
<div class="pb-16 space-y-3 animate-slide-up" style="animation-delay: 0.3s;">
253+
<div class="pb-16 space-y-3 " style="animation-delay: 0.3s;">
257254
@if (filteredTransactions.length === 0) {
258255
<div class="py-10 text-center opacity-50 animate-fade-in">
259256
<i class="mb-3 text-4xl fa-solid fa-filter"></i>
@@ -310,7 +307,7 @@ <h3 class="text-xl font-semibold">
310307
@if (showModal) {
311308
<div class="fixed inset-0 z-50 flex justify-center p-4 bg-black/50 backdrop-blur-sm items-center"
312309
(click)="closeModal()">
313-
<div class="w-[90%] md:w-[500px] rounded-3xl p-6 shadow-2xl animate-slide-up"
310+
<div class="w-[90%] md:w-[500px] rounded-3xl p-6 shadow-2xl "
314311
style="background-color: var(--color-bg-100);" (click)="$event.stopPropagation()">
315312
<div class="flex items-center justify-between mb-6">
316313
<h3 class="text-xl font-bold">
@@ -392,7 +389,7 @@ <h3 class="text-xl font-bold">
392389
@if (showFilterModal) {
393390
<div class="fixed inset-0 z-50 flex justify-center p-4 bg-black/50 backdrop-blur-sm items-center"
394391
(click)="closeFilterModal()">
395-
<div class="w-[90%] md:w-[450px] rounded-3xl p-6 shadow-2xl animate-slide-up"
392+
<div class="w-[90%] md:w-[450px] rounded-3xl p-6 shadow-2xl "
396393
style="background-color: var(--color-bg-100);" (click)="$event.stopPropagation()">
397394

398395
<div class="flex items-center justify-between mb-6">

0 commit comments

Comments
 (0)