style: improve notification setting styling

Author: Prithpal-Sooriya

app/components/Views/Settings/NotificationsSettings/AccountsList.tsx

@@ -7,8 +7,14 @@ import {
 import NotificationOptionToggle from './NotificationOptionToggle';
 import { NotificationSettingsViewSelectorsIDs } from '../../../../../e2e/selectors/Notifications/NotificationSettingsView.selectors';
 import AccountListHeader from '../../../../component-library/components-temp/MultichainAccounts/MultichainAccountSelectorList/AccountListHeader';
+import { useTheme } from '../../../../util/theme';
+import { useStyles } from '../../../../component-library/hooks';
+import styleSheet from './NotificationsSettings.styles';
 
 export const AccountsList = () => {
+  const theme = useTheme();
+  const { styles } = useStyles(styleSheet, { theme });
+
   const { accountAvatarType, firstHDWalletGroups } = useAccountProps();
   const {
     isAnyAccountLoading,
@@ -24,7 +30,10 @@ export const AccountsList = () => {
 
   return (
     <View>
-      <AccountListHeader title={firstHDWalletGroups.title} />
+      <AccountListHeader
+        title={firstHDWalletGroups.title}
+        containerStyle={styles.accountHeader}
+      />
       <FlatList
         data={firstHDWalletGroups.data}
         keyExtractor={(item) => `address-${item.id}`}

app/components/Views/Settings/NotificationsSettings/NotificationOptionToggle/styles.ts

@@ -6,7 +6,6 @@ export const createStyles = () =>
     container: {
       flexDirection: 'row',
       alignItems: 'center',
-      marginBottom: 24,
     },
     titleContainer: {
       alignItems: 'flex-start',
@@ -15,9 +14,6 @@ export const createStyles = () =>
     title: {
       flex: 1,
     },
-    switchElement: {
-      // marginLeft: 16,
-    },
     switch: {
       alignSelf: 'flex-start',
     },

app/components/Views/Settings/NotificationsSettings/NotificationsSettings.styles.ts

@@ -4,20 +4,31 @@ import { Theme } from '../../../../util/theme/models';
 
 const styleSheet = (params: { theme: Theme }) =>
   StyleSheet.create({
-    wrapper: {
-      backgroundColor: params.theme.colors.background.default,
-      flex: 1,
+    container: {
       padding: 24,
       paddingBottom: 48,
     },
+    line: {
+      borderTopWidth: 1,
+      borderTopColor: params.theme.colors.border.muted,
+      marginVertical: 16,
+      marginHorizontal: -24,
+    },
     heading: {
       marginTop: 16,
     },
     accessory: {
       marginTop: 16,
     },
     setting: {
-      marginVertical: 16,
+      marginTop: 16,
+    },
+    productAnnouncementContainer: {
+      marginTop: 16,
+    },
+    accountHeader: {
+      marginTop: 16,
+      marginLeft: -16,
     },
     clearHistoryConfirm: {
       marginTop: 18,

app/components/Views/Settings/NotificationsSettings/index.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 import { NavigationProp, ParamListBase } from '@react-navigation/native';
 import React, { useEffect } from 'react';
-import { ScrollView } from 'react-native';
+import { ScrollView, View } from 'react-native';
 import { useSelector } from 'react-redux';
 
 import { strings } from '../../../../../locales/i18n';
@@ -39,7 +39,10 @@ const NotificationsSettings = ({ navigation, route }: Props) => {
   const isMetamaskNotificationsEnabled = useSelector(
     selectIsMetamaskNotificationsEnabled,
   );
-  const hasFirstHDWallet = Boolean(useFirstHDWalletAccounts());
+  const firstHDWallet = useFirstHDWalletAccounts();
+  const hasFirstHDWallet = Boolean(
+    firstHDWallet?.data && firstHDWallet?.data.length > 0,
+  );
 
   const loadingText = useSwitchNotificationLoadingText();
 
@@ -62,7 +65,7 @@ const NotificationsSettings = ({ navigation, route }: Props) => {
   }, [colors, isFullScreenModal, navigation]);
 
   return (
-    <ScrollView style={styles.wrapper}>
+    <ScrollView style={styles.container}>
       {/* Main Toggle */}
       <MainNotificationToggle />
 
@@ -72,6 +75,8 @@ const NotificationsSettings = ({ navigation, route }: Props) => {
           {/* Push Notifications Toggle */}
           <PushNotificationToggle />
 
+          <View style={styles.line} />
+
           {/* Feature Announcement Toggle */}
           <SessionHeader
             title={strings(
@@ -82,7 +87,11 @@ const NotificationsSettings = ({ navigation, route }: Props) => {
             )}
             styles={styles}
           />
-          <FeatureAnnouncementToggle />
+          <View style={styles.productAnnouncementContainer}>
+            <FeatureAnnouncementToggle />
+          </View>
+
+          <View style={styles.line} />
 
           {/* Account Notification Toggles */}
           {hasFirstHDWallet && (