Refactor Vue shared `SettingsBlock`

What does this MR do and why?

Related to #436419 (closed)

We have a component in vue_shared called SettingsBlock that renders a collapsable settings block that looks/functions the same way as the HAML/jQuery version that is used for most settings. This component isn't used very much yet but I think it could be helpful for migrating settings to Vue in the future. We are currently using it for Organization settings. Previously this component relied on the legacy JavaScript for the collapse functionality. This had it's downsides and also caused a visual bug when navigating to a page, see related issue. This MR refactors SettingsBlock to use GlCollapse and also adjusts some of the styles to improve UX.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Organization settings

Before	After
Screen_Recording_2024-03-01_at_2.14.46_PM	Screen_Recording_2024-03-01_at_2.06.52_PM

Group settings

Merge request approvals uses SettingsBlock component

Before	After

How to set up and validate locally

Organization settings

1. Enable the feature flag
   • echo "Feature.enable(:ui_for_organizations)" | gdk rails c
2. Navigate to /-/organizations/default
3. Click Settings -> General
4. There should be no animation bug

Group settings

1. Follow instructions in https://docs.gitlab.com/ee/development/ee_features.html#simulate-a-saas-instance and make a group have a Premium or higher plan
2. Navigate to that group Settings -> General
3. Padding and styling should all look consistent.
4. Merge request approvals should open and close