feat: beautify the UI

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
@@ -482,6 +485,8 @@ function makeStyles(theme: MD3Theme) {
     summaryItem: {
       flex: 1,
       borderRadius: shape.large,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
       padding: spacing.lg,
       alignItems: 'center',
     },
@@ -495,6 +500,17 @@ function makeStyles(theme: MD3Theme) {
       fontWeight: '700',
       marginTop: 2,
     },
+    listContainer: {
+      flex: 1,
+      backgroundColor: colors.surface,
+      marginHorizontal: spacing.xl,
+      marginTop: spacing.md,
+      borderRadius: shape.large,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
+      overflow: 'hidden',
+      ...elevation.level1,
+    },
     separator: {height: 1, marginLeft: 72},
     fab: {
       position: 'absolute',
@@ -511,6 +527,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

@@ -228,7 +228,7 @@ const SettingsScreen: React.FC = () => {
               icon="information"
               iconColor="#7E57C2"
               label={t('settings.version')}
-              value="0.1.0 Alpha"
+              value="0.1.1-alpha"
             />
           </View>
         </Animated.View>
@@ -346,6 +346,8 @@ function makeStyles(theme: MD3Theme) {
     sectionCard: {
       backgroundColor: colors.surfaceContainerLow,
       borderRadius: shape.large,
+      borderWidth: 1,
+      borderColor: colors.outlineVariant,
       overflow: 'hidden',
       ...elevation.level1,
     },