style(sidebar): add hover effect to New Agent button

On hover: white border and light muted background.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Mohamed Boudra
2026-01-04 10:31:12 +07:00
parent 74ed95cc08
commit 330a75a445

View File

@@ -241,7 +241,10 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
{/* Header: New Agent button */}
<View style={styles.sidebarHeader}>
<Pressable
style={styles.newAgentButton}
style={({ hovered }) => [
styles.newAgentButton,
hovered && styles.newAgentButtonHovered,
]}
onPress={handleCreateAgentMobile}
>
<Plus size={18} color={theme.colors.foreground} />
@@ -284,10 +287,13 @@ export function SlidingSidebar({ selectedAgentId }: SlidingSidebarProps) {
{/* Header: New Agent button */}
<View style={styles.sidebarHeader}>
<Pressable
style={styles.newAgentButton}
style={({ hovered }) => [
styles.newAgentButton,
hovered && styles.newAgentButtonHovered,
]}
onPress={handleCreateAgentDesktop}
>
<Plus size={18} color={theme.colors.mutedForeground} />
<Plus size={18} color={theme.colors.foreground} />
<Text style={styles.newAgentButtonText}>New Agent</Text>
</Pressable>
</View>
@@ -349,6 +355,10 @@ const styles = StyleSheet.create((theme) => ({
borderWidth: 1,
borderColor: theme.colors.border,
},
newAgentButtonHovered: {
borderColor: theme.colors.foreground,
backgroundColor: theme.colors.muted,
},
newAgentButtonText: {
fontSize: theme.fontSize.base,
fontWeight: theme.fontWeight.normal,