fix(settings): use correct name instead of hardcoded 'dark-mode'

Signed-off-by: Erik Michelson <github@erik.michelson.eu>

frontend/src/components/global-dialogs/settings-dialog/editor/indent-with-tabs-setting-button-group.tsx

@@ -16,6 +16,7 @@ export const IndentWithTabsSettingButtonGroup: React.FC = () => {
   return (
     <OnOffButtonGroup
       value={enabled}
+      name={'settings-indent-with-tabs'}
       onSelect={setEditorIndentWithTabs}
       overrideButtonOnI18nKey={'settings.editor.indentWithTabs.tabs'}
       overrideButtonOffI18nKey={'settings.editor.indentWithTabs.spaces'}

frontend/src/components/global-dialogs/settings-dialog/editor/ligature-setting-button-group.tsx

@@ -13,5 +13,5 @@ import React from 'react'
  */
 export const LigatureSettingButtonGroup: React.FC = () => {
   const enabled = useApplicationState((state) => state.editorConfig.ligatures)
-  return <OnOffButtonGroup value={enabled} onSelect={setEditorLigatures} />
+  return <OnOffButtonGroup value={enabled} onSelect={setEditorLigatures} name={'settings-ligatures'} />
 }

frontend/src/components/global-dialogs/settings-dialog/editor/line-wrapping-setting-button-group.tsx

@@ -13,5 +13,5 @@ import React from 'react'
  */
 export const LineWrappingSettingButtonGroup: React.FC = () => {
   const enabled = useApplicationState((state) => state.editorConfig.lineWrapping)
-  return <OnOffButtonGroup value={enabled} onSelect={setEditorLineWrapping} />
+  return <OnOffButtonGroup value={enabled} onSelect={setEditorLineWrapping} name={'settings-line-wrapping'} />
 }

frontend/src/components/global-dialogs/settings-dialog/editor/smart-paste-setting-button-group.tsx

@@ -13,5 +13,5 @@ import React from 'react'
  */
 export const SmartPasteSettingButtonGroup: React.FC = () => {
   const enabled = useApplicationState((state) => state.editorConfig.smartPaste)
-  return <OnOffButtonGroup value={enabled} onSelect={setEditorSmartPaste} />
+  return <OnOffButtonGroup value={enabled} onSelect={setEditorSmartPaste} name={'settings-smart-paste'} />
 }

frontend/src/components/global-dialogs/settings-dialog/editor/spellcheck-setting-button-group.tsx

@@ -13,5 +13,5 @@ import React from 'react'
  */
 export const SpellcheckSettingButtonGroup: React.FC = () => {
   const enabled = useApplicationState((state) => state.editorConfig.spellCheck)
-  return <OnOffButtonGroup value={enabled} onSelect={setEditorSpellCheck} />
+  return <OnOffButtonGroup value={enabled} onSelect={setEditorSpellCheck} name={'settings-spell-check'} />
 }

frontend/src/components/global-dialogs/settings-dialog/editor/sync-scroll-setting-button-group.tsx

@@ -13,5 +13,5 @@ import React from 'react'
  */
 export const SyncScrollSettingButtonGroup: React.FC = () => {
   const enabled = useApplicationState((state) => state.editorConfig.syncScroll)
-  return <OnOffButtonGroup value={enabled} onSelect={setEditorSyncScroll} />
+  return <OnOffButtonGroup value={enabled} onSelect={setEditorSyncScroll} name={'settings-sync-scroll'} />
 }

frontend/src/components/global-dialogs/settings-dialog/utils/__snapshots__/on-off-button-group.spec.tsx.snap

@@ -9,7 +9,7 @@ exports[`Settings On-Off Button Group accepts custom labels 1`] = `
     <button
       class="btn btn-secondary"
       data-testid="onOffButtonGroupOn"
-      name="dark-mode"
+      name="test"
       title="test.custom-on"
       type="radio"
     >
@@ -18,7 +18,7 @@ exports[`Settings On-Off Button Group accepts custom labels 1`] = `
     <button
       class="btn btn-outline-secondary"
       data-testid="onOffButtonGroupOff"
-      name="dark-mode"
+      name="test"
       title="test.custom-off"
       type="radio"
     >
@@ -37,7 +37,7 @@ exports[`Settings On-Off Button Group can switch value 1`] = `
     <button
       class="btn btn-outline-secondary"
       data-testid="onOffButtonGroupOn"
-      name="dark-mode"
+      name="test"
       title="common.on"
       type="radio"
     >
@@ -46,7 +46,7 @@ exports[`Settings On-Off Button Group can switch value 1`] = `
     <button
       class="btn btn-secondary"
       data-testid="onOffButtonGroupOff"
-      name="dark-mode"
+      name="test"
       title="common.off"
       type="radio"
     >
@@ -65,7 +65,7 @@ exports[`Settings On-Off Button Group can switch value 2`] = `
     <button
       class="btn btn-secondary"
       data-testid="onOffButtonGroupOn"
-      name="dark-mode"
+      name="test"
       title="common.on"
       type="radio"
     >
@@ -74,7 +74,7 @@ exports[`Settings On-Off Button Group can switch value 2`] = `
     <button
       class="btn btn-outline-secondary"
       data-testid="onOffButtonGroupOff"
-      name="dark-mode"
+      name="test"
       title="common.off"
       type="radio"
     >

frontend/src/components/global-dialogs/settings-dialog/utils/on-off-button-group.spec.tsx

@@ -14,7 +14,7 @@ describe('Settings On-Off Button Group', () => {
     let value = false
     const onSelect = (newValue: boolean) => (value = newValue)
 
-    const view = render(<OnOffButtonGroup value={value} onSelect={onSelect} />)
+    const view = render(<OnOffButtonGroup name={'test'} value={value} onSelect={onSelect} />)
     expect(view.container).toMatchSnapshot()
     const onButton = await screen.findByTestId('onOffButtonGroupOn')
     await act<void>(() => {
@@ -22,7 +22,7 @@ describe('Settings On-Off Button Group', () => {
     })
     expect(value).toBeTruthy()
 
-    view.rerender(<OnOffButtonGroup value={value} onSelect={onSelect} />)
+    view.rerender(<OnOffButtonGroup name={'test'} value={value} onSelect={onSelect} />)
     expect(view.container).toMatchSnapshot()
     const offButton = await screen.findByTestId('onOffButtonGroupOff')
     await act<void>(() => {
@@ -34,6 +34,7 @@ describe('Settings On-Off Button Group', () => {
   it('accepts custom labels', () => {
     const view = render(
       <OnOffButtonGroup
+        name={'test'}
         value={true}
         onSelect={() => {}}
         overrideButtonOnI18nKey={'test.custom-on'}

frontend/src/components/global-dialogs/settings-dialog/utils/on-off-button-group.tsx

@@ -16,6 +16,7 @@ enum OnOffState {
 export interface OnOffButtonGroupProps {
   value: boolean
   onSelect: (value: boolean) => void
+  name: string
   overrideButtonOnI18nKey?: string
   overrideButtonOffI18nKey?: string
 }
@@ -25,12 +26,14 @@ export interface OnOffButtonGroupProps {
  *
  * @param onSelect callback that is executed if the on/off value has changed
  * @param value the current on/off value that should be visible
+ * @param name A unique name for the button group to allow the browser to distinguish between multiple ones
  * @param overrideButtonOnI18nKey Set to override the i18n key for the on-button
  * @param overrideButtonOffI18nKey Set to override the i18n key for the off-button
  */
 export const OnOffButtonGroup: React.FC<OnOffButtonGroupProps> = ({
   onSelect,
   value,
+  name,
   overrideButtonOffI18nKey,
   overrideButtonOnI18nKey
 }) => {
@@ -43,7 +46,7 @@ export const OnOffButtonGroup: React.FC<OnOffButtonGroupProps> = ({
   )
 
   return (
-    <ToggleButtonGroup type='radio' name='dark-mode' value={buttonGroupValue}>
+    <ToggleButtonGroup type='radio' name={name} value={buttonGroupValue}>
       <SettingsToggleButton
         onSelect={onButtonSelect}
         selected={buttonGroupValue === OnOffState.ON}