Skip to main content

UI Bug Fix: Detail Screen Box Shadow & Redundant Label Removal

Last Updated: 16/07/2026
Type: UI Layout Fix — Detail Screen Card Style
Screen: Article Detail / Event Detail Screen (ArticleDetailScreen / EventDetailScreen)
Severity: 🟢 Low — Visual polishing to match premium design standards

Feedback Screenshot:

1. Identified Issues​

On the article/event details display screen:

  1. Thick Box Shadow: The card container holding the body content has an excessively heavy, dark, and thick drop shadow. It looks outdated and does not fit the modern, premium card design system.
  2. Redundant Section Title: The text label "Nội dung bài viết" (Article Content) sitting at the top of the body card is unnecessary. The user already knows they are reading the article, making this sub-header redundant.

2. UI Adjustments​

2.1 Remove Redundant Header​

  • Action: Delete the <Text style={styles.contentHeader}>Nội dung bài viết</Text> element entirely from the card rendering block.
  • The card should render the body HTML content directly at the top.

2.2 Soften the Box Shadow​

  • Action: Replace the harsh drop shadow style with a subtle, soft, and modern drop shadow token.
  • Shadow Specs:
    • Android (Elevation): Reduce elevation from high values (e.g., 8 or 12) down to 2 or 3.
    • iOS (Shadow Properties): Reduce opacity to 0.04 or 0.05 and use a larger blur radius (shadowRadius) to spread the shadow softly.

3. Style Code Adjustments (React Native)​

3.1 Before (Harsh & Thick Shadow)​

const styles = StyleSheet.create({
  contentCard: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 16,
    marginHorizontal: 16,
    marginTop: -20, // Negative margin to overlap header image
    
    // ❌ WRONG — Too harsh/dark shadow
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 6 },
    shadowOpacity: 0.15,
    shadowRadius: 10,
    elevation: 8,
  },
  // ❌ REMOVE THIS REDUNDANT TEXT STYLE
  contentHeader: {
    fontSize: 14,
    fontWeight: 'bold',
    color: '#333333',
    marginBottom: 8,
    textDecorationLine: 'underline',
  }
});

3.2 After (Soft, Modern Shadow & Removed Header)​

const styles = StyleSheet.create({
  contentCard: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 16,
    marginHorizontal: 16,
    marginTop: -20, // Keeps the overlap layout
    
    // ✅ CORRECT — Soft, premium shadow token
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.04, // Very subtle opacity
    shadowRadius: 8,     // Soft spread
    elevation: 2,        // Low elevation for Android
  }
});

4. Render Layout Change​

Before​

<View style={styles.contentCard}>
  <Text style={styles.contentHeader}>Nội dung bài viết</Text> {/* ❌ Remove */}
  <RenderHtml contentWidth={width} source={{ html: article.body }} />
</View>

After​

<View style={styles.contentCard}>
  {/* ✅ Directly render content with padding top */}
  <RenderHtml contentWidth={width} source={{ html: article.body }} />
</View>

Technical Checklist​

  • Locate the article/event detail render screen component (ArticleDetailScreen.tsx and EventDetailScreen.tsx).
  • Remove the section title element <Text>Nội dung bài viết</Text> (and any dividers below it).
  • Update the stylesheet contentCard styling rule:
    • Set shadowOpacity to 0.04 (max 0.05).
    • Set shadowOffset to { width: 0, height: 2 }.
    • Set shadowRadius to 8.
    • Set elevation to 2 (Android).
  • Verify visually on both iOS and Android to ensure the shadow is subtle and doesn't appear as a thick black border.
  • Ensure correct margin and padding are maintained inside the card after header removal.