chore(demo): tweak ui

Author: fadi-george

examples/demo/src/components/ListWidgets.tsx

@@ -187,20 +187,21 @@ const styles = StyleSheet.create({
   pairRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 8,
+    paddingVertical: 4,
+    paddingHorizontal: 4,
   },
   pairStackedContent: {
     flex: 1,
     marginRight: 8,
   },
   pairStackedKey: {
-    fontSize: 15,
+    fontSize: 14,
     color: AppColors.osGrey700,
     fontWeight: '500',
     marginBottom: 2,
   },
   pairStackedValue: {
-    fontSize: 14,
+    fontSize: 12,
     color: AppColors.osGrey600,
   },
   pairKey: {
@@ -223,32 +224,32 @@ const styles = StyleSheet.create({
   singleRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 8,
+    paddingVertical: 4,
+    paddingHorizontal: 4,
   },
   singleValue: {
     flex: 1,
     fontSize: 14,
     color: AppColors.osGrey700,
   },
   emptyContainer: {
-    paddingVertical: 8,
+    paddingVertical: 12,
     alignItems: 'center',
   },
   emptyText: {
     fontSize: 14,
     color: AppColors.osGrey600,
-    fontStyle: 'italic',
   },
   divider: {
     height: 1,
     backgroundColor: AppColors.osDivider,
   },
   moreButton: {
-    paddingVertical: 8,
+    paddingVertical: 4,
     alignItems: 'center',
   },
   moreText: {
-    fontSize: 13,
+    fontSize: 14,
     color: AppColors.osPrimary,
     fontWeight: '500',
   },

examples/demo/src/components/ToggleRow.tsx

@@ -49,9 +49,8 @@ const styles = StyleSheet.create({
     marginRight: 12,
   },
   label: {
-    fontSize: 15,
+    fontSize: 14,
     color: '#212121',
-    fontWeight: '500',
   },
   description: {
     fontSize: 12,

examples/demo/src/components/sections/AppSection.tsx

@@ -89,27 +89,25 @@ const styles = StyleSheet.create({
     color: AppColors.osGrey600,
   },
   idValue: {
-    fontSize: 13,
+    fontSize: 12,
     color: AppColors.osGrey700,
     flex: 1,
     textAlign: 'right',
     marginLeft: 8,
     fontFamily: 'monospace',
   },
   banner: {
+    ...AppTheme.card,
     backgroundColor: AppColors.osWarningBackground,
-    borderRadius: 8,
-    padding: 12,
     marginBottom: AppSpacing.gap,
   },
   bannerText: {
-    fontSize: 13,
+    fontSize: 12,
     color: AppColors.osGrey700,
-    marginBottom: 4,
   },
   bannerLink: {
-    fontSize: 13,
+    fontSize: 12,
     color: AppColors.osPrimary,
-    fontWeight: '500',
+    fontWeight: '600',
   },
 });

examples/demo/src/components/sections/PushSection.tsx

@@ -65,7 +65,7 @@ const styles = StyleSheet.create({
     minWidth: 60,
   },
   idValue: {
-    fontSize: 13,
+    fontSize: 12,
     color: AppColors.osGrey700,
     flex: 1,
     textAlign: 'right',

examples/demo/src/components/sections/SendIamSection.tsx

@@ -61,7 +61,7 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start',
   },
   icon: {
-    marginRight: 10,
+    marginRight: 8,
   },
   label: {
     fontSize: 14,

examples/demo/src/screens/HomeScreen.tsx

@@ -250,9 +250,9 @@ const styles = StyleSheet.create({
     color: AppColors.osGrey600,
   },
   statusValue: {
-    fontSize: 14,
+    fontSize: 12,
     color: AppColors.osGrey700,
-    fontWeight: '500',
+    fontFamily: 'monospace',
   },
   loggedInText: {
     color: AppColors.osSuccess,