POWR/docs/archive/styling_design_doc.md

ARCHIVED DOCUMENT: This document is outdated and kept for historical reference only. Please refer to POWR App Styling Guide for up-to-date information.

POWR App Styling Guide

This document outlines how to consistently style components in the POWR fitness app.

Color System

All colors are defined in the theme system and should be accessed through it rather than hardcoded values.

Import Path

import { useIconColor } from '@/lib/theme/iconUtils';
import { FIXED_COLORS } from '@/lib/theme/colors';
Icon Styling
Icons must use the icon utility to ensure visibility on both iOS and Android:
typescriptCopy// Import icon utility
import { useIconColor } from '@/lib/theme/iconUtils';

// Inside your component
const { getIconProps, getIconColor } = useIconColor();

// Apply to icons
<Icon 
  size={24} 
  {...getIconProps('primary')}  // Use appropriate variant
/>
Icon Variants

primary - For main actions and interactive elements (purple)
muted - For secondary or less important actions (gray)
destructive - For delete/remove actions (red)
success - For confirmation/complete actions (green)
warning - For caution indicators (yellow/orange)

Examples
tsxCopy// Primary action icon
<Play {...getIconProps('primary')} size={20} />

// Destructive action icon
<Trash2 {...getIconProps('destructive')} size={20} />

// Icon with custom fill
<Star 
  {...getIconProps(isFavorite ? 'primary' : 'muted')}
  fill={isFavorite ? getIconColor('primary') : "none"}
  size={20} 
/>
Button Styling
Use the standard button component with appropriate variants:
tsxCopy// Primary button
<Button variant="default" className="w-full">
  <Text className="text-primary-foreground">Primary Action</Text>
</Button>

// Destructive button
<Button variant="destructive" className="w-full">
  <Text className="text-destructive-foreground">Delete</Text>
</Button>

// Outline button
<Button variant="outline" className="w-full">
  <Text>Secondary Action</Text>
</Button>
Header Component
Use the Header component consistently:
tsxCopy// Standard header with title
<Header title="Screen Title" showNotifications={true} />

// Header with logo
<Header useLogo={true} showNotifications={true} />

// Header with custom right element
<Header 
  title="Screen Title" 
  rightElement={<YourCustomElement />} 
/>
Text Styling
Use the Text component with appropriate Tailwind classes:
tsxCopy// Headings
<Text className="text-xl font-semibold text-foreground">Heading</Text>

// Body text
<Text className="text-base text-foreground">Regular text</Text>

// Secondary text
<Text className="text-sm text-muted-foreground">Secondary text</Text>
Card Components
Use the Card component for content blocks:
tsxCopy<Card className="mx-4">
  <CardContent className="p-4">
    {/* Card content */}
  </CardContent>
</Card>
Dialog/Alert Styling
Center buttons in dialogs:
tsxCopy<AlertDialog>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>
        <Text>Alert Title</Text>
      </AlertDialogTitle>
      <AlertDialogDescription>
        <Text>Alert description text.</Text>
      </AlertDialogDescription>
    </AlertDialogHeader>
    <View className="flex-row justify-center gap-3">
      <AlertDialogCancel>
        <Text>Cancel</Text>
      </AlertDialogCancel>
      <AlertDialogAction className="bg-destructive">
        <Text className="text-destructive-foreground">Confirm</Text>
      </AlertDialogAction>
    </View>
  </AlertDialogContent>
</AlertDialog>
Best Practices

Never use hardcoded colors - Always use theme variables through Tailwind classes
Always use getIconProps for icons - Ensures visibility on both iOS and Android
Use semantic variants - Choose button and icon variants based on their purpose
Maintain consistent spacing - Use Tailwind spacing classes (p-4, m-2, etc.)
Check both platforms - Test UI changes on both iOS and Android

Troubleshooting
If icons aren't appearing on Android:

Ensure you're using getIconProps() instead of className for the icon
Add strokeWidth={2} for better visibility on Android
Check that the icon has a size specified

If colors seem inconsistent:

Verify you're using Tailwind classes (text-primary vs #8B5CF6)
Check that the correct variant is being used for your component