tbianchini/shopit-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(profile-form): refactor form-group styles and update error handling in checkout form

Browse Source
This commit is contained in:
ncoronel
2026-07-08 09:05:15 -03:00
parent b9b8a70ca1
commit 64ade4d595
4 changed files with 39 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/features/store/pages/account-page/components/profile-form/profile-form.scss
View File

@@ -4,14 +4,6 @@
gap: 16px; gap: 16px;
max-width: 500px; max-width: 500px;
} }
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
font-size: 13px;
color: #666666;
}
.form-actions { .form-actions {
display: flex; display: flex;
gap: 12px; gap: 12px;

32
src/app/features/store/pages/checkout-page/checkout-data-step.component.html
View File

@@ -5,9 +5,9 @@
(ngSubmit)="submit()" (ngSubmit)="submit()"
> >
<div class="checkout-form__fields"> <div class="checkout-form__fields">
<div class="form-field"> <div class="form-group">
<label class="form-field__label" for="checkout-nombre"> <label for="checkout-nombre">
Nombre y Apellido <span class="form-field__required" aria-hidden="true">*</span> Nombre y Apellido <span class="required" aria-hidden="true">*</span>
</label> </label>
<app-input <app-input
id="checkout-nombre" id="checkout-nombre"
@@ -19,13 +19,13 @@
(valueChange)="updateField('nombre', $event)" (valueChange)="updateField('nombre', $event)"
/> />
@if (getControlError('nombre'); as errorMessage) { @if (getControlError('nombre'); as errorMessage) {
<small class="form-field__error">{{ errorMessage }}</small> <small class="error">{{ errorMessage }}</small>
} }
</div> </div>
<div class="form-field"> <div class="form-group">
<label class="form-field__label" for="checkout-email"> <label for="checkout-email">
Email <span class="form-field__required" aria-hidden="true">*</span> Email <span class="required" aria-hidden="true">*</span>
</label> </label>
<app-input <app-input
id="checkout-email" id="checkout-email"
@@ -37,13 +37,13 @@
(valueChange)="updateField('email', $event)" (valueChange)="updateField('email', $event)"
/> />
@if (getControlError('email'); as errorMessage) { @if (getControlError('email'); as errorMessage) {
<small class="form-field__error">{{ errorMessage }}</small> <small class="error">{{ errorMessage }}</small>
} }
</div> </div>
<div class="form-field"> <div class="form-group">
<label class="form-field__label" for="checkout-dni"> <label for="checkout-dni">
DNI <span class="form-field__required" aria-hidden="true">*</span> DNI <span class="required" aria-hidden="true">*</span>
</label> </label>
<app-input <app-input
id="checkout-dni" id="checkout-dni"
@@ -55,13 +55,13 @@
(valueChange)="updateField('dni', $event)" (valueChange)="updateField('dni', $event)"
/> />
@if (getControlError('dni'); as errorMessage) { @if (getControlError('dni'); as errorMessage) {
<small class="form-field__error">{{ errorMessage }}</small> <small class="error">{{ errorMessage }}</small>
} }
</div> </div>
<div class="form-field"> <div class="form-group">
<label class="form-field__label" for="checkout-telefono"> <label for="checkout-telefono">
Telefono <span class="form-field__required" aria-hidden="true">*</span> Telefono <span class="required" aria-hidden="true">*</span>
</label> </label>
<app-input <app-input
id="checkout-telefono" id="checkout-telefono"
@@ -73,7 +73,7 @@
(valueChange)="updateField('telefono', $event)" (valueChange)="updateField('telefono', $event)"
/> />
@if (getControlError('telefono'); as errorMessage) { @if (getControlError('telefono'); as errorMessage) {
<small class="form-field__error">{{ errorMessage }}</small> <small class="error">{{ errorMessage }}</small>
} }
</div> </div>
</div> </div>

23
src/app/features/store/pages/checkout-page/checkout-data-step.component.scss
View File

@@ -23,26 +23,3 @@
max-width: 290px; max-width: 290px;
} }
} }
.form-field {
display: grid;
gap: 0.35rem;
&__label {
font-size: 0.8rem;
font-weight: 600;
color: var(--bs-secondary, #6c757d);
letter-spacing: 0;
}
&__required {
color: var(--bs-danger, #dc3545);
margin-left: 2px;
}
&__error {
font-size: 0.75rem;
color: var(--bs-danger, #dc3545);
}
}

23
src/styles.scss
View File

@@ -34,3 +34,26 @@ label {
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
} }
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
label {
font-size: 14px;
color: #888;
font-weight: normal;
margin-bottom: 0;
}
.required {
color: var(--color-danger, #dc3545);
margin-left: 2px;
}
.error {
font-size: 0.75rem;
color: var(--color-danger, #dc3545);
}
}