Add default themes to settings

3 years ago · 20e52e5f58
4 changed files with 325 additions and 27 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import settings from 'electron-settings';
 import { ThemeProvider } from 'styled-components';
 import { HashRouter as Router, Switch, Route } from 'react-router-dom';
 import './styles/App.global.css';
@ -17,30 +18,26 @@ import AlbumList from './components/library/AlbumList';
 import ArtistList from './components/library/ArtistList';
 import GenreList from './components/library/GenreList';
 import { MockFooter } from './components/settings/styled';
-import { defaultDark, defaultLight } from './styles/styledTheme';
 import { useAppSelector } from './redux/hooks';
 import PageModal from './components/modal/PageModal';
 import NowPlayingMiniView from './components/player/NowPlayingMiniView';
 import { GlobalContextMenu } from './components/shared/ContextMenu';
 import SearchView from './components/search/SearchView';
 import FolderList from './components/library/FolderList';
+import { getTheme } from './shared/utils';
+import { defaultDark } from './styles/styledTheme';
+import { mockSettings } from './shared/mockSettings';
+
+const themes: any =
+  process.env.NODE_ENV === 'test' ? mockSettings.themes : settings.getSync('themes');

 const App = () => {
  const [theme, setTheme] = useState<any>(defaultDark);
  const [font, setFont] = useState('Poppins');
  const misc = useAppSelector((state) => state.misc);
+
  useEffect(() => {
-    switch (misc.theme) {
-      case 'defaultDark':
-        setTheme(defaultDark);
-        break;
-      case 'defaultLight':
-        setTheme(defaultLight);
-        break;
-      default:
-        setTheme(defaultDark);
-        break;
-    }
+    setTheme(getTheme(themes, misc.theme) || defaultDark);
  }, [misc.theme]);

  useEffect(() => {
--- a/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx
+++ b/src/components/settings/ConfigPanels/LookAndFeelConfig.tsx
@ -1,14 +1,15 @@
 import React, { useRef, useState } from 'react';
+import { shell } from 'electron';
 import settings from 'electron-settings';
-import { RadioGroup, ControlLabel, Nav } from 'rsuite';
+import { ControlLabel, Nav, Icon } from 'rsuite';
 import { ConfigPanel } from '../styled';
 import {
-  StyledRadio,
  StyledInputPicker,
  StyledNavItem,
  StyledInputNumber,
  StyledCheckbox,
  StyledInputPickerContainer,
+  StyledLink,
 } from '../../shared/styled';
 import ListViewConfig from './ListViewConfig';
 import { Fonts } from '../Fonts';
@ -37,9 +38,10 @@ const LookAndFeelConfig = () => {
  const [highlightOnRowHoverChk, setHighlightOnRowHoverChk] = useState(
    Boolean(settings.getSync('highlightOnRowHover'))
  );
+  const themePickerContainerRef = useRef(null);
  const fontPickerContainerRef = useRef(null);
  const titleBarPickerContainerRef = useRef(null);
-
+  const themes: any = settings.getSync('themes');
  const songCols: any = settings.getSync('musicListColumns');
  const albumCols: any = settings.getSync('albumListColumns');
  const playlistCols: any = settings.getSync('playlistListColumns');
@ -56,23 +58,31 @@ const LookAndFeelConfig = () => {
  return (
    <>
      <ConfigPanel header="Look & Feel" bordered>
-        <div style={{ width: '300px' }}>
-          <p>Select the main application theme.</p>
-          <RadioGroup
-            name="themeRadioList"
-            appearance="default"
+        <p>
+          <StyledLink
+            onClick={() => shell.openExternal('https://github.com/jeffvli/sonixd/discussions/61')}
+          >
+            Check out the theming documentation! <Icon icon="external-link" />
+          </StyledLink>
+        </p>
+        <br />
+        <StyledInputPickerContainer ref={themePickerContainerRef}>
+          <ControlLabel>Application theme</ControlLabel>
+          <br />
+          <StyledInputPicker
+            container={() => themePickerContainerRef.current}
+            data={themes}
+            labelKey="label"
+            valueKey="value"
+            cleanable={false}
            defaultValue={String(settings.getSync('theme'))}
-            onChange={(e) => {
+            onChange={(e: string) => {
              settings.setSync('theme', e);
              dispatch(setTheme(e));
            }}
-          >
-            <StyledRadio value="defaultDark">Default Dark</StyledRadio>
-            <StyledRadio value="defaultLight">Default Light</StyledRadio>
-          </RadioGroup>
-        </div>
+          />
+        </StyledInputPickerContainer>
        <br />
-
        <StyledInputPickerContainer ref={fontPickerContainerRef}>
          <ControlLabel>Font</ControlLabel>
          <br />
--- a/src/shared/mockSettings.ts
+++ b/src/shared/mockSettings.ts
@ -304,4 +304,291 @@ export const mockSettings = {
  windowMaximize: false,
  highlightOnRowHover: false,
  titleBarStyle: 'windows',
+  themes: [
+    {
+      label: 'Default Dark',
+      value: 'defaultDark',
+      fonts: {
+        size: {
+          page: '14px',
+          pageTitle: '40px',
+          panelTitle: '20px',
+          button: '14px',
+        },
+      },
+      colors: {
+        primary: '#2196F3',
+        layout: {
+          page: {
+            color: '#D8D8D8',
+            colorSecondary: '#888e94',
+            background: '#181A1F',
+          },
+          playerBar: {
+            color: '#D8D8D8',
+            colorSecondary: '#888e94',
+            background: '#101010',
+            button: {
+              color: 'rgba(240, 240, 240, 0.8)',
+              colorHover: '#FFFFFF',
+            },
+          },
+          sideBar: {
+            background: '#101010',
+            button: {
+              color: '#D8D8D8',
+              colorHover: '#FFFFFF',
+            },
+          },
+          titleBar: {
+            color: '#FFFFFF',
+            background: '#101010',
+          },
+        },
+        button: {
+          default: {
+            color: '#D8D8D8',
+            colorHover: '#FFFFFF',
+            background: '#292D33',
+            backgroundHover: '#3C3F43',
+          },
+          primary: {
+            color: '#FFFFFF',
+            colorHover: '#FFFFFF',
+            backgroundHover: '#3B89EC',
+          },
+          subtle: {
+            color: '#D8D8D8',
+            colorHover: '#D8D8D8',
+            backgroundHover: 'transparent',
+          },
+          link: {
+            color: '#2196F3',
+            colorHover: '#3B89EC',
+          },
+        },
+        card: {
+          overlayButton: {
+            color: '#FFFFFF',
+            background: '#000000',
+            opacity: 0.8,
+          },
+        },
+        contextMenu: {
+          color: '#D8D8D8',
+          colorDisabled: '#6A6F76',
+          background: '#1E2125',
+          backgroundHover: '#292D33',
+        },
+        input: {
+          color: '#D8D8D8',
+          background: '#25292E',
+          backgroundHover: '#353A45',
+          backgroundActive: 'rgba(240, 240, 240, .2)',
+        },
+        nav: {
+          color: '#D8D8D8',
+        },
+        popover: {
+          color: '#D8D8D8',
+          background: '#1E2125',
+        },
+        slider: {
+          background: '#3C3F43',
+          progressBar: '#888E94',
+        },
+        spinner: {
+          background: 'rgba(233, 235, 240, 0.3)',
+          foreground: '#2196F3',
+        },
+        table: {
+          selectedRow: '#4D5156',
+        },
+        tag: {
+          background: '#3C3F43',
+          text: '#E2E4E9',
+        },
+        tooltip: {
+          color: '#D8D8D8',
+          background: '#1E2125',
+        },
+      },
+      other: {
+        button: {
+          borderRadius: '0px',
+        },
+        coverArtFilter: 'drop-shadow(0px 3px 5px #000000)',
+        card: {
+          borderRadius: '0px',
+        },
+        input: {
+          borderRadius: '0px',
+        },
+        miniPlayer: {
+          height: '450px',
+          opacity: 0.95,
+        },
+        panel: {
+          borderRadius: '0px',
+        },
+        playerBar: {
+          borderTop: '1px solid rgba(240, 240, 240, .15)',
+          borderRight: 'none',
+          borderBottom: 'none',
+          borderLeft: 'none',
+          filter: 'none',
+        },
+        tag: {
+          borderRadius: '0px',
+        },
+        tooltip: {
+          border: '1px #3c3f43 solid',
+          borderRadius: '0px',
+        },
+      },
+    },
+    {
+      label: 'Default Light',
+      value: 'defaultLight',
+      fonts: {
+        size: {
+          page: '14px',
+          pageTitle: '30px',
+          panelTitle: '20px',
+        },
+      },
+      colors: {
+        primary: '#285DA0',
+        layout: {
+          page: {
+            color: '#000000',
+            colorSecondary: '#888e94',
+            background: '#FFFFFF',
+          },
+          playerBar: {
+            color: '#FFFFFF',
+            colorSecondary: '#888e94',
+            background: '#161B22',
+            button: {
+              color: 'rgba(240, 240, 240, 0.8)',
+              colorHover: '#FFFFFF',
+            },
+          },
+          sideBar: {
+            background: '#161B22',
+            button: {
+              color: '#D8D8D8',
+              colorHover: '#FFFFFF',
+            },
+          },
+          titleBar: {
+            color: '#FFFFFF',
+            background: '#161B22',
+          },
+        },
+        button: {
+          default: {
+            color: '#575757',
+            colorHover: '#000000',
+            background: '#DFDFE2',
+            backgroundHover: '#D2D2D6',
+          },
+          primary: {
+            color: '#FFFFFF',
+            colorHover: '#FFFFFF',
+            backgroundHover: '#347AD3',
+          },
+          subtle: {
+            color: '#575757',
+            colorHover: '#575757',
+            backgroundHover: 'transparent',
+          },
+          link: {
+            color: '#575757',
+            colorHover: '#575757',
+          },
+        },
+        card: {
+          overlayButton: {
+            color: '#FFFFFF',
+            colorHover: '#FFFFFF',
+            background: '#000000',
+            backgroundHover: '#285DA0',
+            opacity: 0.8,
+          },
+        },
+        contextMenu: {
+          color: '#575757',
+          colorDisabled: '#BABABA',
+          background: '#FFFFFF',
+          backgroundHover: '#D2D2D6',
+        },
+        input: {
+          color: '#000000',
+          background: '#FFFFFF',
+          backgroundHover: '#E5E5EA',
+          backgroundActive: 'rgba(0, 0, 0, .2)',
+        },
+        nav: {
+          color: '#000000',
+        },
+        popover: {
+          color: '#000000',
+          background: '#FFFFFF',
+        },
+        slider: {
+          background: '#3C3F43',
+          progressBar: '#888E94',
+        },
+        spinner: {
+          background: 'rgba(0, 0, 0, 0.3)',
+          foreground: '#285DA0',
+        },
+        table: {
+          selectedRow: '#CCCCCC',
+        },
+        tag: {
+          background: '#DFDFE2',
+          text: '#000000',
+        },
+        tooltip: {
+          color: '#000000',
+          background: '#FFFFFF',
+        },
+      },
+      other: {
+        button: {
+          borderRadius: '0px',
+        },
+        coverArtFilter: 'drop-shadow(0px 3px 5px #000000)',
+        card: {
+          borderRadius: '0px',
+        },
+        input: {
+          borderRadius: '0px',
+        },
+        miniPlayer: {
+          height: '450px',
+          opacity: 0.95,
+        },
+        panel: {
+          borderRadius: '0px',
+        },
+        playerBar: {
+          borderTop: '1px solid rgba(240, 240, 240, .15)',
+          borderRight: 'none',
+          borderBottom: 'none',
+          borderLeft: 'none',
+          filter: 'none',
+        },
+        tag: {
+          borderRadius: '0px',
+        },
+        tooltip: {
+          border: '1px #3c3f43 solid',
+          borderRadius: '0px',
+        },
+      },
+    },
+  ],
 };
--- a/src/shared/utils.ts
+++ b/src/shared/utils.ts
@ -423,3 +423,7 @@ export const getCurrentEntryList = (playQueue: any) => {

  return 'entry';
 };
+
+export const getTheme = (themes: any[], value: string) => {
+  return themes.find((theme) => theme.value === value);
+};