feat: black theme and other UI fixes

README.md

@@ -86,6 +86,34 @@ You've successfully run and modified your React Native App. :partying_face:
 
 If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
 
+# Versioning (Single Source of Truth)
+
+App versioning is centralized in [version.config.json](version.config.json).
+
+## Commands
+
+```sh
+# Sync all targets from version.config.json
+npm run version:sync
+
+# Set exact version (and optional build number)
+npm run version:set -- 1.2.0
+npm run version:set -- 1.2.0 42
+
+# Bump and auto-increment build number
+npm run version:bump -- patch
+npm run version:bump -- minor
+npm run version:bump -- major
+npm run version:bump -- build
+```
+
+## Synced targets
+
+- `package.json` → `version`
+- `app.json` → `version`, `android.versionCode`, `ios.buildNumber`
+- `android/app/build.gradle` → `versionName`, `versionCode`
+- `ios/Expensso.xcodeproj/project.pbxproj` → `MARKETING_VERSION`, `CURRENT_PROJECT_VERSION`
+
 # Learn More
 
 To learn more about React Native, take a look at the following resources:

android/app/build.gradle

@@ -92,7 +92,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
-        versionName "1.0"
+        versionName "0.1.4"
     }
     signingConfigs {
         debug {

app.json

@@ -1,4 +1,11 @@
 {
   "name": "Expensso",
-  "displayName": "Expensso"
+  "displayName": "Expensso",
+  "version": "0.1.4",
+  "android": {
+    "versionCode": 1
+  },
+  "ios": {
+    "buildNumber": "1"
+  }
 }

generate-app-icons

@@ -0,0 +1,45 @@
+#!/usr/bin/env bash
+
+ICON="assets/app-icon.png"
+
+# Android icons
+for d in mdpi:48 hdpi:72 xhdpi:96 xxhdpi:144 xxxhdpi:192; do
+  density="${d%%:*}"
+  size="${d##*:}"
+
+  out_dir="android/app/src/main/res/mipmap-${density}"
+  round_icon="${out_dir}/ic_launcher_round.png"
+
+  sips -z "$size" "$size" "$ICON" \
+    --out "${out_dir}/ic_launcher.png" >/dev/null
+
+  sips -z "$size" "$size" "$ICON" \
+    --out "$round_icon" >/dev/null
+
+  # Proper circular crop with preserved transparency (ImageMagick)
+  if command -v magick >/dev/null 2>&1; then
+    magick "$round_icon" \
+      -alpha set -background none \
+      \( -size ${size}x${size} xc:none \
+         -fill white -draw "circle $((size/2)),$((size/2)) $((size/2)),1" \) \
+      -compose CopyOpacity -composite \
+      "$round_icon"
+  else
+    echo "Warning: ImageMagick not found; skipping circular crop for $round_icon" >&2
+  fi
+done
+
+# iOS icons
+OUT="ios/Expensso/Images.xcassets/AppIcon.appiconset"
+
+sips -z 40 40 "$ICON"  --out "$OUT/Icon-20@2x.png"  >/dev/null
+sips -z 60 60 "$ICON"  --out "$OUT/Icon-20@3x.png"  >/dev/null
+sips -z 58 58 "$ICON"  --out "$OUT/Icon-29@2x.png"  >/dev/null
+sips -z 87 87 "$ICON"  --out "$OUT/Icon-29@3x.png"  >/dev/null
+sips -z 80 80 "$ICON"  --out "$OUT/Icon-40@2x.png"  >/dev/null
+sips -z 120 120 "$ICON" --out "$OUT/Icon-40@3x.png" >/dev/null
+sips -z 120 120 "$ICON" --out "$OUT/Icon-60@2x.png" >/dev/null
+sips -z 180 180 "$ICON" --out "$OUT/Icon-60@3x.png" >/dev/null
+sips -z 1024 1024 "$ICON" --out "$OUT/Icon-1024.png" >/dev/null
+
+echo "Icons generated!"

ios/Expensso.xcodeproj/project.pbxproj

@@ -265,7 +265,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.0;
+				MARKETING_VERSION = 0.1.4;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -294,7 +294,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.0;
+				MARKETING_VERSION = 0.1.4;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "Expensso",
-  "version": "0.0.1",
+  "name": "expensso",
+  "version": "0.1.4",
   "private": true,
   "scripts": {
     "android": "react-native run-android",
@@ -8,6 +8,9 @@
     "lint": "eslint .",
     "start": "react-native start",
     "test": "jest",
+    "version:sync": "node scripts/version.js sync",
+    "version:set": "node scripts/version.js set",
+    "version:bump": "node scripts/version.js bump",
     "build:release": "cd android && ./gradlew assembleRelease --no-daemon",
     "build:release:aab": "cd android && ./gradlew bundleRelease --no-daemon"
   },

scripts/version.js

@@ -0,0 +1,201 @@
+#!/usr/bin/env node
+
+const fs = require('node:fs');
+const path = require('node:path');
+
+const rootDir = path.resolve(__dirname, '..');
+const configPath = path.join(rootDir, 'version.config.json');
+const packagePath = path.join(rootDir, 'package.json');
+const appJsonPath = path.join(rootDir, 'app.json');
+const androidGradlePath = path.join(rootDir, 'android', 'app', 'build.gradle');
+const iosPbxprojPath = path.join(rootDir, 'ios', 'Expensso.xcodeproj', 'project.pbxproj');
+const appVersionTsPath = path.join(rootDir, 'src', 'constants', 'appVersion.ts');
+
+function readJson(filePath) {
+  return JSON.parse(fs.readFileSync(filePath, 'utf8'));
+}
+
+function writeJson(filePath, data) {
+  fs.writeFileSync(filePath, `${JSON.stringify(data, null, 2)}\n`, 'utf8');
+}
+
+function readVersionConfig() {
+  const config = readJson(configPath);
+
+  if (!isValidVersion(config.version)) {
+    throw new Error(`Invalid version in version.config.json: ${config.version}`);
+  }
+
+  if (!Number.isInteger(config.buildNumber) || config.buildNumber < 1) {
+    throw new Error(`Invalid buildNumber in version.config.json: ${config.buildNumber}`);
+  }
+
+  return config;
+}
+
+function isValidVersion(version) {
+  return /^\d+\.\d+\.\d+(?:[-+][0-9A-Za-z.-]+)?$/.test(version);
+}
+
+function bumpVersion(version, type) {
+  const base = version.split('-')[0].split('+')[0];
+  const [major, minor, patch] = base.split('.').map(Number);
+
+  if (![major, minor, patch].every(Number.isInteger)) {
+    throw new Error(`Cannot bump invalid version: ${version}`);
+  }
+
+  if (type === 'major') {
+    return `${major + 1}.0.0`;
+  }
+
+  if (type === 'minor') {
+    return `${major}.${minor + 1}.0`;
+  }
+
+  if (type === 'patch') {
+    return `${major}.${minor}.${patch + 1}`;
+  }
+
+  throw new Error(`Unsupported bump type: ${type}`);
+}
+
+function replaceOrThrow(content, regex, replacement, targetName) {
+  if (!regex.test(content)) {
+    throw new Error(`Could not update ${targetName}. Expected pattern not found.`);
+  }
+
+  const updated = content.replace(regex, replacement);
+
+  return updated;
+}
+
+function writeAppVersionTs({version, buildNumber}) {
+  const content = [
+    `export const APP_VERSION = '${version}';`,
+    `export const APP_BUILD_NUMBER = ${buildNumber};`,
+    'export const APP_VERSION_LABEL = `${APP_VERSION} (${APP_BUILD_NUMBER})`;',
+    '',
+  ].join('\n');
+
+  fs.mkdirSync(path.dirname(appVersionTsPath), {recursive: true});
+  fs.writeFileSync(appVersionTsPath, content, 'utf8');
+}
+
+function syncToTargets({version, buildNumber}) {
+  const packageJson = readJson(packagePath);
+  packageJson.version = version;
+  writeJson(packagePath, packageJson);
+
+  const appJson = readJson(appJsonPath);
+  appJson.version = version;
+  appJson.android = {...(appJson.android || {}), versionCode: buildNumber};
+  appJson.ios = {...(appJson.ios || {}), buildNumber: String(buildNumber)};
+  writeJson(appJsonPath, appJson);
+
+  let gradle = fs.readFileSync(androidGradlePath, 'utf8');
+  gradle = replaceOrThrow(
+    gradle,
+    /versionCode\s+\d+/,
+    `versionCode ${buildNumber}`,
+    'android versionCode',
+  );
+  gradle = replaceOrThrow(
+    gradle,
+    /versionName\s+"[^"]+"/,
+    `versionName "${version}"`,
+    'android versionName',
+  );
+  fs.writeFileSync(androidGradlePath, gradle, 'utf8');
+
+  let pbxproj = fs.readFileSync(iosPbxprojPath, 'utf8');
+  pbxproj = replaceOrThrow(
+    pbxproj,
+    /MARKETING_VERSION = [^;]+;/g,
+    `MARKETING_VERSION = ${version};`,
+    'iOS MARKETING_VERSION',
+  );
+  pbxproj = replaceOrThrow(
+    pbxproj,
+    /CURRENT_PROJECT_VERSION = [^;]+;/g,
+    `CURRENT_PROJECT_VERSION = ${buildNumber};`,
+    'iOS CURRENT_PROJECT_VERSION',
+  );
+  fs.writeFileSync(iosPbxprojPath, pbxproj, 'utf8');
+
+  writeAppVersionTs({version, buildNumber});
+}
+
+function saveConfig(config) {
+  writeJson(configPath, config);
+}
+
+function printUsage() {
+  console.log('Usage:');
+  console.log('  node scripts/version.js sync');
+  console.log('  node scripts/version.js set <version> [buildNumber]');
+  console.log('  node scripts/version.js bump <major|minor|patch|build>');
+}
+
+function main() {
+  const [, , command, arg1, arg2] = process.argv;
+
+  if (!command) {
+    printUsage();
+    process.exitCode = 1;
+    return;
+  }
+
+  if (command === 'sync') {
+    const config = readVersionConfig();
+    syncToTargets(config);
+    console.log(`Synced version ${config.version} (${config.buildNumber})`);
+    return;
+  }
+
+  if (command === 'set') {
+    if (!arg1 || !isValidVersion(arg1)) {
+      throw new Error('set requires a valid semver, e.g. 1.2.3');
+    }
+
+    const config = readVersionConfig();
+    const nextBuildNumber = arg2 ? Number(arg2) : config.buildNumber;
+
+    if (!Number.isInteger(nextBuildNumber) || nextBuildNumber < 1) {
+      throw new Error('buildNumber must be a positive integer');
+    }
+
+    const next = {version: arg1, buildNumber: nextBuildNumber};
+    saveConfig(next);
+    syncToTargets(next);
+    console.log(`Set version to ${next.version} (${next.buildNumber})`);
+    return;
+  }
+
+  if (command === 'bump') {
+    if (!arg1 || !['major', 'minor', 'patch', 'build'].includes(arg1)) {
+      throw new Error('bump requires one of: major, minor, patch, build');
+    }
+
+    const config = readVersionConfig();
+    const next = {
+      version: arg1 === 'build' ? config.version : bumpVersion(config.version, arg1),
+      buildNumber: config.buildNumber + 1,
+    };
+
+    saveConfig(next);
+    syncToTargets(next);
+    console.log(`Bumped to ${next.version} (${next.buildNumber})`);
+    return;
+  }
+
+  printUsage();
+  process.exitCode = 1;
+}
+
+try {
+  main();
+} catch (error) {
+  console.error(error instanceof Error ? error.message : String(error));
+  process.exitCode = 1;
+}

src/components/CustomBottomSheet.tsx

@@ -27,10 +27,12 @@ import {
   StyleSheet,
   TouchableOpacity,
   Pressable,
+  Platform,
 } from 'react-native';
 import BottomSheet, {
   BottomSheetBackdrop,
   BottomSheetScrollView,
+  BottomSheetTextInput,
   BottomSheetView,
   type BottomSheetBackdropProps,
 } from '@gorhom/bottom-sheet';
@@ -89,8 +91,14 @@ const CustomBottomSheetInner = forwardRef<CustomBottomSheetHandle, CustomBottomS
     const theme = useTheme();
     const s = makeStyles(theme);
     const sheetRef = useRef<BottomSheet>(null);
+    const [sheetIndex, setSheetIndex] = React.useState(-1);
     const snapPoints = useMemo(() => snapPointsProp ?? ['60%'], [snapPointsProp]);
 
+    const handleClose = useCallback(() => {
+      setSheetIndex(-1);
+      onDismiss?.();
+    }, [onDismiss]);
+
     // Imperative handle
     useImperativeHandle(ref, () => ({
       present: () => {
@@ -136,7 +144,8 @@ const CustomBottomSheetInner = forwardRef<CustomBottomSheetHandle, CustomBottomS
         snapPoints={enableDynamicSizing ? undefined : snapPoints}
         enableDynamicSizing={enableDynamicSizing}
         enablePanDownToClose
-        onClose={onDismiss}
+        onClose={handleClose}
+        onChange={setSheetIndex}
         backdropComponent={renderBackdrop}
         handleComponent={renderHandle}
         backgroundStyle={s.background}
@@ -172,12 +181,14 @@ const CustomBottomSheetInner = forwardRef<CustomBottomSheetHandle, CustomBottomS
         )}
 
         {/* Sheet Body */}
-        <Wrapper
-          style={s.body}
-          contentContainerStyle={s.bodyContent}
-          showsVerticalScrollIndicator={false}>
-          {children}
-        </Wrapper>
+        {sheetIndex >= 0 && (
+          <Wrapper
+            style={s.body}
+            contentContainerStyle={s.bodyContent}
+            showsVerticalScrollIndicator={false}>
+            {children}
+          </Wrapper>
+        )}
       </BottomSheet>
     );
   },
@@ -199,6 +210,10 @@ function makeStyles(theme: MD3Theme) {
       backgroundColor: colors.surfaceContainerLow,
       borderTopLeftRadius: shape.extraLarge,
       borderTopRightRadius: shape.extraLarge,
+      borderTopWidth: 1,
+      borderLeftWidth: 1,
+      borderRightWidth: 1,
+      borderColor: colors.outlineVariant,
     },
     handleContainer: {
       alignItems: 'center',
@@ -267,8 +282,6 @@ export interface BottomSheetInputProps {
   autoFocus?: boolean;
 }
 
-import {TextInput} from 'react-native';
-
 export const BottomSheetInput: React.FC<BottomSheetInputProps> = ({
   label,
   value,
@@ -283,6 +296,13 @@ export const BottomSheetInput: React.FC<BottomSheetInputProps> = ({
   const theme = useTheme();
   const {colors, typography, shape, spacing} = theme;
   const [focused, setFocused] = React.useState(false);
+  const inputRef = React.useRef<React.ComponentRef<typeof BottomSheetTextInput>>(null);
+
+  const handlePressIn = React.useCallback(() => {
+    if (Platform.OS === 'android' && focused) {
+      inputRef.current?.focus();
+    }
+  }, [focused]);
 
   const borderColor = error
     ? colors.error
@@ -321,7 +341,8 @@ export const BottomSheetInput: React.FC<BottomSheetInputProps> = ({
             {prefix}
           </Text>
         )}
-        <TextInput
+        <BottomSheetTextInput
+          ref={inputRef}
           style={{
             flex: 1,
             ...typography.bodyLarge,
@@ -336,6 +357,8 @@ export const BottomSheetInput: React.FC<BottomSheetInputProps> = ({
           keyboardType={keyboardType}
           multiline={multiline}
           autoFocus={autoFocus}
+          showSoftInputOnFocus
+          onPressIn={handlePressIn}
           onFocus={() => setFocused(true)}
           onBlur={() => setFocused(false)}
         />

src/components/FloatingModal.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import {
+  Modal,
+  View,
+  Text,
+  Pressable,
+  StyleSheet,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import {useTheme} from '../theme';
+
+export interface FloatingModalProps {
+  visible: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+}
+
+export const FloatingModal: React.FC<FloatingModalProps> = ({
+  visible,
+  onClose,
+  title,
+  children,
+}) => {
+  const theme = useTheme();
+  const {colors, typography, spacing, shape, elevation} = theme;
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      statusBarTranslucent
+      onRequestClose={onClose}>
+      <View style={[styles.backdrop, {backgroundColor: colors.scrim + '66'}]}>
+        <Pressable style={StyleSheet.absoluteFillObject} onPress={onClose} />
+
+        <View
+          style={[
+            styles.card,
+            {
+              backgroundColor: colors.surfaceContainer,
+              borderColor: colors.outlineVariant,
+              borderRadius: shape.large,
+              marginHorizontal: spacing.xl,
+              ...elevation.level3,
+            },
+          ]}>
+          {(title || onClose) && (
+            <View
+              style={[
+                styles.header,
+                {
+                  borderBottomColor: colors.outlineVariant,
+                  paddingHorizontal: spacing.lg,
+                  paddingVertical: spacing.md,
+                },
+              ]}>
+              <Text style={[typography.titleMedium, {color: colors.onSurface}]}> {title ?? ''}</Text>
+              <Pressable onPress={onClose} hitSlop={8}>
+                <Icon name="close" size={20} color={colors.onSurfaceVariant} />
+              </Pressable>
+            </View>
+          )}
+
+          <View style={{padding: spacing.lg}}>{children}</View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  card: {
+    maxHeight: '72%',
+    borderWidth: 1,
+    overflow: 'hidden',
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderBottomWidth: 1,
+  },
+});

src/components/SettingsSelectionSheet.tsx

@@ -0,0 +1,137 @@
+import React, {forwardRef, useImperativeHandle, useMemo, useState} from 'react';
+import {Pressable, ScrollView, StyleSheet, Text, View} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import type {CustomBottomSheetHandle} from './CustomBottomSheet';
+import {triggerHaptic} from './CustomBottomSheet';
+import {FloatingModal} from './FloatingModal';
+import {useTheme} from '../theme';
+
+export interface SettingsSelectionOption<T extends string> {
+  label: string;
+  value: T;
+  icon?: string;
+}
+
+export interface SettingsSelectionSheetProps<T extends string> {
+  title: string;
+  options: SettingsSelectionOption<T>[];
+  selectedValue: T;
+  onSelect: (value: T) => void;
+  enableDynamicSizing?: boolean;
+  snapPoints?: (string | number)[];
+}
+
+const SettingsSelectionSheetInner = <T extends string>(
+  {
+    title,
+    options,
+    selectedValue,
+    onSelect,
+  }: SettingsSelectionSheetProps<T>,
+  ref: React.ForwardedRef<CustomBottomSheetHandle>,
+) => {
+  const theme = useTheme();
+  const {colors, typography, spacing, shape} = theme;
+  const [visible, setVisible] = useState(false);
+
+  useImperativeHandle(ref, () => ({
+    present: () => {
+      triggerHaptic('impactLight');
+      setVisible(true);
+    },
+    dismiss: () => {
+      triggerHaptic('impactLight');
+      setVisible(false);
+    },
+  }));
+
+  const selectedOption = useMemo(
+    () => options.find(option => option.value === selectedValue),
+    [options, selectedValue],
+  );
+
+  return (
+    <FloatingModal
+      visible={visible}
+      onClose={() => setVisible(false)}
+      title={title}>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        {options.map(option => {
+          const selected = option.value === selectedValue;
+          return (
+            <Pressable
+              key={option.value}
+              onPress={() => {
+                triggerHaptic('selection');
+                onSelect(option.value);
+                setVisible(false);
+              }}
+              style={{
+                ...styles.optionRow,
+                paddingHorizontal: spacing.md,
+                paddingVertical: spacing.md,
+                borderRadius: shape.medium,
+                borderColor: selected ? colors.primary : colors.outlineVariant,
+                backgroundColor: selected
+                  ? colors.primaryContainer
+                  : colors.surfaceContainerLowest,
+                marginBottom: spacing.sm,
+              }}>
+              {option.icon ? (
+                <Icon
+                  name={option.icon}
+                  size={18}
+                  color={selected ? colors.primary : colors.onSurfaceVariant}
+                />
+              ) : null}
+              <Text
+                style={[
+                  {
+                    ...typography.bodyLarge,
+                    color: selected ? colors.onPrimaryContainer : colors.onSurface,
+                  },
+                  styles.optionLabel,
+                  option.icon ? styles.optionLabelWithIcon : null,
+                ]}>
+                {option.label}
+              </Text>
+              {selected ? (
+                <Icon name="check" size={18} color={colors.primary} />
+              ) : null}
+            </Pressable>
+          );
+        })}
+
+        {!selectedOption && options.length > 0 ? (
+          <View style={{...styles.hintContainer, marginTop: spacing.xs, paddingHorizontal: spacing.xs}}>
+            <Text style={{...typography.bodySmall, color: colors.onSurfaceVariant}}>
+              Current selection is unavailable. Pick a new value.
+            </Text>
+          </View>
+        ) : null}
+      </ScrollView>
+    </FloatingModal>
+  );
+};
+
+export const SettingsSelectionSheet = forwardRef(SettingsSelectionSheetInner) as <T extends string>(
+  props: SettingsSelectionSheetProps<T> & React.RefAttributes<CustomBottomSheetHandle>,
+) => React.ReactElement;
+
+const styles = StyleSheet.create({
+  optionRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+  },
+  optionLabel: {
+    flex: 1,
+  },
+  optionLabelWithIcon: {
+    marginLeft: 8,
+  },
+  hintContainer: {
+    marginTop: 0,
+    paddingHorizontal: 0,
+  },
+});

src/components/SummaryCard.tsx

@@ -21,7 +21,13 @@ export const SummaryCard: React.FC<SummaryCardProps> = ({
 }) => {
   const {colors, typography, elevation, shape, spacing} = useTheme();
   return (
-    <View style={[styles.card, {backgroundColor: colors.surfaceContainerLow, ...elevation.level1}, style]}>
+    <View style={[styles.card, {
+      backgroundColor: colors.surfaceContainerLow,
+      borderRadius: shape.small,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
+      ...elevation.level1
+    }, style]}>
       <View style={styles.cardHeader}>
         {icon && <View style={styles.iconContainer}>{icon}</View>}
         <Text style={[styles.cardTitle, {color: colors.onSurfaceVariant}]}>{title}</Text>
@@ -36,7 +42,6 @@ export const SummaryCard: React.FC<SummaryCardProps> = ({
 
 const styles = StyleSheet.create({
   card: {
-    borderRadius: 16,
     padding: 16,
     shadowColor: '#000',
     shadowOffset: {width: 0, height: 2},

src/components/TransactionItem.tsx

@@ -76,7 +76,7 @@ const styles = StyleSheet.create({
   iconCircle: {
     width: 44,
     height: 44,
-    borderRadius: 22,
+    borderRadius: 4,
     justifyContent: 'center',
     alignItems: 'center',
   },

src/components/dashboard/FinancialHealthGauges.tsx

@@ -187,6 +187,8 @@ function makeStyles(theme: MD3Theme) {
       flex: 1,
       backgroundColor: colors.surfaceContainerLow,
       borderRadius: shape.medium,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
       padding: spacing.lg,
       ...elevation.level1,
     },
@@ -236,6 +238,8 @@ function makeStyles(theme: MD3Theme) {
       marginTop: spacing.md,
       backgroundColor: colors.surfaceContainerLow,
       borderRadius: shape.medium,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
       padding: spacing.lg,
       ...elevation.level1,
     },

src/components/dashboard/NetWorthHeroCard.tsx

@@ -4,16 +4,18 @@
  */
 
 import React, {useMemo} from 'react';
-import {View, Text, StyleSheet} from 'react-native';
+import {View, Text, StyleSheet, Dimensions} from 'react-native';
 import {LineChart} from 'react-native-gifted-charts';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import Animated, {FadeInDown} from 'react-native-reanimated';
+import Animated, {FadeInDown, FadeIn} from 'react-native-reanimated';
 
 import {useTheme} from '../../theme';
 import type {MD3Theme} from '../../theme';
 import {formatCurrency, formatCompact} from '../../utils';
 import type {Currency, NetWorthSnapshot} from '../../types';
 
+const {width: SCREEN_WIDTH} = Dimensions.get('window');
+
 interface NetWorthHeroCardProps {
   netWorth: number;
   totalAssets: number;
@@ -39,10 +41,26 @@ export const NetWorthHeroCard: React.FC<NetWorthHeroCardProps> = ({
     }));
   }, [history]);
 
+  // Calculate trend percentage from history
+  const trendPercentage = useMemo(() => {
+    if (history.length < 2) return null;
+    const latest = history[history.length - 1].netWorth;
+    const previous = history[history.length - 2].netWorth;
+    if (previous === 0) return null;
+    return ((latest - previous) / Math.abs(previous)) * 100;
+  }, [history]);
+
   const isPositive = netWorth >= 0;
+  const isTrendUp = trendPercentage && trendPercentage > 0;
 
   return (
     <Animated.View entering={FadeInDown.duration(500).springify()} style={s.card}>
+      {/* Decorative Background Pattern */}
+      <View style={s.decorativeBackground}>
+        <View style={[s.decorCircle, {backgroundColor: theme.colors.primary + '08'}]} />
+        <View style={[s.decorCircle2, {backgroundColor: theme.colors.tertiary + '06'}]} />
+      </View>
+
       {/* Sparkline Background */}
       {sparklineData.length >= 2 && (
         <View style={s.sparklineContainer}>
@@ -55,69 +73,127 @@ export const NetWorthHeroCard: React.FC<NetWorthHeroCardProps> = ({
             hideAxesAndRules
             color={
               theme.isDark
-                ? theme.colors.primaryContainer + '40'
-                : theme.colors.primary + '25'
+                ? theme.colors.primaryContainer + '60'
+                : theme.colors.primary + '35'
             }
             startFillColor={
               theme.isDark
-                ? theme.colors.primaryContainer + '20'
-                : theme.colors.primary + '12'
+                ? theme.colors.primaryContainer + '25'
+                : theme.colors.primary + '15'
             }
             endFillColor="transparent"
-            thickness={2}
-            width={280}
-            height={100}
+            thickness={2.5}
+            width={SCREEN_WIDTH - 80}
+            height={120}
             adjustToWidth
             isAnimated
             animationDuration={800}
             initialSpacing={0}
             endSpacing={0}
-            yAxisOffset={Math.min(...sparklineData.map(d => d.value)) * 0.95}
+            yAxisOffset={Math.min(...sparklineData.map(d => d.value)) * 0.92}
           />
         </View>
       )}
 
       {/* Content Overlay */}
       <View style={s.content}>
-        <View style={s.labelRow}>
-          <Icon
-            name="chart-line-variant"
-            size={16}
-            color={theme.colors.onSurfaceVariant}
-          />
-          <Text style={s.label}>NET WORTH</Text>
+        {/* Header with trend badge */}
+        <View style={s.headerRow}>
+          <View style={s.labelRow}>
+            <Icon
+              name="chart-line-variant"
+              size={18}
+              color={theme.colors.onSurfaceVariant}
+            />
+            <Text style={s.label}>NET WORTH</Text>
+          </View>
+          {trendPercentage !== null && (
+            <Animated.View entering={FadeIn.delay(300)} style={[s.trendBadge, {
+              backgroundColor: isTrendUp 
+                ? theme.colors.successContainer 
+                : theme.colors.errorContainer,
+            }]}>
+              <Icon 
+                name={isTrendUp ? 'trending-up' : 'trending-down'} 
+                size={14} 
+                color={isTrendUp ? theme.colors.success : theme.colors.error}
+              />
+              <Text style={[s.trendText, {
+                color: isTrendUp ? theme.colors.success : theme.colors.error,
+              }]}>
+                {Math.abs(trendPercentage).toFixed(1)}%
+              </Text>
+            </Animated.View>
+          )}
         </View>
 
+        {/* Main Value */}
         <Text
           style={[
             s.value,
-            {color: isPositive ? theme.colors.success : theme.colors.error},
+            {color: isPositive ? theme.colors.onSurface : theme.colors.error},
           ]}
           numberOfLines={1}
           adjustsFontSizeToFit>
           {formatCurrency(netWorth, currency)}
         </Text>
 
-        {/* Asset / Liability Split */}
-        <View style={s.splitRow}>
-          <View style={s.splitItem}>
-            <View style={[s.splitDot, {backgroundColor: theme.colors.success}]} />
-            <View>
-              <Text style={s.splitLabel}>Assets</Text>
-              <Text style={[s.splitValue, {color: theme.colors.success}]}>
-                {formatCompact(totalAssets, currency)}
-              </Text>
+        {/* Asset / Liability Split - Enhanced */}
+        <View style={s.splitContainer}>
+          <Animated.View entering={FadeIn.delay(200)} style={s.splitRow}>
+            <View style={s.splitItem}>
+              <View style={[s.iconWrapper, {
+                backgroundColor: theme.colors.successContainer,
+              }]}>
+                <Icon 
+                  name="trending-up" 
+                  size={16} 
+                  color={theme.colors.success}
+                />
+              </View>
+              <View style={s.splitTextContainer}>
+                <Text style={s.splitLabel}>Assets</Text>
+                <Text style={[s.splitValue, {color: theme.colors.success}]}>
+                  {formatCompact(totalAssets, currency)}
+                </Text>
+              </View>
             </View>
-          </View>
-          <View style={s.splitDivider} />
-          <View style={s.splitItem}>
-            <View style={[s.splitDot, {backgroundColor: theme.colors.error}]} />
-            <View>
-              <Text style={s.splitLabel}>Liabilities</Text>
-              <Text style={[s.splitValue, {color: theme.colors.error}]}>
-                {formatCompact(totalLiabilities, currency)}
-              </Text>
+
+            <View style={s.splitDivider} />
+
+            <View style={s.splitItem}>
+              <View style={[s.iconWrapper, {
+                backgroundColor: theme.colors.errorContainer,
+              }]}>
+                <Icon 
+                  name="trending-down" 
+                  size={16} 
+                  color={theme.colors.error}
+                />
+              </View>
+              <View style={s.splitTextContainer}>
+                <Text style={s.splitLabel}>Liabilities</Text>
+                <Text style={[s.splitValue, {color: theme.colors.error}]}>
+                  {formatCompact(totalLiabilities, currency)}
+                </Text>
+              </View>
             </View>
+          </Animated.View>
+
+          {/* Visual Progress Bar */}
+          <View style={s.progressBar}>
+            <View 
+              style={[s.progressAsset, {
+                flex: totalAssets || 1,
+                backgroundColor: theme.colors.success,
+              }]} 
+            />
+            <View 
+              style={[s.progressLiability, {
+                flex: totalLiabilities || 0.1,
+                backgroundColor: theme.colors.error,
+              }]} 
+            />
           </View>
         </View>
       </View>
@@ -131,70 +207,143 @@ function makeStyles(theme: MD3Theme) {
     card: {
       marginHorizontal: spacing.xl,
       marginTop: spacing.md,
-      borderRadius: shape.extraLarge,
+      borderRadius: shape.medium,
+      borderWidth: 1.5,
+      borderColor: colors.outlineVariant,
       backgroundColor: colors.surfaceContainerLow,
       overflow: 'hidden',
       ...elevation.level3,
     },
+    decorativeBackground: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      overflow: 'hidden',
+    },
+    decorCircle: {
+      position: 'absolute',
+      width: 200,
+      height: 200,
+      borderRadius: 100,
+      top: -60,
+      right: -40,
+    },
+    decorCircle2: {
+      position: 'absolute',
+      width: 150,
+      height: 150,
+      borderRadius: 75,
+      bottom: -30,
+      left: -20,
+    },
     sparklineContainer: {
       position: 'absolute',
       bottom: 0,
       left: 0,
       right: 0,
-      opacity: 0.6,
+      opacity: 0.7,
       overflow: 'hidden',
-      borderRadius: shape.extraLarge,
     },
     content: {
       padding: spacing.xxl,
+      paddingTop: spacing.xl,
+      paddingBottom: spacing.lg,
+    },
+    headerRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: spacing.sm,
     },
     labelRow: {
       flexDirection: 'row',
       alignItems: 'center',
       gap: spacing.xs,
-      marginBottom: spacing.sm,
     },
     label: {
-      ...typography.labelSmall,
+      ...typography.labelMedium,
       color: colors.onSurfaceVariant,
-      letterSpacing: 1.5,
+      letterSpacing: 1.2,
+      fontWeight: '600',
+    },
+    trendBadge: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+      paddingHorizontal: spacing.sm,
+      paddingVertical: 4,
+      borderRadius: shape.small,
+    },
+    trendText: {
+      ...typography.labelSmall,
+      fontWeight: '700',
     },
     value: {
       ...typography.displaySmall,
-      fontWeight: '700',
+      fontWeight: '800',
       marginBottom: spacing.lg,
+      marginTop: spacing.xs,
+      letterSpacing: -0.5,
+    },
+    splitContainer: {
+      gap: spacing.md,
     },
     splitRow: {
       flexDirection: 'row',
       alignItems: 'center',
       backgroundColor: colors.surfaceContainer,
       borderRadius: shape.medium,
-      padding: spacing.md,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant + '50',
+      padding: spacing.lg,
     },
     splitItem: {
       flex: 1,
       flexDirection: 'row',
       alignItems: 'center',
       gap: spacing.sm,
-      justifyContent: 'center',
     },
-    splitDot: {
-      width: 8,
-      height: 8,
-      borderRadius: 4,
+    iconWrapper: {
+      width: 32,
+      height: 32,
+      borderRadius: shape.small,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    splitTextContainer: {
+      flex: 1,
     },
     splitLabel: {
       ...typography.labelSmall,
       color: colors.onSurfaceVariant,
+      marginBottom: 2,
     },
     splitValue: {
-      ...typography.titleSmall,
+      ...typography.titleMedium,
       fontWeight: '700',
     },
     splitDivider: {
       width: 1,
-      height: 28,
+      height: 36,
       backgroundColor: colors.outlineVariant,
+      marginHorizontal: spacing.xs,
+    },
+    progressBar: {
+      flexDirection: 'row',
+      height: 6,
+      borderRadius: 3,
+      overflow: 'hidden',
+      backgroundColor: colors.surfaceContainerHighest,
+    },
+    progressAsset: {
+      borderTopLeftRadius: 3,
+      borderBottomLeftRadius: 3,
+    },
+    progressLiability: {
+      borderTopRightRadius: 3,
+      borderBottomRightRadius: 3,
     },
   });
 }

src/components/dashboard/RecentActivityList.tsx

@@ -174,7 +174,7 @@ function makeStyles(theme: MD3Theme) {
     iconCircle: {
       width: 40,
       height: 40,
-      borderRadius: 20,
+      borderRadius: 4,
       justifyContent: 'center',
       alignItems: 'center',
     },

src/components/dashboard/WealthDistributionChart.tsx

@@ -126,6 +126,8 @@ function makeStyles(theme: MD3Theme) {
       marginTop: spacing.xl,
       backgroundColor: colors.surfaceContainerLow,
       borderRadius: shape.large,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
       padding: spacing.xl,
       ...elevation.level1,
     },
@@ -164,7 +166,7 @@ function makeStyles(theme: MD3Theme) {
     legendDot: {
       width: 10,
       height: 10,
-      borderRadius: 5,
+      borderRadius: 2,
     },
     legendText: {
       flex: 1,

src/components/index.ts

@@ -2,6 +2,8 @@ export {SummaryCard} from './SummaryCard';
 export {TransactionItem} from './TransactionItem';
 export {EmptyState} from './EmptyState';
 export {SectionHeader} from './SectionHeader';
+export {FloatingModal} from './FloatingModal';
+export {SettingsSelectionSheet} from './SettingsSelectionSheet';
 export {
   CustomBottomSheet,
   BottomSheetInput,
@@ -9,3 +11,4 @@ export {
   triggerHaptic,
 } from './CustomBottomSheet';
 export type {CustomBottomSheetHandle} from './CustomBottomSheet';
+export type {SettingsSelectionOption} from './SettingsSelectionSheet';

src/constants/appVersion.ts

@@ -0,0 +1,3 @@
+export const APP_VERSION = '0.1.4';
+export const APP_BUILD_NUMBER = 1;
+export const APP_VERSION_LABEL = `${APP_VERSION} (${APP_BUILD_NUMBER})`;

src/constants/index.ts

@@ -1,5 +1,7 @@
 import {Category, ExchangeRates, PaymentMethod} from '../types';
 
+export * from './appVersion';
+
 // ─── Default Expense Categories (Indian Context) ────────────────────
 
 export const DEFAULT_EXPENSE_CATEGORIES: Omit<Category, 'id' | 'createdAt'>[] = [
@@ -48,6 +50,7 @@ export const STATIC_EXCHANGE_RATES: ExchangeRates = {
   INR: 1,
   USD: 84.5, // 1 USD = 84.5 INR
   EUR: 91.2, // 1 EUR = 91.2 INR
+  GBP: 106.8, // 1 GBP = 106.8 INR
 };
 
 // ─── Currency Symbols ────────────────────────────────────────────────
@@ -56,6 +59,7 @@ export const CURRENCY_SYMBOLS: Record<string, string> = {
   INR: '₹',
   USD: '$',
   EUR: '€',
+  GBP: '£',
 };
 
 // ─── Theme Colors ────────────────────────────────────────────────────

src/i18n/en.ts

@@ -18,7 +18,7 @@ export default {
     // ─── Tabs ───
     tabs: {
       dashboard: 'Dashboard',
-      expenses: 'Expenses',
+      expenses: 'Transactions',
       netWorth: 'Net Worth',
       settings: 'Settings',
     },
@@ -38,9 +38,9 @@ export default {
       lastMonth: 'Last Month',
     },
 
-    // ─── Expenses ───
+    // ─── Transactions ───
     expenses: {
-      title: 'Expenses',
+      title: 'Transactions',
       addExpense: 'Add Expense',
       addIncome: 'Add Income',
       amount: 'Amount',

src/navigation/AppNavigator.tsx

@@ -17,7 +17,7 @@ const Tab = createBottomTabNavigator();
 
 const TAB_ICONS: Record<string, {focused: string; unfocused: string}> = {
   Dashboard: {focused: 'view-dashboard', unfocused: 'view-dashboard-outline'},
-  Expenses: {focused: 'receipt', unfocused: 'receipt'},
+  Transactions: {focused: 'receipt', unfocused: 'receipt'},
   NetWorth: {focused: 'chart-line', unfocused: 'chart-line'},
   Settings: {focused: 'cog', unfocused: 'cog-outline'},
 };
@@ -71,7 +71,7 @@ const AppNavigator: React.FC = () => {
           options={{tabBarLabel: t('tabs.dashboard')}}
         />
         <Tab.Screen
-          name="Expenses"
+          name="Transactions"
           component={ExpensesScreen}
           options={{tabBarLabel: t('tabs.expenses')}}
         />

src/screens/DashboardScreen.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect} from 'react';
+import React, {useCallback} from 'react';
 import {
   View,
   Text,
@@ -15,7 +15,7 @@ import {BarChart, PieChart} from 'react-native-gifted-charts';
 
 import {SummaryCard, SectionHeader, TransactionItem, EmptyState} from '../components';
 import {useSettingsStore, useNetWorthStore, useExpenseStore} from '../store';
-import {formatCurrency, formatCompact, percentageChange} from '../utils';
+import {formatCurrency, formatCompact} from '../utils';
 import {COLORS} from '../constants';
 import {useThemeColors, useIsDarkTheme} from '../hooks';
 
@@ -280,7 +280,9 @@ const styles = StyleSheet.create({
     backgroundColor: COLORS.primary + '15',
     paddingHorizontal: 12,
     paddingVertical: 6,
-    borderRadius: 20,
+    borderRadius: 0,
+    borderWidth: 1,
+    borderColor: COLORS.primary + '30',
   },
   currencyText: {
     fontSize: 13,
@@ -297,7 +299,9 @@ const styles = StyleSheet.create({
     backgroundColor: COLORS.surface,
     margin: 20,
     marginTop: 12,
-    borderRadius: 20,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: COLORS.border,
     padding: 24,
     shadowColor: '#000',
     shadowOffset: {width: 0, height: 4},
@@ -359,7 +363,9 @@ const styles = StyleSheet.create({
   chartCard: {
     backgroundColor: COLORS.surface,
     marginHorizontal: 20,
-    borderRadius: 16,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: COLORS.border,
     padding: 20,
     alignItems: 'center',
     shadowColor: '#000',
@@ -396,7 +402,7 @@ const styles = StyleSheet.create({
   legendDot: {
     width: 10,
     height: 10,
-    borderRadius: 5,
+    borderRadius: 2,
     marginRight: 8,
   },
   legendText: {
@@ -414,7 +420,9 @@ const styles = StyleSheet.create({
   transactionsList: {
     backgroundColor: COLORS.surface,
     marginHorizontal: 20,
-    borderRadius: 16,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: COLORS.border,
     overflow: 'hidden',
     shadowColor: '#000',
     shadowOffset: {width: 0, height: 2},

src/screens/ExpensesScreen.tsx

@@ -222,26 +222,29 @@ const ExpensesScreen: React.FC = () => {
         <Text style={s.headerTitle}>{t('expenses.title')}</Text>
       </Animated.View>
 
-      <FlatList
-        data={transactions}
-        keyExtractor={item => item.id}
-        renderItem={({item}) => (
-          <TransactionItem transaction={item} onPress={handleDelete} />
-        )}
-        ListHeaderComponent={renderHeader}
-        ListEmptyComponent={
-          <EmptyState
-            icon="receipt"
-            title={t('expenses.noTransactions')}
-            subtitle={t('expenses.startTracking')}
-          />
-        }
-        ItemSeparatorComponent={() => (
-          <View style={[s.separator, {backgroundColor: colors.outlineVariant + '30'}]} />
-        )}
-        contentContainerStyle={{paddingBottom: 80 + insets.bottom}}
-        showsVerticalScrollIndicator={false}
-      />
+      {renderHeader()}
+
+      <View style={s.listContainer}>
+        <FlatList
+          data={transactions}
+          keyExtractor={item => item.id}
+          renderItem={({item}) => (
+            <TransactionItem transaction={item} onPress={handleDelete} />
+          )}
+          ListEmptyComponent={
+            <EmptyState
+              icon="receipt"
+              title={t('expenses.noTransactions')}
+              subtitle={t('expenses.startTracking')}
+            />
+          }
+          ItemSeparatorComponent={() => (
+            <View style={[s.separator, {backgroundColor: colors.outlineVariant + '30'}]} />
+          )}
+          contentContainerStyle={{paddingBottom: 80 + insets.bottom}}
+          showsVerticalScrollIndicator={false}
+        />
+      </View>
 
       {/* FAB */}
       <Pressable
@@ -477,11 +480,13 @@ function makeStyles(theme: MD3Theme) {
       flexDirection: 'row',
       gap: spacing.md,
       marginTop: spacing.sm,
-      marginBottom: spacing.lg,
+      marginBottom: spacing.xs,
     },
     summaryItem: {
       flex: 1,
       borderRadius: shape.large,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
       padding: spacing.lg,
       alignItems: 'center',
     },
@@ -495,6 +500,18 @@ function makeStyles(theme: MD3Theme) {
       fontWeight: '700',
       marginTop: 2,
     },
+    listContainer: {
+      flex: 1,
+      backgroundColor: colors.surface,
+      marginHorizontal: spacing.xl,
+      marginTop: spacing.xs,
+      marginBottom: spacing.md,
+      borderRadius: shape.large,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
+      overflow: 'hidden',
+      ...elevation.level1,
+    },
     separator: {height: 1, marginLeft: 72},
     fab: {
       position: 'absolute',
@@ -511,6 +528,8 @@ function makeStyles(theme: MD3Theme) {
       flexDirection: 'row',
       backgroundColor: colors.surfaceContainerLow,
       borderRadius: shape.medium,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
       padding: 4,
       marginBottom: spacing.xl,
     },

src/screens/ModernDashboard.tsx

@@ -152,7 +152,7 @@ const ModernDashboard: React.FC = () => {
         <RecentActivityList
           transactions={transactions}
           currency={baseCurrency}
-          onViewAll={() => navigation.navigate('Expenses')}
+          onViewAll={() => navigation.navigate('Transactions')}
         />
 
         <View style={s.bottomSpacer} />
@@ -196,7 +196,9 @@ function makeStyles(theme: MD3Theme) {
       backgroundColor: colors.primaryContainer,
       paddingHorizontal: spacing.md,
       paddingVertical: spacing.sm,
-      borderRadius: 20,
+      borderRadius: 4,
+      borderWidth: 1,
+      borderColor: colors.outline,
     },
     currencyText: {
       ...typography.labelMedium,

src/screens/NetWorthScreen.tsx

@@ -545,6 +545,8 @@ function makeStyles(theme: MD3Theme) {
       marginHorizontal: spacing.xl,
       marginTop: spacing.md,
       borderRadius: shape.extraLarge,
+      borderWidth: 1.5,
+      borderColor: colors.outlineVariant,
       padding: spacing.xl,
       ...elevation.level2,
     },
@@ -586,6 +588,8 @@ function makeStyles(theme: MD3Theme) {
       backgroundColor: colors.surfaceContainerLow,
       marginHorizontal: spacing.xl,
       borderRadius: shape.large,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
       padding: spacing.xl,
       alignItems: 'center',
       ...elevation.level1,
@@ -594,6 +598,8 @@ function makeStyles(theme: MD3Theme) {
       backgroundColor: colors.surfaceContainerLow,
       marginHorizontal: spacing.xl,
       borderRadius: shape.large,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
       overflow: 'hidden',
       ...elevation.level1,
     },
@@ -610,7 +616,7 @@ function makeStyles(theme: MD3Theme) {
     listIcon: {
       width: 42,
       height: 42,
-      borderRadius: 21,
+      borderRadius: 4,
       justifyContent: 'center',
       alignItems: 'center',
     },

src/screens/SettingsScreen.tsx

@@ -19,25 +19,27 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import Animated, {FadeIn, FadeInDown} from 'react-native-reanimated';
 
 import {
-  CustomBottomSheet,
+  SettingsSelectionSheet,
   triggerHaptic,
 } from '../components';
-import type {CustomBottomSheetHandle} from '../components';
+import type {CustomBottomSheetHandle, SettingsSelectionOption} from '../components';
+import {APP_VERSION_LABEL} from '../constants';
 import {useSettingsStore} from '../store';
 import {useTheme} from '../theme';
 import type {MD3Theme} from '../theme';
 import {Currency} from '../types';
 
-const CURRENCIES: {label: string; value: Currency; icon: string}[] = [
+const CURRENCIES: SettingsSelectionOption<Currency>[] = [
   {label: 'Indian Rupee (\u20B9)', value: 'INR', icon: 'currency-inr'},
   {label: 'US Dollar ($)', value: 'USD', icon: 'currency-usd'},
   {label: 'Euro (\u20AC)', value: 'EUR', icon: 'currency-eur'},
   {label: 'British Pound (\u00A3)', value: 'GBP', icon: 'currency-gbp'},
 ];
 
-const THEMES: {label: string; value: 'light' | 'dark' | 'system'; icon: string}[] = [
+const THEMES: SettingsSelectionOption<'light' | 'dark' | 'black' | 'system'>[] = [
   {label: 'Light', value: 'light', icon: 'white-balance-sunny'},
   {label: 'Dark', value: 'dark', icon: 'moon-waning-crescent'},
+  {label: 'Black', value: 'black', icon: 'theme-light-dark'},
   {label: 'System', value: 'system', icon: 'theme-light-dark'},
 ];
 
@@ -228,7 +230,7 @@ const SettingsScreen: React.FC = () => {
               icon="information"
               iconColor="#7E57C2"
               label={t('settings.version')}
-              value="0.1.0 Alpha"
+              value={APP_VERSION_LABEL}
             />
           </View>
         </Animated.View>
@@ -238,79 +240,25 @@ const SettingsScreen: React.FC = () => {
         </Text>
       </ScrollView>
 
-      {/* Currency Selection Bottom Sheet */}
-      <CustomBottomSheet
+      <SettingsSelectionSheet
         ref={currencySheetRef}
         title={t('settings.baseCurrency')}
+        options={CURRENCIES}
+        selectedValue={baseCurrency}
+        onSelect={setBaseCurrency}
         enableDynamicSizing
-        snapPoints={['40%']}>
-        {CURRENCIES.map(c => (
-          <Pressable
-            key={c.value}
-            style={[
-              s.selectionRow,
-              c.value === baseCurrency && {backgroundColor: colors.primaryContainer},
-            ]}
-            onPress={() => {
-              triggerHaptic('selection');
-              setBaseCurrency(c.value);
-              currencySheetRef.current?.dismiss();
-            }}>
-            <Icon
-              name={c.icon}
-              size={20}
-              color={c.value === baseCurrency ? colors.primary : colors.onSurfaceVariant}
-            />
-            <Text
-              style={[
-                s.selectionLabel,
-                c.value === baseCurrency && {color: colors.onPrimaryContainer, fontWeight: '600'},
-              ]}>
-              {c.label}
-            </Text>
-            {c.value === baseCurrency && (
-              <Icon name="check" size={20} color={colors.primary} />
-            )}
-          </Pressable>
-        ))}
-      </CustomBottomSheet>
+        snapPoints={['40%']}
+      />
 
-      {/* Theme Selection Bottom Sheet */}
-      <CustomBottomSheet
+      <SettingsSelectionSheet
         ref={themeSheetRef}
         title={t('settings.theme')}
+        options={THEMES}
+        selectedValue={themeSetting}
+        onSelect={setTheme}
         enableDynamicSizing
-        snapPoints={['35%']}>
-        {THEMES.map(th => (
-          <Pressable
-            key={th.value}
-            style={[
-              s.selectionRow,
-              th.value === themeSetting && {backgroundColor: colors.primaryContainer},
-            ]}
-            onPress={() => {
-              triggerHaptic('selection');
-              setTheme(th.value);
-              themeSheetRef.current?.dismiss();
-            }}>
-            <Icon
-              name={th.icon}
-              size={20}
-              color={th.value === themeSetting ? colors.primary : colors.onSurfaceVariant}
-            />
-            <Text
-              style={[
-                s.selectionLabel,
-                th.value === themeSetting && {color: colors.onPrimaryContainer, fontWeight: '600'},
-              ]}>
-              {th.label}
-            </Text>
-            {th.value === themeSetting && (
-              <Icon name="check" size={20} color={colors.primary} />
-            )}
-          </Pressable>
-        ))}
-      </CustomBottomSheet>
+        snapPoints={['35%']}
+      />
     </SafeAreaView>
   );
 };
@@ -346,6 +294,8 @@ function makeStyles(theme: MD3Theme) {
     sectionCard: {
       backgroundColor: colors.surfaceContainerLow,
       borderRadius: shape.large,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
       overflow: 'hidden',
       ...elevation.level1,
     },
@@ -361,19 +311,5 @@ function makeStyles(theme: MD3Theme) {
       marginTop: spacing.xxxl,
       marginBottom: spacing.xxxl + 8,
     },
-    selectionRow: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: spacing.md,
-      paddingVertical: spacing.lg,
-      paddingHorizontal: spacing.lg,
-      borderRadius: shape.medium,
-      marginBottom: spacing.xs,
-    },
-    selectionLabel: {
-      flex: 1,
-      ...typography.bodyLarge,
-      color: colors.onSurface,
-    },
   });
 }

src/store/mmkv.ts

@@ -37,7 +37,7 @@ export const mmkvStorage = {
     getStorage().set(KEYS.LOCALE, locale);
   },
 
-  getTheme: (): 'light' | 'dark' | 'system' => {
+  getTheme: (): 'light' | 'dark' | 'black' | 'system' => {
     return (getStorage().getString(KEYS.THEME) as AppSettings['theme']) || 'light';
   },
   setTheme: (theme: AppSettings['theme']) => {

src/theme/ThemeProvider.tsx

@@ -8,7 +8,7 @@
 import React, {createContext, useContext, useMemo} from 'react';
 import {useColorScheme} from 'react-native';
 import {useSettingsStore} from '../store/settingsStore';
-import {LightTheme, DarkTheme} from './md3';
+import {LightTheme, DarkTheme, BlackTheme} from './md3';
 import type {MD3Theme} from './md3';
 
 const ThemeContext = createContext<MD3Theme>(LightTheme);
@@ -18,6 +18,7 @@ export const ThemeProvider: React.FC<{children: React.ReactNode}> = ({children})
   const systemScheme = useColorScheme();
 
   const resolvedTheme = useMemo<MD3Theme>(() => {
+    if (themeSetting === 'black') return BlackTheme;
     if (themeSetting === 'dark') return DarkTheme;
     if (themeSetting === 'light') return LightTheme;
     return systemScheme === 'dark' ? DarkTheme : LightTheme;

src/theme/index.ts

@@ -1,12 +1,14 @@
 export {
   MD3LightColors,
   MD3DarkColors,
+  MD3BlackColors,
   MD3Typography,
   MD3Elevation,
   MD3Shape,
   Spacing,
   LightTheme,
   DarkTheme,
+  BlackTheme,
 } from './md3';
 export type {MD3Theme, MD3ColorScheme} from './md3';
 export {ThemeProvider, useTheme} from './ThemeProvider';

src/theme/md3.ts

@@ -9,64 +9,64 @@
 
 export const MD3LightColors = {
   // Primary
-  primary: '#6750A4',
+  primary: '#4078F2',
   onPrimary: '#FFFFFF',
-  primaryContainer: '#EADDFF',
-  onPrimaryContainer: '#21005D',
+  primaryContainer: '#DCE6FF',
+  onPrimaryContainer: '#1E3E8A',
 
   // Secondary
-  secondary: '#625B71',
+  secondary: '#A626A4',
   onSecondary: '#FFFFFF',
-  secondaryContainer: '#E8DEF8',
-  onSecondaryContainer: '#1D192B',
+  secondaryContainer: '#F3E5F5',
+  onSecondaryContainer: '#4E1A4C',
 
   // Tertiary (Fintech Teal)
-  tertiary: '#00897B',
+  tertiary: '#0184BC',
   onTertiary: '#FFFFFF',
-  tertiaryContainer: '#A7F3D0',
-  onTertiaryContainer: '#00382E',
+  tertiaryContainer: '#D8F1FC',
+  onTertiaryContainer: '#004B6C',
 
   // Error
-  error: '#B3261E',
+  error: '#E45649',
   onError: '#FFFFFF',
-  errorContainer: '#F9DEDC',
-  onErrorContainer: '#410E0B',
+  errorContainer: '#FCE3E1',
+  onErrorContainer: '#7A211C',
 
   // Success (custom MD3 extension)
-  success: '#1B873B',
+  success: '#50A14F',
   onSuccess: '#FFFFFF',
-  successContainer: '#D4EDDA',
-  onSuccessContainer: '#0A3D1B',
+  successContainer: '#DDF3D1',
+  onSuccessContainer: '#1F4D1E',
 
   // Warning (custom MD3 extension)
-  warning: '#E65100',
+  warning: '#C18401',
   onWarning: '#FFFFFF',
-  warningContainer: '#FFE0B2',
-  onWarningContainer: '#3E2723',
+  warningContainer: '#F8EACB',
+  onWarningContainer: '#5C4300',
 
   // Surface
-  background: '#FFFBFE',
-  onBackground: '#1C1B1F',
-  surface: '#FFFBFE',
-  onSurface: '#1C1B1F',
-  surfaceVariant: '#E7E0EC',
-  onSurfaceVariant: '#49454F',
-  surfaceDim: '#DED8E1',
-  surfaceBright: '#FFF8FF',
+  background: '#FAFAFA',
+  onBackground: '#383A42',
+  surface: '#FAFAFA',
+  onSurface: '#383A42',
+  surfaceVariant: '#E9ECF3',
+  onSurfaceVariant: '#4B5260',
+  surfaceDim: '#EDEFF2',
+  surfaceBright: '#FFFFFF',
   surfaceContainerLowest: '#FFFFFF',
-  surfaceContainerLow: '#F7F2FA',
-  surfaceContainer: '#F3EDF7',
-  surfaceContainerHigh: '#ECE6F0',
-  surfaceContainerHighest: '#E6E0E9',
+  surfaceContainerLow: '#F4F5F7',
+  surfaceContainer: '#EEF0F4',
+  surfaceContainerHigh: '#E8EBF0',
+  surfaceContainerHighest: '#E2E6EC',
 
   // Outline
-  outline: '#79747E',
-  outlineVariant: '#CAC4D0',
+  outline: '#7F8693',
+  outlineVariant: '#BCC3CF',
 
   // Inverse
-  inverseSurface: '#313033',
-  inverseOnSurface: '#F4EFF4',
-  inversePrimary: '#D0BCFF',
+  inverseSurface: '#383A42',
+  inverseOnSurface: '#FAFAFA',
+  inversePrimary: '#8FB1FF',
 
   // Scrim & Shadow
   scrim: '#000000',
@@ -74,160 +74,180 @@ export const MD3LightColors = {
 
   // ─── App-Specific Semantic Colors ─────────────────────────────
 
-  income: '#1B873B',
-  expense: '#B3261E',
-  asset: '#6750A4',
-  liability: '#E65100',
+  income: '#50A14F',
+  expense: '#E45649',
+  asset: '#4078F2',
+  liability: '#C18401',
 
   // Chart palette (MD3 tonal)
   chartColors: [
-    '#6750A4', '#00897B', '#1E88E5', '#E65100',
-    '#8E24AA', '#00ACC1', '#43A047', '#F4511E',
-    '#5C6BC0', '#FFB300',
+    '#4078F2', '#A626A4', '#0184BC', '#50A14F',
+    '#E45649', '#C18401', '#56B6C2', '#C678DD',
+    '#61AFEF', '#D19A66',
   ],
 };
 
 export const MD3DarkColors: typeof MD3LightColors = {
   // Primary
-  primary: '#D0BCFF',
-  onPrimary: '#381E72',
-  primaryContainer: '#4F378B',
-  onPrimaryContainer: '#EADDFF',
+  primary: '#61AFEF',
+  onPrimary: '#1B2838',
+  primaryContainer: '#2C3E55',
+  onPrimaryContainer: '#D6E9FF',
 
   // Secondary
-  secondary: '#CCC2DC',
-  onSecondary: '#332D41',
-  secondaryContainer: '#4A4458',
-  onSecondaryContainer: '#E8DEF8',
+  secondary: '#C678DD',
+  onSecondary: '#2F1B36',
+  secondaryContainer: '#4B2F55',
+  onSecondaryContainer: '#F0D7F6',
 
   // Tertiary
-  tertiary: '#4DB6AC',
-  onTertiary: '#003730',
-  tertiaryContainer: '#005048',
-  onTertiaryContainer: '#A7F3D0',
+  tertiary: '#56B6C2',
+  onTertiary: '#102D31',
+  tertiaryContainer: '#1F4A50',
+  onTertiaryContainer: '#CDEFF3',
 
   // Error
-  error: '#F2B8B5',
-  onError: '#601410',
-  errorContainer: '#8C1D18',
-  onErrorContainer: '#F9DEDC',
+  error: '#E06C75',
+  onError: '#3A1519',
+  errorContainer: '#5A232A',
+  onErrorContainer: '#FFD9DC',
 
   // Success
-  success: '#81C784',
-  onSuccess: '#0A3D1B',
-  successContainer: '#1B5E20',
-  onSuccessContainer: '#D4EDDA',
+  success: '#98C379',
+  onSuccess: '#1B2A17',
+  successContainer: '#2D4524',
+  onSuccessContainer: '#DDF3D1',
 
   // Warning
-  warning: '#FFB74D',
-  onWarning: '#3E2723',
-  warningContainer: '#BF360C',
-  onWarningContainer: '#FFE0B2',
+  warning: '#E5C07B',
+  onWarning: '#342915',
+  warningContainer: '#5A4728',
+  onWarningContainer: '#FFE8C1',
 
   // Surface
-  background: '#141218',
-  onBackground: '#E6E0E9',
-  surface: '#141218',
-  onSurface: '#E6E0E9',
-  surfaceVariant: '#49454F',
-  onSurfaceVariant: '#CAC4D0',
-  surfaceDim: '#141218',
-  surfaceBright: '#3B383E',
-  surfaceContainerLowest: '#0F0D13',
-  surfaceContainerLow: '#1D1B20',
-  surfaceContainer: '#211F26',
-  surfaceContainerHigh: '#2B2930',
-  surfaceContainerHighest: '#36343B',
+  background: '#282C34',
+  onBackground: '#E6EAF0',
+  surface: '#282C34',
+  onSurface: '#E6EAF0',
+  surfaceVariant: '#3A404B',
+  onSurfaceVariant: '#BCC3CF',
+  surfaceDim: '#21252B',
+  surfaceBright: '#353B45',
+  surfaceContainerLowest: '#1E2228',
+  surfaceContainerLow: '#2B3038',
+  surfaceContainer: '#313741',
+  surfaceContainerHigh: '#393F4A',
+  surfaceContainerHighest: '#424955',
 
   // Outline
-  outline: '#938F99',
-  outlineVariant: '#49454F',
+  outline: '#8E97A8',
+  outlineVariant: '#5A6271',
 
   // Inverse
-  inverseSurface: '#E6E0E9',
-  inverseOnSurface: '#313033',
-  inversePrimary: '#6750A4',
+  inverseSurface: '#ABB2BF',
+  inverseOnSurface: '#282C34',
+  inversePrimary: '#4078F2',
 
   // Scrim & Shadow
   scrim: '#000000',
   shadow: '#000000',
 
   // App-Specific
-  income: '#81C784',
-  expense: '#F2B8B5',
-  asset: '#D0BCFF',
-  liability: '#FFB74D',
+  income: '#98C379',
+  expense: '#E06C75',
+  asset: '#61AFEF',
+  liability: '#E5C07B',
 
   chartColors: [
-    '#D0BCFF', '#4DB6AC', '#64B5F6', '#FFB74D',
-    '#CE93D8', '#4DD0E1', '#81C784', '#FF8A65',
-    '#9FA8DA', '#FFD54F',
+    '#61AFEF', '#C678DD', '#56B6C2', '#98C379',
+    '#E06C75', '#E5C07B', '#D19A66', '#ABB2BF',
+    '#7F848E', '#8BE9FD',
   ],
 };
 
+export const MD3BlackColors: typeof MD3LightColors = {
+  ...MD3DarkColors,
+  background: '#000000',
+  surface: '#000000',
+  surfaceDim: '#000000',
+  surfaceBright: '#0D0D0D',
+  surfaceContainerLowest: '#000000',
+  surfaceContainerLow: '#070707',
+  surfaceContainer: '#0E0E0E',
+  surfaceContainerHigh: '#141414',
+  surfaceContainerHighest: '#1B1B1B',
+  inverseSurface: '#F1F1F1',
+  inverseOnSurface: '#000000',
+  outline: '#767676',
+  outlineVariant: '#333333',
+};
+
 // ─── MD3 Typography Scale ────────────────────────────────────────────
 
-const fontFamily = 'System'; // Falls back to Roboto on Android, SF Pro on iOS
+const fontFamily = 'JetBrainsMono-Regular';
+const fontFamilyMedium = 'JetBrainsMono-Medium';
+const fontFamilySemiBold = 'JetBrainsMono-SemiBold';
+const fontFamilyBold = 'JetBrainsMono-Bold';
 
 export const MD3Typography = {
   displayLarge: {
-    fontFamily,
+    fontFamily: fontFamilyBold,
     fontSize: 57,
     fontWeight: '400' as const,
     lineHeight: 64,
     letterSpacing: -0.25,
   },
   displayMedium: {
-    fontFamily,
+    fontFamily: fontFamilyBold,
     fontSize: 45,
     fontWeight: '400' as const,
     lineHeight: 52,
     letterSpacing: 0,
   },
   displaySmall: {
-    fontFamily,
+    fontFamily: fontFamilySemiBold,
     fontSize: 36,
     fontWeight: '400' as const,
     lineHeight: 44,
     letterSpacing: 0,
   },
   headlineLarge: {
-    fontFamily,
+    fontFamily: fontFamilySemiBold,
     fontSize: 32,
     fontWeight: '400' as const,
     lineHeight: 40,
     letterSpacing: 0,
   },
   headlineMedium: {
-    fontFamily,
+    fontFamily: fontFamilySemiBold,
     fontSize: 28,
     fontWeight: '400' as const,
     lineHeight: 36,
     letterSpacing: 0,
   },
   headlineSmall: {
-    fontFamily,
+    fontFamily: fontFamilyMedium,
     fontSize: 24,
     fontWeight: '400' as const,
     lineHeight: 32,
     letterSpacing: 0,
   },
   titleLarge: {
-    fontFamily,
+    fontFamily: fontFamilyMedium,
     fontSize: 22,
     fontWeight: '500' as const,
     lineHeight: 28,
     letterSpacing: 0,
   },
   titleMedium: {
-    fontFamily,
+    fontFamily: fontFamilyMedium,
     fontSize: 16,
     fontWeight: '500' as const,
     lineHeight: 24,
     letterSpacing: 0.15,
   },
   titleSmall: {
-    fontFamily,
+    fontFamily: fontFamilyMedium,
     fontSize: 14,
     fontWeight: '500' as const,
     lineHeight: 20,
@@ -255,21 +275,21 @@ export const MD3Typography = {
     letterSpacing: 0.4,
   },
   labelLarge: {
-    fontFamily,
+    fontFamily: fontFamilyMedium,
     fontSize: 14,
     fontWeight: '500' as const,
     lineHeight: 20,
     letterSpacing: 0.1,
   },
   labelMedium: {
-    fontFamily,
+    fontFamily: fontFamilyMedium,
     fontSize: 12,
     fontWeight: '500' as const,
     lineHeight: 16,
     letterSpacing: 0.5,
   },
   labelSmall: {
-    fontFamily,
+    fontFamily: fontFamilyMedium,
     fontSize: 11,
     fontWeight: '500' as const,
     lineHeight: 16,
@@ -328,11 +348,11 @@ export const MD3Elevation = {
 
 export const MD3Shape = {
   none: 0,
-  extraSmall: 4,
-  small: 8,
-  medium: 12,
-  large: 16,
-  extraLarge: 28,
+  extraSmall: 2,
+  small: 2,
+  medium: 4,
+  large: 4,
+  extraLarge: 6,
   full: 9999,
 };
 
@@ -378,3 +398,12 @@ export const DarkTheme: MD3Theme = {
   spacing: Spacing,
   isDark: true,
 };
+
+export const BlackTheme: MD3Theme = {
+  colors: MD3BlackColors,
+  typography: MD3Typography,
+  elevation: MD3Elevation,
+  shape: MD3Shape,
+  spacing: Spacing,
+  isDark: true,
+};

src/types/index.ts

@@ -88,7 +88,7 @@ export interface NetWorthSnapshot {
 export interface AppSettings {
   baseCurrency: Currency;
   locale: string;
-  theme: 'light' | 'dark' | 'system';
+  theme: 'light' | 'dark' | 'black' | 'system';
   biometricEnabled: boolean;
   onboardingComplete: boolean;
 }

version.config.json

@@ -0,0 +1,4 @@
+{
+  "version": "0.1.4",
+  "buildNumber": 1
+}