Enforce configured font on popups/tooltips

- Move setting from misc -> config state
3 years ago · 0044bf0b85
23 changed files with 96 additions and 109 deletions
--- a/src/App.tsx
+++ b/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);
-  }, [misc.font]);
+    setFont(config.lookAndFeel.font);
+  }, [config.lookAndFeel.font]);

  if (!localStorage.getItem('server') || !localStorage.getItem('serverBase64')) {
    return (
--- a/src/tests/App.test.tsx
+++ b/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: [
--- a/src/components/layout/Layout.tsx
+++ b/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"
--- a/src/components/library/AlbumList.tsx
+++ b/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
--- a/src/components/library/AlbumView.tsx
+++ b/src/components/library/AlbumView.tsx
@ -39,13 +39,7 @@ import {
  getPlayedSongsNotification,
  isCached,
 } from '../../shared/utils';
-import {
-  LinkWrapper,
-  StyledButton,
-  StyledLink,
-  StyledPopover,
-  StyledTagLink,
-} from '../shared/styled';
+import { LinkWrapper, StyledButton, StyledLink, 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
--- a/src/components/library/ArtistView.tsx
+++ b/src/components/library/ArtistView.tsx
@ -37,14 +37,7 @@ import {
  getPlayedSongsNotification,
  isCached,
 } from '../../shared/utils';
-import {
-  LinkWrapper,
-  SectionTitle,
-  StyledButton,
-  StyledLink,
-  StyledPanel,
-  StyledPopover,
-} from '../shared/styled';
+import { LinkWrapper, SectionTitle, StyledButton, StyledLink, StyledPanel } 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')}>
--- a/src/components/player/NowPlayingMiniView.tsx
+++ b/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 />
--- a/src/components/player/NowPlayingView.tsx
+++ b/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" />
--- a/src/components/player/PlayerBar.tsx
+++ b/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 {
-  LinkWrapper,
-  SecondaryTextWrapper,
-  StyledButton,
-  StyledPopover,
-  StyledRate,
-} from '../shared/styled';
+import { LinkWrapper, SecondaryTextWrapper, StyledButton, 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={
-                    <StyledPopover>
-                      {muted ? t('Muted') : Math.floor(localVolume * 100)}
-                    </StyledPopover>
-                  }
+                  speaker={<Popup>{muted ? t('Muted') : Math.floor(localVolume * 100)}</Popup>}
                >
                  <CustomSlider
                    tabIndex={0}
--- a/src/components/playlist/PlaylistList.tsx
+++ b/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 {
-  StyledButton,
-  StyledInput,
-  StyledInputGroup,
-  StyledPopover,
-  StyledTag,
-} from '../shared/styled';
+import { StyledButton, StyledInput, StyledInputGroup, 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
--- a/src/components/playlist/PlaylistView.tsx
+++ b/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 {
-  StyledButton,
-  StyledCheckbox,
-  StyledInput,
-  StyledLink,
-  StyledPopover,
-} from '../shared/styled';
+import { StyledButton, StyledCheckbox, StyledInput, StyledLink } 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
--- a/src/components/search/SearchBar.tsx
+++ b/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' }}>
--- a/src/components/settings/Config.tsx
+++ b/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
--- a/src/components/settings/ConfigPanels/CacheConfig.tsx
+++ b/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>
--- a/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx
+++ b/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
--- a/src/components/settings/ConfigPanels/PlayerConfig.tsx
+++ b/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
--- a/src/components/shared/ColumnSortPopover.tsx
+++ b/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}
--- a/src/components/shared/CustomTooltip.tsx
+++ b/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}
    >
--- a/src/components/shared/Paginator.tsx
+++ b/src/components/shared/Paginator.tsx
@ -1,12 +1,7 @@
 import React from 'react';
 import { ButtonGroup, ButtonToolbar, FlexboxGrid, Icon, Whisper } from 'rsuite';
-import {
-  SecondaryTextWrapper,
-  StyledButton,
-  StyledIconButton,
-  StyledPagination,
-  StyledPopover,
-} from './styled';
+import Popup from './Popup';
+import { SecondaryTextWrapper, StyledButton, StyledIconButton, StyledPagination } 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" />} />
--- a/src/components/shared/Popup.tsx
+++ b/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;
--- a/src/components/shared/styled.ts
+++ b/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 }>`
--- a/src/redux/configSlice.ts
+++ b/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,
--- a/src/redux/miscSlice.ts
+++ b/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,