Skip to main content

Yêu Cầu Chỉnh Sửa: Tăng Cỡ Chữ Tên Hạng Thành Viên & Đồng Bộ Giao Diện

Ngày cập nhật: 03/07/2026
Loại: UI/UX Typographic Enhancement — Font Size Optimization

Ảnh feedback:

1. Nội Dung Yêu Cầu​

1.1 Tăng cỡ chữ (Font Size) của tên hạng thành viên​

  • Tên các hạng thành viên (Silver, Gold, Platinum, Diamond) trên thanh Tab chọn đầu màn hình Membership cần được tăng kích thước chữ thêm 1 đến 2px so với hiện tại.
  • Đảm bảo cỡ chữ mới giúp tên hạng rõ ràng, dễ đọc hơn, đặc biệt khi tab được active (đang chọn).

1.2 Đồng bộ hóa style hiển thị trên tất cả các màn hình​

Tên hạng thành viên xuất hiện ở rất nhiều nơi trong App. Cần đảm bảo style (font family, font weight, và tỉ lệ chênh lệch kích thước) phải nhất quán:

#Vị trí hiển thịCần đồng bộ
1Tab Hạng (Membership Screen)Tăng 1 - 2px (từ 14px lên 15px hoặc 16px), fontWeight: 'bold' khi active.
2Card Thành viên (Profile Screen)Chữ "Silver", "Gold"... hiển thị dưới tên user cần to rõ tương tự.
3Card Thành viên (Home Screen Header)Nhãn hạng hiển thị trên góc cần đồng bộ kích thước và font.
4Thông báo trúng thưởng (Lucky Wheel popup)Chữ "Member [Tên]..." cần có size chữ đồng bộ.

2. Gợi Ý Định Dạng Code (React Native CSS)​

// Style cho nhãn tên hạng thành viên trên Tab bar
const styles = StyleSheet.create({
  tabText: {
    fontFamily: 'SFProText-Regular', // Hoặc font chung của hệ thống
    fontSize: 15, // Tăng lên 1-2px (ví dụ từ 13, 14 lên 15, 16)
    color: '#999999',
    textAlign: 'center',
  },
  tabTextActive: {
    fontFamily: 'SFProText-Bold',
    fontSize: 16, // Font size lớn hơn khi được chọn
    fontWeight: 'bold', // Hoặc '600' / '700'
    color: '#E5A93C', // Màu thương hiệu
  }
});

Checklist Kỹ Thuật​

  • Tìm các file định nghĩa style của Tab Bar trong màn hình Membership (MembershipScreen).
  • Thay đổi giá trị fontSize tăng thêm 1 hoặc 2 đơn vị cho cả trạng thái normal và active.
  • Kiểm tra các màn hình khác có hiển thị chữ "Silver", "Gold", "Platinum", "Diamond" để đồng bộ font weight và font size.
  • Chạy kiểm thử trên thiết bị thực tế để đảm bảo việc tăng font size không làm chữ bị tràn/xuống dòng ở các tên hạng dài như "Platinum".