Skip to main content

Yêu Cầu Chỉnh Sửa: Định Dạng Lại Box Text & Căn Giữa Tiêu Đề BigFan

Ngày cập nhật: 03/07/2026
Loại: UI/UX Layout Improvement — Typography & Component Structuring

Ảnh feedback:

1. Định Dạng Lại Phần Text Giới Thiệu (Intro Text Component)​

Hiện trạng​

Dòng văn bản giới thiệu: "Cập nhật ưu đãi cộng đồng, voucher và quà tặng sinh nhật dành cho thành viên Golden Lotus." đang nằm trực tiếp trên nền trắng của màn hình, không có khung bao bọc, trông thiếu chỉn chu và rời rạc so với các card slide ở trên.

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

  • Đóng khung riêng biệt: Đặt toàn bộ đoạn text giới thiệu này vào trong một component Box trắng bo góc độc lập (tương tự như cách trình bày của box "Thông tin voucher" ở Ảnh 2):
    • Màu nền: Trắng (#FFFFFF).
    • Bo góc: borderRadius: 8 hoặc 12.
    • Padding: padding: 16 để tạo khoảng đệm thoáng đãng cho text.
    • Đổ bóng nhẹ: box-shadow nhẹ để nổi bật trên nền xám nhạt của App.
    • Margin: Có khoảng cách trên/dưới hợp lý (marginVertical: 12).

2. Logic Hiển Thị Header Động (Conditional Header)​

Box text giới thiệu cần hỗ trợ hiển thị tiêu đề (Header) linh hoạt theo cấu hình từ CMS:

  • Cho phép nhập trường Header (Ví dụ: "Giới thiệu cộng đồng").
  • Logic ẩn/hiện: Nếu trường Header này có giá trị (không rỗng) ➔ Hiển thị text Header in đậm phía trên đoạn mô tả.
  • Nếu để trống Header: Hệ thống sẽ ẩn hoàn toàn phần tiêu đề này đi, chỉ hiển thị phần nội dung giới thiệu phía dưới (không để lại khoảng trắng thừa của tiêu đề).

Minh họa logic code (React Native):

<View style={styles.introBox}>
  {/* Render tiêu đề nếu có dữ liệu từ CMS */}
  {cmsData.introHeader ? (
    <Text style={styles.boxHeader}>{cmsData.introHeader}</Text>
  ) : null}
  
  <Text style={styles.boxContent}>
    {cmsData.introText}
  </Text>
</View>

3. Căn Giữa Toàn Bộ Các Tiêu Đề Phân Mục (Center-Aligned Headers)​

Hiện trạng​

Các tiêu đề phần (ví dụ: "Người nhận quà mới nhất" ở đầu trang BigFan) đang bị căn lề trái mặc định, không cân đối với cấu trúc các box và button căn giữa bên dưới.

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

  • Căn giữa (Center-align) tất cả các tiêu đề chính của phân mục trên trang:
    • Thiết lập thuộc tính textAlign: 'center' cho thẻ text tiêu đề.
    • Đảm bảo căn giữa đồng nhất cho cả tiêu đề "Người nhận quà mới nhất", tiêu đề của box giới thiệu (nếu có), và các tiêu đề phân mục khác.

Checklist Kỹ Thuật​

  • Sửa lại UI trang BigFanScreen, bọc đoạn text intro bằng component Card/Box trắng.
  • Cập nhật API/CMS fetching để nhận thêm field introHeader và introText cho trang BigFan.
  • Viết logic conditional rendering cho phần Header của box giới thiệu (chỉ render khi introHeader !== rỗng).
  • Thêm style textAlign: 'center' cho tất cả các Header trong màn hình BigFan.
  • Test thử giao diện trên thiết bị thực tế ở cả 2 trường hợp: có nhập Header và không nhập Header từ CMS.