Create new component: Settings dialog

[Sebastian-ubs]

User Story
As a user, I want all settings to be presented in a similar way

Description
Create a common papi component for

• User Settings: Rework Settings Dialog with extensible components #503
• Project Settings: Rework Project Settings Dialog with extensible components #510

This component should use the following components

• Dialog Dev Design Modality #470
• Vertical tab navigator Create new papi component: Vertical tab navigator  #620
• Settings list - a new sub component to be created, that represents a single list of settings (e.g. of one category inside of a tab navigator tab).
  • is that the same thing mentioned twice in # 503 and # 510 as "Provide components for settings created"?
  • Compare

    paranext-core/src/renderer/components/settings-dialog/settings-tab.component.tsx

    Lines 368 to 389 in dfd9119

    	<List>
    	{fetchSettings(group).map((settingKey) => (
    	<span key={group.properties[settingKey].label} className="settings-list-item">
    	<ListItem divider key={settingKey}>
    	<ListItemText
    	primary={group.properties[settingKey].label}
    	secondary={group.properties[settingKey].description}
    	/>
    	{components[settingKey] ? (
    	createElement(components[settingKey], {
    	setting: settingValues[settingKey],
    	setSetting: (value: unknown) => setSettingValue(settingKey, value),
    	})
    	) : (
    	<Typography component="span" alignSelf="center" variant="caption">
    	Setting Action Missing
    	</Typography>
    	)}
    	</ListItem>
    	</span>
    	))}
    	</List>

Mockups dev link

Dialog	Vertical tab navigator	Settings list

[tjcouch-sil]

@Sebastian-ubs can this be closed? I believe this was done with #867

[Sebastian-ubs]

what's described in here is basically done. the story for the new design to come is

• Revise Settings dialog according to new UX design #1213