new color scheme + some fixes

This commit is contained in:
xds
2025-03-10 23:55:38 +03:00
parent a68c565f71
commit b5d639cc2e
36 changed files with 101 additions and 91 deletions

View File

@@ -20,6 +20,8 @@
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
--vt-c-text-dark-1: var(--vt-c-white);
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
--primary-color: #FF0000;
--primary-color-text: #FFFFFF;
}
/* semantic color variables for this project */
@@ -35,6 +37,10 @@
--color-text: var(--vt-c-text-light-1);
--section-gap: 160px;
--p-primary-500: var(--p-blue-500);
--p-button-primary-color : var(--p-primary-500);
--primary-color: #FF0000;
--primary-color-text: #FFFFFF;
}
/*@media (prefers-color-scheme: dark) {*/

View File

@@ -5,7 +5,8 @@
@tailwind utilities;
.p-inputnumber-input{
.p-inputnumber-input {
width: 7rem;
}
@@ -14,21 +15,22 @@
justify-content: left !important;
padding-left: 1rem;
}
.p-progressbar {
height: 0.5rem !important;
}
.p-selectbutton{
.p-selectbutton {
border-width: 1px !important;
border-color: #d1d5db !important;
}
canvas {
/*margin-top: 1rem;*/
/*height: 12 8px !important*/
}
/*#app {*/
/* !*max-width: 1280px;*!*/
/* !*margin: 0 auto;*!*/

View File

@@ -30,7 +30,7 @@ const props = defineProps(
<li v-for="el in elements"
class="px-2 py-2 hover:bg-blue-50 rounded-md line-clamp-1 w-full"
:class="selectedElement == el.id? '!bg-emerald-50 text-emerald-700': '' "
:class="selectedElement == el.id? '!bg-blue-50 text-blue-700': '' "
@click="selectedElement=el">
{{ category.icon }} {{ e.name }}
</li>

View File

@@ -40,7 +40,7 @@
<Select v-model="spaceStore.space" :options="spaces" optionLabel="name" @change="selectSpace"/>
<div class="relative flex flex-col items-center group">
<!-- Имя пользователя -->
<div class="flex bg-emerald-300 rounded-full w-10 h-10 items-center justify-center">
<div class="flex bg-blue-300 rounded-full w-10 h-10 items-center justify-center">
<span class="text-white text-center">{{ user.firstName.substring(0, 1) }}</span>
</div>
@@ -55,7 +55,7 @@
<!-- Сообщение "Скопировано" -->
<div v-if="copied"
class="absolute bottom-[-60px] bg-green-500 text-white text-xs px-2 py-1 rounded transition-opacity">
class="absolute bottom-[-60px] blue text-white text-xs px-2 py-1 rounded transition-opacity">
Скопировано!
</div>
</div>

View File

@@ -6,7 +6,7 @@
<transition name="slide-up">
<div v-if="isOpen" class="fixed bottom-0 left-0 right-0 h-[90vh] bg-white rounded-t-2xl shadow-lg z-50 flex flex-col">
<header class="flex justify-between items-center p-4 border-b border-gray-200">
<h2 class="text-lg font-semibold">{{ props.header }}</h2>
<h1 class="text-lg font-semibold">{{ props.header }}</h1>
<button class="text-blue-600 text-lg" @click="closePopup">Закрыть</button>
</header>
<div class="flex-grow overflow-y-auto p-4">

View File

@@ -11,10 +11,10 @@ const props = defineProps({
<div v-if="show" class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50">
<div
class=" px-10 py-5 rounded-lg border border-gray-200 flex flex-col items-center gap-4"
:class="isError ? 'bg-red-100' : 'bg-green-100'"
:class="isError ? 'bg-red-100' : 'bg-blue-100'"
aria-label="Custom ProgressSpinner">
<i class="pi pi-check " :class="isError ? 'text-red-500' : 'text-green-500'" style="font-size: 2rem;"/>
<p class="text-green-700" :class="isError ? 'text-red-500' : 'text-green-500'">{{ message }}</p>
<i class="pi pi-check " :class="isError ? 'text-red-500' : 'text-blue-500'" style="font-size: 2rem;"/>
<p class="text-blue-700" :class="isError ? 'text-red-500' : 'text-blue-500'">{{ message }}</p>
</div>
</div>

View File

@@ -299,7 +299,7 @@ onMounted(async () => {
<span v-html="catType"/>
<ul>
<li v-for="cat in category" class="px-2 py-2 hover:bg-blue-50 rounded-md line-clamp- w-full"
:class="selectedCategory.id == cat.id? '!bg-emerald-50 text-emerald-700': '' " @click="selectedCategory=cat"> {{cat.icon}} {{cat.name}}</li>
:class="selectedCategory.id == cat.id? '!bg-blue-50 text-blue-700': '' " @click="selectedCategory=cat"> {{cat.icon}} {{cat.name}}</li>
</ul>
</li>
</ul>

View File

@@ -2,7 +2,7 @@
<div class="flex flex-col items-center justify-center h-screen bg-gray-100">
<Card class="w-full max-w-sm p-6 bg-white rounded-lg shadow-md">
<template #title>
<h2 class="text-2xl font-bold text-center">Вход</h2>
<h1 class="text-2xl font-bold text-center">Вход</h1>
</template>
<template #content>
@@ -23,7 +23,7 @@
<small v-if="errors.password" class="text-red-500">{{ errors.password }}</small>
</div>
<Button label="Войти" type="submit" class="w-full mt-2" :disabled="loading" :loading="loading" />
<Button label="Войти" type="submit" class="w-full mt-2 !bg-blue-300 hover:!bg-blue-400 !border-blue-300" :disabled="loading" :loading="loading" />
</form>
</template>

View File

@@ -2,7 +2,7 @@
<div class="flex items-center justify-center min-h-screen bg-gray-100">
<Card class="w-full max-w-md p-6 bg-white rounded-2xl shadow-lg">
<template #title>
<h2 class="text-2xl font-bold text-center text-gray-800">Регистрация</h2>
<h1 class="text-2xl font-bold text-center text-gray-800">Регистрация</h1>
</template>
<Toast/>
<template #content>
@@ -31,7 +31,7 @@
<small v-if="errors.confirmPassword" class="text-red-500">{{ errors.confirmPassword }}</small>
</div>
<Button label="Зарегистрироваться" type="submit" class="w-full mt-2" :disabled="loading" :loading="loading" />
<Button label="Зарегистрироваться" type="submit" class="w-full mt-2 !bg-blue-300 hover:!bg-blue-400 !border-blue-300" :disabled="loading" :loading="loading" />
</form>
</template>

View File

@@ -78,7 +78,7 @@ watch(
unstyled
/>
<Button v-if="isEditing" @click="stopEditing" icon="pi pi-check" severity="success" rounded outlined
aria-label="Search"/>
aria-label="Search" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
</div>
</div>

View File

@@ -121,7 +121,7 @@ onMounted(() => {
</div>
<div v-if="categories.length ==0" class="text-red-500 font-bold">Сперва лучше создать категории</div>
<div class="flex flex-row gap-2 justify-end items-center">
<Button label="Создать" severity="success" icon="pi pi-save" @click="create"/>
<Button label="Создать" severity="success" icon="pi pi-save" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300" @click="create"/>
<Button label="Отмена" severity="secondary" icon="pi pi-times-circle" @click="cancel"/>
</div>
</div>

View File

@@ -3,8 +3,8 @@
<div v-else class="p-4 bg-gray-100 h-full flex flex-col gap-4 ">
<!-- Заголовок -->
<div class="flex flex-row gap-4 items-center">
<h2 class="text-4xl font-bold">Бюджеты</h2>
<Button v-if="selectedSpace" label="+ Создать" @click="creationOpened=true" size="small"/>
<h1 class="text-4xl font-bold">Бюджеты</h1>
<Button v-if="selectedSpace" label="+ Создать" @click="creationOpened=true" size="small" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
<BudgetCreationView :opened="creationOpened" @budget-created="fetchBudgets"
@close-modal="creationOpened=false"/>
<StatusView :show="creationSuccessModal" :is-error="false" :message="'Бюджет создан!'"/>
@@ -39,7 +39,7 @@
</div>
<div class="flex flex-col justify-between gap-4">
<router-link :to="'/budgets/'+budget.id">
<i class="pi pi-arrow-circle-right text-green-500" style="font-size: 1.5rem;"/>
<i class="pi pi-arrow-circle-right text-blue-300" style="font-size: 1.5rem;"/>
</router-link>
<button @click="deleteBudget(budget)"><i class="pi pi-trash" style="color:red; font-size: 1.2rem"/></button>
</div>

View File

@@ -6,7 +6,7 @@ import {computed, onMounted, PropType, ref} from "vue";
import {Transaction} from "@/models/Transaction";
import {Category, CategoryType} from "@/models/Category";
import {getCategories, getCategoryTypes} from "@/services/categoryService";
import { updateTransactionRequest} from "@/services/transactionService";
import {updateTransactionRequest} from "@/services/transactionService";
import {formatAmount, formatDate} from "@/utils/utils";
import TransactionForm from "@/components/transactions/TransactionForm.vue";
import {useToast} from "primevue/usetoast";
@@ -25,13 +25,13 @@ const props = defineProps(
transactions: {
type: Array as () => Array<Transaction>,
required: false
}
},
bgColor: String
}
)
const emits = defineEmits(['open-drawer', 'transaction-checked', 'transaction-updated', 'delete-transaction'])
const setIsDoneTrue = async () => {
setTimeout(async () => {
@@ -116,9 +116,8 @@ onMounted(async () => {
<template>
<div :class="
props.isList ? ' bg-gradient-to-r shadow-lg border-2 gap-5 p-2 rounded-xl me-5' : 'border-b pb-2'
"
class="flex bg-white min-w-fit max-h-fit flex-row items-center gap-4 w-full ">
props.isList ? ' bg-gradient-to-r shadow-lg border-2 gap-5 p-2 rounded-xl me-5' : 'border-b pb-2', props.bgColor ? props.bgColor : 'bg-white'"
class="flex min-w-fit max-h-fit flex-row items-center gap-4 w-full ">
<div>
<p v-if="transaction.type.code=='INSTANT' || props.isList"
class="text-6xl font-bold text-gray-700 dark:text-gray-400">
@@ -136,14 +135,15 @@ onMounted(async () => {
<p :class="transaction.isDone && isPlanned && !props.isList ? 'line-through' : ''" class="font-bold">{{
transaction.comment
}}</p>
<p :class="transaction.isDone && isPlanned && !props.isList ? 'line-through' : ''" class="font-light text-start">
<p :class="transaction.isDone && isPlanned && !props.isList ? 'line-through' : ''"
class="font-light text-start">
{{ isPlanned ? transaction.category.icon : '' }} {{
transaction.category.name
}} |
{{ formatDate(transaction.date) }}</p>
</div>
<div
:class="transaction.category.type.code == 'EXPENSE' ? 'text-red-700' : 'text-green-700' && transaction.isDone && isPlanned ? 'line-through' : ''"
:class="transaction.category.type.code == 'EXPENSE' ? 'text-red-700' : 'text-blue-700' && transaction.isDone && isPlanned ? 'line-through' : ''"
class="text-lg line-clamp-1 ">
{{ formatAmount(transaction.amount) }}

View File

@@ -17,7 +17,7 @@
<div :class="!updateLoading ? '' : 'h-fit bg-white opacity-50 z-0 '" class=" flex flex-col gap-3">
<div class="flex flex-row justify-between ">
<div class="flex flex-col gap-2">
<h2 class="text-4xl font-bold">Бюджет {{ budget.name }} </h2>
<h1 class="text-4xl font-bold">Бюджет {{ budget.name }} </h1>
<div class="flex flex-row gap-2 text-xl">{{ formatDate(budget.dateFrom) }} -
{{ formatDate(budget.dateTo) }}
</div>

View File

@@ -705,7 +705,7 @@ watch([budget, plannedExpenses], () => {
if (lastDateWithExpenses && periodStart) {
// Добавляем период без трат, если он был
result.push({
date: currentDate,
date: new Date(currentDate),
dateStr: periodStart.toLocaleDateString('ru-RU') === new Date(new Date(currentDate).setDate(currentDate.getDate() - 1)).toLocaleDateString('ru-RU')
? periodStart.getUTCDate() + " " + getMonthName2(periodStart.getMonth(), "род") + " " + periodStart.getUTCFullYear() + ' трат нет.'
: `В период с ${periodStart.toLocaleDateString('ru-RU')} по ${new Date(new Date(currentDate).setDate(currentDate.getDate() - 1)).toLocaleDateString('ru-RU')} трат нет.`,
@@ -718,7 +718,7 @@ watch([budget, plannedExpenses], () => {
// Добавляем день с тратами
lastDateWithExpenses = new Date(currentDate)
result.push({
date: currentDate,
date: new Date(currentDate),
dateStr: currentDate.getUTCDate() + " " + getMonthName2(currentDate.getMonth(), "род") + " " + currentDate.getUTCFullYear(),
expenses: expenses,
expensesSum: expensesSum,
@@ -733,7 +733,7 @@ watch([budget, plannedExpenses], () => {
// Добавляем последний период без трат, если он был
if (lastDateWithExpenses && periodStart) {
result.push({
date: currentDate,
date: new Date(currentDate),
dateStr: `В период с ${periodStart.toLocaleDateString('ru-RU')} по ${lastDateWithExpenses.toLocaleDateString('ru-RU')} трат нет.`,
expenses: [],
expensesSum: 0
@@ -791,7 +791,7 @@ onUnmounted(async () => {
<div class=" flex flex-col gap-3">
<div class="flex flex-row justify-between ">
<div class="flex flex-col gap-2">
<h2 class="text-4xl font-bold text-gray-700">Бюджет {{ budget.name }} </h2>
<h1 class="text-4xl font-bold text-gray-700">Бюджет {{ budget.name }} </h1>
<div class="flex flex-row gap-2 text-xl text-gray-700">{{ formatDate(budget.dateFrom) }} -
{{ formatDate(budget.dateTo) }}
</div>
@@ -1088,7 +1088,7 @@ onUnmounted(async () => {
<!-- Планируемые доходы -->
<div >
<div class="flex flex-row gap-4 items-center mb-4">
<h3 class="text-2xl font-bold text-emerald-500 ">Поступления</h3>
<h3 class="text-2xl font-bold text-blue-500 ">Поступления</h3>
<button @click="openDrawer('PLANNED', 'INCOME')">
<!-- <i class="pi pi-plus-circle text-green-500" style="font-size: 1rem;"/>-->
<span class="font-light text-sm">+ Добавить</span>
@@ -1166,8 +1166,9 @@ onUnmounted(async () => {
<div v-for="day, dayOne in calendar" class="flex flex-col justify-between p-4 shadow-md rounded-lg "
v-if="calendarExpanded == '1'"
:class="day.date.toISOString().split('T')[0] == new Date().toISOString().split('T')[0]? 'bg-emerald-200' : 'bg-white '">
:class="day.date.toISOString().split('T')[0] == new Date().toISOString().split('T')[0] && !day.dateStr.includes('нет')? 'bg-blue-100' : 'bg-white '">
<div class="flex flex-row gap-2 items-center ">
<span class="font-bold text-xl">{{ day.dateStr }} </span>
<span
v-if="day.expensesSum>0">Трат по плану: {{ formatAmount(day.expensesSum) }} </span>
@@ -1176,6 +1177,7 @@ onUnmounted(async () => {
<BudgetTransactionView v-for="expense in day.expenses" :key="expense.id"
:transaction="expense"
:is-list="false"
:bg-color="day.date.toISOString().split('T')[0] == new Date().toISOString().split('T')[0] ? 'bg-blue-100' : 'bg-white '"
@transaction-updated="updateTransactions"
@transaction-checked="updateTransactions"
/>
@@ -1186,16 +1188,16 @@ onUnmounted(async () => {
<li v-for="(category, categoryId) in categoriesTransactions" :key="categoryId"
class="flex flex-col justify-between p-4 shadow-md rounded-lg bg-white ">
<div class="">
<div class="flex flex-row justify-between w-full items-center">
<div class="flex flex-row justify-between gap-2 w-full items-center">
<div class="flex flex-row col-span-2 gap-2 items-center">
<span class=" font-bold line-clamp-1" style="font-size: 1.25rem">{{
<span class=" font-bold overflow-hidden truncate max-w-[11rem] md:max-w-[16rem] " style="font-size: 1.25rem">{{
category.name.category.icon
}} {{ category.name.category.name }}</span>
<button @click="openDrawer('INSTANT', 'EXPENSE', category.name.category.id)">
<i class="pi pi-plus-circle"/>
</button>
</div>
<div class="flex flex-row w-fit gap-1 justify-between">
<div class="flex flex-row min-w-fit gap-1 justify-between">
<span>{{ formatAmount(category.name.currentSpent) }} </span>
<span> / </span>

View File

@@ -290,10 +290,10 @@ onMounted(async () => {
<div v-if="result" class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50">
<div
class=" px-10 py-5 rounded-lg border border-gray-200 flex flex-col items-center gap-4"
:class="isError ? 'bg-red-100' : 'bg-green-100'"
:class="isError ? 'bg-red-100' : 'bg-blue-100'"
aria-label="Custom ProgressSpinner">
<i class="pi pi-check " :class="isError ? 'text-red-500' : 'text-green-500'" style="font-size: 2rem;"/>
<p class="text-green-700" :class="isError ? 'text-red-500' : 'text-green-500'">{{ resultText }}</p>
<i class="pi pi-check " :class="isError ? 'text-red-500' : 'text-blue-500'" style="font-size: 2rem;"/>
<p class="text-blue-700" :class="isError ? 'text-red-500' : 'text-blue-500'">{{ resultText }}</p>
</div>
</div>
@@ -423,7 +423,7 @@ onMounted(async () => {
<div class="fixed col-12 flex justify-content-end gap-4 bottom-8">
<Button label="Сохранить" icon="pi pi-check" class="p-button-success"
<Button label="Сохранить" icon="pi pi-check" class="p-button-success !bg-blue-300 hover:!bg-blue-400 !border-blue-300"
@click="isEditing ? updateTransaction() : createTransaction()"/>
<Button label="Отмена" icon="pi pi-times" class="p-button-secondary " @click="closeDrawer"/>
<Button v-if="isEditing" label="Удалить" icon="pi pi-times" class="p-button-success" severity="danger"

View File

@@ -123,7 +123,7 @@ const fetchRecurrents = async () => {
</div>
<!-- <button @click="showCreateCategoryModal=true">hui</button>-->
<div class="flex flex-col gap-2">
<Button label="Добавить категорию" icon="pi pi-plus" class="text-sm"
<Button label="Добавить категорию" icon="pi pi-plus" class="text-sm !bg-blue-300 hover:!bg-blue-400 !border-blue-300"
@click="showCreateCategoryModal=true"/>
<CreateCategoryModal v-if="showCreateCategoryModal" :show="showCreateCategoryModal"

View File

@@ -38,7 +38,7 @@ onMounted(async () => {
<div class="flex flex-row items-center min-w-fit justify-between">
<p class="text-2xl ">Категории</p>
<router-link to="/settings/categories">
<Button size="large" icon="pi pi-arrow-circle-right" severity="secondary" text rounded/>
<Button size="large" icon="pi pi-arrow-circle-right" class=" !bg-blue-300 hover:!bg-blue-400 !border-blue-300"severity="secondary" text rounded/>
</router-link>
</div>
<div class="flex flex-row overflow-x-auto gap-4 h-fit p-6 ">

View File

@@ -138,11 +138,11 @@ onMounted(async () => {
<div class="flex flex-row items-center gap-2 flex-wrap">
<Tag v-for="tag in tags" :key="tag.id" class="w-fit group">{{ tag.name }} ({{ tag.code }})<i
class="pi pi-trash !hidden group-hover:!block" @click="deleteTag(tag)"/></Tag>
<button v-if=!creationShowed class="bg-emerald-100 border border-emerald-700 p-0.5 px-1 rounded"
<button v-if=!creationShowed class="bg-blue-100 border border-blue-700 p-0.5 px-1 rounded"
@click="creationShowed = !creationShowed"><span
class="text-gray-500 font-bold flex flex-row gap-1 items-center"><i
class="pi pi-plus-circle"/> Добавить</span></button>
<div v-else class=" bg-emerald-50 border-spacing-0.5 border-emerald-700 rounded p-0.5">
<div v-else class=" bg-blue-50 border-spacing-0.5 border-blue-700 rounded p-0.5">
<div class="flex flex-row gap-4 px-1">
<div class="flex flex-col items-center gap- ">
<div class="flex flex-row items-center gap-2 ">

View File

@@ -43,7 +43,7 @@ onMounted(async () => {
<div class="flex flex-row items-center min-w-fit justify-between">
<p class="text-2xl font-bold">Повторяемые операции</p>
<router-link to="/settings/recurrents">
<Button size="large" icon="pi pi-arrow-circle-right" severity="secondary" text rounded/>
<Button size="large" icon="pi pi-arrow-circle-right" severity="secondary" text rounded class="!bg-blue-400 hover:!bg-blue-500 !border-blue-500"/>
</router-link>
</div>
<div class="flex flex-row overflow-x-auto gap-4 h-fit p-6 ">

View File

@@ -51,13 +51,13 @@ const pages = ref([
<template>
<div class="flex bg-gray-100 flex-col h-full px-4 gap-4 ">
<h2 class="text-4xl font-bold ">Настройки</h2>
<h1 class="text-4xl font-bold ">Настройки</h1>
<div class="xl:grid xl:grid-cols-8 w-full h-full ">
<div class=" hidden xl:flex flex-row items-start justify-end col-start-2 col-span-1 ">
<div class=" hidden xl:flex flex-row items-start justify-end w-fit col-start-2 col-span-1 ">
<ul class=" flex-col gap-1 ">
<li v-for="page in pages" :key="page.code"
class="flex flex-row gap-2 p-2 hover:bg-emerald-100 hover:text-emerald-700 hover:rounded-md items-center"
class="flex flex-row gap-2 p-2 hover:bg-blue-100 hover:text-blue-700 hover:rounded-md items-center"
:class="selectedModeCode == page.code ? 'bg-blue-100' : ''" @click="selectMode(page.code)">
<i :class="page.icon"/>{{ page.title }}
</li>
@@ -69,7 +69,7 @@ const pages = ref([
<ul class=" min-w-fit w-full items-start">
<li v-for="page in pages"
class=" flex flex-row gap-2 px-2 py-2 hover:bg-blue-50 rounded-md line-clamp-1 w-full"
:class="selectedModeCode == page.code ? '!bg-emerald-50 text-emerald-700': '' "
:class="selectedModeCode == page.code ? '!bg-blue-50 text-blue-700': '' "
@click="selectMode(page.code)">
<i :class="page.icon"/>{{ page.title }}
</li>

View File

@@ -9,7 +9,7 @@
<div v-else>
<div class="flex flex-col gap-4 xl:flex-row justify-between bg-gray-100">
<h2 class="text-4xl ">Категории</h2>
<Button label="Добавить категорию" icon="pi pi-plus" class="text-sm" @click="openCreateDialog(null)"/>
<Button label="Добавить категорию" icon="pi pi-plus" class="text-sm !bg-blue-300 hover:!bg-blue-400 !border-blue-300" @click="openCreateDialog(null)"/>
</div>
<!-- Поле для поиска -->
@@ -23,7 +23,7 @@
<!-- Переключатель категорий (доходы/расходы) -->
<div class="card flex justify-center w-full ">
<SelectButton v-model="selectedCategoryType" :options="categoryTypes" optionLabel="name"
class="!bg-emerald-50 !border-emerald-600 "
class="!bg-blue-50 !border-blue-600 "
aria-labelledby="category-switch"/>
</div>

View File

@@ -98,7 +98,7 @@
<!-- Кнопки -->
<div class="flex justify-content-end gap-2 mt-4">
<Button label="Сохранить" icon="pi pi-check" @click="savePayment" class="p-button-success"/>
<Button label="Сохранить" icon="pi pi-check" @click="savePayment" class="p-button-succes!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
<Button label="Отмена" icon="pi pi-times" @click="closeModal" class="p-button-secondary"/>
</div>
</div>

View File

@@ -209,7 +209,7 @@ const resetForm = () => {
<!-- Кнопки -->
<div class="flex justify-content-end gap-2 mt-4">
<Button label="Сохранить" icon="pi pi-check" @click="savePayment" class="p-button-success"/>
<Button label="Сохранить" icon="pi pi-check" @click="savePayment" class="p-button-success !bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
<Button label="Отмена" icon="pi pi-times" @click="closeModal" class="p-button-secondary"/>
</div>
</div>

View File

@@ -7,7 +7,7 @@
<!-- Заголовок -->
<div class="flex flex-col gap-4 xl:flex-row justify-between bg-gray-100">
<h1 class="text-4xl text-gray-800">Ежемесячные платежи</h1>
<Button label="Добавить платеж" icon="pi pi-plus" class="text-sm " @click="toggleModal(null)"/>
<Button label="Добавить платеж" icon="pi pi-plus" class="text-sm !bg-blue-300 hover:!bg-blue-400 !border-blue-300" @click="toggleModal(null)"/>
</div>
<div v-if="!space">Выберите сперва пространство</div>
<!-- Список рекуррентных платежей -->

View File

@@ -5,7 +5,7 @@
<!-- Дата и Сумма -->
<div class="flex flex-row justify-between w-full items-center">
<div class="text-gray-500">
<strong class="text-xl text-green-600">{{ payment.atDay }} </strong> числа | {{payment.category.type.code=='EXPENSE' ? 'Расход' : 'Приход'}}
<strong class="text-xl text-blue-400">{{ payment.atDay }} </strong> числа | {{payment.category.type.code=='EXPENSE' ? 'Расход' : 'Приход'}}
</div>
<div class="flex items-center gap-4">
@@ -35,7 +35,7 @@
</div>
</div>
<div
:class="payment.category.type.code == 'EXPENSE' ? 'text-red-700' : 'text-green-700'"
:class="payment.category.type.code == 'EXPENSE' ? 'text-red-700' : 'text-blue-700'"
class="text-xl font-bold line-clamp-1 ">{{ formatAmount(payment.amount) }}
</div>
</div>

View File

@@ -62,7 +62,7 @@ const resetForm = () => {
<template>
<LoadingView v-if="loading" halfscreen/>
<div v-else class="flex flex-col gap-4 mt-1">
<div v-else class="flex flex-col gap-4 mt-1 h-80 items-center justify-between">
<FloatLabel variant="on" class="w-full">
<label for="name">Название</label>
<InputText v-model="spaceName" id="name" class="w-full"/>
@@ -76,7 +76,7 @@ const resetForm = () => {
Создать стандартный набор категорий?
</div>
<div class="flex flex-row gap-2 justify-end items-center">
<Button label="Создать" severity="success" icon="pi pi-save" @click="createSpace"/>
<Button label="Создать" severity="success" icon="pi pi-save" @click="createSpace" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
<Button label="Отмена" severity="secondary" icon="pi pi-times-circle" @click="cancel"/>
</div>
</div>

View File

@@ -39,7 +39,7 @@ const acceptInvite = async () => {
<p class="text-lg">Принять приглашение?</p>
<div class="flex flex-row gap-4">
<Button label="Отказаться" severity="secondary" @click="router.push('/spaces')"/>
<Button label="Принять" severity="success" @click="acceptInvite"/>
<Button label="Принять" severity="success" @click="acceptInvite" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
</div>
</div>
</div>

View File

@@ -253,7 +253,7 @@ onMounted(async () => {
<button @click="selectSpace(space)">
<div class="flex p-1 rounded border"
:class="selectedSpace? selectedSpace.id === space.id ? 'bg-green-100' : 'bg-gray-100':'bg-gray-100'"
:class="selectedSpace? selectedSpace.id === space.id ? 'bg-blue-100' : 'bg-gray-100':'bg-gray-100'"
@click="spaceStore.setSpace(space)">
<span v-if="selectedSpace? space.id === selectedSpace.id : false"
class="font-bold text-gray-500 items-center"><i
@@ -269,7 +269,7 @@ onMounted(async () => {
:key="user.id"
@mouseover="user.isHovered = true"
@mouseleave="user.isHovered = false">
<div class="relative flex bg-emerald-300 rounded-full w-10 h-10 items-center justify-center">
<div class="relative flex bg-blue-300 rounded-full w-10 h-10 items-center justify-center">
<!-- Первая буква имени -->
<span class="text-white text-center">
{{ user.firstName.substring(0, 1) }}
@@ -301,7 +301,7 @@ onMounted(async () => {
</div>
</div>
<div v-if="space.owner.id == useUserStore().user.id"
class="flex bg-gray-300 hover:bg-emerald-300 rounded-full w-10 h-10 items-center justify-center relative"
class="flex bg-gray-300 hover:bg-blue-300 rounded-full w-10 h-10 items-center justify-center relative"
>
<i class="text-white text-center pi pi-plus" @click="createInvite(space)"></i>
</div>
@@ -322,8 +322,8 @@ onMounted(async () => {
<div class="w-full h-full">
<div class="bg-white p-4 shadow-lg rounded-lg flex flex-col gap-2 justify-center items-center h-[200px]">
<button class="flex-col" @click="creationOpened = !creationOpened">
<i class="pi pi-plus-circle text-emerald-300" style="font-size: 2.5rem"></i>
<p class="text-emerald-600">Создать пространство</p>
<i class="pi pi-plus-circle text-blue-300" style="font-size: 2.5rem"></i>
<p class="text-blue-600">Создать пространство</p>
</button>
<SpaceCreationDialog :opened="creationOpened" @spaceCreated="spaceCreated"
@close-modal="creationOpened = false"/>

View File

@@ -249,7 +249,7 @@ const updateTransaction = async () => {
emit('update-transaction', editedTransaction.value);
emit('transaction-updated');
await transactionsUpdatedEmit()
toast.add({severity: 'success', summary: 'Успешно!', detail: 'Транзакция создана!', life: 3000});
toast.add({severity: 'success', summary: 'Успешно!', detail: 'Транзакция изменена!', life: 3000});
} catch (error) {
toast.add({severity: 'error', summary: 'Ошибка!', detail: error.response.data["message"], life: 3000});
console.error('Error updating transaction:', error);
@@ -357,10 +357,10 @@ onMounted(async () => {
<div v-if="result" class="absolute top-0 left-0 w-full h-full flex items-center justify-center z-50">
<div
class=" px-10 py-5 rounded-lg border border-gray-200 flex flex-col items-center gap-4"
:class="isError ? 'bg-red-100' : 'bg-green-100'"
:class="isError ? 'bg-red-100' : 'bg-blue-100'"
aria-label="Custom ProgressSpinner">
<i class="pi pi-check " :class="isError ? 'text-red-500' : 'text-green-500'" style="font-size: 2rem;"/>
<p class="text-green-700" :class="isError ? 'text-red-500' : 'text-green-500'">{{ resultText }}</p>
<i class="pi pi-check " :class="isError ? 'text-red-500' : 'text-blue-500'" style="font-size: 2rem;"/>
<p class="text-blue-700" :class="isError ? 'text-red-500' : 'text-blue-500'">{{ resultText }}</p>
</div>
</div>
@@ -493,7 +493,7 @@ onMounted(async () => {
<div class="fixed col-12 flex justify-content-end gap-4 bottom-8">
<Button label="Сохранить" icon="pi pi-check" class="p-button-success"
<Button label="Сохранить" icon="pi pi-check" class="p-button-success !bg-blue-300 hover:!bg-blue-400 !border-blue-300"
@click="isEditing ? updateTransaction() : createTransaction()"/>
<Button label="Отмена" icon="pi pi-times" class="p-button-secondary " @click="closeDrawer"/>
<Button v-if="isEditing" label="Удалить" icon="pi pi-times" class="p-button-success" severity="danger"

View File

@@ -141,12 +141,12 @@ onUnmounted(async () => {
<template>
<div class="flex flex-col gap-4 p-4 bg-gray-100 h-full ">
<div class="flex flex-row gap-4 items-center">
<h2 class="text-4xl font-bold">Список транзакций </h2>
<h1 class="text-4xl font-bold">Список транзакций </h1>
<Button v-if="selectedSpace" label="+ Создать" @click="{
drawerStore.setCategoryType('EXPENSE');
drawerStore.setTransactionType('INSTANT');
drawerStore.visible = true
}" size="small"/>
}" size="small" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
</div>
<div v-if="!selectedSpace" class="flex w-full h-full items-center justify-center">
<p>Сперва нужно выбрать Пространство.
@@ -185,7 +185,7 @@ onUnmounted(async () => {
@delete-transaction="fetchTransactions(true)"
/>
<div v-if="!loading" class="flex items-center justify-center px-2 py-1 mb-5">
<Button @click="fetchTransactions(false)">Загрузить следующие...</Button>
<Button @click="fetchTransactions(false)" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300">Загрузить следующие...</Button>
</div>
<!-- Показать спиннер загрузки, если идет загрузка -->
<ProgressSpinner v-if="loading" class="mb-4" style="width: 50px; height: 50px;"

View File

@@ -112,8 +112,8 @@ onMounted(async () => {
<!-- Заголовок -->
<div class="flex flex-row gap-4 items-center">
<h2 class="text-4xl font-bold">Вишлисты</h2>
<Button v-if="selectedSpace" label="+ Создать" @click="creationOpened=true" size="small"/>
<h1 class="text-4xl font-bold">Вишлисты</h1>
<Button v-if="selectedSpace" label="+ Создать" @click="creationOpened=true" size="small" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
<!-- <StatusView :show="creationSuccessModal" :is-error="false" :message="'Бюджет создан!'"/>-->
</div>
<!-- Плитка с бюджетами -->
@@ -142,7 +142,7 @@ onMounted(async () => {
</router-link>
<div class="text-sm font-light ">{{ wishlist.description }}</div>
<div class="flex flex-row items-center gap-2">
<div class="relative flex bg-emerald-300 rounded-full w-10 h-10 items-center justify-center">
<div class="relative flex bg-blue-300 rounded-full w-10 h-10 items-center justify-center">
<!-- Первая буква имени -->
<span class="text-white text-center">{{ wishlist.owner.firstName.substring(0, 1) }}</span>
</div>

View File

@@ -73,7 +73,7 @@ const cancelCreation = () => {
<Textarea v-model="wishlist.description" id="name" class="w-full"/>
</FloatLabel>
<div class="flex flex-row gap-2 justify-end items-center">
<Button label="Создать" severity="success" icon="pi pi-save" @click="createWishlist"/>
<Button label="Создать" severity="success" icon="pi pi-save" @click="createWishlist" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
<Button label="Отмена" severity="secondary" icon="pi pi-times-circle" @click="cancelCreation"/>
</div>
</div>

View File

@@ -121,7 +121,7 @@ onMounted(async () => {
<InputText id="link" type="text" v-model="reservedBy" class="w-full"/>
</FloatLabel>
<div class="flex flex-row w-full justify-between">
<Button label="Сохранить" @click="reserveItem"/>
<Button label="Сохранить" @click="reserveItem" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
<Button label="Отмена" @click="reserveModalShow=false;selectedReserveItem=null;reservedBy=null"
severity="secondary"/>
</div>
@@ -138,11 +138,11 @@ onMounted(async () => {
<div class="flex flex-col justify-between gap-5">
<div class="flex flex-col gap-2">
<div class="flex flex-row gap-2 items-end">
<h2 class="text-4xl font-bold text-gray-700">Вишлист {{ wishlist.name }} </h2>
<h1 class="text-4xl font-bold text-gray-700">Вишлист {{ wishlist.name }} </h1>
</div>
<p class="text-lg text-gray-500">{{ wishlist.description }}</p>
<div class="flex flex-row items-center gap-2">
<div class="relative flex bg-emerald-300 rounded-full w-10 h-10 items-center justify-center">
<div class="relative flex bg-blue-300 rounded-full w-10 h-10 items-center justify-center">
<!-- Первая буква имени -->
<span class="text-white text-center">{{ wishlist.owner.firstName.substring(0, 1) }}</span>
</div>
@@ -200,14 +200,14 @@ onMounted(async () => {
<div class="flex flex-row w-full justify-between">
<p class="font-semibold text-xl text-gray-700">{{ item.name }}</p>
</div>
<p class="font-bold text-lg text-emerald-700">{{ formatAmount(item.price) }} </p>
<p class="font-bold text-lg text-blue-700">{{ formatAmount(item.price) }} </p>
<p class="font-light text-gray-700 text-wrap">{{ item.description }}</p>
</div>
</div>
<div class="grid grid-cols-2 ">
<a :href="item.link"
target="_blank" class="w-fit">
<Button label="В магазин" icon="pi pi-arrow-up-right" iconPos="right"/>
<Button label="В магазин" icon="pi pi-arrow-up-right" iconPos="right" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
</a>
<Button
:label="!item.reservedBy ? 'Я беру!' : item.reservedBy.aid != aidCookie ? 'Забронировано.' : 'Отменить'"

View File

@@ -113,7 +113,7 @@ const resetForm = () => {
<InputGroupAddon>.00</InputGroupAddon>
</InputGroup>
<div class="flex flex-row gap-2 justify-end items-center">
<Button label="Создать" severity="success" icon="pi pi-save" @click="itemCreate"/>
<Button label="Создать" severity="success" icon="pi pi-save" @click="itemCreate" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
<Button label="Отмена" severity="secondary" icon="pi pi-times-circle" @click="cancelCreation"/>
</div>
</div>

View File

@@ -289,7 +289,7 @@ onMounted(async () => {
<Image v-if="fileUploadLink" :src="fileUploadLink" width="240" preview class="w-fit"/>
</div>
<div class="flex flex-row gap-2 w-full justify-center">
<Button label="Загрузить" @click="upload"/>
<Button label="Загрузить" @click="upload" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
<Button label="Сбросить" @click="fileUploadLink=null;fileupload=null" severity="secondary"/>
<Button label="Отмена" @click="imageUploadVisible = false;fileUploadLink=null" severity="danger"/>
</div>
@@ -320,7 +320,7 @@ onMounted(async () => {
<div class="flex flex-col justify-between gap-5">
<div class="flex flex-col gap-2">
<div class="flex flex-col md:flex-row gap-2 items-start md:items-end">
<h2 class="text-4xl font-bold text-gray-700">Вишлист {{ wishlist.name }} </h2>
<h1 class="text-4xl font-bold text-gray-700">Вишлист {{ wishlist.name }} </h1>
<button @click="shareDialogOpened=true"><span class="text-sm text-gray-600">Поделиться <i
class="pi pi-arrow-up-right" style="font-size: 0.65rem"/></span></button>
</div>
@@ -330,7 +330,7 @@ onMounted(async () => {
<p class="text-lg text-gray-500">{{ wishlist.description }}</p>
<div class="flex flex-row items-center gap-2">
<div class="relative flex bg-emerald-300 rounded-full w-10 h-10 items-center justify-center">
<div class="relative flex bg-blue-300 rounded-full w-10 h-10 items-center justify-center">
<!-- Первая буква имени -->
<span class="text-white text-center">{{ wishlist.owner.firstName.substring(0, 1) }}</span>
</div>
@@ -340,7 +340,7 @@ onMounted(async () => {
<div class="flex flex-col gap-2">
<div class="flex flex-row gap-4">
<p class="text-2xl text-gray-700">Желания</p>
<Button label="+ Создать" @click="wishlistItemCreationOpened=true" size="small"/>
<Button label="+ Создать" @click="wishlistItemCreationOpened=true" size="small" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
</div>
<div class="grid grid-cols-1 lg:grid-cols-4 gap-2">
@@ -409,7 +409,7 @@ onMounted(async () => {
</button>
</div>
</div>
<p class="font-bold text-lg text-emerald-700">{{ formatAmount(item.price) }} </p>
<p class="font-bold text-lg text-blue-700">{{ formatAmount(item.price) }} </p>
<p class="font-light text-gray-700 text-wrap">{{ item.description }}</p>
</div>
@@ -417,7 +417,7 @@ onMounted(async () => {
<div class="grid grid-cols-2 w-full justify-between items-center">
<a :href="item.link"
target="_blank">
<Button label="В магазин" icon="pi pi-arrow-up-right" iconPos="right"/>
<Button label="В магазин" icon="pi pi-arrow-up-right" iconPos="right" class="!bg-blue-300 hover:!bg-blue-400 !border-blue-300"/>
</a>
<span v-if="!item.reservedBy" class="text-gray-500">Не забронировано</span>
<Button v-else @mouseover="hoveredCancelReservationButton.set(item.id, true)"
@@ -425,7 +425,7 @@ onMounted(async () => {
:label="hoveredCancelReservationButton.get(item.id) ? 'Отменить' : 'Забронировано'"
:disabled="!hoveredCancelReservationButton.get(item.id)"
:severity="hoveredCancelReservationButton.get(item.id) ? 'danger' : ''"
class="w-full"
class="w-full !bg-blue-300 hover:!bg-blue-400 !border-blue-300"
@click="hoveredCancelReservationButton.get(item.id) ? cancelReserve(item): ''"/>
</div>