Skip to main content

UI Style Change: Apply Gold Gradient to GPoint Icon

Last Updated: 16/07/2026
Type: UI Layout Fix — Icon Vector Styling
Screen: App Header Component (HeaderBar / HomeScreenHeader)
Severity: 🟢 Low — Visual polishing to ensure brand icon consistency

Feedback Screenshot:

1. Identified Styling Mismatch​

In the header statistics panel containing the user's balances:

  • The Voucher Icon is styled with a premium gold/amber gradient background fill.
  • The GPoint Icon (with the letter "G" inside) is styled with a flat, plain orange background.

This creates a visual inconsistency. To match the premium aesthetics of the app, the GPoint icon must be updated to use the same Gold Gradient token as the Voucher icon.

2. Style Adjustments (React Native / SVG)​

If icons are rendered via SVG components (using react-native-svg), we should apply a <LinearGradient> definition to the path fill of the GPoint icon wrapper.

2.1 Gradient Color Specification​

We will use a 3-stop gold linear gradient for the GPoint icon vector:

StopOffsetHex Color Code
Stop 10%#FFE082 (Light Gold)
Stop 250%#FFB300 (Amber Gold)
Stop 3100%#FF8F00 (Dark Amber)

3. Code Implementation Spec​

If the GPoint icon is a custom SVG component:

import React from 'react';
import Svg, { Path, Defs, LinearGradient, Stop, Text } from 'react-native-svg';

const GPointIcon = ({ size = 24 }) => (
  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <Defs>
      {/* Define the standard Gold Gradient token */}
      <LinearGradient id="goldGradient" x1="0%" y1="0%" x2="100%" y2="100%">
        <Stop offset="0%" stopColor="#FFE082" />
        <Stop offset="50%" stopColor="#FFB300" />
        <Stop offset="100%" stopColor="#FF8F00" />
      </LinearGradient>
    </Defs>
    
    {/* GPoint clover/star outline filled with gold gradient */}
    <Path
      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
      fill="url(#goldGradient)" // ✅ Apply gradient
    />
    
    {/* "G" Letter inside, styled in white */}
    <Text
      x="12"
      y="16"
      fontSize="12"
      fontWeight="bold"
      fill="#FFFFFF"
      textAnchor="middle"
    >
      G
    </Text>
  </Svg>
);

export default GPointIcon;

3.2 If using react-native-linear-gradient (Wrapper Method)​

If the GPoint icon is a flat PNG/vector asset inside a container, wrap it inside a linear gradient background:

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

const GPointIconWrapper = () => (
  <LinearGradient
    colors={['#FFE082', '#FFB300', '#FF8F00']}
    start={{ x: 0, y: 0 }}
    end={{ x: 1, y: 1 }}
    style={styles.iconContainer}
  >
    {/* Inner "G" Text / Asset */}
    <Text style={styles.iconText}>G</Text>
  </LinearGradient>
);

const styles = StyleSheet.create({
  iconContainer: {
    width: 24,
    height: 24,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
  iconText: {
    color: '#FFFFFF',
    fontWeight: 'bold',
    fontSize: 12,
  }
});

Technical Checklist​

  • Locate the GPoint icon component inside the header file (typically HomeScreenHeader.tsx or GPointIcon.tsx).
  • Implement a <LinearGradient> element using the stops #FFE082, #FFB300, and #FF8F00.
  • Bind the GPoint path fill property to url(#goldGradient).
  • Verify visually that both the GPoint icon and the Voucher icon share the same color styling and gradient coordinates.
  • Run build tests on both iOS and Android to ensure SVG gradients render correctly without falling back to solid black.