Skip to main content

Yêu Cầu Chỉnh Sửa: Khoảng Trống Đầu Trang Và Đồng Bộ Style Menu

Ngày cập nhật: 30/06/2026
Loại: UI/UX Alignment & Spacing Optimization

Ảnh feedback:

1. Giảm Khoảng Trống Phía Trên Đầu Trang (Top Spacing)​

Hiện trạng​

Phần khoảng trống phía trên card thông tin cá nhân (Profile Card màu nâu) trên màn hình Tài khoản đang quá lớn, khiến giao diện bị đẩy xuống dưới quá nhiều và tạo khoảng trắng thừa không cần thiết ở phía trên đỉnh.

Yêu cầu chỉnh sửa​

  • Dời card thông tin lên cao hơn: Giảm bớt padding/margin phía trên của màn hình hoặc giảm marginTop của Profile Card.
  • Tối ưu hóa chiều cao vùng Safe Area (SafeAreaView / useSafeAreaInsets) vừa đủ để tránh tai thỏ (notch) nhưng không tạo thêm khoảng trống thừa quá lớn.

2. Đồng Bộ Hóa Chiều Cao Header Và Style Menu Tiện Ích​

Hiện trạng​

Các thanh menu chọn tiện ích như "Sửa hồ sơ", "Thông báo", "Voucher của bạn" hiện tại có thể đang khác biệt về chiều cao hoặc style so với các màn hình khác trong ứng dụng, làm giảm tính nhất quán (consistency) của UI.

Yêu cầu chỉnh sửa​

2.1 Thống nhất chiều cao (Height) & Padding​

  • Thiết lập chiều cao cố định hoặc padding đồng nhất cho tất cả các hàng menu điều hướng (list items) trên toàn App.
  • Khuyến nghị: Chiều cao hàng là 56px hoặc 64px (hoặc paddingVertical: 16).

2.2 Thống nhất font chữ và cỡ chữ (Typography)​

  • Tên menu: sử dụng chung cỡ chữ (ví dụ: 15px hoặc 16px), cùng độ đậm (fontWeight: '500' hoặc 'normal') và cùng mã màu văn bản.

2.3 Đồng bộ icon điều hướng bên phải (Chevron Icon)​

  • Icon mũi tên bên phải > (chevron-right) cần sử dụng cùng một bộ icon thư viện (ví dụ: Feather/chevron-right hoặc MaterialIcons/keyboard-arrow-right).
  • Cùng kích thước (size: 20 hoặc 24), cùng mã màu (màu xám nhẹ) và cùng khoảng cách căn lề phải (marginRight).

2.4 Đồng bộ khoảng cách giữa các phần (Spacing)​

  • Các box tiện ích lớn (như card tiện ích chứa "Thông báo" & "Voucher của bạn") và các nút đơn lẻ (như "Sửa hồ sơ") cần có khoảng cách lề (gap hoặc marginBottom) đồng bộ với toàn bộ hệ thống layout của App.

Checklist Kỹ Thuật​

  • Cập nhật file style của màn hình Tài khoản (Profile Screen) để giảm khoảng cách top.
  • Tạo hoặc áp dụng component dùng chung cho các hàng menu điều hướng (ví dụ: <MenuItem title="Sửa hồ sơ" icon="edit" onPress={...} />) để đảm bảo style luôn giống nhau ở mọi màn hình.
  • Kiểm tra tính nhất quán giữa các màn hình: Trang chủ, Tài khoản, Cài đặt, Chi nhánh để đảm bảo chiều cao các header phụ và menu bar luôn bằng nhau.