diff --git a/web/package.json b/web/package.json index d166c66..67a8c88 100644 --- a/web/package.json +++ b/web/package.json @@ -13,6 +13,7 @@ "material-ui-image": "^3.3.2", "parse-torrent": "^9.1.3", "parse-torrent-title": "^1.3.0", + "polished": "^4.1.3", "react": "^17.0.2", "react-copy-to-clipboard": "^5.0.3", "react-div-100vh": "^0.6.0", diff --git a/web/src/components/About.jsx b/web/src/components/About.jsx index d4bc273..29f1def 100644 --- a/web/src/components/About.jsx +++ b/web/src/components/About.jsx @@ -11,13 +11,10 @@ import ListItemIcon from '@material-ui/core/ListItemIcon' import ListItemText from '@material-ui/core/ListItemText' import { useTranslation } from 'react-i18next' import { echoHost } from 'utils/Hosts' -import { ThemeProvider } from '@material-ui/core/styles' -import { mainColors } from 'style/colors' +import { ThemeProvider, useTheme } from '@material-ui/core/styles' import { lightTheme } from '../style/materialUISetup' -const { primary } = mainColors - export default function AboutDialog() { const { t } = useTranslation() const [open, setOpen] = useState(false) @@ -26,6 +23,8 @@ export default function AboutDialog() { axios.get(echoHost()).then(({ data }) => setTorrServerVersion(data)) }, []) + const primary = useTheme().palette.primary.main + return (
setOpen(true)}> diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx index 73a2d2c..69431d9 100644 --- a/web/src/components/Add/AddDialog.jsx +++ b/web/src/components/Add/AddDialog.jsx @@ -12,8 +12,6 @@ import usePreviousState from 'utils/usePreviousState' import { useQuery } from 'react-query' import { getTorrents } from 'utils/Utils' import parseTorrent from 'parse-torrent' -import { ThemeProvider } from '@material-ui/core/styles' -import { lightTheme } from 'style/materialUISetup' import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers' import { ButtonWrapper, Content, Header } from './style' @@ -221,71 +219,69 @@ export default function AddDialog({ } return ( - - -
{t(isEditMode ? 'EditTorrent' : 'AddNewTorrent')}
+ +
{t(isEditMode ? 'EditTorrent' : 'AddNewTorrent')}
- - {!isEditMode && ( - - )} - - + {!isEditMode && ( + - + )} - - + + - - - - + + + + + + ) } diff --git a/web/src/components/Add/RightSideComponent.jsx b/web/src/components/Add/RightSideComponent.jsx index 1b90b81..ea8c962 100644 --- a/web/src/components/Add/RightSideComponent.jsx +++ b/web/src/components/Add/RightSideComponent.jsx @@ -1,6 +1,6 @@ import { useTranslation } from 'react-i18next' import { NoImageIcon } from 'icons' -import { IconButton, InputAdornment, TextField } from '@material-ui/core' +import { IconButton, InputAdornment, TextField, useTheme } from '@material-ui/core' import { CheckBox as CheckBoxIcon } from '@material-ui/icons' import { @@ -41,6 +41,7 @@ export default function RightSideComponent({ isEditMode, }) { const { t } = useTranslation() + const primary = useTheme().palette.primary.main const handleTitleChange = ({ target: { value } }) => setTitle(value) const handlePosterUrlChange = ({ target: { value } }) => { @@ -91,7 +92,7 @@ export default function RightSideComponent({ setIsUserInteractedWithPoster(false) }} > - + ), diff --git a/web/src/components/Add/style.js b/web/src/components/Add/style.js index 7444a8b..d29809e 100644 --- a/web/src/components/Add/style.js +++ b/web/src/components/Add/style.js @@ -15,14 +15,20 @@ export const Header = styled.div` ` export const Content = styled.div` - ${({ isEditMode }) => css` + ${({ + isEditMode, + theme: { + addDialog: { gradientStartColor, gradientEndColor, fontColor }, + }, + }) => css` height: 550px; - background: linear-gradient(145deg, #e4f6ed, #b5dec9); + background: linear-gradient(145deg, ${gradientStartColor}, ${gradientEndColor}); flex: 1; display: grid; grid-template-columns: repeat(${isEditMode ? '1' : '2'}, 1fr); border-bottom: 1px solid rgba(0, 0, 0, 0.12); overflow: auto; + color: ${fontColor}; @media (max-width: 540px) { ${'' /* Just for bug fixing on small screens */} @@ -44,7 +50,14 @@ export const RightSide = styled.div` ` export const RightSideContainer = styled.div` - ${({ isHidden, notificationMessage, isError }) => css` + ${({ + isHidden, + notificationMessage, + isError, + theme: { + addDialog: { notificationErrorBGColor, notificationSuccessBGColor }, + }, + }) => css` height: 530px; ${notificationMessage && @@ -58,7 +71,7 @@ export const RightSideContainer = styled.div` content: '${notificationMessage}'; display: grid; place-items: center; - background: ${isError ? '#cda184' : '#88cdaa'}; + background: ${isError ? notificationErrorBGColor : notificationSuccessBGColor}; padding: 10px 15px; position: absolute; top: 52%; @@ -172,11 +185,18 @@ export const IconWrapper = styled.div` ` export const LeftSideTopSection = styled.div` - background: #e4f6ed; - padding: 0 20px 20px 20px; - transition: all 0.3s; + ${({ + active, + theme: { + addDialog: { gradientStartColor }, + }, + }) => css` + background: ${gradientStartColor}; + padding: 0 20px 20px 20px; + transition: all 0.3s; - ${({ active }) => active && 'box-shadow: 0 8px 10px -9px rgba(0, 0, 0, 0.5)'}; + ${active && 'box-shadow: 0 8px 10px -9px rgba(0, 0, 0, 0.5)'}; + `} ` export const PosterWrapper = styled.div` @@ -254,7 +274,12 @@ export const PosterSuggestionsItem = styled.div` ` export const Poster = styled.div` - ${({ poster }) => css` + ${({ + poster, + theme: { + addDialog: { posterBGColor }, + }, + }) => css` border-radius: 5px; overflow: hidden; width: 200px; @@ -272,7 +297,7 @@ export const Poster = styled.div` : css` display: grid; place-items: center; - background: #74c39c; + background: ${posterBGColor}; svg { transform: scale(1.5) translateY(-3px); @@ -294,28 +319,35 @@ export const ClearPosterButton = styled(Button)` ` export const PosterLanguageSwitch = styled.div` - grid-area: poster; - z-index: 5; - position: absolute; - top: 0; - left: 50%; - transform: translate(-50%, -50%); - width: 30px; - height: 30px; - background: #74c39c; - border-radius: 50%; - display: grid; - place-items: center; - color: #e4f6ed; - font-weight: 600; - cursor: pointer; - transition: all 0.3s; + ${({ + showbutton, + theme: { + addDialog: { languageSwitchBGColor, languageSwitchFontColor }, + }, + }) => css` + grid-area: poster; + z-index: 5; + position: absolute; + top: 0; + left: 50%; + transform: translate(-50%, -50%); + width: 30px; + height: 30px; + background: ${languageSwitchBGColor}; + border-radius: 50%; + display: grid; + place-items: center; + color: ${languageSwitchFontColor}; + font-weight: 600; + cursor: pointer; + transition: all 0.3s; - ${({ showbutton }) => !showbutton && 'display: none'}; + ${!showbutton && 'display: none'}; - :hover { - filter: brightness(1.1); - } + :hover { + filter: brightness(1.1); + } + `} ` export const ButtonWrapper = styled.div` diff --git a/web/src/components/App/Sidebar.jsx b/web/src/components/App/Sidebar.jsx index 36a17ec..03e098b 100644 --- a/web/src/components/App/Sidebar.jsx +++ b/web/src/components/App/Sidebar.jsx @@ -21,18 +21,24 @@ const Sidebar = ({ isDrawerOpen, setIsDonationDialogOpen, isOffline, isLoading } + + + + + setIsDonationDialogOpen(true)}> + diff --git a/web/src/components/App/index.jsx b/web/src/components/App/index.jsx index d835286..367cd8a 100644 --- a/web/src/components/App/index.jsx +++ b/web/src/components/App/index.jsx @@ -1,8 +1,14 @@ import CssBaseline from '@material-ui/core/CssBaseline' -import { useEffect, useState } from 'react' +import { createContext, useEffect, useState } from 'react' import Typography from '@material-ui/core/Typography' import IconButton from '@material-ui/core/IconButton' -import { Menu as MenuIcon, Close as CloseIcon } from '@material-ui/icons' +import { + Menu as MenuIcon, + Close as CloseIcon, + Brightness4 as Brightness4Icon, + Brightness5 as Brightness5Icon, + BrightnessAuto as BrightnessAutoIcon, +} from '@material-ui/icons' import { echoHost } from 'utils/Hosts' import Div100vh from 'react-div-100vh' import axios from 'axios' @@ -16,18 +22,19 @@ import { useQuery } from 'react-query' import { getTorrents } from 'utils/Utils' import GlobalStyle from 'style/GlobalStyle' -import { AppWrapper, AppHeader, LanguageSwitch } from './style' +import { AppWrapper, AppHeader, HeaderToggle } from './style' import Sidebar from './Sidebar' -import { darkTheme, lightTheme, useMaterialUITheme } from '../../style/materialUISetup' +import { lightTheme, THEME_MODES, useMaterialUITheme } from '../../style/materialUISetup' import getStyledComponentsTheme from '../../style/getStyledComponentsTheme' +export const DarkModeContext = createContext() + export default function App() { const [isDrawerOpen, setIsDrawerOpen] = useState(false) const [isDonationDialogOpen, setIsDonationDialogOpen] = useState(false) const [torrServerVersion, setTorrServerVersion] = useState('') - // https://material-ui.com/ru/customization/palette/ - const [isDarkMode, muiTheme] = useMaterialUITheme() + const [isDarkMode, currentThemeMode, updateThemeMode, muiTheme] = useMaterialUITheme() const [currentLang, changeLang] = useChangeLanguage() const [isOffline, setIsOffline] = useState(false) const { data: torrents, isLoading } = useQuery('torrents', getTorrents, { @@ -45,54 +52,74 @@ export default function App() { <> - - - + + + + - {/* Div100vh - iOS WebKit fix */} - - - - setIsDrawerOpen(!isDrawerOpen)} - edge='start' - > - {isDrawerOpen ? : } - + {/* Div100vh - iOS WebKit fix */} + + + + setIsDrawerOpen(!isDrawerOpen)} + edge='start' + > + {isDrawerOpen ? : } + - - TorrServer {torrServerVersion} - + + TorrServer {torrServerVersion} + -
- (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}> - {currentLang === 'en' ? 'RU' : 'EN'} - -
- +
+ { + if (currentThemeMode === THEME_MODES.LIGHT) updateThemeMode(THEME_MODES.DARK) + if (currentThemeMode === THEME_MODES.DARK) updateThemeMode(THEME_MODES.AUTO) + if (currentThemeMode === THEME_MODES.AUTO) updateThemeMode(THEME_MODES.LIGHT) + }} + > + {currentThemeMode === THEME_MODES.LIGHT ? ( + + ) : currentThemeMode === THEME_MODES.DARK ? ( + + ) : ( + + )} + + + (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}> + {currentLang === 'en' ? 'RU' : 'EN'} + +
+ - - - + - - {isDonationDialogOpen && setIsDonationDialogOpen(false)} />} - + + {isDonationDialogOpen && setIsDonationDialogOpen(false)} />} + - {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && } - - - - + {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && } + + + + + ) } diff --git a/web/src/components/App/style.js b/web/src/components/App/style.js index 857af8d..c5700f1 100644 --- a/web/src/components/App/style.js +++ b/web/src/components/App/style.js @@ -1,14 +1,21 @@ +import { rgba } from 'polished' import styled, { css } from 'styled-components' export const AppWrapper = styled.div` - height: 100%; - background: #cbe8d9; - display: grid; - grid-template-columns: 60px 1fr; - grid-template-rows: 60px 1fr; - grid-template-areas: - 'head head' - 'side content'; + ${({ + theme: { + app: { appSecondaryColor }, + }, + }) => css` + height: 100%; + background: ${rgba(appSecondaryColor, 0.8)}; + display: grid; + grid-template-columns: 60px 1fr; + grid-template-rows: 60px 1fr; + grid-template-areas: + 'head head' + 'side content'; + `} ` export const CenteredGrid = styled.div` @@ -32,16 +39,25 @@ export const AppHeader = styled.div` `} ` export const AppSidebarStyle = styled.div` - ${({ isDrawerOpen }) => css` + ${({ + isDrawerOpen, + theme: { + app: { appSecondaryColor, sidebarBGColor, sidebarFillColor }, + }, + }) => css` grid-area: side; width: ${isDrawerOpen ? '400%' : '100%'}; z-index: 2; overflow-x: hidden; transition: width 195ms cubic-bezier(0.4, 0, 0.6, 1) 0ms; - border-right: 1px solid rgba(0, 0, 0, 0.12); - background: #575757; - color: #eee; + border-right: 1px solid ${rgba(appSecondaryColor, 0.12)}; + background: ${sidebarBGColor}; + color: ${sidebarFillColor}; white-space: nowrap; + + svg { + fill: ${sidebarFillColor}; + } `} ` export const TorrentListWrapper = styled.div` @@ -69,25 +85,31 @@ export const TorrentListWrapper = styled.div` } ` -export const LanguageSwitch = styled.div` - cursor: pointer; - border-radius: 50%; - background: #56b887; - height: 35px; - width: 35px; - transition: all 0.2s; - font-weight: 600; - display: grid; - place-items: center; - color: #fff; +export const HeaderToggle = styled.div` + ${({ + theme: { + app: { headerToggleColor }, + }, + }) => css` + cursor: pointer; + border-radius: 50%; + background: ${headerToggleColor}; + height: 35px; + width: 35px; + transition: all 0.2s; + font-weight: 600; + display: grid; + place-items: center; + color: #fff; - :hover { - background: #4db380; - } + :hover { + background: ${rgba(headerToggleColor, 0.9)}; + } - @media (max-width: 700px) { - height: 28px; - width: 28px; - font-size: 12px; - } + @media (max-width: 700px) { + height: 28px; + width: 28px; + font-size: 12px; + } + `} ` diff --git a/web/src/components/DialogTorrentDetailsContent/DetailedView/index.jsx b/web/src/components/DialogTorrentDetailsContent/DetailedView/index.jsx index 926712e..4222d7d 100644 --- a/web/src/components/DialogTorrentDetailsContent/DetailedView/index.jsx +++ b/web/src/components/DialogTorrentDetailsContent/DetailedView/index.jsx @@ -42,7 +42,9 @@ export default function DetailedView({ - {t('Cache')} + + {t('Cache')} + diff --git a/web/src/components/DialogTorrentDetailsContent/DetailedView/style.js b/web/src/components/DialogTorrentDetailsContent/DetailedView/style.js index 3fd9431..c3d6002 100644 --- a/web/src/components/DialogTorrentDetailsContent/DetailedView/style.js +++ b/web/src/components/DialogTorrentDetailsContent/DetailedView/style.js @@ -1,19 +1,33 @@ -import styled from 'styled-components' +import styled, { css } from 'styled-components' export const DetailedViewWidgetSection = styled.section` - padding: 40px; - background: linear-gradient(145deg, #e4f6ed, #b5dec9); + ${({ + theme: { + detailedView: { gradientStartColor, gradientEndColor }, + }, + }) => css` + padding: 40px; + background: linear-gradient(145deg, ${gradientStartColor}, ${gradientEndColor}); - @media (max-width: 800px) { - padding: 20px; - } + @media (max-width: 800px) { + padding: 20px; + } + `} ` export const DetailedViewCacheSection = styled.section` - padding: 40px; - box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5); + ${({ + theme: { + detailedView: { cacheSectionBGColor }, + }, + }) => css` + padding: 40px; + box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5); + background: ${cacheSectionBGColor}; + flex: 1; - @media (max-width: 800px) { - padding: 20px; - } + @media (max-width: 800px) { + padding: 20px; + } + `} ` diff --git a/web/src/components/DialogTorrentDetailsContent/Table/index.jsx b/web/src/components/DialogTorrentDetailsContent/Table/index.jsx index 0837622..8a15bb1 100644 --- a/web/src/components/DialogTorrentDetailsContent/Table/index.jsx +++ b/web/src/components/DialogTorrentDetailsContent/Table/index.jsx @@ -60,22 +60,24 @@ const Table = memo( {fileHasEpisodeText && {episode}} {fileHasResolutionText && {resolution}} {humanizeSize(length)} - - - - - - - - - + + + + + + + +
) diff --git a/web/src/components/DialogTorrentDetailsContent/Table/style.js b/web/src/components/DialogTorrentDetailsContent/Table/style.js index acaa594..a9079c4 100644 --- a/web/src/components/DialogTorrentDetailsContent/Table/style.js +++ b/web/src/components/DialogTorrentDetailsContent/Table/style.js @@ -1,68 +1,89 @@ import styled, { css } from 'styled-components' +const viewedPrimaryColor = '#bdbdbd' +const viewedSecondaryColor = '#c4c4c4' +const viewedTertiaryColor = '#c9c9c9' +const bigTableDividerColor = '#ddd' +const bigTableDefaultRowColor = '#fff' +const bigTableViewedRowColor = '#f3f3f3' + const viewedIndicator = css` - :before { - content: ''; - width: 10px; - height: 10px; - background: #009879; - border-radius: 50%; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } + ${({ + theme: { + table: { defaultPrimaryColor }, + }, + }) => css` + :before { + content: ''; + width: 10px; + height: 10px; + background: ${defaultPrimaryColor}; + border-radius: 50%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + `} ` export const TableStyle = styled.table` - border-collapse: collapse; - margin: 25px 0; - font-size: 0.9em; - width: 100%; - border-radius: 5px 5px 0 0; - overflow: hidden; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); + ${({ + theme: { + table: { defaultPrimaryColor }, + }, + }) => css` + border-collapse: collapse; + margin: 25px 0; + font-size: 0.9em; + width: 100%; + border-radius: 5px 5px 0 0; + overflow: hidden; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); + color: #000; - thead tr { - background: #009879; - color: #fff; - text-align: left; - text-transform: uppercase; - } - - th, - td { - padding: 12px 15px; - } - - tbody tr { - border-bottom: 1px solid #ddd; - - :last-of-type { - border-bottom: 2px solid #009879; + thead tr { + background: ${defaultPrimaryColor}; + color: #fff; + text-align: left; + text-transform: uppercase; } - &.viewed-file-row { - background: #f3f3f3; - } - } - - td { - &.viewed-file-indicator { - position: relative; - - ${viewedIndicator} + th, + td { + padding: 12px 15px; } - &.button-cell { + tbody tr { + border-bottom: 1px solid ${bigTableDividerColor}; + background: ${bigTableDefaultRowColor}; + + :last-of-type { + border-bottom: 2px solid ${defaultPrimaryColor}; + } + + &.viewed-file-row { + background: ${bigTableViewedRowColor}; + } + } + + td { + &.viewed-file-indicator { + position: relative; + + ${viewedIndicator} + } + } + + .button-cell { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } - } - @media (max-width: 970px) { - display: none; - } + @media (max-width: 970px) { + display: none; + } + `} ` export const ShortTableWrapper = styled.div` @@ -82,7 +103,12 @@ export const ShortTableWrapper = styled.div` ` export const ShortTable = styled.div` - ${({ isViewed }) => css` + ${({ + isViewed, + theme: { + table: { defaultPrimaryColor, defaultSecondaryColor, defaultTertiaryColor }, + }, + }) => css` width: 100%; grid-template-rows: repeat(3, max-content); border-radius: 5px; @@ -91,7 +117,7 @@ export const ShortTable = styled.div` .short-table { &-name { - background: ${isViewed ? '#bdbdbd' : '#009879'}; + background: ${isViewed ? viewedPrimaryColor : defaultPrimaryColor}; display: grid; place-items: center; padding: 15px; @@ -116,11 +142,11 @@ export const ShortTable = styled.div` grid-template-rows: 30px 1fr; background: black; :not(:last-child) { - border-right: 1px solid ${isViewed ? '#bdbdbd' : '#009879'}; + border-right: 1px solid ${isViewed ? viewedPrimaryColor : defaultPrimaryColor}; } &-name { - background: ${isViewed ? '#c4c4c4' : '#00a383'}; + background: ${isViewed ? viewedSecondaryColor : defaultSecondaryColor}; color: #fff; text-transform: uppercase; font-size: 12px; @@ -135,7 +161,7 @@ export const ShortTable = styled.div` } &-value { - background: ${isViewed ? '#c9c9c9' : '#03aa89'}; + background: ${isViewed ? viewedTertiaryColor : defaultTertiaryColor}; display: grid; place-items: center; color: #fff; @@ -156,11 +182,12 @@ export const ShortTable = styled.div` &-buttons { padding: 20px; - border-bottom: 2px solid ${isViewed ? '#bdbdbd' : '#009879'}; + border-bottom: 2px solid ${isViewed ? viewedPrimaryColor : defaultPrimaryColor}; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 20px; + background: #fff; @media (max-width: 410px) { gap: 10px; diff --git a/web/src/components/DialogTorrentDetailsContent/TorrentCache/index.jsx b/web/src/components/DialogTorrentDetailsContent/TorrentCache/index.jsx index 451094b..fce00ce 100644 --- a/web/src/components/DialogTorrentDetailsContent/TorrentCache/index.jsx +++ b/web/src/components/DialogTorrentDetailsContent/TorrentCache/index.jsx @@ -1,7 +1,9 @@ import Measure from 'react-measure' -import { useState, memo, useRef, useEffect } from 'react' +import { useState, memo, useRef, useEffect, useContext } from 'react' import { useTranslation } from 'react-i18next' import isEqual from 'lodash/isEqual' +import { DarkModeContext } from 'components/App' +import { THEME_MODES } from 'style/materialUISetup' import { useCreateCacheMap } from '../customHooks' import getShortCacheMap from './getShortCacheMap' @@ -16,6 +18,9 @@ const TorrentCache = ({ cache, isMini }) => { const ctxRef = useRef(null) const cacheMap = useCreateCacheMap(cache) const settingsTarget = isMini ? 'mini' : 'default' + const { isDarkMode } = useContext(DarkModeContext) + const theme = isDarkMode ? THEME_MODES.DARK : THEME_MODES.LIGHT + const { readerColor, rangeColor, @@ -26,7 +31,7 @@ const TorrentCache = ({ cache, isMini }) => { borderColor, cacheMaxHeight, completeColor, - } = snakeSettings[settingsTarget] + } = snakeSettings[theme][settingsTarget] const canvasWidth = isMini ? width * 0.93 : width @@ -69,7 +74,7 @@ const TorrentCache = ({ cache, isMini }) => { ctx.lineWidth = borderWidth ctx.fillStyle = inProgress - ? createGradient(ctx, percentage, settingsTarget) + ? createGradient(ctx, percentage, theme, settingsTarget) : isCompleted ? completeColor : backgroundColor @@ -102,13 +107,14 @@ const TorrentCache = ({ cache, isMini }) => { completeColor, readerColor, rangeColor, + theme, ]) return ( setDimensions(bounds)}> {({ measureRef }) => (
- + diff --git a/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js b/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js index a567066..b2fc35b 100644 --- a/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js +++ b/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js @@ -1,33 +1,61 @@ +import { rgba } from 'polished' import { mainColors } from 'style/colors' export const snakeSettings = { - default: { - borderWidth: 1, - pieceSize: 14, - gapBetweenPieces: 3, - borderColor: '#dbf2e8', - completeColor: mainColors.primary, - backgroundColor: '#fff', - progressColor: '#b3dfc9', - readerColor: '#000', - rangeColor: '#afa6e3', + dark: { + default: { + borderWidth: 2, + pieceSize: 14, + gapBetweenPieces: 3, + borderColor: mainColors.dark.secondary, + completeColor: rgba(mainColors.dark.primary, 0.65), + backgroundColor: '#f1eff3', + progressColor: mainColors.dark.secondary, + readerColor: '#000', + rangeColor: '#cda184', + }, + mini: { + cacheMaxHeight: 340, + borderWidth: 2, + pieceSize: 23, + gapBetweenPieces: 6, + borderColor: '#545a5e', + completeColor: '#545a5e', + backgroundColor: '#dee3e5', + progressColor: '#dee3e5', + readerColor: '#000', + rangeColor: '#cda184', + }, }, - mini: { - cacheMaxHeight: 340, - borderWidth: 2, - pieceSize: 23, - gapBetweenPieces: 6, - borderColor: '#4db380', - completeColor: '#4db380', - backgroundColor: '#dbf2e8', - progressColor: '#dbf2e8', - readerColor: '#2d714f', - rangeColor: '#afa6e3', + light: { + default: { + borderWidth: 1, + pieceSize: 14, + gapBetweenPieces: 3, + borderColor: '#dbf2e8', + completeColor: mainColors.light.primary, + backgroundColor: '#fff', + progressColor: '#b3dfc9', + readerColor: '#000', + rangeColor: '#afa6e3', + }, + mini: { + cacheMaxHeight: 340, + borderWidth: 2, + pieceSize: 23, + gapBetweenPieces: 6, + borderColor: '#4db380', + completeColor: '#4db380', + backgroundColor: '#dbf2e8', + progressColor: '#dbf2e8', + readerColor: '#2d714f', + rangeColor: '#afa6e3', + }, }, } -export const createGradient = (ctx, percentage, snakeType) => { - const { pieceSize, completeColor, progressColor } = snakeSettings[snakeType] +export const createGradient = (ctx, percentage, theme, snakeType) => { + const { pieceSize, completeColor, progressColor } = snakeSettings[theme][snakeType] const gradient = ctx.createLinearGradient(0, pieceSize, 0, 0) gradient.addColorStop(0, completeColor) diff --git a/web/src/components/DialogTorrentDetailsContent/TorrentCache/style.js b/web/src/components/DialogTorrentDetailsContent/TorrentCache/style.js index ace99fc..af461e5 100644 --- a/web/src/components/DialogTorrentDetailsContent/TorrentCache/style.js +++ b/web/src/components/DialogTorrentDetailsContent/TorrentCache/style.js @@ -10,12 +10,12 @@ export const ScrollNotification = styled.div` ` export const SnakeWrapper = styled.div` - ${({ isMini }) => css` + ${({ isMini, themeType }) => css` ${isMini && css` display: grid; justify-content: center; - max-height: ${snakeSettings.mini.cacheMaxHeight}px; + max-height: ${snakeSettings[themeType].mini.cacheMaxHeight}px; overflow: auto; `} diff --git a/web/src/components/DialogTorrentDetailsContent/TorrentFunctions/style.js b/web/src/components/DialogTorrentDetailsContent/TorrentFunctions/style.js index 0955c5e..f8acc9d 100644 --- a/web/src/components/DialogTorrentDetailsContent/TorrentFunctions/style.js +++ b/web/src/components/DialogTorrentDetailsContent/TorrentFunctions/style.js @@ -19,11 +19,17 @@ export const MainSectionButtonGroup = styled.div` ` export const SmallLabel = styled.div` - ${({ mb }) => css` + ${({ + mb, + theme: { + torrentFunctions: { fontColor }, + }, + }) => css` ${mb && `margin-bottom: ${mb}px`}; font-size: 20px; font-weight: 300; line-height: 1; + color: ${fontColor}; @media (max-width: 800px) { font-size: 18px; diff --git a/web/src/components/DialogTorrentDetailsContent/index.jsx b/web/src/components/DialogTorrentDetailsContent/index.jsx index 8a4140f..7db86dd 100644 --- a/web/src/components/DialogTorrentDetailsContent/index.jsx +++ b/web/src/components/DialogTorrentDetailsContent/index.jsx @@ -33,7 +33,7 @@ import { isFilePlayable } from './helpers' const Loader = () => (
- +
) @@ -133,7 +133,13 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) { {...(isDetailedCacheView && { onBack: () => setIsDetailedCacheView(false) })} /> -
+
{isLoading ? ( ) : isDetailedCacheView ? ( @@ -219,7 +225,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) { {seasonAmount?.length > 1 && ( <> {t('SelectSeason')} - + {seasonAmount.map(season => (