diff --git a/app/(tabs)/library/exercises.tsx b/app/(tabs)/library/exercises.tsx index db3d3b1..6e3720d 100644 --- a/app/(tabs)/library/exercises.tsx +++ b/app/(tabs)/library/exercises.tsx @@ -14,6 +14,7 @@ import { FilterSheet, type FilterOptions, type SourceType } from '@/components/l import { useWorkoutStore } from '@/stores/workoutStore'; import { generateId } from '@/utils/ids'; import { useNDKStore } from '@/lib/stores/ndk'; +import { useIconColor } from '@/lib/theme/iconUtils'; // Default available filters const availableFilters = { @@ -35,7 +36,8 @@ export default function ExercisesScreen() { const [filterSheetOpen, setFilterSheetOpen] = useState(false); const [currentFilters, setCurrentFilters] = useState(initialFilters); const [activeFilters, setActiveFilters] = useState(0); - + const { getIconProps } = useIconColor(); + // Exercise sheet state const [showExerciseSheet, setShowExerciseSheet] = useState(false); const [exerciseToEdit, setExerciseToEdit] = useState(undefined); @@ -200,36 +202,37 @@ export default function ExercisesScreen() { return ( - {/* Search bar with filter button */} - - - - - - - - - + + + + + - - + ); {/* Filter Sheet */} void; -} - -export function SearchPopover({ searchQuery, onSearchChange }: SearchPopoverProps) { - const [isOpen, setIsOpen] = React.useState(false); - - return ( - - - - - - - - {searchQuery.length > 0 && ( - - )} - - - - ); -} \ No newline at end of file diff --git a/docs/design/styling_design_doc.md b/docs/design/styling_design_doc.md new file mode 100644 index 0000000..80a7b50 --- /dev/null +++ b/docs/design/styling_design_doc.md @@ -0,0 +1,134 @@ +# 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 + +```typescript +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 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 + + +// Destructive action icon + + +// Icon with custom fill + +Button Styling +Use the standard button component with appropriate variants: +tsxCopy// Primary button + + +// Destructive button + + +// Outline button + +Header Component +Use the Header component consistently: +tsxCopy// Standard header with title +
+ +// Header with logo +
+ +// Header with custom right element +
} +/> +Text Styling +Use the Text component with appropriate Tailwind classes: +tsxCopy// Headings +Heading + +// Body text +Regular text + +// Secondary text +Secondary text +Card Components +Use the Card component for content blocks: +tsxCopy + + {/* Card content */} + + +Dialog/Alert Styling +Center buttons in dialogs: +tsxCopy + + + + Alert Title + + + Alert description text. + + + + + Cancel + + + Confirm + + + + +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 \ No newline at end of file