Skip to main content

UI Style Change: Replace BigFan Point Star Icons with GPoint Gold Icon

Last Updated: 16/07/2026
Type: UI Layout Fix — Icon Unification
Screen: Homepage (HomeScreen) — BigFan Activity Feed Section

Feedback Screenshot:

1. Identified Styling Inconsistency​

In the BigFan Activity Feed (showing recent announcements like "Member Dang won 500 Points from the Lucky Spin"):

  • The cards use a pink/orange circle with a star icon inside to denote points.
  • This creates confusion as stars are not used anywhere else in the application for point representation. The standard point icon throughout the app is the clover-shaped GPoint (letter "G") icon.

To unify the visual language, the star icons in the BigFan cards must be replaced with the standard GPoint Gold Gradient icon (matching the styling of the GPoint icon used in the header and navigation bar).

2. UI Adjustments​

┌──────────────────────────────────────┐     ┌──────────────────────────────────────┐
│  ❌ Before (Star Icon)                │     │  ✅ After (GPoint Gold Icon)          │
│                                      │     │                                      │
│  ┌────────────────────────────────┐  │     │  ┌────────────────────────────────┐  │
│  │      ⭐️                          │  │     │  │      (G)                         │  │
│  │   500 Point                    │  │     │  │   500 Point                    │  │
│  ├────────────────────────────────┤  │     │  ├────────────────────────────────┤  │
│  │ Member Dang won 500 points...  │  │     │  │ Member Dang won 500 points...  │  │
│  └────────────────────────────────┘  │     │  └────────────────────────────────┘  │
└──────────────────────────────────────┘     └──────────────────────────────────────┘
  • Action: Replace the Star SVG/image component with the unified <GPointIcon /> component.
  • Keep the background container color (soft pink/yellow cards) if necessary, but update the inner icon to be the gold gradient "G" icon.

3. Code Implementation Spec​

3.1 GPoint Icon Integration​

Reuse the standard GPointIcon component (from gpoint-icon-gradient-style.md):

// Within /components/BigFanActivityCard.tsx or inside HomeScreen.tsx

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import GPointIcon from './GPointIcon'; // Standard gold gradient "G" icon

const BigFanActivityCard = ({ activity }) => {
  const isPointReward = activity.type === 'point_reward';

  return (
    <View style={[styles.card, { backgroundColor: activity.bgColor }]}>
      <View style={styles.iconWrapper}>
        {isPointReward ? (
          // ✅ Replace the old <StarIcon /> component with the unified GPointIcon
          <GPointIcon size={32} />
        ) : (
          <VoucherIcon size={32} />
        )}
      </View>
      
      <Text style={styles.pointsText}>{activity.valueText} Point</Text>
      
      <Text style={styles.descriptionText}>
        Member {activity.userName} {activity.actionText}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: 160,
    borderRadius: 12,
    padding: 12,
    alignItems: 'center',
  },
  iconWrapper: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: '#FFFFFF', // White circular backdrop to highlight the gold icon
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 8,
  },
  pointsText: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#A05C2C', // Brownish text to match the brand
    marginBottom: 4,
  },
  descriptionText: {
    fontSize: 12,
    color: '#666666',
    textAlign: 'center',
  }
});

Technical Checklist​

  • Locate the BigFan feed/card renderer component (typically BigFanActivityCard.tsx or inline within HomeScreen.tsx).
  • Import the unified <GPointIcon /> component.
  • Replace the Star icon code block with the imported <GPointIcon size={32} />.
  • Wrap the icon in a white circular background if needed to ensure the gold gradient stands out on top of the soft-pink/orange cards.
  • Verify the layout constraints: ensure the GPoint icon aligns perfectly with the "500 Point" text.
  • Run build tests on both iOS and Android to check SVG scaling inside card containers.