diff --git a/src/app/admin/admin-users-tab.component.scss b/src/app/admin/admin-users-tab.component.scss index 53dbe41..6f6d6cc 100644 --- a/src/app/admin/admin-users-tab.component.scss +++ b/src/app/admin/admin-users-tab.component.scss @@ -1,23 +1,141 @@ @use '../../styles/variables' as *; @use '../../styles/mixins' as *; -.add-admin-section { - margin-top: 2rem; - padding: 1.5rem; - border: 1px solid var(--color-light, #e0e0e0); - border-radius: 8px; +// ── Alert banners ────────────────────────────────────────────── - h3 { - margin: 0 0 1rem 0; - } +.form-error { + background: rgba($danger-red, 0.1); + color: $danger-red; + padding: $spacing-sm $spacing-md; + border-radius: $radius-md; + font-size: 0.875rem; + margin-bottom: $spacing-md; + text-align: center; } +.form-success { + background: rgba($success-green, 0.1); + color: $success-green; + padding: $spacing-sm $spacing-md; + border-radius: $radius-md; + font-size: 0.875rem; + margin-bottom: $spacing-md; + text-align: center; +} + +// ── Admin users list ─────────────────────────────────────────── + .admin-users-section { - margin-bottom: 1rem; + margin-bottom: $spacing-lg; } .loading-text { text-align: center; - padding: 2rem; - color: var(--color-medium, #888); + padding: $spacing-xl; + color: $neutral-medium; +} + +// ── Add admin form ───────────────────────────────────────────── + +.add-admin-section { + margin-top: $spacing-lg; + padding: $spacing-lg; + border: 1px solid $neutral-light; + border-radius: $radius-lg; + background: $neutral-white; + + h3 { + font-family: $font-heading; + color: $primary-blue; + font-size: 1.1rem; + margin: 0 0 $spacing-md 0; + padding-bottom: $spacing-xs; + border-bottom: 1px solid $neutral-light; + } +} + +.admin-form { + // ── Layout ────────────────────────────────────────── + + .form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: $spacing-md; + } + + // ── Field group ───────────────────────────────────── + + .form-group { + margin-bottom: $spacing-md; + + label { + display: block; + font-size: 0.875rem; + font-weight: 600; + color: $neutral-dark; + margin-bottom: $spacing-xs; + } + + input { + width: 100%; + padding: $spacing-sm $spacing-md; + border: 1px solid $neutral-light; + border-radius: $radius-md; + font-size: 0.95rem; + font-family: $font-primary; + color: $neutral-dark; + background: $neutral-white; + transition: border-color $transition-fast, box-shadow $transition-fast; + box-sizing: border-box; + + &::placeholder { + color: $neutral-medium; + opacity: 1; + } + + &:focus { + outline: none; + border-color: $primary-blue; + box-shadow: 0 0 0 3px rgba($primary-blue, 0.15); + } + + &.is-invalid { + border-color: $danger-red; + box-shadow: 0 0 0 3px rgba($danger-red, 0.15); + } + } + } + + // ── Actions bar ───────────────────────────────────── + + .form-actions { + display: flex; + justify-content: flex-end; + gap: $spacing-sm; + margin-top: $spacing-md; + } + + .btn-save { + @include button-style($primary-blue, $neutral-white, $primary-blue-light); + + &:disabled { + opacity: 0.6; + cursor: not-allowed; + } + } +} + +// ── Responsive ───────────────────────────────────────────────── + +@include responsive(md) { + .admin-form { + .form-row { + grid-template-columns: 1fr; + gap: 0; + } + } + + .add-admin-section { + padding: $spacing-md; + } }