[N7 Account Settings] Modify Component `MenuItem` and create new related component `MenuItemWithTopDescription`

[Beamanator]

Doc is almost completely approved: https://docs.google.com/document/d/17akqrbC-w8FqEoDLvcLmrX6iw4uaVrT_xlwAl-IhEzE/edit#heading=h.kon5grl17zr7

Tracking issue: https://github.com/Expensify/Expensify/issues/182122

Goal:

Add a few new props to & create a specialized component that uses them

Modifying

1. Add the ability to show the main text (in the title prop) with normal font weight
   1. This is needed for many pages, including the new Profile page, All contacts page, and the Personal details page.
   2. The current style for the MenuItem title, popoverMenuText, is hard-coded to be bold. Since this is the only place we use popoverMenuText, we’ll make the following changes:
      1. Remove fontFamily: fontFamily.GTA_BOLD, and fontWeight: fontWeightBold, from the popoverMenuText style.
      2. Add new prop shouldShowBasicTitle to MenuItem, which will not add styles.textStrong to the Text component displaying the title if true (leaving the title to display with normal font weight).
2. Add the ability to show the supporting text (in the description prop) above the main text (title prop)
   1. This is needed for the new Profile page and the Personal details page.
   2. Currently the View component encapsulating the title & description displays with a flex-direction: column. To get the description on top, we can just change this to flex-direction: column-reverse.
      1. We can add this ability with a new prop, shouldShowDescriptionOnTop - if this is true, we’ll add styles.flexColumnReverse to this View, which will flip the title & description vertically.
   3. We’re not done! Since the Text component that renders props.description (this one) currently has styles.mt1 applied to it, if we put this on top we won’t need that style anymore and we’ll want it to be applied to props.title now. To do this, we’ll make these changes:
      1. Remove styles.mt1 from the description style
      2. Add new style to styles/utilities/spacing.js:

             gap1: {
                 gap: 4,
             },

      3. Add the new styles.gap1 on the View that renders the title & description (docs on gap css property)

Create specialized component MenuItemWithTopDescription

Since we’ll reuse the new style props for making the title not bold & inverting the description & title on a few pages (specifically the Profile page & Personal details page), we’ll make a new specialized component that does these for us automatically

1. Create new component MenuItemWithTopDescription (named as such to indicate the main purpose of the component is to show the description above the title instead of the standard setup with title above description)
2. This component will render a MenuItem like this:

   <MenuItem
       {...props}
       shouldShowBasicTitle
       shouldShowDescriptionOnTop
   />

3. We’ll use this by passing in a custom title & description (and optionally shouldShowRightIcon) which will look like this: (see doc)

[Beamanator]

Doc still in review

[Beamanator]

Doc still in review but getting super close! Still one detail ironing out with this