Yêu Cầu Chỉnh Sửa: Màu Nền Màn Hình Vòng Quay May Mắn — Tối Ngoài, Sáng Trong

Ngày cập nhật: 08/07/2026
Loại: UI/UX Color & Contrast Fix — Lucky Spin Screen
Màn hình: Vòng Quay May Mắn (LuckySpinScreen / WheelScreen)

Ảnh feedback:

• Ảnh thực tế: Toàn màn hình đang quá tối — kể cả phần nội dung bên dưới

---

1. Vấn Đề Hiện Tại

Màn hình Vòng Quay May Mắn hiện đang áp dụng một màu nền tối duy nhất (#1A1008 / nâu đen) cho toàn bộ màn hình — bao gồm cả khu vực phía dưới wheel (nội dung chi tiết). Điều này khiến:

• Các ô thống kê ("Lượt còn lại: 0", "Đã quay: 11", "Giải thưởng: 6") bị chìm vào nền tối — khó đọc, tương phản kém.
• Nút hành động ("Bạn đã hết lượt quay") mờ nhạt, không nổi bật.
• Danh sách "Giải thưởng" phía dưới khó nhìn.
• Nền tối đồng nhất này phù hợp với backdrop của vòng quay nhưng không phù hợp với khu vực nội dung/thông tin phía dưới.

---

2. Phân Tích Layout — Tối Ngoài vs Sáng Trong

Màn hình Vòng Quay gồm 2 vùng riêng biệt với yêu cầu màu nền khác nhau:

┌─────────────────────────────────┐
│  [Header: GOLDEN LOTUS REWARDS] │
│                                 │  ← Nền TỐI (#1A1008 hoặc nâu đậm)
│      🎡 VÒNG QUAY (Wheel)       │     Backdrop tối tạo hiệu ứng nổi bật cho wheel
│                                 │     GIỮ NGUYÊN — đúng thiết kế
│    ▼ (mũi tên chỉ vào wheel)   │
│─────────────────────────────────│  ← Đường phân cách / transition
│   Vòng Quay May Mắn             │
│   Chào ngày mới! thử vận may... │  ← Nền SÁNG (#FFFFFF hoặc #FBF8F3)
│  ┌──────┐ ┌──────┐ ┌──────┐    │     Khu vực NỘI DUNG CHI TIẾT
│  │  0   │ │  11  │ │  6   │    │     CẦN LÀM SÁNG HƠN
│  │Lượt  │ │Đã    │ │Giải  │    │
│  │còn lại│ │quay  │ │thưởng│    │
│  └──────┘ └──────┘ └──────┘    │
│  [▶ Bạn đã hết lượt quay]      │
│                                 │
│  Giải thưởng            6 ô    │
│  • test - Voucher               │
└─────────────────────────────────┘

---

3. Yêu Cầu Chỉnh Sửa

3.1 Giữ nguyên — Phần backdrop tối (nền wheel + header)

• ✅ Giữ nguyên màu nền tối (#1A1008 hoặc rgba(26, 16, 8, 1)) cho:
  • Khu vực header "GOLDEN LOTUS REWARDS"
  • Vùng bao quanh wheel (backdrop tối tạo hiệu ứng spotlight cho vòng quay)
  • Mũi tên tam giác chỉ vào wheel

3.2 Thay đổi — Phần nội dung chi tiết bên dưới

Khu vực từ tiêu đề "Vòng Quay May Mắn" trở xuống cần chuyển sang nền sáng:

Thành phần	Màu nền hiện tại	Yêu cầu mới
Container wrapper phần dưới	Nâu tối (#1A1008)	#FFFFFF hoặc #FBF8F3 (kem nhạt)
Tiêu đề "Vòng Quay May Mắn"	Chữ trắng trên nền tối	Chữ #1A1A1A (đen đậm) trên nền sáng
Dòng mô tả	Chữ xám nhạt trên tối	Chữ #666666 trên nền sáng
Ô thống kê (stat boxes)	Nền xám tối	Nền #FFFFFF + viền #E8E8E8 + chữ đen
Số liệu thống kê (0, 11, 6)	Chữ trắng	Chữ #1A1A1A (đậm)
Nhãn stat (Lượt còn lại...)	Chữ xám nhạt	Chữ #888888
Nút "Bạn đã hết lượt quay"	Nền xám tối, chữ cam	Nền #F5F5F5 + chữ #E5A93C (cam vàng)
Tiêu đề "Giải thưởng"	Chữ trắng	Chữ #1A1A1A
Danh sách giải thưởng	Nền tối	Nền #FFFFFF + viền #E8E8E8

3.3 Xử lý transition (đường phân cách giữa tối và sáng)

Để tạo sự chuyển tiếp mượt mà giữa vùng tối (wheel) và vùng sáng (nội dung), có thể dùng một trong 2 cách:

Cách 1 — Bo góc trên của container sáng (Khuyến nghị ✅):

<View style={styles.contentContainer}>
  {/* Bo góc trên tạo hiệu ứng "sheet" kéo lên từ dưới */}
</View>

contentContainer: {
  backgroundColor: '#FFFFFF',
  borderTopLeftRadius: 24,
  borderTopRightRadius: 24,
  paddingTop: 24,
  // ... phần còn lại
}

Cách 2 — Gradient chuyển tiếp:

import LinearGradient from 'react-native-linear-gradient';

<LinearGradient
  colors={['#1A1008', '#FFFFFF']}
  style={styles.transitionGradient}
/>

---

4. Gợi Ý Cấu Trúc Layout (React Native)

const LuckySpinScreen = () => (
  <View style={styles.screenWrapper}>

    {/* === PHẦN TỐI — Backdrop + Wheel === */}
    <View style={styles.darkSection}>
      <Header title="GOLDEN LOTUS REWARDS" />
      <WheelComponent />
      <TrianglePointer />
    </View>

    {/* === PHẦN SÁNG — Nội dung chi tiết === */}
    <View style={styles.lightSection}>

      {/* Tiêu đề + mô tả */}
      <Text style={styles.spinTitle}>Vòng Quay May Mắn</Text>
      <Text style={styles.spinSubtitle}>Chào ngày mới! thử vận may hôm nay!</Text>

      {/* Stat boxes */}
      <View style={styles.statsRow}>
        <StatBox value={0}  label="Lượt còn lại" />
        <StatBox value={11} label="Đã quay" />
        <StatBox value={6}  label="Giải thưởng" />
      </View>

      {/* Nút hành động */}
      <SpinButton disabled={remainingSpins === 0} />

      {/* Danh sách giải thưởng */}
      <PrizeList prizes={prizes} />
    </View>

  </View>
);

const styles = StyleSheet.create({
  screenWrapper: {
    flex: 1,
    backgroundColor: '#1A1008', // Nền tối mặc định cho phần wheel
  },

  darkSection: {
    // Phần wheel — giữ nguyên nền tối
    backgroundColor: '#1A1008',
    alignItems: 'center',
    paddingBottom: 16,
  },

  lightSection: {
    // Phần nội dung — NỀN SÁNG
    flex: 1,
    backgroundColor: '#FFFFFF',      // ← Thay đổi chính
    borderTopLeftRadius: 24,          // Bo góc trên tạo hiệu ứng sheet
    borderTopRightRadius: 24,
    paddingHorizontal: 16,
    paddingTop: 24,
    paddingBottom: 32,
  },

  spinTitle: {
    fontSize: 24,
    fontWeight: '700',
    color: '#1A1A1A',                 // ← Chữ đen trên nền trắng
    textAlign: 'center',
  },

  spinSubtitle: {
    fontSize: 14,
    color: '#666666',                 // ← Xám trung
    textAlign: 'center',
    marginTop: 6,
    marginBottom: 20,
  },

  statsRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    gap: 10,
    marginBottom: 16,
  },
});

// Stat Box — nền trắng, viền nhẹ
const StatBox = ({ value, label }) => (
  <View style={statStyles.box}>
    <Text style={statStyles.value}>{value}</Text>
    <Text style={statStyles.label}>{label}</Text>
  </View>
);

const statStyles = StyleSheet.create({
  box: {
    flex: 1,
    backgroundColor: '#FAFAFA',      // ← Nền sáng
    borderWidth: 1,
    borderColor: '#E8E8E8',
    borderRadius: 12,
    padding: 12,
    alignItems: 'center',
  },
  value: {
    fontSize: 22,
    fontWeight: '700',
    color: '#1A1A1A',                 // ← Số đen đậm
  },
  label: {
    fontSize: 12,
    color: '#888888',
    marginTop: 4,
    textAlign: 'center',
  },
});

---

Checklist Kỹ Thuật

• Tách layout màn hình thành 2 View: darkSection (wheel) và lightSection (nội dung).
• Đặt backgroundColor: '#FFFFFF' cho lightSection.
• Thêm borderTopLeftRadius: 24 và borderTopRightRadius: 24 cho lightSection (hiệu ứng bottom sheet kéo lên).
• Đổi màu chữ tiêu đề và mô tả từ trắng sang #1A1A1A / #666666.
• Cập nhật màu nền và chữ của stat boxes (Lượt còn lại, Đã quay, Giải thưởng) sang nền sáng.
• Cập nhật màu nền nút "Bạn đã hết lượt quay" sang #F5F5F5.
• Cập nhật màu nền và chữ danh sách "Giải thưởng" sang nền sáng.
• Kiểm tra contrast ratio đạt tối thiểu 4.5:1 (WCAG AA) cho tất cả text trên nền mới.
• Test trên cả iOS và Android để đảm bảo borderTopRadius hiển thị đúng.