UI update
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
.gallery-item-card {
|
||||
background-color: #fcfaf5 !important;
|
||||
background-color: #FBF6E9 !important;
|
||||
border: 1px solid #e2d7ba !important;
|
||||
border-radius: 4px !important;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
@@ -28,37 +28,127 @@
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
|
||||
.view-recipe-btn {
|
||||
font-family: 'Libre Baskerville', serif !important;
|
||||
font-style: italic;
|
||||
text-transform: none !important;
|
||||
.recipe-card {
|
||||
background-color: #f4e4bc !important;
|
||||
border: 1px solid #e2d7ba !important;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
|
||||
overflow-y: visible !important;
|
||||
}
|
||||
|
||||
.back-to-home-btn {
|
||||
background-color: #5d4037 !important;
|
||||
color: #f8f1e0 !important;
|
||||
font-family: 'Libre Baskerville', serif !important;
|
||||
text-transform: none !important;
|
||||
font-size: 1.1rem !important;
|
||||
height: 56px !important;
|
||||
border-radius: 8px !important;
|
||||
.recipe-card::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.back-to-home-btn:hover {
|
||||
background-color: #4a3a2a !important;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
|
||||
.image-drop-zone {
|
||||
background-color: transparent !important;
|
||||
border: 2px dashed #2e1e0a !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.image-drop-zone .v-card__underlay {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.recipe-card .v-card.rounded-lg:not(.image-drop-zone) {
|
||||
border: none !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.recipe-title-edit .v-field__input {
|
||||
font-family: 'Libre Baskerville', serif !important;
|
||||
font-size: 2.4rem !important;
|
||||
font-weight: 700 !important;
|
||||
color: #1e1408 !important;
|
||||
font-size: 2.4rem !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.recipe-title-edit input::placeholder,
|
||||
.recipe-title-edit .v-field-label {
|
||||
font-family: 'Libre Baskerville', serif !important;
|
||||
font-style: italic !important;
|
||||
color: #8c857b !important;
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
.recipe-title {
|
||||
font-family: 'Libre Baskerville', serif !important;
|
||||
font-weight: 700 !important;
|
||||
color: #1e1408 !important;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
font-family: 'Inter', sans-serif !important;
|
||||
font-size: 0.75rem !important;
|
||||
letter-spacing: 1.5px;
|
||||
text-transform: uppercase;
|
||||
color: #6d5e4a !important;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.recipe-title-edit ::placeholder {
|
||||
color: #8c857b !important;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.v-textarea .v-field {
|
||||
background-color: rgba(93, 64, 55, 0.05) !important;
|
||||
border-radius: 8px !important;
|
||||
background-color: transparent !important;
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
|
||||
.v-textarea textarea {
|
||||
font-family: 'Libre Baskerville', serif !important;
|
||||
font-size: 1.1rem !important;
|
||||
line-height: 1.6 !important;
|
||||
color: #2c2925 !important;
|
||||
min-height: 280px !important;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #d1c7b7 transparent;
|
||||
}
|
||||
|
||||
.v-field-label {
|
||||
color: #5d4037 !important;
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
.v-field__outline {
|
||||
--v-field-border-opacity: 0.2 !important;
|
||||
color: #2e1e0a !important;
|
||||
}
|
||||
|
||||
.v-field--focused .v-field__outline {
|
||||
color: #556b2f !important;
|
||||
}
|
||||
|
||||
.recipe-textarea .v-field__input,
|
||||
.v-textarea textarea {
|
||||
font-family: 'Libre Baskerville', serif !important;
|
||||
font-size: 1.1rem !important;
|
||||
line-height: 1.6 !important;
|
||||
color: #2c2925 !important;
|
||||
min-height: 280px !important;
|
||||
overflow-y: auto !important;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #d1c7b7;
|
||||
}
|
||||
|
||||
.recipe-textarea textarea::-webkit-scrollbar {
|
||||
width: 8px !important;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.recipe-textarea textarea::-webkit-scrollbar-track {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.recipe-textarea textarea::-webkit-scrollbar-thumb {
|
||||
background-color: #d1c7b7 !important;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #f4e4bc;
|
||||
background-clip: padding-box
|
||||
}
|
||||
|
||||
.recipe-textarea textarea::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #556b2f !important;
|
||||
}
|
||||
|
||||
.save-btn, .cancel-btn {
|
||||
@@ -85,48 +175,3 @@
|
||||
.cancel-btn:hover {
|
||||
background-color: rgba(140, 74, 50, 0.05) !important;
|
||||
}
|
||||
|
||||
.recipe-title-edit .v-field__input {
|
||||
font-family: 'Libre Baskerville', serif !important;
|
||||
font-weight: 700 !important;
|
||||
color: #1e1408 !important;
|
||||
font-size: 2.4rem !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.v-textarea .v-field__input, .v-textarea textarea {
|
||||
font-family: 'Libre Baskerville', serif !important;
|
||||
font-size: 1.1rem !important;
|
||||
line-height: 1.6 !important;
|
||||
color: #2c2925 !important
|
||||
}
|
||||
|
||||
.v-field-label {
|
||||
color: #5d4037 !important;
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
.v-textarea .v-label,
|
||||
.v-textarea .v-field-label {
|
||||
font-family: 'Libre Baskerville', serif !important;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
.v-field__outline {
|
||||
--v-field-border-opacity: 1 !important;
|
||||
color: #d1c7b7 !important;
|
||||
}
|
||||
|
||||
.v-field--focused .v-field__outline {
|
||||
color: #556b2f !important;
|
||||
}
|
||||
|
||||
.recipe-title-edit.v-text-field .v-field__outline__line {
|
||||
border-bottom-width: 2px !important;
|
||||
color: #d1c7b7 !important;
|
||||
}
|
||||
|
||||
.recipe-title-edit.v-field--focused .v-field__outline__line {
|
||||
color: #556b2f !important;
|
||||
}
|
||||
@@ -7,7 +7,7 @@
|
||||
font-family: 'Libre Baskerville', serif;
|
||||
font-weight: 700;
|
||||
font-size: 2.2rem;
|
||||
margin-top: -5px !important; /* Pulls the text up toward the pot */
|
||||
margin-top: -5px !important;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1.0 !important;
|
||||
background: linear-gradient(to bottom, #8c4a32 20%, #4a2a14 100%);
|
||||
@@ -80,27 +80,51 @@
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Force the font on the floating label */
|
||||
.auth-input :deep(.v-label) {
|
||||
font-family: 'Libre Baskerville', serif !important;
|
||||
color: #2e1e0a !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Fix for the white Success Message in your screenshot */
|
||||
.auth-success {
|
||||
background-color: rgba(85, 107, 47, 0.1) !important;
|
||||
border-color: #556b2f !important;
|
||||
color: #556b2f !important; /* Forces the green text */
|
||||
color: #556b2f !important;
|
||||
}
|
||||
|
||||
.auth-success :deep(.v-icon) {
|
||||
color: #556b2f !important;
|
||||
}
|
||||
|
||||
/* Fix for the Error Message */
|
||||
.auth-error {
|
||||
background-color: rgba(140, 74, 50, 0.1) !important;
|
||||
border-color: #8c4a32 !important;
|
||||
color: #8c4a32 !important;
|
||||
.auth-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 24px;
|
||||
font-family: 'Libre Baskerville', serif;
|
||||
font-size: 0.9rem;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.auth-error {
|
||||
background-color: #EDC9C9 !important;
|
||||
color: #8c2f2f !important;
|
||||
border-color: #CB6262 !important;
|
||||
}
|
||||
|
||||
.auth-error .v-icon {
|
||||
color: #8c2f2f !important;
|
||||
}
|
||||
|
||||
.auth-success {
|
||||
background-color: rgba(85, 107, 47, 0.1) !important;
|
||||
color: #556b2f !important;
|
||||
border-color: #556b2f !important;
|
||||
}
|
||||
|
||||
.auth-success .v-icon {
|
||||
color: #556b2f !important;
|
||||
}
|
||||
@@ -22,7 +22,7 @@
|
||||
</v-row>
|
||||
|
||||
<v-row v-else-if="recipes?.length">
|
||||
<v-col v-for="recipe in recipes" :key="recipe.id" cols="12" sm="6" md="4">
|
||||
<v-col v-for="recipe in sortedRecipes" :key="recipe.id" cols="12" sm="6" md="4">
|
||||
<v-card class="gallery-item-card pa-4">
|
||||
<v-sheet
|
||||
height="200"
|
||||
@@ -81,61 +81,99 @@
|
||||
|
||||
</v-card>
|
||||
|
||||
<v-dialog v-model="showDetails" max-width="800" persistent>
|
||||
<v-dialog v-model="showDetails" max-width="950" persistent>
|
||||
<v-card v-if="selectedRecipe" class="recipe-card pa-8">
|
||||
<v-btn
|
||||
v-if="!isEditing"
|
||||
icon="mdi-close"
|
||||
variant="text"
|
||||
position="absolute"
|
||||
style="top: 10px; right: 10px;"
|
||||
style="top: 10px; right: 10px; z-index: 10;"
|
||||
color="#5d4037"
|
||||
@click="closeDetails"
|
||||
></v-btn>
|
||||
|
||||
<header class="text-center mb-6">
|
||||
<v-text-field
|
||||
v-if="isEditing"
|
||||
v-model="selectedRecipe.title"
|
||||
variant="underlined"
|
||||
class="recipe-title-edit"
|
||||
></v-text-field>
|
||||
<h2 v-else class="recipe-title">{{ selectedRecipe.title }}</h2>
|
||||
</header>
|
||||
<v-row align="start" class="mb-6">
|
||||
<v-col cols="12" md="4" class="d-flex flex-column align-center">
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-card
|
||||
v-bind="props"
|
||||
width="160"
|
||||
height="160"
|
||||
:class="[
|
||||
'rounded-lg d-flex align-center justify-center cursor-pointer position-relative overflow-hidden',
|
||||
{ 'image-drop-zone': isEditing }
|
||||
]"
|
||||
@click="isEditing ? $refs.fileInput.click() : null"
|
||||
:elevation="isHovering && isEditing ? 4 : 1"
|
||||
>
|
||||
<v-img
|
||||
v-if="selectedRecipe.imageUrl"
|
||||
:src="selectedRecipe.imageUrl"
|
||||
cover
|
||||
class="rounded-lg fill-height"
|
||||
></v-img>
|
||||
|
||||
<v-divider class="mb-6 separator"></v-divider>
|
||||
|
||||
<v-row justify="center" class="px-md-10">
|
||||
<v-col cols="12" md="5" class="d-flex flex-column align-center">
|
||||
<div style="width: 100%; max-width: 300px;">
|
||||
<h3 class="section-header justify-center mb-4">
|
||||
<v-icon icon="mdi-basket-outline" class="mr-2" size="small"></v-icon>
|
||||
Ingredients
|
||||
</h3>
|
||||
|
||||
<v-textarea
|
||||
v-if="isEditing"
|
||||
v-model="selectedRecipe.ingredients"
|
||||
variant="outlined"
|
||||
auto-grow
|
||||
density="comfortable"
|
||||
bg-color="rgba(255,255,255,0.3)"
|
||||
></v-textarea>
|
||||
|
||||
<v-list v-else class="ingredients-list">
|
||||
<v-list-item
|
||||
v-for="(ing, index) in (Array.isArray(selectedRecipe.ingredients) ? selectedRecipe.ingredients : selectedRecipe.ingredients?.split('\n') || [])"
|
||||
:key="index"
|
||||
class="ingredient-item px-0"
|
||||
<div
|
||||
v-if="isEditing && (isHovering || !selectedRecipe.imageUrl)"
|
||||
class="d-flex flex-column align-center justify-center position-absolute"
|
||||
style="background: rgba(226,215,186,0.4); inset: 0;"
|
||||
>
|
||||
{{ ing }}
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</div>
|
||||
<v-icon icon="mdi-camera-plus" color="#556b2f" size="large"></v-icon>
|
||||
<span class="brand-subtitle" style="font-size: 0.7rem; color: #556b2f;">Update Photo</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
<input type="file" ref="fileInput" accept="image/*" style="display: none" @change="handleImageUpload" />
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="8">
|
||||
<v-text-field
|
||||
v-if="isEditing"
|
||||
v-model="selectedRecipe.title"
|
||||
label="Recipe Title"
|
||||
variant="underlined"
|
||||
class="recipe-title-edit"
|
||||
hide-details
|
||||
></v-text-field>
|
||||
<h2 v-else class="recipe-title" style="font-size: 2.5rem;">{{ selectedRecipe.title }}</h2>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-divider class="mb-8 separator"></v-divider>
|
||||
|
||||
<v-row class="px-md-4">
|
||||
<v-col cols="12" md="5">
|
||||
<h3 class="section-header mb-4">
|
||||
<v-icon icon="mdi-basket-outline" class="mr-2" size="small"></v-icon>
|
||||
Ingredients
|
||||
</h3>
|
||||
|
||||
<v-textarea
|
||||
v-if="isEditing"
|
||||
v-model="selectedRecipe.ingredients"
|
||||
variant="outlined"
|
||||
auto-grow
|
||||
rows="10"
|
||||
density="comfortable"
|
||||
class="auth-input recipe-textarea"
|
||||
bg-color="transparent"
|
||||
:persistent-placeholder="true"
|
||||
></v-textarea>
|
||||
|
||||
<v-list v-else class="ingredients-list bg-transparent">
|
||||
<v-list-item
|
||||
v-for="(ing, index) in (Array.isArray(selectedRecipe.ingredients) ? selectedRecipe.ingredients : selectedRecipe.ingredients?.split('\n') || [])"
|
||||
:key="index"
|
||||
class="ingredient-item px-0"
|
||||
>
|
||||
• {{ ing }}
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="7">
|
||||
<h3 class="section-header justify-center mb-4">
|
||||
<h3 class="section-header mb-4">
|
||||
<v-icon icon="mdi-chef-hat" class="mr-2" size="small"></v-icon>
|
||||
Instructions
|
||||
</h3>
|
||||
@@ -145,8 +183,11 @@
|
||||
v-model="selectedRecipe.instructions"
|
||||
variant="outlined"
|
||||
auto-grow
|
||||
rows="10"
|
||||
density="comfortable"
|
||||
bg-color="rgba(255,255,255,0.3)"
|
||||
class="auth-input recipe-textarea"
|
||||
bg-color="transparent"
|
||||
:persistent-placeholder="true"
|
||||
></v-textarea>
|
||||
|
||||
<div v-else
|
||||
@@ -160,78 +201,18 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-card-actions v-if="isEditing" class="justify-center mt-6">
|
||||
<v-btn
|
||||
variant="text"
|
||||
@click="saveChanges"
|
||||
class="save-btn px-8"
|
||||
>
|
||||
Save Changes
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
variant="text"
|
||||
@click="isEditing = false"
|
||||
class="cancel-btn px-8"
|
||||
>
|
||||
Cancel
|
||||
</v-btn>
|
||||
<v-card-actions v-if="isEditing" class="justify-center mt-8">
|
||||
<v-btn variant="text" @click="saveChanges" class="save-btn px-8">Save Changes</v-btn>
|
||||
<v-btn variant="text" @click="isEditing = false" class="cancel-btn px-8">Cancel</v-btn>
|
||||
</v-card-actions>
|
||||
|
||||
<v-divider class="my-6 separator"></v-divider>
|
||||
|
||||
<footer class="text-center">
|
||||
<p class="brand-subtitle" style="font-size: 0.8rem;">
|
||||
Recorded on {{ new Date(selectedRecipe.createdAt).toLocaleDateString() }}
|
||||
</p>
|
||||
</footer>
|
||||
</v-card>
|
||||
<v-row justify="center" class="mb-4">
|
||||
<v-col cols="12" class="d-flex flex-column align-center">
|
||||
<v-hover v-slot="{ isHovering, props }">
|
||||
<v-card
|
||||
v-bind="props"
|
||||
width="200"
|
||||
height="200"
|
||||
class="rounded-lg d-flex align-center justify-center cursor-pointer position-relative"
|
||||
@click="$refs.fileInput.click()"
|
||||
:elevation="isHovering ? 4 : 1"
|
||||
style="border: 2px dashed #d1c7b7; background: #fcfaf5;"
|
||||
>
|
||||
<v-img
|
||||
v-if="selectedRecipe.imageUrl"
|
||||
:src="selectedRecipe.imageUrl"
|
||||
cover
|
||||
class="rounded-lg"
|
||||
></v-img>
|
||||
|
||||
<div
|
||||
v-if="isEditing && (!selectedRecipe.imageUrl || isHovering)"
|
||||
class="d-flex flex-column align-center justify-center position-absolute"
|
||||
style="background: rgba(255,255,255,0.7); inset: 0;"
|
||||
>
|
||||
<v-icon icon="mdi-camera-plus" color="#556b2f" size="large"></v-icon>
|
||||
<span class="brand-subtitle" style="font-size: 0.7rem;">Update Photo</span>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-hover>
|
||||
|
||||
<input
|
||||
type="file"
|
||||
ref="fileInput"
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
@change="handleImageUpload"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-dialog>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import '@/assets/css/gallery.css'
|
||||
|
||||
const recipes = ref([])
|
||||
@@ -312,6 +293,7 @@ const saveChanges = async () => {
|
||||
try {
|
||||
const payload = {
|
||||
...selectedRecipe.value,
|
||||
createdAt: selectedRecipe.value.createdAt || new Date().toISOString(),
|
||||
ingredients: typeof selectedRecipe.value.ingredients === 'string'
|
||||
? selectedRecipe.value.ingredients.split('\n').filter(i => i.trim())
|
||||
: selectedRecipe.value.ingredients,
|
||||
@@ -334,49 +316,12 @@ const saveChanges = async () => {
|
||||
closeDetails();
|
||||
} catch (e) {
|
||||
console.error("The kitchen ledger could not be updated:", e);
|
||||
alert("Could not save changes. Please try again.");
|
||||
}
|
||||
}
|
||||
|
||||
// Mock setup for recipe cards
|
||||
//const mockData = [
|
||||
// {
|
||||
// id: 1,
|
||||
// title: "Grandma's Secret Bolognese",
|
||||
// createdAt: new Date().toISOString(),
|
||||
// ingredients: "2 lbs Ground Beef\n1 Onion, diced\n3 cloves Garlic\n2 cans Crushed Tomatoes\n1 cup Red Wine",
|
||||
// instructions: "Brown the meat with onions.\nAdd garlic and wine; reduce.\nSimmer with tomatoes for 3 hours."
|
||||
// },
|
||||
// {
|
||||
//id: 2,
|
||||
//title: "Rustic Sourdough",
|
||||
//createdAt: new Date().toISOString(),
|
||||
//ingredients: "500g Flour\n350g Water\n100g Starter\n10g Salt",
|
||||
//instructions: "Mix and autolyse for 1 hour.\nPerform 4 sets of stretch and folds.\nCold ferment for 12 hours.\nBake at 450°F in a dutch oven."
|
||||
//}
|
||||
//]
|
||||
//recipes.value = mockData
|
||||
//loading.value = false
|
||||
//}
|
||||
|
||||
//const saveChanges = async () => {
|
||||
|
||||
//const index = recipes.value.findIndex(r => r.id === selectedRecipe.value.id)
|
||||
//if (index !== -1) {
|
||||
//recipes.value[index] = { ...selectedRecipe.value }
|
||||
//}
|
||||
|
||||
//isEditing.value = false
|
||||
//showDetails.value = false
|
||||
//}
|
||||
|
||||
const getRecipeIcon = (recipe) => {
|
||||
if (recipe.icon) return recipe.icon
|
||||
const t = (recipe.title || '').toLowerCase()
|
||||
if (t.includes('cake') || t.includes('cookie') || t.includes('dessert')) return 'mdi-cookie'
|
||||
if (t.includes('soup') || t.includes('stew')) return 'mdi-bowl-mix'
|
||||
if (t.includes('drink') || t.includes('cocktail')) return 'mdi-glass-cocktail'
|
||||
|
||||
return 'mdi-silverware-fork-knife'
|
||||
}
|
||||
const sortedRecipes = computed(() => {
|
||||
return [...recipes.value].sort((a, b) => {
|
||||
return new Date(b.createdAt) - new Date(a.createdAt)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@@ -18,18 +18,19 @@
|
||||
|
||||
<v-form @submit.prevent="handleAuth">
|
||||
<v-expand-transition>
|
||||
<div v-if="errorMessage"
|
||||
:class="[
|
||||
'auth-message',
|
||||
errorMessage.includes('created') ? 'auth-success' : 'auth-error'
|
||||
]"
|
||||
>
|
||||
<v-icon
|
||||
:icon="errorMessage.includes('created') ? 'mdi-check-circle-outline' : 'mdi-alert-circle-outline'"
|
||||
size="small"
|
||||
class="mr-2"
|
||||
></v-icon>
|
||||
{{ errorMessage }}
|
||||
<div v-if="errorMessage" class="mb-6"> <div
|
||||
:class="[
|
||||
'auth-message',
|
||||
errorMessage.includes('created') ? 'auth-success' : 'auth-error'
|
||||
]"
|
||||
>
|
||||
<v-icon
|
||||
:icon="errorMessage.includes('created') ? 'mdi-check-circle-outline' : 'mdi-alert-circle-outline'"
|
||||
size="small"
|
||||
class="mr-2"
|
||||
></v-icon>
|
||||
<span>{{ errorMessage }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
|
||||
@@ -37,7 +38,7 @@
|
||||
autofocus
|
||||
v-model="email"
|
||||
label="Email Address"
|
||||
class="mb-4 auth-input"
|
||||
class="mb-0 auth-input"
|
||||
color="#8c4a32"
|
||||
variant="outlined"
|
||||
prepend-inner-icon="mdi-email-outline"
|
||||
@@ -52,7 +53,7 @@
|
||||
v-model="password"
|
||||
label="Password"
|
||||
type="password"
|
||||
class="mb-8 auth-input"
|
||||
class="mb-6 auth-input"
|
||||
variant="outlined"
|
||||
color="#8c4a32"
|
||||
hide-details
|
||||
@@ -70,7 +71,7 @@
|
||||
v-model="confirmPassword"
|
||||
label="Confirm Password"
|
||||
type="password"
|
||||
class="mb-8 auth-input"
|
||||
class="mb-6 auth-input"
|
||||
variant="outlined"
|
||||
color="#8c4a32"
|
||||
hide-details
|
||||
|
||||
Reference in New Issue
Block a user