Enforce configured font on popups/tooltips

- Move setting from misc -> config state

src/App.tsx

@@ -35,6 +35,7 @@ const App = () => {
   const [theme, setTheme] = useState<any>(defaultDark);
   const [font, setFont] = useState('Poppins');
   const misc = useAppSelector((state) => state.misc);
+  const config = useAppSelector((state) => state.config);
 
   useEffect(() => {
     const themes: any =
@@ -45,8 +46,8 @@ const App = () => {
   }, [misc.theme]);
 
   useEffect(() => {
-    setFont(misc.font);
+    setFont(config.lookAndFeel.font);
-  }, [misc.font]);
+  }, [config.lookAndFeel.font]);
 
   if (!localStorage.getItem('server') || !localStorage.getItem('serverBase64')) {
     return (

src/__tests__/App.test.tsx

@@ -72,7 +72,6 @@ const playerState: Player = {
 
 const miscState: General = {
   theme: 'defaultDark',
-  font: 'Poppins',
   contextMenu: {
     show: false,
   },
@@ -136,6 +135,7 @@ const configState: ConfigPage = {
   sort: {},
   serverType: Server.Subsonic,
   lookAndFeel: {
+    font: 'Poppins',
     listView: {
       music: {
         columns: [

src/components/layout/Layout.tsx

@@ -10,7 +10,7 @@ import { RootContainer, RootFooter, MainContainer } from './styled';
 import { setContextMenu } from '../../redux/miscSlice';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import { clearSelected } from '../../redux/multiSelectSlice';
-import { StyledButton, StyledNavItem, StyledPopover } from '../shared/styled';
+import { StyledButton, StyledNavItem } from '../shared/styled';
 import {
   GridViewConfigPanel,
   ListViewConfigPanel,
@@ -25,6 +25,7 @@ import WindowConfig from '../settings/ConfigPanels/WindowConfig';
 import AdvancedConfig from '../settings/ConfigPanels/AdvancedConfig';
 import { setSidebar } from '../../redux/configSlice';
 import SearchBar from '../search/SearchBar';
+import Popup from '../shared/Popup';
 
 const Layout = ({ footer, children, disableSidebar, font }: any) => {
   const { t } = useTranslation();
@@ -157,7 +158,7 @@ const Layout = ({ footer, children, disableSidebar, font }: any) => {
                 <SearchBar />
                 <Whisper
                   speaker={
-                    <StyledPopover
+                    <Popup
                       style={{
                         width: '620px',
                         maxHeight: '80vh',
@@ -193,7 +194,7 @@ const Layout = ({ footer, children, disableSidebar, font }: any) => {
                           <AdvancedConfig />
                         </>
                       )}
-                    </StyledPopover>
+                    </Popup>
                   }
                   trigger="click"
                   placement="bottomEnd"

src/components/library/AlbumList.tsx

@@ -16,7 +16,6 @@ import {
   StyledInputPicker,
   StyledInputPickerContainer,
   StyledNavItem,
-  StyledPopover,
   StyledTag,
 } from '../shared/styled';
 import { FilterButton, RefreshButton } from '../shared/ToolbarButtons';
@@ -31,6 +30,7 @@ import { setFilter, setPagination, setAdvancedFilters, setColumnSort } from '../
 import useGridScroll from '../../hooks/useGridScroll';
 import useListScroll from '../../hooks/useListScroll';
 import useListClickHandler from '../../hooks/useListClickHandler';
+import Popup from '../shared/Popup';
 
 export const ALBUM_SORT_TYPES = [
   { label: i18n.t('A-Z (Name)'), value: 'alphabeticalByName', role: i18n.t('Default') },
@@ -315,7 +315,7 @@ const AlbumList = () => {
                 placement="bottomEnd"
                 preventOverflow
                 speaker={
-                  <StyledPopover width="275px" opacity={0.97}>
+                  <Popup width="275px">
                     <Nav
                       activeKey={view.album.advancedFilters.nav}
                       onSelect={(e) =>
@@ -383,7 +383,7 @@ const AlbumList = () => {
                         }
                       />
                     )}
-                  </StyledPopover>
+                  </Popup>
                 }
               >
                 <FilterButton

src/components/library/AlbumView.tsx

@@ -39,13 +39,7 @@ import {
   getPlayedSongsNotification,
   isCached,
 } from '../../shared/utils';
-import {
+import { LinkWrapper, StyledButton, StyledLink, StyledTagLink } from '../shared/styled';
-  LinkWrapper,
-  StyledButton,
-  StyledLink,
-  StyledPopover,
-  StyledTagLink,
-} from '../shared/styled';
 import {
   BlurredBackground,
   BlurredBackgroundWrapper,
@@ -58,6 +52,7 @@ import Card from '../card/Card';
 import { setFilter, setPagination } from '../../redux/viewSlice';
 import CenterLoader from '../loader/CenterLoader';
 import useListClickHandler from '../../hooks/useListClickHandler';
+import Popup from '../shared/Popup';
 
 interface AlbumParams {
   id: string;
@@ -501,7 +496,7 @@ const AlbumView = ({ ...rest }: any) => {
                       enterable
                       preventOverflow
                       speaker={
-                        <StyledPopover>
+                        <Popup>
                           <ButtonToolbar>
                             <StyledButton onClick={() => handleDownload('download')}>
                               {t('Download')}
@@ -510,7 +505,7 @@ const AlbumView = ({ ...rest }: any) => {
                               {t('Copy to clipboard')}
                             </StyledButton>
                           </ButtonToolbar>
-                        </StyledPopover>
+                        </Popup>
                       }
                     >
                       <DownloadButton

src/components/library/ArtistView.tsx

@@ -37,14 +37,7 @@ import {
   getPlayedSongsNotification,
   isCached,
 } from '../../shared/utils';
-import {
+import { LinkWrapper, SectionTitle, StyledButton, StyledLink, StyledPanel } from '../shared/styled';
-  LinkWrapper,
-  SectionTitle,
-  StyledButton,
-  StyledLink,
-  StyledPanel,
-  StyledPopover,
-} from '../shared/styled';
 import { setStatus } from '../../redux/playerSlice';
 import { GradientBackground, PageHeaderSubtitleDataLine } from '../layout/styled';
 import { apiController } from '../../api/controller';
@@ -58,6 +51,7 @@ import CustomTooltip from '../shared/CustomTooltip';
 import { setFilter, setPagination } from '../../redux/viewSlice';
 import CenterLoader from '../loader/CenterLoader';
 import useListClickHandler from '../../hooks/useListClickHandler';
+import Popup from '../shared/Popup';
 
 const fac = new FastAverageColor();
 
@@ -712,7 +706,7 @@ const ArtistView = ({ ...rest }: any) => {
                       enterable
                       preventOverflow
                       speaker={
-                        <StyledPopover>
+                        <Popup>
                           <ButtonToolbar>
                             <StyledButton onClick={() => handleDownload('download')}>
                               {t('Download')}
@@ -721,7 +715,7 @@ const ArtistView = ({ ...rest }: any) => {
                               {t('Copy to clipboard')}
                             </StyledButton>
                           </ButtonToolbar>
-                        </StyledPopover>
+                        </Popup>
                       }
                     >
                       <DownloadButton size="lg" appearance="subtle" />
@@ -733,14 +727,14 @@ const ArtistView = ({ ...rest }: any) => {
                       enterable
                       preventOverflow
                       speaker={
-                        <StyledPopover>
+                        <Popup>
                           {data.info.externalUrl &&
                             data.info.externalUrl.map((ext: GenericItem) => (
                               <StyledButton key={ext.id} onClick={() => shell.openExternal(ext.id)}>
                                 {ext.title}
                               </StyledButton>
                             ))}
-                        </StyledPopover>
+                        </Popup>
                       }
                     >
                       <CustomTooltip text={t('Info')}>

src/components/player/NowPlayingMiniView.tsx

@@ -29,7 +29,6 @@ import {
   StyledInputNumber,
   StyledInputPicker,
   StyledInputPickerContainer,
-  StyledPopover,
   StyledTag,
 } from '../shared/styled';
 import { MiniViewContainer } from './styled';
@@ -52,6 +51,7 @@ import { notifyToast } from '../shared/toast';
 import { apiController } from '../../api/controller';
 import { Server, Song } from '../../types';
 import useListClickHandler from '../../hooks/useListClickHandler';
+import Popup from '../shared/Popup';
 
 const NowPlayingMiniView = () => {
   const { t } = useTranslation();
@@ -274,7 +274,7 @@ const NowPlayingMiniView = () => {
                         trigger="click"
                         enterable
                         speaker={
-                          <StyledPopover>
+                          <Popup>
                             <ControlLabel>{`${t('How many tracks?')} ${
                               config.serverType === Server.Subsonic ? '(1 - 500)*' : '(1 - ∞)'
                             }`}</ControlLabel>
@@ -387,7 +387,7 @@ const NowPlayingMiniView = () => {
                                 {t('Play')}
                               </StyledButton>
                             </ButtonToolbar>
-                          </StyledPopover>
+                          </Popup>
                         }
                       >
                         <AutoPlaylistButton size="xs" noText />

src/components/player/NowPlayingView.tsx

@@ -40,7 +40,6 @@ import {
   StyledInputNumber,
   StyledInputPicker,
   StyledInputPickerContainer,
-  StyledPopover,
   StyledTag,
 } from '../shared/styled';
 import {
@@ -57,6 +56,7 @@ import { setPlaylistRate } from '../../redux/playlistSlice';
 import NowPlayingInfoView from './NowPlayingInfoView';
 import CenterLoader from '../loader/CenterLoader';
 import useListClickHandler from '../../hooks/useListClickHandler';
+import Popup from '../shared/Popup';
 
 const NowPlayingView = () => {
   const { t } = useTranslation();
@@ -303,7 +303,7 @@ const NowPlayingView = () => {
                     trigger="click"
                     enterable
                     speaker={
-                      <StyledPopover>
+                      <Popup>
                         <ControlLabel>{`${t('How many tracks?')} ${
                           config.serverType === Server.Subsonic ? '(1 - 500)*' : '(1 - ∞)'
                         }`}</ControlLabel>
@@ -417,7 +417,7 @@ const NowPlayingView = () => {
                             {t('Play')}
                           </StyledButton>
                         </ButtonToolbar>
-                      </StyledPopover>
+                      </Popup>
                     }
                   >
                     <AutoPlaylistButton size="sm" />

src/components/player/PlayerBar.tsx

@@ -25,13 +25,7 @@ import CustomTooltip from '../shared/CustomTooltip';
 import placeholderImg from '../../img/placeholder.png';
 import DebugWindow from '../debug/DebugWindow';
 import { getCurrentEntryList, writeOBSFiles } from '../../shared/utils';
-import {
+import { LinkWrapper, SecondaryTextWrapper, StyledButton, StyledRate } from '../shared/styled';
-  LinkWrapper,
-  SecondaryTextWrapper,
-  StyledButton,
-  StyledPopover,
-  StyledRate,
-} from '../shared/styled';
 import { apiController } from '../../api/controller';
 import { Artist, Server } from '../../types';
 import { notifyToast } from '../shared/toast';
@@ -40,6 +34,7 @@ import { setPlaylistRate } from '../../redux/playlistSlice';
 import useGetLyrics from '../../hooks/useGetLyrics';
 import usePlayerControls from '../../hooks/usePlayerControls';
 import { setSidebar } from '../../redux/configSlice';
+import Popup from '../shared/Popup';
 
 const DiscordRPC = require('discord-rpc');
 
@@ -815,11 +810,7 @@ const PlayerBar = () => {
                   placement="top"
                   delay={200}
                   preventOverflow
-                  speaker={
+                  speaker={<Popup>{muted ? t('Muted') : Math.floor(localVolume * 100)}</Popup>}
-                    <StyledPopover>
-                      {muted ? t('Muted') : Math.floor(localVolume * 100)}
-                    </StyledPopover>
-                  }
                 >
                   <CustomSlider
                     tabIndex={0}

src/components/playlist/PlaylistList.tsx

@@ -9,13 +9,7 @@ import ListViewType from '../viewtypes/ListViewType';
 import GenericPage from '../layout/GenericPage';
 import GenericPageHeader from '../layout/GenericPageHeader';
 import GridViewType from '../viewtypes/GridViewType';
-import {
+import { StyledButton, StyledInput, StyledInputGroup, StyledTag } from '../shared/styled';
-  StyledButton,
-  StyledInput,
-  StyledInputGroup,
-  StyledPopover,
-  StyledTag,
-} from '../shared/styled';
 import { errorMessages, isFailedResponse } from '../../shared/utils';
 import { notifyToast } from '../shared/toast';
 import { AddPlaylistButton, FilterButton } from '../shared/ToolbarButtons';
@@ -26,6 +20,7 @@ import { Item, Server } from '../../types';
 import { setSort } from '../../redux/playlistSlice';
 import ColumnSortPopover from '../shared/ColumnSortPopover';
 import useListClickHandler from '../../hooks/useListClickHandler';
+import Popup from '../shared/Popup';
 
 const PlaylistList = () => {
   const { t } = useTranslation();
@@ -147,7 +142,7 @@ const PlaylistList = () => {
               placement="auto"
               trigger="click"
               speaker={
-                <StyledPopover>
+                <Popup>
                   <Form>
                     <StyledInputGroup>
                       <StyledInput
@@ -171,7 +166,7 @@ const PlaylistList = () => {
                       {t('Create')}
                     </StyledButton>
                   </Form>
-                </StyledPopover>
+                </Popup>
               }
             >
               <AddPlaylistButton

src/components/playlist/PlaylistView.tsx

@@ -49,13 +49,7 @@ import GenericPageHeader from '../layout/GenericPageHeader';
 import { setStatus } from '../../redux/playerSlice';
 import { notifyToast } from '../shared/toast';
 import { addProcessingPlaylist, removeProcessingPlaylist } from '../../redux/miscSlice';
-import {
+import { StyledButton, StyledCheckbox, StyledInput, StyledLink } from '../shared/styled';
-  StyledButton,
-  StyledCheckbox,
-  StyledInput,
-  StyledLink,
-  StyledPopover,
-} from '../shared/styled';
 import {
   removeFromPlaylist,
   setPlaylistData,
@@ -69,6 +63,7 @@ import { Server } from '../../types';
 import Card from '../card/Card';
 import CenterLoader from '../loader/CenterLoader';
 import useListClickHandler from '../../hooks/useListClickHandler';
+import Popup from '../shared/Popup';
 
 interface PlaylistParams {
   id: string;
@@ -582,7 +577,7 @@ const PlaylistView = ({ ...rest }) => {
                     placement="auto"
                     trigger="click"
                     speaker={
-                      <StyledPopover>
+                      <Popup>
                         <Form>
                           <ControlLabel>{t('Name')}</ControlLabel>
                           <StyledInput
@@ -616,7 +611,7 @@ const PlaylistView = ({ ...rest }) => {
                             {t('Save')}
                           </StyledButton>
                         </Form>
-                      </StyledPopover>
+                      </Popup>
                     }
                   >
                     <EditButton
@@ -631,12 +626,12 @@ const PlaylistView = ({ ...rest }) => {
                     placement="auto"
                     trigger="click"
                     speaker={
-                      <StyledPopover>
+                      <Popup>
                         <p>{t('Are you sure you want to delete this playlist?')}</p>
                         <StyledButton onClick={handleDelete} appearance="link">
                           {t('Yes')}
                         </StyledButton>
-                      </StyledPopover>
+                      </Popup>
                     }
                   >
                     <DeleteButton

src/components/search/SearchBar.tsx

@@ -17,9 +17,9 @@ import {
   StyledInput,
   StyledInputGroup,
   StyledInputGroupButton,
-  StyledPopover,
 } from '../shared/styled';
 import { Item, Song } from '../../types';
+import Popup from '../shared/Popup';
 
 const SearchContainer = styled.div`
   height: 100%;
@@ -313,7 +313,7 @@ const SearchBar = () => {
       preventOverflow
       enterable
       speaker={
-        <StyledPopover
+        <Popup
           style={{
             width: '620px',
             maxHeight: '80vh',
@@ -583,7 +583,7 @@ const SearchBar = () => {
               <></>
             )}
           </SearchContainer>
-        </StyledPopover>
+        </Popup>
       }
     >
       <span style={{ display: 'inline-block' }}>

src/components/settings/Config.tsx

@@ -7,7 +7,7 @@ import GenericPage from '../layout/GenericPage';
 import DisconnectButton from './DisconnectButton';
 import GenericPageHeader from '../layout/GenericPageHeader';
 import setDefaultSettings from '../shared/setDefaultSettings';
-import { StyledButton, StyledNavItem, StyledPopover } from '../shared/styled';
+import { StyledButton, StyledNavItem } from '../shared/styled';
 import PlaybackConfig from './ConfigPanels/PlaybackConfig';
 import LookAndFeelConfig from './ConfigPanels/LookAndFeelConfig';
 import PlayerConfig from './ConfigPanels/PlayerConfig';
@@ -20,6 +20,7 @@ import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import { setActive } from '../../redux/configSlice';
 import { apiController } from '../../api/controller';
 import ExternalConfig from './ConfigPanels/ExternalConfig';
+import Popup from '../shared/Popup';
 
 const GITHUB_RELEASE_URL = 'https://api.github.com/repos/jeffvli/sonixd/releases?per_page=3';
 
@@ -148,7 +149,7 @@ const Config = () => {
                 trigger="click"
                 placement="auto"
                 speaker={
-                  <StyledPopover title={t('Confirm')}>
+                  <Popup title={t('Confirm')}>
                     <div>{t('Are you sure you want to reset your settings to default?')}</div>
                     <strong>{t('WARNING: This will reload the application')}</strong>
                     <div>
@@ -164,7 +165,7 @@ const Config = () => {
                         {t('Yes')}
                       </StyledButton>
                     </div>
-                  </StyledPopover>
+                  </Popup>
                 }
               >
                 <StyledButton size="sm">{t('Reset defaults')}</StyledButton>
@@ -175,7 +176,7 @@ const Config = () => {
                 enterable
                 preventOverflow
                 speaker={
-                  <StyledPopover>
+                  <Popup>
                     <>
                       {t('Current version:')} {packageJson.version}
                       <br />
@@ -207,7 +208,7 @@ const Config = () => {
                         {t('View CHANGELOG')}
                       </StyledButton>
                     </>
-                  </StyledPopover>
+                  </Popup>
                 }
               >
                 <StyledButton

src/components/settings/ConfigPanels/CacheConfig.tsx

@@ -11,7 +11,6 @@ import {
   StyledCheckbox,
   StyledInputGroup,
   StyledLink,
-  StyledPopover,
   StyledTag,
   StyledButton,
   StyledInputGroupButton,
@@ -20,6 +19,7 @@ import { getSongCachePath, getImageCachePath, getRootCachePath } from '../../../
 import { notifyToast } from '../../shared/toast';
 import { setMiscSetting } from '../../../redux/miscSlice';
 import { useAppDispatch } from '../../../redux/hooks';
+import Popup from '../../shared/Popup';
 
 const fsUtils = require('nodejs-fs-utils');
 
@@ -218,7 +218,7 @@ const CacheConfig = ({ bordered }: any) => {
           trigger="click"
           placement="autoVertical"
           speaker={
-            <StyledPopover>
+            <Popup>
               {t('Which cache would you like to clear?')}
               <ButtonToolbar>
                 <StyledButton size="sm" onClick={handleClearSongCache}>
@@ -237,7 +237,7 @@ const CacheConfig = ({ bordered }: any) => {
                   {t('Folder images')}
                 </StyledButton>
               </ButtonToolbar>
-            </StyledPopover>
+            </Popup>
           }
         >
           <StyledButton>{t('Clear cache')}</StyledButton>

src/components/settings/ConfigPanels/LookAndFeelConfig.tsx

@@ -17,7 +17,6 @@ import {
   StyledIconButton,
   StyledToggle,
   StyledButton,
-  StyledPopover,
   StyledCheckbox,
   StyledCheckPicker,
 } from '../../shared/styled';
@@ -25,7 +24,7 @@ import ListViewConfig from './ListViewConfig';
 import { Fonts } from '../Fonts';
 import { ALBUM_SORT_TYPES } from '../../library/AlbumList';
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
-import { setTheme, setFont, setDynamicBackground, setMiscSetting } from '../../../redux/miscSlice';
+import { setTheme, setDynamicBackground, setMiscSetting } from '../../../redux/miscSlice';
 import {
   songColumnPicker,
   songColumnListAuto,
@@ -40,6 +39,7 @@ import {
 } from '../ListViewColumns';
 import {
   setActive,
+  setFont,
   setGridAlignment,
   setGridCardSize,
   setGridGapSize,
@@ -51,6 +51,7 @@ import i18n, { Languages } from '../../../i18n/i18n';
 import { notifyToast } from '../../shared/toast';
 import { setPagination } from '../../../redux/viewSlice';
 import { MUSIC_SORT_TYPES } from '../../library/MusicList';
+import Popup from '../../shared/Popup';
 
 export const ListViewConfigPanel = ({ bordered }: any) => {
   const { t } = useTranslation();
@@ -412,7 +413,7 @@ export const ThemeConfigPanel = ({ bordered }: any) => {
               trigger="none"
               placement="auto"
               speaker={
-                <StyledPopover title={t('Restart?')}>
+                <Popup title={t('Restart?')}>
                   <div>{t('Do you want to restart the application now?')}</div>
                   <strong>{t('This is highly recommended!')}</strong>
                   <div>
@@ -427,7 +428,7 @@ export const ThemeConfigPanel = ({ bordered }: any) => {
                       {t('Yes')}
                     </StyledButton>
                   </div>
-                </StyledPopover>
+                </Popup>
               }
             >
               <StyledInputPicker

src/components/settings/ConfigPanels/PlayerConfig.tsx

@@ -14,7 +14,6 @@ import {
   StyledInputPickerContainer,
   StyledLink,
   StyledPanel,
-  StyledPopover,
   StyledToggle,
 } from '../../shared/styled';
 import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
@@ -26,6 +25,7 @@ import { notifyToast } from '../../shared/toast';
 import ConfigOption from '../ConfigOption';
 import { Server } from '../../../types';
 import { isWindows, isWindows10 } from '../../../shared/utils';
+import Popup from '../../shared/Popup';
 
 const getAudioDevice = async () => {
   const devices = await navigator.mediaDevices.enumerateDevices();
@@ -176,7 +176,7 @@ const PlayerConfig = ({ bordered }: any) => {
                 trigger="none"
                 placement="auto"
                 speaker={
-                  <StyledPopover title={t('Restart?')}>
+                  <Popup title={t('Restart?')}>
                     <div>{t('Do you want to restart the application now?')}</div>
                     <strong>{t('This is highly recommended!')}</strong>
                     <div>
@@ -191,7 +191,7 @@ const PlayerConfig = ({ bordered }: any) => {
                         {t('Yes')}
                       </StyledButton>
                     </div>
-                  </StyledPopover>
+                  </Popup>
                 }
               >
                 <StyledToggle

src/components/shared/ColumnSortPopover.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Whisper } from 'rsuite';
-import { StyledPopover } from './styled';
 import ColumnSort from './ColumnSort';
+import Popup from './Popup';
 
 const ColumnSortPopover = ({ children, ...rest }: any) => {
   return (
@@ -11,9 +11,9 @@ const ColumnSortPopover = ({ children, ...rest }: any) => {
       placement="bottomEnd"
       preventOverflow
       speaker={
-        <StyledPopover width="275px" placement="bottomEnd">
+        <Popup width="275px" placement="bottomEnd">
           <ColumnSort {...rest} />
-        </StyledPopover>
+        </Popup>
       }
     >
       {children}

src/components/shared/CustomTooltip.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Tooltip, Whisper } from 'rsuite';
 import styled from 'styled-components';
+import { useAppSelector } from '../../redux/hooks';
 
 const StyledTooltip = styled(Tooltip)`
   .rs-tooltip-inner {
@@ -11,14 +12,15 @@ const StyledTooltip = styled(Tooltip)`
   }
 `;
 
-export const tooltip = (text: string) => <StyledTooltip>{text}</StyledTooltip>;
-
 const CustomTooltip = ({ children, text, delay, placement, disabled, ...rest }: any) => {
+  const config = useAppSelector((state) => state.config);
   return (
     <Whisper
       trigger={disabled ? 'none' : 'hover'}
       delay={delay || 500}
-      speaker={tooltip(text)}
+      speaker={
+        <StyledTooltip style={{ fontFamily: config.lookAndFeel.font }}>{text}</StyledTooltip>
+      }
       placement={placement || 'top'}
       {...rest}
     >

src/components/shared/Paginator.tsx

@@ -1,12 +1,7 @@
 import React from 'react';
 import { ButtonGroup, ButtonToolbar, FlexboxGrid, Icon, Whisper } from 'rsuite';
-import {
+import Popup from './Popup';
-  SecondaryTextWrapper,
+import { SecondaryTextWrapper, StyledButton, StyledIconButton, StyledPagination } from './styled';
-  StyledButton,
-  StyledIconButton,
-  StyledPagination,
-  StyledPopover,
-} from './styled';
 
 const Paginator = ({ startIndex, endIndex, handleGoToButton, children, ...rest }: any) => {
   return (
@@ -37,7 +32,7 @@ const Paginator = ({ startIndex, endIndex, handleGoToButton, children, ...rest }
               placement="autoVerticalEnd"
               trigger="click"
               speaker={
-                <StyledPopover>
+                <Popup>
                   <ButtonGroup>
                     <StyledButton
                       appearance="subtle"
@@ -96,7 +91,7 @@ const Paginator = ({ startIndex, endIndex, handleGoToButton, children, ...rest }
                       -50
                     </StyledButton>
                   </ButtonToolbar>
-                </StyledPopover>
+                </Popup>
               }
             >
               <StyledIconButton size="sm" appearance="subtle" icon={<Icon icon="caret-right" />} />

src/components/shared/Popup.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useAppSelector } from '../../redux/hooks';
+import { StyledPopover } from './styled';
+
+const Popup = ({ children, ...rest }: any) => {
+  const config = useAppSelector((state) => state.config);
+
+  return (
+    <StyledPopover font={config.lookAndFeel.font} {...rest}>
+      {children}
+    </StyledPopover>
+  );
+};
+
+export default Popup;

src/components/shared/styled.ts

@@ -472,13 +472,14 @@ export const ContextMenuPopover = styled(Popover)`
   z-index: 2000;
 `;
 
-export const StyledPopover = styled(Popover)<{ width?: string }>`
+export const StyledPopover = styled(Popover)<{ width?: string; font?: string }>`
   color: ${(props) => props.theme.colors.popover.color};
   background: ${(props) => props.theme.colors.popover.background};
   border: 1px #3c4043 solid;
   position: absolute;
   z-index: 1000;
   width: ${(props) => props.width};
+  font-family: ${(props) => props.font};
 `;
 
 export const SectionTitleWrapper = styled.div<{ maxWidth?: string }>`

src/redux/configSlice.ts

@@ -29,6 +29,7 @@ export interface ConfigPage {
     playlistListPage?: SortColumn;
   };
   lookAndFeel: {
+    font: string;
     listView: {
       music: { columns: any; rowHeight: number; fontSize: number };
       album: { columns: any; rowHeight: number; fontSize: number };
@@ -114,6 +115,7 @@ const initialState: ConfigPage = {
     playlistListPage: undefined,
   },
   lookAndFeel: {
+    font: String(parsedSettings.font),
     listView: {
       music: {
         columns: parsedSettings.musicListColumns!.map((col: any) => {
@@ -250,6 +252,10 @@ const configSlice = createSlice({
       state.playback.filters[selectedFilterIndex] = action.payload.newFilter;
     },
 
+    setFont: (state, action: PayloadAction<string>) => {
+      state.lookAndFeel.font = action.payload;
+    },
+
     setAudioDeviceId: (state, action: PayloadAction<string>) => {
       state.playback.audioDeviceId = action.payload;
     },
@@ -326,6 +332,7 @@ export const {
   setAudioDeviceId,
   setColumnList,
   setRowHeight,
+  setFont,
   setFontSize,
   setGridCardSize,
   setGridGapSize,

src/redux/miscSlice.ts

@@ -47,7 +47,6 @@ export interface ContextMenu {
 
 export interface General {
   theme: string;
-  font: string;
   modal: Modal;
   modalPages: ModalPage[];
   imgModal: ImgModal;
@@ -63,7 +62,6 @@ export interface General {
 
 const initialState: General = {
   theme: String(parsedSettings.theme),
-  font: String(parsedSettings.font),
   modal: {
     show: false,
     currentPageIndex: undefined,
@@ -139,10 +137,6 @@ const miscSlice = createSlice({
       state.theme = action.payload;
     },
 
-    setFont: (state, action: PayloadAction<string>) => {
-      state.font = action.payload;
-    },
-
     setImgModal: (state, action: PayloadAction<ImgModal>) => {
       state.imgModal = action.payload;
     },
@@ -194,7 +188,6 @@ const miscSlice = createSlice({
 
 export const {
   setTheme,
-  setFont,
   setSearchQuery,
   hideModal,
   addModalPage,