blago
/
tunio-desktop
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Update theme template

master
jeffvli 3 years ago
committed by Jeff
parent
00590c968a
commit
cf91cc283a
27 changed files with 1211 additions and 384 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      src/components/card/styled.tsx
  2. 15
      src/components/layout/GenericPageHeader.tsx
  3. 42
      src/components/layout/Sidebar.tsx
  4. 28
      src/components/layout/styled.tsx
  5. 14
      src/components/library/ArtistView.tsx
  6. 5
      src/components/loader/PageLoader.tsx
  7. 4
      src/components/modal/PageModal.tsx
  8. 19
      src/components/player/NowPlayingView.tsx
  9. 7
      src/components/player/PlayerBar.tsx
  10. 51
      src/components/player/styled.tsx
  11. 8
      src/components/playlist/PlaylistList.tsx
  12. 12
      src/components/playlist/PlaylistView.tsx
  13. 5
      src/components/scrollingmenu/ScrollingMenu.tsx
  14. 20
      src/components/settings/Config.tsx
  15. 63
      src/components/settings/ConfigPanels/CacheConfig.tsx
  16. 8
      src/components/settings/ConfigPanels/ListViewConfig.tsx
  17. 6
      src/components/settings/DisconnectButton.tsx
  18. 10
      src/components/settings/styled.tsx
  19. 106
      src/components/shared/ContextMenu.tsx
  20. 7
      src/components/shared/CustomTooltip.tsx
  21. 8
      src/components/shared/ToolbarButtons.tsx
  22. 289
      src/components/shared/setDefaultSettings.ts
  23. 342
      src/components/shared/styled.ts
  24. 4
      src/components/viewtypes/ListViewTable.tsx
  25. 18
      src/components/viewtypes/styled.tsx
  26. 6
      src/styles/custom-theme.less
  27. 319
      src/styles/styledTheme.ts

33
src/components/card/styled.tsx
View File

@ -19,12 +19,12 @@ interface Card {
}; */
export const CardPanel = styled(Panel)<Card>`
border-radius: ${(props) => props.theme.other.card.borderRadius};
text-align: center;
width: ${(props) => `${Number(props.cardsize) + 2}px`};
height: ${(props) => `${Number(props.cardsize) + 55}px`};
border-radius: 0px !important;
&:hover {
border: 1px solid ${(props) => props.theme.primary.main};
border: 1px solid ${(props) => props.theme.colors.primary};
img {
filter: brightness(70%);
-webkit-filter: brightness(70%);
@ -41,7 +41,7 @@ export const InfoPanel = styled(Panel)<Card>`
`;
export const InfoSpan = styled.div`
color: ${(props) => props.theme.secondary.text};
color: ${(props) => props.theme.colors.layout.page.colorSecondary};
`;
export const CardButton = styled(Button)`
@ -53,14 +53,26 @@ export const CardButton = styled(Button)`
export const CardTitleButton = styled(CardButton)`
padding-top: 5px;
padding-bottom: 2px;
color: ${(props) => props.theme.primary.text};
color: ${(props) => props.theme.colors.layout.page.color};
width: ${(props) => `${props.cardsize}px`};
&:hover {
text-decoration: none;
color: ${(props) =>
!props.onClick ? props.theme.colors.layout.page.color : props.theme.colors.primary};
}
`;
export const CardSubtitleButton = styled(CardButton)`
padding-bottom: 5px;
color: ${(props) => props.theme.secondary.text};
color: ${(props) => props.theme.colors.layout.page.colorSecondary};
width: ${(props) => `${props.cardsize}px`};
&:hover {
text-decoration: none;
color: ${(props) =>
!props.onClick ? props.theme.colors.layout.page.color : props.theme.colors.primary};
}
`;
export const CardSubtitle = styled.div<Card>`
@ -83,7 +95,6 @@ export const LazyCardImg = styled(LazyLoadImage)<Card>`
`;
export const Overlay = styled.div<Card>`
background-color: #1a1d24;
position: relative;
height: ${(props) => `${props.cardsize}px`};
width: ${(props) => `${props.cardsize}px`};
@ -93,7 +104,7 @@ export const Overlay = styled.div<Card>`
.corner-triangle {
position: absolute;
background-color: ${(props) => props.theme.primary.main};
background-color: ${(props) => props.theme.colors.primary};
box-shadow: 0 0 10px 8px rgba(0, 0, 0, 0.8);
height: 80px;
left: -50px;
@ -108,16 +119,18 @@ export const Overlay = styled.div<Card>`
const OverlayButton = styled(IconButton)`
display: none;
position: absolute !important;
opacity: 0.8;
opacity: ${(props) => props.theme.colors.card.overlayButton.opacity};
width: 0px;
height: 0px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: #000;
background: ${(props) => props.theme.colors.card.overlayButton.background};
color: ${(props) => props.theme.colors.card.overlayButton.color};
&:hover {
opacity: 1;
background: ${(props) => props.theme.primary.main};
background: ${(props) => props.theme.colors.card.overlayButton.backgroundHover};
color: ${(props) => props.theme.colors.card.overlayButton.colorHover};
}
`;

15
src/components/layout/GenericPageHeader.tsx
View File

@ -2,9 +2,14 @@ import React, { useState } from 'react';
import { LazyLoadImage } from 'react-lazy-load-image-component';
import { useHistory } from 'react-router-dom';
import { useHotkeys } from 'react-hotkeys-hook';
import { Icon, Input, InputGroup } from 'rsuite';
import { Icon, InputGroup } from 'rsuite';
import ViewTypeButtons from '../viewtypes/ViewTypeButtons';
import { StyledIconButton, StyledInputGroup } from '../shared/styled';
import {
StyledIconButton,
StyledInput,
StyledInputGroup,
StyledInputGroupButton,
} from '../shared/styled';
import { CoverArtWrapper, PageHeaderTitle } from './styled';
import cacheImage from '../shared/cacheImage';
import CustomTooltip from '../shared/CustomTooltip';
@ -98,7 +103,7 @@ const GenericPageHeader = ({
<InputGroup.Addon>
<Icon icon="search" />
</InputGroup.Addon>
<Input
<StyledInput
id="local-search-input"
value={searchQuery}
onChange={handleSearch}
@ -115,7 +120,7 @@ const GenericPageHeader = ({
}}
style={{ width: '180px' }}
/>
<InputGroup.Button
<StyledInputGroupButton
appearance="subtle"
onClick={() => {
clearSearchQuery();
@ -123,7 +128,7 @@ const GenericPageHeader = ({
}}
>
<Icon icon="close" />
</InputGroup.Button>
</StyledInputGroupButton>
</StyledInputGroup>
) : (
<StyledIconButton

42
src/components/layout/Sidebar.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { Sidenav, Nav, Icon } from 'rsuite';
import { FixedSidebar } from './styled';
import { FixedSidebar, SidebarNavItem } from './styled';
const Sidebar = ({
expand,
@ -28,87 +28,87 @@ const Sidebar = ({
<Sidenav.Header />
<Sidenav.Body>
<Nav>
<Nav.Item
<SidebarNavItem
eventKey="discover"
icon={<Icon icon="dashboard" />}
onSelect={handleSidebarSelect}
disabled={disableSidebar}
>
Dashboard
</Nav.Item>
<Nav.Item
</SidebarNavItem>
<SidebarNavItem
eventKey="nowplaying"
icon={<Icon icon="music" />}
onSelect={handleSidebarSelect}
disabled={disableSidebar}
>
Now Playing
</Nav.Item>
<Nav.Item
</SidebarNavItem>
<SidebarNavItem
eventKey="playlists"
icon={<Icon icon="list-ul" />}
onSelect={handleSidebarSelect}
disabled={disableSidebar}
>
Playlists
</Nav.Item>
<Nav.Item
</SidebarNavItem>
<SidebarNavItem
eventKey="starred"
icon={<Icon icon="heart" />}
onSelect={handleSidebarSelect}
disabled={disableSidebar}
>
Favorites
</Nav.Item>
<Nav.Item
</SidebarNavItem>
<SidebarNavItem
eventKey="albums"
icon={<Icon icon="book2" />}
onSelect={handleSidebarSelect}
disabled={disableSidebar}
>
Albums
</Nav.Item>
<Nav.Item
</SidebarNavItem>
<SidebarNavItem
eventKey="artists"
icon={<Icon icon="people-group" />}
onSelect={handleSidebarSelect}
disabled={disableSidebar}
>
Artists
</Nav.Item>
<Nav.Item
</SidebarNavItem>
<SidebarNavItem
eventKey="genres"
icon={<Icon icon="globe2" />}
onSelect={handleSidebarSelect}
disabled={disableSidebar}
>
Genres
</Nav.Item>
<Nav.Item
</SidebarNavItem>
<SidebarNavItem
eventKey="folders"
icon={<Icon icon="folder-open" />}
onSelect={handleSidebarSelect}
disabled={disableSidebar}
>
Folders
</Nav.Item>
</SidebarNavItem>
</Nav>
<Nav>
<Nav.Item
<SidebarNavItem
eventKey="config"
icon={<Icon icon="gear-circle" />}
onSelect={handleSidebarSelect}
disabled={disableSidebar}
>
Config
</Nav.Item>
<Nav.Item
</SidebarNavItem>
<SidebarNavItem
icon={<Icon icon={expand ? 'arrow-left' : 'arrow-right'} />}
onSelect={handleToggle}
disabled={disableSidebar}
>
{expand ? 'Collapse' : 'Expand'}
</Nav.Item>
</SidebarNavItem>
</Nav>
</Sidenav.Body>
</Sidenav>

28
src/components/layout/styled.tsx
View File

@ -1,13 +1,13 @@
import React from 'react';
import styled from 'styled-components';
import { Container, Content, Footer, Header, Sidebar } from 'rsuite';
import { Container, Content, Footer, Header, Nav, Sidebar } from 'rsuite';
// Layout.tsx
export const RootContainer = styled(Container)<{ font: string }>`
background: ${(props) => props.theme.primary.background};
background: ${(props) => props.theme.colors.layout.page.background};
height: 100vh;
color: ${(props) => props.theme.primary.text};
font-size: ${(props) => props.theme.all.fonts.pageFontSize};
color: ${(props) => props.theme.colors.layout.page.color};
font-size: ${(props) => `${props.theme.fonts.size.page} !important`};
font-family: ${(props) => `${props.font?.split(/Light|Medium/)[0]}`};
font-weight: ${(props) =>
props.font?.match('Light') ? 300 : props.font?.match('Medium') ? 500 : 400};
@ -42,9 +42,9 @@ export const TitleHeader = styled.header<{ font: string }>`
position: fixed;
height: 32px;
width: ${(props) => (props.className?.includes('maximized') ? '100%' : 'calc(100%)')};
background: ${(props) => props.theme.primary.titleBar};
background: ${(props) => props.theme.colors.layout.titleBar.background};
padding: 4px;
color: ${(props) => props.theme.primary.titleText};
color: ${(props) => props.theme.colors.layout.titleBar.color};
font-family: ${(props) => `${props.font?.split(/Light|Medium/)[0]}`};
font-weight: ${(props) =>
props.font?.match('Light') ? 300 : props.font?.match('Medium') ? 500 : 400};
@ -161,7 +161,7 @@ export const PageContent = styled(Content)<{ padding?: string }>`
// Sidebar.tsx
// Add 1 to top if you add window border
export const FixedSidebar = styled(Sidebar)<{ font: string }>`
background: ${(props) => props.theme.primary.sideBar} !important;
background: ${(props) => props.theme.colors.layout.sideBar.background} !important;
position: fixed;
top: 32px;
z-index: 1;
@ -177,14 +177,24 @@ export const FixedSidebar = styled(Sidebar)<{ font: string }>`
}
`;
export const SidebarNavItem = styled(Nav.Item)`
a {
color: ${(props) => props.theme.colors.layout.sideBar.button.color} !important;
&:hover {
color: ${(props) => props.theme.colors.layout.sideBar.button.colorHover} !important;
}
}
`;
export const CoverArtWrapper = styled.div`
display: inline-block;
filter: ${(props) => `drop-shadow(0px 5px 8px ${props.theme.primary.coverArtShadow})`};
filter: ${(props) => props.theme.other.coverArtFilter};
`;
export const PageHeaderTitle = styled.h1`
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
font-size: ${(props) => props.theme.all.fonts.pageTitleFontSize};
font-size: ${(props) => props.theme.fonts.size.pageTitle};
`;

14
src/components/library/ArtistView.tsx
View File

@ -3,7 +3,7 @@ import React, { useState } from 'react';
import _ from 'lodash';
import { shell } from 'electron';
import settings from 'electron-settings';
import { ButtonToolbar, Tag, Whisper, Button, Popover, TagGroup } from 'rsuite';
import { ButtonToolbar, Whisper, TagGroup } from 'rsuite';
import { useQuery, useQueryClient } from 'react-query';
import { useParams, useHistory } from 'react-router-dom';
import {
@ -32,7 +32,7 @@ import { addModalPage } from '../../redux/miscSlice';
import { appendPlayQueue, setPlayQueue } from '../../redux/playQueueSlice';
import { notifyToast } from '../shared/toast';
import { isCached } from '../../shared/utils';
import { StyledButton } from '../shared/styled';
import { StyledButton, StyledPopover, StyledTag } from '../shared/styled';
import { setStatus } from '../../redux/playerSlice';
interface ArtistParams {
@ -213,12 +213,12 @@ const ArtistView = ({ ...rest }: any) => {
trigger="hover"
enterable
speaker={
<Popover style={{ width: '400px' }}>
<StyledPopover style={{ width: '400px' }}>
<div>
<h6>Related artists</h6>
<TagGroup>
{artistInfo.similarArtist?.map((artist: any) => (
<Tag key={artist.id}>
<StyledTag key={artist.id}>
<TagLink
onClick={() => {
if (!rest.isModal) {
@ -235,7 +235,7 @@ const ArtistView = ({ ...rest }: any) => {
>
{artist.name}
</TagLink>
</Tag>
</StyledTag>
))}
</TagGroup>
</div>
@ -247,10 +247,10 @@ const ArtistView = ({ ...rest }: any) => {
>
View on Last.FM
</StyledButton>
</Popover>
</StyledPopover>
}
>
<Button size="md">Info</Button>
<StyledButton size="md">Info</StyledButton>
</Whisper>
</ButtonToolbar>
</div>

5
src/components/loader/PageLoader.tsx
View File

@ -10,10 +10,11 @@ const LoaderContainer = styled.div`
div {
span {
&:after {
border-color: ${(props) => `${props.theme.primary.main} transparent transparent`};
border-color: ${(props) =>
`${props.theme.colors.spinner.foreground} transparent transparent`};
}
&:before {
border: ${(props) => `3px solid ${props.theme.primary.spinnerBackground}`};
border: ${(props) => `3px solid ${props.theme.colors.spinner.background}`};
}
}
}

4
src/components/modal/PageModal.tsx
View File

@ -9,14 +9,14 @@ import AlbumView from '../library/AlbumView';
import PlaylistView from '../playlist/PlaylistView';
const StyledModal = styled(Modal)`
color: ${(props) => `${props.theme.primary.text} !important`};
color: ${(props) => `${props.theme.colors.layout.page.color} !important`};
.rs-modal-body {
margin-top: 0px;
}
.rs-modal-content {
background: ${(props) => `${props.theme.primary.background} !important`};
background: ${(props) => `${props.theme.colors.layout.page.background} !important`};
}
.rs-container {

19
src/components/player/NowPlayingView.tsx
View File

@ -37,9 +37,9 @@ import { AutoPlaylistButton, ClearQueueButton, ShuffleButton } from '../shared/T
import {
StyledButton,
StyledCheckbox,
StyledInputGroup,
StyledInputNumber,
StyledInputPicker,
StyledInputPickerContainer,
StyledPopover,
} from '../shared/styled';
import { errorMessages, getCurrentEntryList, isFailedResponse } from '../../shared/utils';
@ -48,6 +48,7 @@ import { notifyToast } from '../shared/toast';
const NowPlayingView = () => {
const tableRef = useRef<any>();
const pickerContainerRef = useRef(null);
const autoPlaylistTriggerRef = useRef<any>();
const dispatch = useAppDispatch();
const playQueue = useAppSelector((state) => state.playQueue);
@ -268,7 +269,6 @@ const NowPlayingView = () => {
speaker={
<StyledPopover>
<ControlLabel>How many tracks? (1-500)*</ControlLabel>
<StyledInputGroup>
<StyledInputNumber
min={1}
max={500}
@ -280,15 +280,11 @@ const NowPlayingView = () => {
setRandomPlaylistTrackCount(Number(e));
}}
/>
</StyledInputGroup>
<br />
<FlexboxGrid justify="space-between">
<FlexboxGrid.Item>
<ControlLabel>From year</ControlLabel>
<div>
<StyledInputGroup>
<StyledInputNumber
width={100}
min={0}
@ -300,13 +296,11 @@ const NowPlayingView = () => {
setRandomPlaylistFromYear(Number(e));
}}
/>
</StyledInputGroup>
</div>
</FlexboxGrid.Item>
<FlexboxGrid.Item>
<ControlLabel>To year</ControlLabel>
<div>
<StyledInputGroup>
<StyledInputNumber
width={100}
min={0}
@ -316,23 +310,25 @@ const NowPlayingView = () => {
value={autoPlaylistToYear}
onChange={(e: number) => setRandomPlaylistToYear(Number(e))}
/>
</StyledInputGroup>
</div>
</FlexboxGrid.Item>
</FlexboxGrid>
<br />
<ControlLabel>Genre</ControlLabel>
<div>
<StyledInputPickerContainer ref={pickerContainerRef}>
<StyledInputPicker
style={{ width: '100%' }}
container={() => pickerContainerRef.current}
data={genres}
value={randomPlaylistGenre}
virtualized
onChange={(e: string) => setRandomPlaylistGenre(e)}
/>
</div>
</StyledInputPickerContainer>
<br />
<ButtonToolbar>
<StyledButton
appearance="subtle"
onClick={() => handlePlayRandom('addNext')}
loading={isLoadingRandom}
disabled={!(typeof autoPlaylistTrackCount === 'number')}
@ -340,6 +336,7 @@ const NowPlayingView = () => {
<Icon icon="plus-circle" style={{ marginRight: '10px' }} /> Add (next)
</StyledButton>
<StyledButton
appearance="subtle"
onClick={() => handlePlayRandom('addLater')}
loading={isLoadingRandom}
disabled={!(typeof autoPlaylistTrackCount === 'number')}

7
src/components/player/PlayerBar.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useState, useRef } from 'react';
import { useQueryClient } from 'react-query';
import settings from 'electron-settings';
import { FlexboxGrid, Grid, Row, Col, Whisper, Popover } from 'rsuite';
import { FlexboxGrid, Grid, Row, Col, Whisper } from 'rsuite';
import { useHistory } from 'react-router-dom';
import { LazyLoadImage } from 'react-lazy-load-image-component';
import format from 'format-duration';
@ -34,6 +34,7 @@ import placeholderImg from '../../img/placeholder.jpg';
import DebugWindow from '../debug/DebugWindow';
import { CoverArtWrapper } from '../layout/styled';
import { getCurrentEntryList, isCached } from '../../shared/utils';
import { StyledPopover } from '../shared/styled';
const PlayerBar = () => {
const queryClient = useQueryClient();
@ -321,7 +322,7 @@ const PlayerBar = () => {
placement="topStart"
preventOverflow
speaker={
<Popover>
<StyledPopover>
<div style={{ height: '500px' }}>
<LazyLoadImage
src={
@ -341,7 +342,7 @@ const PlayerBar = () => {
height={500}
/>
</div>
</Popover>
</StyledPopover>
}
>
<LazyLoadImage

51
src/components/player/styled.tsx
View File

@ -2,9 +2,13 @@ import { Icon, Slider } from 'rsuite';
import styled from 'styled-components';
export const PlayerContainer = styled.div`
background: ${(props) => props.theme.primary.playerBar};
background: ${(props) => props.theme.colors.layout.playerBar.background};
height: 100%;
border-top: 1px solid #48545c;
border-top: ${(props) => props.theme.other.playerBar.borderTop};
border-right: ${(props) => props.theme.other.playerBar.borderRight};
border-bottom: ${(props) => props.theme.other.playerBar.borderBottom};
border-left: ${(props) => props.theme.other.playerBar.borderLeft};
filter: ${(props) => props.theme.other.playerBar.filter};
`;
export const PlayerColumn = styled.div<{
@ -23,14 +27,16 @@ export const PlayerColumn = styled.div<{
export const PlayerControlIcon = styled(Icon)`
font-size: medium;
color: ${(props) =>
props.active === 'true' ? props.theme.primary.main : props.theme.primary.playerBarButtons};
props.active === 'true'
? props.theme.colors.primary
: props.theme.colors.layout.playerBar.button.color};
padding-left: 10px;
padding-right: 10px;
&:hover {
color: ${(props) =>
props.active === 'true'
? props.theme.primary.main
: props.theme.primary.playerBarButtonsHover};
? props.theme.colors.primary
: props.theme.colors.layout.playerBar.button.colorHover};
}
cursor: pointer;
`;
@ -43,23 +49,23 @@ export const LinkButton = styled.a<{ subtitle?: string }>`
overflow: hidden;
color: ${(props) =>
props.subtitle === 'true'
? props.theme.secondary.playerBarText
: props.theme.primary.playerBarText};
? props.theme.colors.layout.playerBar.colorSecondary
: props.theme.colors.layout.playerBar.color};
&:hover {
text-decoration: underline;
color: ${(props) =>
props.subtitle === 'true'
? props.theme.secondary.playerBarText
: props.theme.primary.playerBarText};
? props.theme.colors.layout.playerBar.colorSecondary
: props.theme.colors.layout.playerBar.color};
cursor: pointer;
}
&:active {
color: ${(props) =>
props.subtitle === 'true'
? props.theme.secondary.playerBarText
: props.theme.primary.playerBarText};
? props.theme.colors.layout.playerBar.colorSecondary
: props.theme.colors.layout.playerBar.color};
}
`;
@ -69,26 +75,31 @@ export const CustomSlider = styled(Slider)<{ isDragging?: boolean }>`
display: block;
}
.rs-slider-progress-bar {
background-color: ${(props) => props.theme.primary.main};
background-color: ${(props) => props.theme.colors.primary};
}
}
.rs-slider-bar {
background-color: ${(props) => props.theme.colors.slider.background};
}
.rs-slider-progress-bar {
background-color: ${(props) =>
props.$isDragging ? props.theme.primary.main : props.theme.primary.sliderBackground};
props.$isDragging ? props.theme.colors.primary : props.theme.colors.slider.progressBar};
}
.rs-slider-handle::before {
display: none;
border: ${(props) => `1px solid ${props.theme.primary.main} !important`};
border: ${(props) => `1px solid ${props.theme.colors.primary} !important`};
}
`;
export const DurationSpan = styled.span`
color: ${(props) => props.theme.primary.playerBarText};
color: ${(props) => props.theme.colors.layout.playerBar.color};
`;
export const VolumeIcon = styled(Icon)`
color: ${(props) => props.theme.primary.playerBarText};
color: ${(props) => props.theme.colors.layout.playerBar.color};
`;
export const MiniViewContainer = styled.div<{ display: string }>`
@ -99,12 +110,12 @@ export const MiniViewContainer = styled.div<{ display: string }>`
right: 25px;
padding: 8px;
width: 400px;
height: 450px;
background: ${(props) => props.theme.primary.background};
height: ${(props) => props.theme.other.miniPlayer.height};
background: ${(props) => props.theme.colors.layout.page.background};
border: 1px #000 solid;
filter: drop-shadow(0px 1px 2px #121316);
overflow: hidden auto;
opacity: ${(props) => (props.display === 'true' ? 0.95 : 0)};
color: ${(props) => `${props.theme.primary.text} !important`};
opacity: ${(props) => (props.display === 'true' ? props.theme.other.miniPlayer.opacity : 0)};
color: ${(props) => `${props.theme.colors.layout.page.color} !important`};
z-index: 500;
`;

8
src/components/playlist/PlaylistList.tsx
View File

@ -1,7 +1,7 @@
import React, { useRef, useState } from 'react';
import { useQuery, useQueryClient } from 'react-query';
import { useHistory } from 'react-router-dom';
import { Form, Input, Popover, Whisper } from 'rsuite';
import { Form, Input, Whisper } from 'rsuite';
import settings from 'electron-settings';
import useSearchQuery from '../../hooks/useSearchQuery';
import { createPlaylist, getPlaylists } from '../../api/api';
@ -10,7 +10,7 @@ import PageLoader from '../loader/PageLoader';
import GenericPage from '../layout/GenericPage';
import GenericPageHeader from '../layout/GenericPageHeader';
import GridViewType from '../viewtypes/GridViewType';
import { StyledButton, StyledInputGroup } from '../shared/styled';
import { StyledButton, StyledInputGroup, StyledPopover } from '../shared/styled';
import { errorMessages, isFailedResponse } from '../../shared/utils';
import { notifyToast } from '../shared/toast';
import { AddPlaylistButton } from '../shared/ToolbarButtons';
@ -99,7 +99,7 @@ const PlaylistList = () => {
placement="auto"
trigger="click"
speaker={
<Popover>
<StyledPopover>
<Form>
<StyledInputGroup>
<Input
@ -123,7 +123,7 @@ const PlaylistList = () => {
Create
</StyledButton>
</Form>
</Popover>
</StyledPopover>
}
>
<AddPlaylistButton

12
src/components/playlist/PlaylistView.tsx
View File

@ -3,7 +3,7 @@ import _ from 'lodash';
import fs from 'fs';
import path from 'path';
import settings from 'electron-settings';
import { ButtonToolbar, Form, Input, Popover, Whisper } from 'rsuite';
import { ButtonToolbar, Form, Input, Whisper } from 'rsuite';
import { useHotkeys } from 'react-hotkeys-hook';
import { useQuery, useQueryClient } from 'react-query';
import { useParams, useHistory } from 'react-router-dom';
@ -58,7 +58,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, StyledInputGroup } from '../shared/styled';
import { StyledButton, StyledCheckbox, StyledInputGroup, StyledPopover } from '../shared/styled';
import {
moveToIndex,
removeFromPlaylist,
@ -414,7 +414,7 @@ const PlaylistView = ({ ...rest }) => {
placement="auto"
trigger="click"
speaker={
<Popover>
<StyledPopover>
<Form>
<StyledInputGroup>
<Input
@ -450,7 +450,7 @@ const PlaylistView = ({ ...rest }) => {
Edit
</StyledButton>
</Form>
</Popover>
</StyledPopover>
}
>
<EditButton size="md" disabled={misc.isProcessingPlaylist.includes(data?.id)} />
@ -461,12 +461,12 @@ const PlaylistView = ({ ...rest }) => {
placement="auto"
trigger="click"
speaker={
<Popover>
<StyledPopover>
<p>Are you sure you want to delete this playlist?</p>
<StyledButton onClick={handleDelete} appearance="link">
Yes
</StyledButton>
</Popover>
</StyledPopover>
}
>
<DeleteButton

5
src/components/scrollingmenu/ScrollingMenu.tsx
View File

@ -41,7 +41,6 @@ const ScrollingMenu = ({
tabIndex={0}
onClick={onClickTitle}
onKeyDown={(e: any) => {
console.log(e);
if (e.key === ' ' || e.key === 'Enter') {
onClickTitle();
}
@ -51,9 +50,11 @@ const ScrollingMenu = ({
</SectionTitle>
</FlexboxGrid.Item>
<FlexboxGrid.Item>
{data.length > 0 && (
<ButtonToolbar>
<ButtonGroup>
<StyledIconButton
appearance="subtle"
icon={<Icon icon="arrow-left" />}
onClick={() => {
scrollContainerRef.current.scrollLeft -=
@ -61,6 +62,7 @@ const ScrollingMenu = ({
}}
/>
<StyledIconButton
appearance="subtle"
icon={<Icon icon="arrow-right" />}
onClick={() => {
scrollContainerRef.current.scrollLeft +=
@ -69,6 +71,7 @@ const ScrollingMenu = ({
/>
</ButtonGroup>
</ButtonToolbar>
)}
</FlexboxGrid.Item>
</FlexboxGrid>
</SectionTitleWrapper>

20
src/components/settings/Config.tsx
View File

@ -1,13 +1,13 @@
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { shell } from 'electron';
import { Button, Whisper, Popover, Nav, ButtonToolbar } from 'rsuite';
import { Whisper, Nav, ButtonToolbar } from 'rsuite';
import { startScan, getScanStatus } from '../../api/api';
import GenericPage from '../layout/GenericPage';
import DisconnectButton from './DisconnectButton';
import GenericPageHeader from '../layout/GenericPageHeader';
import setDefaultSettings from '../shared/setDefaultSettings';
import { StyledButton, StyledNavItem } from '../shared/styled';
import { StyledButton, StyledNavItem, StyledPopover } from '../shared/styled';
import PlaybackConfig from './ConfigPanels/PlaybackConfig';
import LookAndFeelConfig from './ConfigPanels/LookAndFeelConfig';
import PlayerConfig from './ConfigPanels/PlayerConfig';
@ -106,23 +106,23 @@ const Config = () => {
trigger="click"
placement="auto"
speaker={
<Popover title="Confirm">
<StyledPopover title="Confirm">
<div>Are you sure you want to reset your settings to default?</div>
<strong>WARNING: This will reload the application</strong>
<div>
<Button
<StyledButton
id="reset-submit-button"
size="sm"
onClick={() => {
setDefaultSettings(true);
window.location.reload();
}}
appearance="link"
appearance="primary"
>
Yes
</Button>
<strong>WARNING: This will reload the application</strong>
</StyledButton>
</div>
</Popover>
</StyledPopover>
}
>
<StyledButton size="sm">Reset defaults</StyledButton>
@ -133,7 +133,7 @@ const Config = () => {
enterable
preventOverflow
speaker={
<Popover>
<StyledPopover>
<>
Current version: {packageJson.version}
<br />
@ -165,7 +165,7 @@ const Config = () => {
View CHANGELOG
</StyledButton>
</>
</Popover>
</StyledPopover>
}
>
<StyledButton

63
src/components/settings/ConfigPanels/CacheConfig.tsx
View File

@ -3,9 +3,18 @@ import settings from 'electron-settings';
import { shell } from 'electron';
import fs from 'fs';
import path from 'path';
import { InputGroup, Button, Tag, Message, Icon, ButtonToolbar, Whisper, Popover } from 'rsuite';
import { Message, Icon, ButtonToolbar, Whisper } from 'rsuite';
import { ConfigPanel } from '../styled';
import { StyledInput, StyledCheckbox, StyledInputGroup, StyledLink } from '../../shared/styled';
import {
StyledInput,
StyledCheckbox,
StyledInputGroup,
StyledLink,
StyledPopover,
StyledTag,
StyledButton,
StyledInputGroupButton,
} from '../../shared/styled';
import { getSongCachePath, getImageCachePath, getRootCachePath } from '../../../shared/utils';
import { notifyToast } from '../../shared/toast';
import { setMiscSetting } from '../../../redux/miscSlice';
@ -112,7 +121,7 @@ const CacheConfig = () => {
<>
<StyledInputGroup>
<StyledInput value={newCachePath} onChange={(e: string) => setNewCachePath(e)} />
<InputGroup.Button
<StyledInputGroupButton
onClick={() => {
const check = fs.existsSync(newCachePath);
if (check) {
@ -131,16 +140,16 @@ const CacheConfig = () => {
}}
>
<Icon icon="check" />
</InputGroup.Button>
<InputGroup.Button
</StyledInputGroupButton>
<StyledInputGroupButton
onClick={() => {
setIsEditingCachePath(false);
setErrorMessage('');
}}
>
<Icon icon="close" />
</InputGroup.Button>
<InputGroup.Button
</StyledInputGroupButton>
<StyledInputGroupButton
onClick={() => {
const defaultPath = path.join(path.dirname(settings.file()));
settings.setSync('cachePath', defaultPath);
@ -151,7 +160,7 @@ const CacheConfig = () => {
}}
>
Reset to default
</InputGroup.Button>
</StyledInputGroupButton>
</StyledInputGroup>
<p style={{ fontSize: 'smaller' }}>
*You will need to manually move any existing cached files to their new location.
@ -163,7 +172,7 @@ const CacheConfig = () => {
Location:{' '}
<div style={{ overflow: 'auto' }}>
<StyledLink onClick={() => shell.openPath(getRootCachePath())}>
{getRootCachePath()}
{getRootCachePath()} <Icon icon="external-link" />
</StyledLink>
</div>
</>
@ -177,9 +186,9 @@ const CacheConfig = () => {
}}
>
Songs{' '}
<Tag>
<StyledTag>
{songCacheSize} MB {imgCacheSize === 9999999 && '- Folder not found'}
</Tag>
</StyledTag>
</StyledCheckbox>
<StyledCheckbox
defaultChecked={cacheImages}
@ -189,41 +198,41 @@ const CacheConfig = () => {
}}
>
Images{' '}
<Tag>
<StyledTag>
{imgCacheSize} MB {imgCacheSize === 9999999 && '- Folder not found'}
</Tag>
</StyledTag>
</StyledCheckbox>
</div>
<br />
<ButtonToolbar>
<Button onClick={() => setIsEditingCachePath(true)}>Edit cache location</Button>
<StyledButton onClick={() => setIsEditingCachePath(true)}>Edit cache location</StyledButton>
<Whisper
trigger="click"
placement="autoVertical"
speaker={
<Popover>
<StyledPopover>
Which cache would you like to clear?
<ButtonToolbar>
<Button size="sm" onClick={handleClearSongCache}>
<StyledButton size="sm" onClick={handleClearSongCache}>
Songs
</Button>
<Button size="sm" onClick={() => handleClearImageCache('playlist')}>
</StyledButton>
<StyledButton size="sm" onClick={() => handleClearImageCache('playlist')}>
Playlist images
</Button>
<Button size="sm" onClick={() => handleClearImageCache('album')}>
</StyledButton>
<StyledButton size="sm" onClick={() => handleClearImageCache('album')}>
Album images
</Button>
<Button size="sm" onClick={() => handleClearImageCache('artist')}>
</StyledButton>
<StyledButton size="sm" onClick={() => handleClearImageCache('artist')}>
Artist images
</Button>
<Button size="sm" onClick={() => handleClearImageCache('folder')}>
</StyledButton>
<StyledButton size="sm" onClick={() => handleClearImageCache('folder')}>
Folder images
</Button>
</StyledButton>
</ButtonToolbar>
</Popover>
</StyledPopover>
}
>
<Button>Clear cache</Button>
<StyledButton>Clear cache</StyledButton>
</Whisper>
</ButtonToolbar>
</ConfigPanel>

8
src/components/settings/ConfigPanels/ListViewConfig.tsx
View File

@ -1,8 +1,8 @@
import React, { useEffect, useState } from 'react';
import { nanoid } from 'nanoid/non-secure';
import settings from 'electron-settings';
import { TagPicker, ControlLabel } from 'rsuite';
import { StyledInputNumber, StyledPanel } from '../../shared/styled';
import { ControlLabel } from 'rsuite';
import { StyledInputNumber, StyledPanel, StyledTagPicker } from '../../shared/styled';
import ListViewTable from '../../viewtypes/ListViewTable';
import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
import {
@ -100,12 +100,12 @@ const ListViewConfig = ({ defaultColumns, columnPicker, columnList, settingsConf
<div style={{ width: '100%' }}>
<div>
<StyledPanel bordered bodyFill>
<TagPicker
<StyledTagPicker
data={columnPicker}
defaultValue={defaultColumns}
value={selectedColumns}
style={{ width: '100%' }}
onChange={(e) => {
onChange={(e: any) => {
const columns: any[] = [];
if (e) {
e.forEach((selected: string) => {

6
src/components/settings/DisconnectButton.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import settings from 'electron-settings';
import { Button } from 'rsuite';
import { StyledButton } from '../shared/styled';
const DisconnectButton = () => {
const handleDisconnect = () => {
@ -17,9 +17,9 @@ const DisconnectButton = () => {
window.location.reload();
};
return (
<Button onClick={handleDisconnect} size="sm">
<StyledButton onClick={handleDisconnect} size="sm">
Disconnect
</Button>
</StyledButton>
);
};

10
src/components/settings/styled.tsx
View File

@ -2,27 +2,27 @@ import styled from 'styled-components';
import { Panel } from 'rsuite';
export const ConfigPanel = styled(Panel)`
color: ${(props) => props.theme.primary.text};
color: ${(props) => props.theme.colors.layout.page.color};
padding: 20px;
min-width: 500px;
max-width: 800px;
margin: 15px auto 15px auto;
border-radius: 0px;
border-radius: ${(props) => props.theme.other.panel.borderRadius};
.rs-panel-heading {
font-size: ${(props) => props.theme.all.fonts.panelHeaderFontSize};
font-size: ${(props) => props.theme.fonts.size.panelTitle};
}
`;
export const MockFooter = styled.div`
width: 100%;
height: 100%;
background: ${(props) => props.theme.primary.playerBar};
background: ${(props) => props.theme.colors.layout.playerBar.background};
border-top: 1px solid #48545c;
`;
export const LoginPanel = styled(Panel)`
color: ${(props) => props.theme.primary.text};
color: ${(props) => props.theme.colors.layout.page.color};
padding: 20px;
min-width: 300px;
max-width: 300px;

106
src/components/shared/ContextMenu.tsx
View File

@ -4,7 +4,7 @@ import _ from 'lodash';
import { nanoid } from 'nanoid/non-secure';
import { useQuery, useQueryClient } from 'react-query';
import { useHistory } from 'react-router';
import { Col, FlexboxGrid, Form, Grid, Icon, Input, Row, Whisper } from 'rsuite';
import { Col, FlexboxGrid, Form, Grid, Icon, Row, Whisper } from 'rsuite';
import {
getPlaylists,
updatePlaylistSongsLg,
@ -51,9 +51,10 @@ import {
StyledInputPicker,
StyledButton,
StyledInputGroup,
StyledPopover,
StyledInputNumber,
StyledIconButton,
StyledInputPickerContainer,
ContextMenuPopover,
StyledInput,
} from './styled';
import { notifyToast } from './toast';
import { errorMessages, getCurrentEntryList, isFailedResponse } from '../../shared/utils';
@ -555,8 +556,38 @@ export const GlobalContextMenu = () => {
enterable
placement="autoHorizontalStart"
trigger="hover"
delayShow={300}
speaker={
<StyledPopover>
<ContextMenuPopover style={{ width: '150px' }}>
<Grid fluid>
<Row>
<Col xs={12}>
<StyledButton onClick={handleMoveToTop} block>
<Icon icon="angle-double-up" />
</StyledButton>
</Col>
<Col xs={12}>
<StyledButton onClick={handleMoveUpOne} block>
<Icon icon="angle-up" />
</StyledButton>
</Col>
</Row>
<Row>
<Col xs={12}>
<StyledButton onClick={handleMoveToBottom} block>
<Icon icon="angle-double-down" />
</StyledButton>
</Col>
<Col xs={12}>
<StyledButton onClick={handleMoveDownOne} block>
<Icon icon="angle-down" />
</StyledButton>
</Col>
</Row>
</Grid>
<br />
<Form>
<StyledInputGroup>
<StyledInputNumber
@ -583,51 +614,7 @@ export const GlobalContextMenu = () => {
</StyledButton>
</StyledInputGroup>
</Form>
<Grid fluid>
<Row>
<Col xs={12}>
<StyledIconButton
icon={<Icon icon="angle-double-up" />}
onClick={handleMoveToTop}
block
>
Top
</StyledIconButton>
</Col>
<Col xs={12}>
<StyledIconButton
icon={<Icon icon="angle-up" />}
onClick={handleMoveUpOne}
block
>
Up
</StyledIconButton>
</Col>
</Row>
<Row>
<Col xs={12}>
<StyledIconButton
icon={<Icon icon="angle-double-down" />}
onClick={handleMoveToBottom}
block
>
Bottom
</StyledIconButton>
</Col>
<Col xs={12}>
<StyledIconButton
icon={<Icon icon="angle-down" />}
onClick={handleMoveDownOne}
block
>
Down
</StyledIconButton>
</Col>
</Row>
</Grid>
</StyledPopover>
</ContextMenuPopover>
}
>
<ContextMenuButton
@ -643,9 +630,11 @@ export const GlobalContextMenu = () => {
placement="autoHorizontalStart"
trigger="none"
speaker={
<StyledPopover>
<ContextMenuPopover>
<StyledInputPickerContainer ref={playlistPickerContainerRef}>
<StyledInputGroup>
<StyledInputPicker
container={() => playlistPickerContainerRef.current}
data={playlists}
placement="autoVerticalStart"
virtualized
@ -656,7 +645,8 @@ export const GlobalContextMenu = () => {
/>
<StyledButton
disabled={
!selectedPlaylistId || misc.isProcessingPlaylist.includes(selectedPlaylistId)
!selectedPlaylistId ||
misc.isProcessingPlaylist.includes(selectedPlaylistId)
}
loading={misc.isProcessingPlaylist.includes(selectedPlaylistId)}
onClick={handleAddToPlaylist}
@ -664,6 +654,7 @@ export const GlobalContextMenu = () => {
Add
</StyledButton>
</StyledInputGroup>
</StyledInputPickerContainer>
<div>
<StyledButton
@ -676,14 +667,11 @@ export const GlobalContextMenu = () => {
{shouldCreatePlaylist && (
<Form>
<StyledInputGroup>
<Input
<StyledInput
placeholder="Enter name..."
value={newPlaylistName}
onChange={(e) => setNewPlaylistName(e)}
onChange={(e: string) => setNewPlaylistName(e)}
/>
</StyledInputGroup>
<br />
<StyledButton
size="sm"
type="submit"
@ -699,7 +687,7 @@ export const GlobalContextMenu = () => {
</StyledButton>
</Form>
)}
</StyledPopover>
</ContextMenuPopover>
}
>
<ContextMenuButton
@ -718,12 +706,12 @@ export const GlobalContextMenu = () => {
placement="autoHorizontalStart"
trigger="none"
speaker={
<StyledPopover>
<ContextMenuPopover>
<p>Are you sure you want to delete {multiSelect.selected?.length} playlist(s)?</p>
<StyledButton onClick={handleDeletePlaylist} appearance="link">
Yes
</StyledButton>
</StyledPopover>
</ContextMenuPopover>
}
>
<ContextMenuButton

7
src/components/shared/CustomTooltip.tsx
View File

@ -3,10 +3,11 @@ import { Tooltip, Whisper } from 'rsuite';
import styled from 'styled-components';
const StyledTooltip = styled(Tooltip)`
border: 1px #3c3f43 solid;
.rs-tooltip-inner {
background-color: ${(props) => props.theme.primary.background};
color: ${(props) => props.theme.primary.text};
background-color: ${(props) => props.theme.colors.tooltip.background};
color: ${(props) => props.theme.colors.tooltip.color};
border-radius: ${(props) => props.theme.other.tooltip.borderRadius};
border: ${(props) => props.theme.other.tooltip.border};
}
`;

8
src/components/shared/ToolbarButtons.tsx
View File

@ -98,7 +98,9 @@ export const DownloadButton = ({ ...rest }) => {
export const ShuffleButton = ({ ...rest }) => {
return (
<CustomTooltip text="Shuffle queue" placement="bottom">
<StyledIconButton icon={<Icon icon="random" />} tabIndex={0} {...rest} />
<StyledButton tabIndex={0} {...rest}>
<Icon icon="random" />
</StyledButton>
</CustomTooltip>
);
};
@ -106,7 +108,9 @@ export const ShuffleButton = ({ ...rest }) => {
export const ClearQueueButton = ({ ...rest }) => {
return (
<CustomTooltip text="Clear queue" placement="bottom">
<StyledIconButton icon={<Icon icon="trash2" />} tabIndex={0} {...rest} />
<StyledButton tabIndex={0} {...rest}>
<Icon icon="trash2" />
</StyledButton>
</CustomTooltip>
);
};

289
src/components/shared/setDefaultSettings.ts
View File

@ -425,6 +425,295 @@ const setDefaultSettings = (force: boolean) => {
},
]);
}
if (force || !settings.hasSync('themes')) {
settings.setSync('themes', [
{
label: 'Default Dark',
value: 'defaultDark',
fonts: {
size: {
page: '14px',
pageTitle: '40px',
panelTitle: '20px',
},
},
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',
},
},
},
]);
}
};
export default setDefaultSettings;

342
src/components/shared/styled.ts
View File

@ -13,6 +13,8 @@ import {
InputPicker,
Popover,
Panel,
TagPicker,
Tag,
} from 'rsuite';
import styled from 'styled-components';
@ -22,31 +24,121 @@ export const HeaderButton = styled(Button)`
`;
export const StyledButton = styled(Button)<{ width: number }>`
border-radius: ${(props) => props.theme.other.button.borderRadius} !important;
background: ${(props) =>
props.appearance === 'primary' ? `${props.theme.primary.main} !important` : undefined};
props.appearance === 'primary'
? `${props.theme.colors.primary}`
: props.appearance === 'subtle' || props.appearance === 'link'
? undefined
: `${props.theme.colors.button.default.background}`} !important;
color: ${(props) =>
props.appearance === 'primary'
? `${props.theme.colors.button.primary.color}`
: props.appearance === 'subtle'
? `${props.theme.colors.button.subtle.color}`
: props.appearance === 'link'
? `${props.theme.colors.button.link.color}`
: `${props.theme.colors.button.default.color}`} !important;
width: ${(props) => `${props.width}px`};
&:active,
&:focus,
&:hover {
text-decoration: none;
color: ${(props) =>
props.appearance === 'primary'
? `${props.theme.colors.button.primary.colorHover}`
: props.appearance === 'subtle'
? `${props.theme.colors.button.subtle.colorHover}`
: props.appearance === 'link'
? `${props.theme.colors.button.link.colorHover}`
: `${props.theme.colors.button.default.colorHover}`} !important;
background: ${(props) =>
props.appearance === 'primary'
? `${props.theme.colors.button.primary.backgroundHover}`
: props.appearance === 'subtle'
? `${props.theme.colors.button.subtle.backgroundHover}`
: props.appearance === 'link'
? undefined
: `${props.theme.colors.button.default.backgroundHover}`} !important;
}
`;
export const StyledInputGroup = styled(InputGroup)`
input {
background-color: ${(props) => props.theme.primary.inputBackground};
color: ${(props) => `${props.theme.primary.text} !important`};
border-radius: ${(props) => props.theme.other.input.borderRadius};
`;
export const StyledInputGroupButton = styled(InputGroup.Button)`
background: ${(props) =>
props.appearance === 'primary'
? `${props.theme.colors.primary}`
: props.appearance === 'subtle' || props.appearance === 'link'
? undefined
: `${props.theme.colors.button.default.background}`} !important;
color: ${(props) =>
props.appearance === 'primary'
? `${props.theme.colors.button.primary.color}`
: props.appearance === 'subtle'
? `${props.theme.colors.button.subtle.color}`
: props.appearance === 'link'
? 'none'
: `${props.theme.colors.button.default.color}`} !important;
&:active,
&:focus,
&:hover {
background: ${(props) =>
props.appearance === 'primary'
? `${props.theme.colors.button.primary.backgroundHover}`
: props.appearance === 'subtle' || props.appearance === 'link'
? `none !important`
: `${props.theme.colors.button.default.backgroundHover} !important`};
}
&:hover {
color: ${(props) =>
props.appearance === 'primary'
? `${props.theme.colors.button.primary.colorHover}`
: props.appearance !== 'subtle'
? `${props.theme.colors.button.default.colorHover}`
: `${props.theme.colors.button.subtle.colorHover} !important`};
}
border-radius: ${(props) => props.theme.other.input.borderRadius};
border-bottom-right-radius: ${(props) => props.theme.other.input.borderRadius} !important;
border-top-right-radius: ${(props) => props.theme.other.input.borderRadius} !important;
`;
export const StyledInputNumber = styled(InputNumber)<{ width: number }>`
border: 1px #3c3f43 solid !important;
border-radius: ${(props) => props.theme.other.input.borderRadius} !important;
input {
background-color: ${(props) => props.theme.primary.inputBackground};
background-color: ${(props) => props.theme.colors.input.background};
}
.rs-input {
border-radius: ${(props) => props.theme.other.input.borderRadius} !important;
}
&:hover,
&:active,
&:focus {
border-color: ${(props) => props.theme.colors.primary} !important;
}
width: ${(props) => `${props.width}px`};
`;
export const StyledInput = styled(Input)<{ width: number }>`
input {
background-color: ${(props) => props.theme.primary.inputBackground};
}
border: 1px #3c3f43 solid;
border-radius: ${(props) => props.theme.other.input.borderRadius} !important;
color: ${(props) => props.theme.colors.input.color} !important;
background: ${(props) => props.theme.colors.input.background} !important;
width: ${(props) => `${props.width}px`};
border-radius: ${(props) => props.theme.other.input.borderRadius};
`;
export const StyledCheckbox = styled(Checkbox)`
@ -54,12 +146,12 @@ export const StyledCheckbox = styled(Checkbox)`
label {
span {
&:before {
border: ${(props) => `1px solid ${props.theme.primary.main}`};
border: ${(props) => `1px solid ${props.theme.colors.primary}`};
}
span {
&:before {
background-color: ${(props) =>
props.defaultChecked ? `${props.theme.primary.main} !important` : undefined};
props.defaultChecked ? `${props.theme.colors.primary} !important` : undefined};
}
&:after {
border: transparent !important;
@ -79,7 +171,7 @@ export const StyledRadio = styled(Radio)`
background-color: transparent !important;
}
&:after {
background: ${(props) => `${props.theme.primary.main} !important`};
background: ${(props) => `${props.theme.colors.primary} !important`};
}
}
}
@ -88,39 +180,62 @@ export const StyledRadio = styled(Radio)`
`;
export const StyledIconButton = styled(IconButton)`
&:hover {
border-radius: ${(props) => props.theme.other.button.borderRadius} !important;
background: ${(props) =>
props.appearance === 'subtle' ? 'transparent !important' : undefined};
color: ${(props) => (props.appearance === 'subtle' ? props.theme.primary.main : undefined)};
}
&:focus {
props.appearance === 'primary'
? `${props.theme.colors.primary}`
: props.appearance === 'subtle' || props.appearance === 'link'
? undefined
: `${props.theme.colors.button.default.background}`};
color: ${(props) =>
props.appearance === 'primary'
? `${props.theme.colors.button.primary.color}`
: props.appearance === 'subtle'
? `${props.theme.colors.button.subtle.color}`
: props.appearance === 'link'
? undefined
: `${props.theme.colors.button.default.color}`};
width: ${(props) => `${props.width}px`};
&:active,
&:focus,
&:hover {
color: ${(props) =>
props.appearance === 'primary'
? `${props.theme.colors.button.primary.colorHover}`
: props.appearance !== 'subtle'
? `${props.theme.colors.button.default.colorHover}`
: `${props.theme.colors.button.subtle.colorHover}`};
background: ${(props) =>
props.appearance === 'subtle' ? 'transparent !important' : undefined};
color: ${(props) => (props.appearance === 'subtle' ? props.theme.primary.main : undefined)};
props.appearance === 'primary'
? `${props.theme.colors.button.primary.backgroundHover}`
: props.appearance === 'subtle'
? `${props.theme.colors.button.subtle.backgroundHover}`
: props.appearance === 'link'
? undefined
: `${props.theme.colors.button.default.backgroundHover}`};
}
background-color: ${(props) =>
props.appearance === 'primary' ? props.theme.primary.main : undefined};
width: ${(props) => `${props.width}px`};
`;
export const StyledNavItem = styled(Nav.Item)`
a {
color: ${(props) => (props.active ? `${props.theme.primary.main} !important;` : undefined)};
&:hover {
color: ${(props) => `${props.theme.primary.main} !important;`};
}
color: ${(props) =>
props.active
? `${props.theme.colors.primary} !important`
: `${props.theme.colors.nav.color} !important`};
}
`;
export const StyledIconToggle = styled(Icon)<{ active: string }>`
cursor: pointer;
color: ${(props) =>
props.active === 'true' ? props.theme.primary.main : props.theme.primary.text};
props.active === 'true' ? props.theme.colors.primary : props.theme.colors.layout.page.color};
`;
export const StyledRate = styled(Rate)`
color: ${(props) => props.theme.primary.main};
color: ${(props) => props.theme.colors.primary};
`;
export const StyledSlider = styled(Slider)`
@ -131,20 +246,111 @@ export const StyledSlider = styled(Slider)`
}
`;
export const StyledInputPickerContainer = styled.div`
.rs-picker-menu {
background: ${(props) => props.theme.colors.input.background};
border-radius: ${(props) => props.theme.other.input.borderRadius};
}
.rs-picker-select-menu-item-active {
background: ${(props) => props.theme.colors.input.backgroundActive};
&:hover {
background: ${(props) => props.theme.colors.input.backgroundActive};
}
}
.rs-picker-select-menu-item-focus {
color: ${(props) => props.theme.colors.input.color};
background: ${(props) => props.theme.colors.input.backgroundHover};
}
.rs-picker-select-menu-item,
.rs-picker-select-menu-group-title {
color: ${(props) => props.theme.colors.input.color};
&:hover {
color: ${(props) => props.theme.colors.input.color};
&:hover {
background: ${(props) => props.theme.colors.input.backgroundHover};
}
}
}
.rs-picker-select-menu-group-title {
color: ${(props) => props.theme.colors.input.color};
&:hover {
color: ${(props) => props.theme.colors.input.color};
}
}
.rs-check-item {
background: ${(props) => props.theme.colors.input.background} !important;
border-radius: ${(props) => props.theme.other.input.borderRadius};
&:hover {
color: ${(props) => props.theme.colors.input.color};
background-color: ${(props) => props.theme.colors.input.backgroundHover} !important;
}
}
.rs-check-item-focus {
color: ${(props) => props.theme.colors.input.color};
background: ${(props) => props.theme.colors.input.backgroundActive} !important;
}
.rs-checkbox-checked {
.rs-checkbox-checker {
span {
&:before {
border: ${(props) => `1px solid ${props.theme.colors.primary}`};
}
span {
&:before {
background-color: ${(props) => `${props.theme.colors.primary} !important`};
}
&:after {
border: transparent !important;
}
}
}
}
}
`;
export const StyledInputPicker = styled(InputPicker)<{ width?: number }>`
border: 1px #3c3f43 solid !important;
border-radius: ${(props) => props.theme.other.input.borderRadius} !important;
&:hover,
&:active,
&:focus {
border-color: ${(props) => props.theme.colors.primary} !important;
}
.rs-picker-toggle-value {
color: ${(props) => `${props.theme.primary.text} !important`};
color: ${(props) => `${props.theme.colors.layout.page.color} !important`};
}
.rs-picker-toggle {
border-radius: ${(props) => props.theme.other.input.borderRadius};
}
.rs-picker-select-menu-item {
background: ${(props) => `${props.theme.colors.background.input} !important`};
}
.rs-btn-default {
background: ${(props) => `${props.theme.primary.inputBackground} !important`};
background: ${(props) => `${props.theme.colors.input.background} !important`};
}
width: ${(props) => `${props.width}px`};
border-radius: ${(props) => props.theme.other.input.borderRadius};
`;
export const StyledIcon = styled(Icon)`
color: ${(props) => `${props.theme.primary.main} !important`};
color: ${(props) => `${props.theme.colors.primary} !important`};
`;
export const ContextMenuWindow = styled.div<{
@ -155,6 +361,7 @@ export const ContextMenuWindow = styled.div<{
width: number;
hasTitle: boolean;
}>`
background: ${(props) => props.theme.colors.contextMenu.background};
position: absolute;
top: ${(props) => `${props.yPos}px`};
left: ${(props) => `${props.xPos}px`};
@ -166,12 +373,22 @@ export const ContextMenuWindow = styled.div<{
overflow: hidden;
overflow-x: hidden;
font-size: smaller;
background: ${(props) => props.theme.primary.sideBar};
border: 1px #3c4043 solid;
z-index: 2000;
`;
export const StyledContextMenuButton = styled(Button)`
color: ${(props) =>
props.disabled
? props.theme.colors.contextMenu.colorDisabled
: props.theme.colors.contextMenu.color} !important;
&:hover,
&:active,
&:focus {
color: ${(props) => props.theme.colors.contextMenu.color};
background: ${(props) => props.theme.colors.contextMenu.backgroundHover};
}
text-align: left;
margin: 0px !important;
border-radius: 0px !important;
@ -182,14 +399,23 @@ export const ContextMenuDivider = styled.hr`
`;
export const ContextMenuTitle = styled.div`
color: ${(props) => props.theme.primary.text};
color: ${(props) => props.theme.colors.layout.page.color};
margin: 5px 0 5px 5px;
user-select: none;
`;
export const ContextMenuPopover = styled(Popover)`
color: ${(props) => props.theme.colors.contextMenu.color} !important;
background: ${(props) => props.theme.colors.contextMenu.background};
position: absolute;
z-index: 1000;
`;
export const StyledPopover = styled(Popover)`
color: ${(props) => props.theme.colors.popover.color};
background: ${(props) => props.theme.colors.popover.background};
position: absolute;
z-index: 2;
z-index: 1000;
`;
export const SectionTitleWrapper = styled.div`
@ -199,26 +425,62 @@ export const SectionTitleWrapper = styled.div`
export const SectionTitle = styled.a`
font-size: 20px;
color: ${(props) => props.theme.primary.text};
color: ${(props) => props.theme.colors.layout.page.color};
cursor: ${(props) => (props.onClick ? 'pointer' : 'default')};
&:hover {
cursor: ${(props) => (props.onClick ? 'pointer' : 'default')};
text-decoration: none;
color: ${(props) => (!props.onClick ? props.theme.primary.text : undefined)};
color: ${(props) =>
!props.onClick ? props.theme.colors.layout.page.color : props.theme.colors.primary};
}
&:active,
&:focus {
text-decoration: none;
color: ${(props) => (!props.onClick ? props.theme.primary.text : undefined)};
color: ${(props) =>
!props.onClick ? props.theme.colors.layout.page.color : props.theme.colors.primary};
}
`;
export const StyledLink = styled.a`
color: ${(props) => props.theme.primary.text};
color: ${(props) => props.theme.colors.layout.page.color};
cursor: pointer;
&:hover {
text-decoration: none;
color: ${(props) => props.theme.colors.button.link.colorHover};
}
`;
export const StyledPanel = styled(Panel)`
color: ${(props) => props.theme.primary.text};
color: ${(props) => props.theme.colors.layout.page.color};
border-radius: ${(props) => props.theme.other.panel.borderRadius};
`;
export const StyledTagPicker = styled(TagPicker)`
border: 1px #3c3f43 solid !important;
border-radius: ${(props) => props.theme.other.input.borderRadius} !important;
&:hover,
&:active,
&:focus {
border-color: ${(props) => props.theme.colors.primary} !important;
}
.rs-picker-input {
&:hover {
border-color: ${(props) => props.theme.colors.primary};
}
}
.rs-tag {
color: ${(props) => props.theme.colors.tag.text};
background: ${(props) => props.theme.colors.tag.background};
border-radius: ${(props) => props.theme.other.tag.borderRadius};
}
`;
export const StyledTag = styled(Tag)`
color: ${(props) => props.theme.colors.tag.text};
background: ${(props) => props.theme.colors.tag.background};
border-radius: ${(props) => props.theme.other.tag.borderRadius};
`;

4
src/components/viewtypes/ListViewTable.tsx
View File

@ -45,13 +45,13 @@ import { setActive } from '../../redux/albumSlice';
const StyledTable = styled(Table)<{ rowHeight: number; $isDragging: boolean }>`
.rs-table-row.selected {
background: ${(props) => props.theme.primary.rowSelected} !important;
background: ${(props) => props.theme.colors.table.selectedRow} !important;
// Resolve bug from rsuite-table where certain scrollpoints show a horizontal border
height: ${(props) => `${props.rowHeight + 1}px !important`};
}
.rs-table-row.dragover {
box-shadow: ${(props) => `inset 0px 5px 0px -3px ${props.theme.primary.main}`};
box-shadow: ${(props) => `inset 0px 5px 0px -3px ${props.theme.colors.primary}`};
}
.rs-table-row,

18
src/components/viewtypes/styled.tsx
View File

@ -12,14 +12,16 @@ export const RsuiteLinkButton = styled(Button)<{
overflow: hidden;
color: ${(props) =>
props.playing === 'true'
? props.theme.primary.main
? props.theme.colors.primary
: props.subtitle === 'true'
? props.theme.secondary.text
: props.theme.primary.text};
? props.theme.colors.layout.page.colorSecondary
: props.theme.colors.layout.page.color};
&:hover {
&:hover,
&:active,
&:focus {
text-decoration: underline;
color: ${(props) => props.theme.primary.text};
color: ${(props) => props.theme.colors.layout.page.color} !important;
cursor: pointer;
}
`;
@ -30,14 +32,14 @@ export const TableCellWrapper = styled.div<{
dragover?: string;
dragfield?: string;
}>`
color: ${(props) => (props.playing === 'true' ? props.theme.primary.main : undefined)};
color: ${(props) => (props.playing === 'true' ? props.theme.colors.primary : undefined)};
line-height: ${(props) => (props.height ? `${props.height}px` : undefined)};
cursor: ${(props) =>
props.dragover === 'true' ? 'grabbing' : props.dragfield === 'true' ? 'grab' : 'default'};
`;
export const CombinedTitleTextWrapper = styled.span<{ playing: string }>`
color: ${(props) => (props.playing === 'true' ? props.theme.primary.main : undefined)};
color: ${(props) => (props.playing === 'true' ? props.theme.colors.primary : undefined)};
`;
export const StyledTableHeaderCell = styled(Table.HeaderCell)`
@ -55,6 +57,6 @@ export const StyledTableHeaderCell = styled(Table.HeaderCell)`
.rs-table-cell-header-icon-sort-desc::after,
.rs-table-cell-header-icon-sort-asc::after {
color: ${(props) => `${props.theme.primary.main} !important`};
color: ${(props) => `${props.theme.colors.primary} !important`};
}
`;

6
src/styles/custom-theme.less
View File

@ -60,3 +60,9 @@
// Tooltip
@tooltip-bg: transparent;
@tooltip-color: transparent;
// Popover
@popover-arrow-width: 0px;
@input-border-focus: #3c3f43;
@input-border: undefined;

319
src/styles/styledTheme.ts
View File

@ -1,61 +1,286 @@
export const defaultDark = {
all: {
label: 'Default Dark',
value: 'defaultDark',
fonts: {
pageTitleFontSize: '30px',
pageFontSize: '14px',
panelHeaderFontSize: '20px',
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: {
main: '#2196F3',
background: '#181a1f',
titleBar: '#101010',
titleText: '#FFFFFF',
playerBar: '#101010',
sideBar: '#101010',
text: '#D8D8D8',
rowSelected: '#4D5156',
playerBarText: '#e9ebf0',
playerBarButtons: 'rgba(240, 240, 240, 0.8)',
playerBarButtonsHover: '#ffffff',
inputBackground: '#1A1D24',
spinner: '#FFFFFF',
spinnerBackground: 'rgba(233, 235, 240, 0.3)',
sliderBackground: '#888E94',
coverArtShadow: '#000000',
},
secondary: {
main: '#292D33',
text: '#888e94',
playerBarText: '#888e94',
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',
},
},
};
export const defaultLight = {
all: {
...defaultDark.all,
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: {
main: '#285DA0',
background: '#EBEEF5',
titleBar: '#21252B',
titleText: '#FFFFFF',
playerBar: '#21252B',
sideBar: '#21252B',
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',
rowSelected: '#BABCC2',
playerBarText: '#EBEEF5',
playerBarButtons: 'rgba(240, 240, 240, 0.8)',
playerBarButtonsHover: '#FFFFFF',
inputBackground: '#F4F7FF',
spinner: '#000000',
spinnerBackground: 'rgba(0, 0, 0, 0.3)',
sliderBackground: '#888e94',
coverArtShadow: '#000000',
},
secondary: {
main: '#292D33',
text: '#888e94',
playerBarText: '#888e94',
},
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',
},
},
};

Write Preview
Loading…
Cancel
Save