refactor: Replace Security Settings page with DS components and updated design

[brianacnguyen]

Description

• Replace Security Settings page with DS components and updated design
• Replaced SettingsNotification with BannerAlert
• Moved toggle to the right of title
• Reordered settings and added subHeadings based on updated design

Design Resources:
https://www.figma.com/file/5nRaF62WvJOUJc925ALacm/Setting-page-DS-sync-with-Brian-follow-up?type=design&node-id=0-1&mode=design&t=QC83o4maZi5lSOn0-0

https://www.figma.com/file/MlBUrNnIXlftX4TSjqiUYg/Core-Components?type=design&node-id=1061-12936&mode=design&t=vGWvpVcXE9tOaHhr-0

https://www.figma.com/file/t4Zc6ZOA9Urw8POrCReEam/Privacy-epic-%26-update-security-and-privacy-in-settings?type=design&node-id=178-21581&mode=design&t=7vAal9KHWKtzpPV7-0

Screenshots/Recordings

Before

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-07.at.17.46.52.mp4

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2023-12-07.at.17.39.58.mp4

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've clearly explained what problem this PR is solving and how it is solved.
• I've linked related issues
• I've included manual testing steps
• I've included screenshots/recordings if applicable
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
• I’ve properly set the pull request status:
  • In case it's not yet "ready for review", I've set it to "draft".
  • In case it's "ready for review", I've changed it from "draft" to "non-draft".

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/053c8fd5-08d6-4c0e-9ecb-f0c71eb6d418
You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[codecov-commenter]

Codecov Report

Attention: 6 lines in your changes are missing coverage. Please review.

Comparison is base (9884203) 39.39% compared to head (2094130) 39.37%.
Report is 2 commits behind head on main.

Files	Patch %	Lines
...s/Sections/ProtectYourWallet/ProtectYourWallet.tsx	0.00%	2 Missing and 1 partial ⚠️
...s/UI/SecurityOptionToggle/SecurityOptionToggle.tsx	66.66%	1 Missing ⚠️
...itySettings/Sections/ClearPrivacy/ClearPrivacy.tsx	0.00%	1 Missing ⚠️
...ews/Settings/SecuritySettings/SecuritySettings.tsx	80.00%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8048      +/-   ##
==========================================
- Coverage   39.39%   39.37%   -0.02%     
==========================================
  Files        1220     1220              
  Lines       29800    29787      -13     
  Branches     2831     2829       -2     
==========================================
- Hits        11740    11729      -11     
- Misses      17371    17372       +1     
+ Partials      689      686       -3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[sonarcloud]

Quality Gate passed

Kudos, no new issues were introduced!

0 New issues
0 Security Hotspots
82.6% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud