Change crossfade type from radio -> input picker

src/components/settings/ConfigPanels/PlaybackConfig.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import settings from 'electron-settings';
 import { ControlLabel, RadioGroup } from 'rsuite';
 import { ConfigPanel } from '../styled';
-import { StyledInputNumber, StyledRadio } from '../../shared/styled';
+import { StyledInputNumber, StyledInputPicker, StyledRadio } from '../../shared/styled';
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import { setPlaybackSetting, setPlayerVolume } from '../../../redux/playQueueSlice';
 
@@ -77,24 +77,49 @@ const PlaybackConfig = () => {
           }}
         />
         <br />
-        <ControlLabel>Crossfade type</ControlLabel>
+        <div>
-        <RadioGroup
+          <ControlLabel>Crossfade type</ControlLabel>
-          name="fadeTypeRadioList"
+          <br />
-          appearance="default"
+          <StyledInputPicker
-          defaultValue={String(settings.getSync('fadeType'))}
+            data={[
-          onChange={(e) => {
+              {
-            settings.setSync('fadeType', e);
+                label: 'Equal Power',
-            dispatch(setPlaybackSetting({ setting: 'fadeType', value: e }));
+                value: 'equalPower',
-          }}
+              },
-        >
+              {
-          <StyledRadio value="equalPower">Equal Power</StyledRadio>
+                label: 'Linear',
-          <StyledRadio value="linear">Linear</StyledRadio>
+                value: 'linear',
-          <StyledRadio value="dipped">Dipped</StyledRadio>
+              },
-          <StyledRadio value="constantPower">Constant Power</StyledRadio>
+              {
-          <StyledRadio value="constantPowerSlowFade">Constant Power (slow fade)</StyledRadio>
+                label: 'Dipped',
-          <StyledRadio value="constantPowerSlowCut">Constant Power (slow cut)</StyledRadio>
+                value: 'dipped',
-          <StyledRadio value="constantPowerFastCut">Constant Power (fast cut)</StyledRadio>
+              },
-        </RadioGroup>
+              {
+                label: 'Constant Power',
+                value: 'constantPower',
+              },
+              {
+                label: 'Constant Power (slow fade)',
+                value: 'constantPowerSlowFade',
+              },
+              {
+                label: 'Constant Power (slow cut)',
+                value: 'constantPowerSlowCut',
+              },
+              {
+                label: 'Constant Power (fast cut)',
+                value: 'constantPowerFastCut',
+              },
+            ]}
+            cleanable={false}
+            defaultValue={String(settings.getSync('fadeType'))}
+            onChange={(e: string) => {
+              settings.setSync('fadeType', e);
+              dispatch(setPlaybackSetting({ setting: 'fadeType', value: e }));
+            }}
+          />
+        </div>
+
         <br />
         <ControlLabel>Volume fade</ControlLabel>
         <RadioGroup