swap sort type to selectpicker

src/components/library/AlbumList.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import settings from 'electron-settings';
 import { useQuery, useQueryClient } from 'react-query';
-import { SelectPicker } from 'rsuite';
 import GridViewType from '../viewtypes/GridViewType';
 import ListViewType from '../viewtypes/ListViewType';
 import useSearchQuery from '../../hooks/useSearchQuery';
@@ -16,6 +15,7 @@ import {
   toggleRangeSelected,
   setSelected,
 } from '../../redux/multiSelectSlice';
+import { StyledInputPicker } from '../shared/styled';
 
 const ALBUM_SORT_TYPES = [
   { label: 'A-Z (Name)', value: 'alphabeticalByName' },
@@ -73,13 +73,12 @@ const AlbumList = () => {
         <GenericPageHeader
           title="Albums"
           subsidetitle={
-            <SelectPicker
+            <StyledInputPicker
+              width={120}
               defaultValue={sortBy}
               data={ALBUM_SORT_TYPES}
-              searchable={false}
               placeholder="Sort Type"
-              menuAutoWidth
-              onChange={async (value) => {
+              onChange={async (value: string) => {
                 setOffset(0);
                 setSortBy(value);
                 await queryClient.refetchQueries(['albumList'], {

src/components/playlist/PlaylistList.tsx

@@ -59,17 +59,6 @@ const PlaylistList = () => {
           showSearchBar
           handleListClick={() => setViewType('list')}
           handleGridClick={() => setViewType('grid')}
-          subsidetitle={
-            <SelectPicker
-              data={PLAYLIST_SORT_TYPES}
-              searchable={false}
-              placeholder="Sort Type"
-              menuAutoWidth
-              onChange={(value) => {
-                setSortBy(value);
-              }}
-            />
-          }
         />
       }
     >

src/components/shared/styled.ts

@@ -31,6 +31,7 @@ export const StyledButton = styled(Button)<{ width: number }>`
 export const StyledInputGroup = styled(InputGroup)`
   input {
     background-color: ${(props) => props.theme.primary.inputBackground};
+    color: ${(props) => `${props.theme.primary.text} !important`};
   }
 `;
 
@@ -139,10 +140,17 @@ export const StyledSlider = styled(Slider)`
   }
 `;
 
-export const StyledInputPicker = styled(InputPicker)`
+export const StyledInputPicker = styled(InputPicker)<{ width?: number }>`
   .rs-picker-toggle-value {
     color: ${(props) => `${props.theme.primary.main} !important`};
   }
+
+  .rs-btn-default {
+    background: ${(props) =>
+      `${props.theme.primary.inputBackground} !important`};
+  }
+
+  width: ${(props) => `${props.width}px`};
 `;
 
 export const StyledIcon = styled(Icon)`