feat(mobile): implement minimalist brutalist redesign and manual theme toggle

- Added themeStore with persistence for light/dark/system modes.
- Updated color palette to high-contrast brutalist tokens.
- Redesigned Button, Card, and FAB components with bold borders and hard shadows.
- Updated HomeScreen and SettingsScreen with the new aesthetic and theme toggle.

Author: Arun-kushwaha007

apps/mobile/App.tsx

@@ -13,6 +13,7 @@ import { AppNavigator } from './app/navigation/AppNavigator';
 import { navigationRef } from './app/navigation/navigationRef';
 import { lightTheme, darkTheme } from './app/theme/theme';
 import { useAuthStore } from './app/store/authStore';
+import { useThemeStore } from './app/store/themeStore';
 import { userService } from './app/services/user.service';
 import { apiBaseUrl } from './app/services/api';
 import { realtimeService } from './app/services/realtime.service';
@@ -37,8 +38,14 @@ Notifications.setNotificationHandler({
 
 export default function App() {
   const accessToken = useAuthStore((state) => state.accessToken);
-  const colorScheme = useColorScheme();
-  const isDarkMode = colorScheme === 'dark';
+  const systemColorScheme = useColorScheme();
+  const themeMode = useThemeStore((state) => state.themeMode);
+
+  const isDarkMode = React.useMemo(() => {
+    if (themeMode === 'system') return systemColorScheme === 'dark';
+    return themeMode === 'dark';
+  }, [themeMode, systemColorScheme]);
+
   const theme = isDarkMode ? darkTheme : lightTheme;
 
   React.useEffect(() => {

apps/mobile/app/components/FloatingActionButton.tsx

@@ -1,84 +1,90 @@
 import React from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-} from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { useAppTheme } from '../theme/useAppTheme';
 
 interface FloatingActionButtonProps {
   onPress: () => void;
   icon?: keyof typeof MaterialCommunityIcons.glyphMap;
 }
 
-const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
-
 export function FloatingActionButton({
   onPress,
   icon = 'plus',
 }: FloatingActionButtonProps) {
   const { colors } = useAppTheme();
-  const scale = useSharedValue(1);
+  const shadowOffset = useSharedValue(6);
 
   const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ scale: scale.value }],
+    transform: [
+      { translateX: 6 - shadowOffset.value },
+      { translateY: 6 - shadowOffset.value },
+    ],
   }));
 
-  const handlePressIn = () => {
-    scale.value = withSpring(0.9, { damping: 15, stiffness: 400 });
-  };
-
-  const handlePressOut = () => {
-    scale.value = withSpring(1, { damping: 15, stiffness: 400 });
-  };
-
   return (
-    <AnimatedTouchable
-      style={[
-        styles.fab,
-        {
-          backgroundColor: colors.primary,
-          shadowColor: colors.primary,
-        },
-        animatedStyle,
-      ]}
-      onPress={onPress}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
-      activeOpacity={0.85}
-      accessibilityLabel="Create expense"
-      accessibilityRole="button"
-    >
-      <View style={styles.innerGlow}>
-        <MaterialCommunityIcons name={icon} size={28} color="#FFFFFF" />
-      </View>
-    </AnimatedTouchable>
+    <View style={styles.container}>
+      {/* Hard Shadow */}
+      <View style={[styles.shadow, { backgroundColor: colors.border }]} />
+      
+      <Animated.View style={[styles.animatedWrapper, animatedStyle]}>
+        <TouchableOpacity
+          style={[
+            styles.fab,
+            {
+              backgroundColor: colors.primary,
+              borderColor: colors.border,
+            },
+          ]}
+          onPress={onPress}
+          onPressIn={() => {
+            shadowOffset.value = withSpring(0, { damping: 20, stiffness: 300 });
+          }}
+          onPressOut={() => {
+            shadowOffset.value = withSpring(6, { damping: 20, stiffness: 300 });
+          }}
+          activeOpacity={1}
+          accessibilityLabel="Create expense"
+          accessibilityRole="button"
+        >
+          <MaterialCommunityIcons 
+            name={icon} 
+            size={32} 
+            color={colors.background} 
+          />
+        </TouchableOpacity>
+      </Animated.View>
+    </View>
   );
 }
 
 const styles = StyleSheet.create({
-  fab: {
+  container: {
     position: 'absolute',
-    bottom: 28,
-    right: 20,
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-    alignItems: 'center',
-    justifyContent: 'center',
-    elevation: 8,
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.35,
-    shadowRadius: 8,
+    bottom: 32,
+    right: 32,
+    width: 64,
+    height: 64,
   },
-  innerGlow: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
+  fab: {
+    width: 64,
+    height: 64,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'rgba(255,255,255,0.1)',
+    borderWidth: 3,
+    borderRadius: 4,
+  },
+  shadow: {
+    position: 'absolute',
+    top: 6,
+    left: 6,
+    width: 64,
+    height: 64,
+    borderRadius: 4,
+  },
+  animatedWrapper: {
+    width: 64,
+    height: 64,
   },
 });

apps/mobile/app/components/ui/Button.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, ViewProps } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { Button as PaperButton, ButtonProps } from 'react-native-paper';
 import { useAppTheme } from '../../theme/useAppTheme';
@@ -11,41 +11,87 @@ type Props = ButtonProps & {
 };
 
 export function Button({ variant = 'primary', style, ...props }: Props) {
-  const { colors } = useAppTheme();
-  const scale = useSharedValue(1);
+  const { colors, isDark } = useAppTheme();
+  const shadowOffset = useSharedValue(4);
 
   const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ scale: scale.value }],
+    transform: [{ translateX: 4 - shadowOffset.value }, { translateY: 4 - shadowOffset.value }],
   }));
 
-  const variantStyles: Record<ButtonVariant, { mode: ButtonProps['mode']; buttonColor?: string; textColor?: string }> = {
-    primary: { mode: 'contained', buttonColor: colors.primary, textColor: '#FFFFFF' },
-    secondary: { mode: 'outlined', textColor: colors.primary },
-    danger: { mode: 'contained', buttonColor: colors.danger, textColor: '#FFFFFF' },
-    ghost: { mode: 'text', textColor: colors.primary },
+  const variantStyles: Record<ButtonVariant, { mode: ButtonProps['mode']; buttonColor?: string; textColor?: string; borderColor?: string }> = {
+    primary: { mode: 'contained', buttonColor: colors.primary, textColor: isDark ? '#000000' : '#FFFFFF', borderColor: colors.border },
+    secondary: { mode: 'outlined', buttonColor: colors.surface, textColor: colors.text_primary, borderColor: colors.border },
+    danger: { mode: 'contained', buttonColor: colors.danger, textColor: '#FFFFFF', borderColor: colors.border },
+    ghost: { mode: 'text', textColor: colors.text_primary },
   };
 
   const vs = variantStyles[variant];
 
-  return (
-    <Animated.View style={animatedStyle}>
+  if (variant === 'ghost') {
+    return (
       <PaperButton
         {...props}
-        mode={vs.mode}
-        buttonColor={props.buttonColor ?? vs.buttonColor}
+        mode="text"
         textColor={props.textColor ?? vs.textColor}
-        style={[{ borderRadius: 14 }, style as any]}
-        contentStyle={{ paddingVertical: 4 }}
-        labelStyle={{ fontWeight: '700', fontSize: 14 }}
-        onPressIn={(event) => {
-          scale.value = withSpring(0.96, { damping: 15, stiffness: 300 });
-          props.onPressIn?.(event);
-        }}
-        onPressOut={(event) => {
-          scale.value = withSpring(1, { damping: 15, stiffness: 300 });
-          props.onPressOut?.(event);
-        }}
+        style={[{ borderRadius: 0 }, style as any]}
+        labelStyle={{ fontWeight: '800', fontSize: 14, textTransform: 'uppercase' }}
       />
-    </Animated.View>
+    );
+  }
+
+  return (
+    <View style={styles.buttonContainer}>
+      {/* Hard Shadow Layer */}
+      <View style={[styles.shadow, { backgroundColor: colors.border, borderRadius: 2 }]} />
+      
+      <Animated.View style={[styles.animatedWrapper, animatedStyle]}>
+        <PaperButton
+          {...props}
+          mode={vs.mode}
+          buttonColor={props.buttonColor ?? vs.buttonColor}
+          textColor={props.textColor ?? vs.textColor}
+          style={[
+            styles.button,
+            { 
+              borderRadius: 2, 
+              borderWidth: 2, 
+              borderColor: vs.borderColor ?? colors.border 
+            },
+            style as any
+          ]}
+          contentStyle={{ paddingVertical: 6 }}
+          labelStyle={{ fontWeight: '900', fontSize: 14, textTransform: 'uppercase' }}
+          onPressIn={(event) => {
+            shadowOffset.value = withSpring(0, { damping: 20, stiffness: 300 });
+            props.onPressIn?.(event);
+          }}
+          onPressOut={(event) => {
+            shadowOffset.value = withSpring(4, { damping: 20, stiffness: 300 });
+            props.onPressOut?.(event);
+          }}
+        />
+      </Animated.View>
+    </View>
   );
 }
+
+const styles = StyleSheet.create({
+  buttonContainer: {
+    position: 'relative',
+    marginBottom: 4,
+    marginRight: 4,
+  },
+  shadow: {
+    position: 'absolute',
+    top: 4,
+    left: 4,
+    right: -4,
+    bottom: -4,
+  },
+  animatedWrapper: {
+    width: '100%',
+  },
+  button: {
+    borderWidth: 2,
+  },
+});

apps/mobile/app/components/ui/Card.tsx

@@ -6,44 +6,49 @@ import { spacing } from '../../theme/spacing';
 interface CardProps {
   children: React.ReactNode;
   style?: ViewStyle;
-  variant?: 'default' | 'glass';
 }
 
-export function Card({ children, style, variant = 'default' }: CardProps) {
-  const { colors, isDark } = useAppTheme();
+export function Card({ children, style }: CardProps) {
+  const { colors } = useAppTheme();
 
   return (
-    <View
-      style={[
-        styles.card,
-        {
-          backgroundColor: isDark ? colors.card : colors.surface,
-          borderColor: colors.border,
-          ...(variant === 'glass'
-            ? {
-                backgroundColor: isDark
-                  ? 'rgba(31, 41, 55, 0.8)'
-                  : 'rgba(255, 255, 255, 0.8)',
-              }
-            : {}),
-        },
-        style,
-      ]}
-    >
-      {children}
+    <View style={styles.container}>
+      {/* Hard Shadow */}
+      <View style={[styles.shadow, { backgroundColor: colors.border }]} />
+      
+      <View
+        style={[
+          styles.card,
+          {
+            backgroundColor: colors.surface,
+            borderColor: colors.border,
+          },
+          style,
+        ]}
+      >
+        {children}
+      </View>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    marginBottom: 8,
+    marginRight: 8,
+  },
   card: {
-    borderRadius: 16,
+    borderRadius: 4,
     padding: spacing.lg,
-    borderWidth: 1,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.06,
-    shadowRadius: 8,
-    elevation: 3,
+    borderWidth: 2,
+  },
+  shadow: {
+    position: 'absolute',
+    top: 6,
+    left: 6,
+    right: -6,
+    bottom: -6,
+    borderRadius: 4,
   },
 });