sovonegr/TorrServerJellyfin
1
0
Fork 0
mirror of https://github.com/Ernous/TorrServerJellyfin.git synced 2025-12-19 21:46:11 +05:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dark-light-theme'

Browse Source
This commit is contained in:
Daniel Shleifman
2021-06-26 22:31:30 +03:00
parent 45a8980de0 e2241cf7fd
commit e64af5f3bd
27 changed files with 996 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/package.json
View File

@@ -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",

7
web/src/components/About.jsx
View File

@@ -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 (
<div>
<ListItem button key='Settings' onClick={() => setOpen(true)}>

120
web/src/components/Add/AddDialog.jsx
View File

@@ -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 (
<ThemeProvider theme={lightTheme}>
<Dialog
open
onClose={handleClose}
aria-labelledby='form-dialog-title'
fullScreen={fullScreen}
fullWidth
maxWidth='md'
>
<Header>{t(isEditMode ? 'EditTorrent' : 'AddNewTorrent')}</Header>
<Dialog
open
onClose={handleClose}
aria-labelledby='form-dialog-title'
fullScreen={fullScreen}
fullWidth
maxWidth='md'
>
<Header>{t(isEditMode ? 'EditTorrent' : 'AddNewTorrent')}</Header>
<Content isEditMode={isEditMode}>
{!isEditMode && (
<LeftSideComponent
setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
setSelectedFile={setSelectedFile}
torrentSource={torrentSource}
setTorrentSource={setTorrentSource}
selectedFile={selectedFile}
/>
)}
<RightSideComponent
originalTorrentTitle={originalTorrentTitle}
setTitle={setTitle}
setPosterUrl={setPosterUrl}
setIsPosterUrlCorrect={setIsPosterUrlCorrect}
<Content isEditMode={isEditMode}>
{!isEditMode && (
<LeftSideComponent
setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
setPosterList={setPosterList}
isTorrentSourceCorrect={isTorrentSourceCorrect}
isHashAlreadyExists={isHashAlreadyExists}
title={title}
parsedTitle={parsedTitle}
posterUrl={posterUrl}
isPosterUrlCorrect={isPosterUrlCorrect}
posterList={posterList}
currentLang={currentLang}
posterSearchLanguage={posterSearchLanguage}
setPosterSearchLanguage={setPosterSearchLanguage}
posterSearch={posterSearch}
removePoster={removePoster}
updateTitleFromSource={updateTitleFromSource}
setSelectedFile={setSelectedFile}
torrentSource={torrentSource}
isCustomTitleEnabled={isCustomTitleEnabled}
setIsCustomTitleEnabled={setIsCustomTitleEnabled}
isEditMode={isEditMode}
setTorrentSource={setTorrentSource}
selectedFile={selectedFile}
/>
</Content>
)}
<ButtonWrapper>
<Button onClick={handleClose} color='primary' variant='outlined'>
{t('Cancel')}
</Button>
<RightSideComponent
originalTorrentTitle={originalTorrentTitle}
setTitle={setTitle}
setPosterUrl={setPosterUrl}
setIsPosterUrlCorrect={setIsPosterUrlCorrect}
setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
setPosterList={setPosterList}
isTorrentSourceCorrect={isTorrentSourceCorrect}
isHashAlreadyExists={isHashAlreadyExists}
title={title}
parsedTitle={parsedTitle}
posterUrl={posterUrl}
isPosterUrlCorrect={isPosterUrlCorrect}
posterList={posterList}
currentLang={currentLang}
posterSearchLanguage={posterSearchLanguage}
setPosterSearchLanguage={setPosterSearchLanguage}
posterSearch={posterSearch}
removePoster={removePoster}
updateTitleFromSource={updateTitleFromSource}
torrentSource={torrentSource}
isCustomTitleEnabled={isCustomTitleEnabled}
setIsCustomTitleEnabled={setIsCustomTitleEnabled}
isEditMode={isEditMode}
/>
</Content>
<Button
variant='contained'
style={{ minWidth: '110px' }}
disabled={!torrentSource || (isHashAlreadyExists && !isEditMode) || !isTorrentSourceCorrect}
onClick={handleSave}
color='primary'
>
{isSaving ? <CircularProgress style={{ color: 'white' }} size={20} /> : t(isEditMode ? 'Save' : 'Add')}
</Button>
</ButtonWrapper>
</Dialog>
</ThemeProvider>
<ButtonWrapper>
<Button onClick={handleClose} color='secondary' variant='outlined'>
{t('Cancel')}
</Button>
<Button
variant='contained'
style={{ minWidth: '110px' }}
disabled={!torrentSource || (isHashAlreadyExists && !isEditMode) || !isTorrentSourceCorrect}
onClick={handleSave}
color='primary'
>
{isSaving ? <CircularProgress style={{ color: 'white' }} size={20} /> : t(isEditMode ? 'Save' : 'Add')}
</Button>
</ButtonWrapper>
</Dialog>
)
}

5
web/src/components/Add/RightSideComponent.jsx
View File

@@ -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)
}}
>
<CheckBoxIcon style={{ color: isCustomTitleEnabled ? 'green' : 'gray' }} />
<CheckBoxIcon style={{ color: isCustomTitleEnabled ? primary : 'gray' }} />
</IconButton>
</InputAdornment>
),

92
web/src/components/Add/style.js
View File

@@ -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`

6
web/src/components/App/Sidebar.jsx
View File

@@ -21,18 +21,24 @@ const Sidebar = ({ isDrawerOpen, setIsDonationDialogOpen, isOffline, isLoading }
<AppSidebarStyle isDrawerOpen={isDrawerOpen}>
<List>
<AddDialogButton isOffline={isOffline} isLoading={isLoading} />
<RemoveAll isOffline={isOffline} isLoading={isLoading} />
</List>
<Divider />
<List>
<SettingsDialog />
<AboutDialog />
<ListItem button onClick={() => setIsDonationDialogOpen(true)}>
<ListItemIcon>
<CreditCardIcon />
</ListItemIcon>
<ListItemText primary={t('Donate')} />
</ListItem>
<CloseServer isOffline={isOffline} isLoading={isLoading} />
</List>
</AppSidebarStyle>

109
web/src/components/App/index.jsx
View File

@@ -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() {
<>
<GlobalStyle />
<MuiThemeProvider theme={muiTheme}>
<StyledComponentsThemeProvider theme={getStyledComponentsTheme(isDarkMode ? 'dark' : 'light')}>
<CssBaseline />
<DarkModeContext.Provider value={{ isDarkMode }}>
<MuiThemeProvider theme={muiTheme}>
<StyledComponentsThemeProvider
theme={getStyledComponentsTheme(isDarkMode ? THEME_MODES.DARK : THEME_MODES.LIGHT)}
>
<CssBaseline />
{/* Div100vh - iOS WebKit fix */}
<Div100vh>
<AppWrapper>
<AppHeader>
<IconButton
style={{ marginRight: '20px' }}
color='inherit'
onClick={() => setIsDrawerOpen(!isDrawerOpen)}
edge='start'
>
{isDrawerOpen ? <CloseIcon /> : <MenuIcon />}
</IconButton>
{/* Div100vh - iOS WebKit fix */}
<Div100vh>
<AppWrapper>
<AppHeader>
<IconButton
style={{ marginRight: '20px' }}
color='inherit'
onClick={() => setIsDrawerOpen(!isDrawerOpen)}
edge='start'
>
{isDrawerOpen ? <CloseIcon /> : <MenuIcon />}
</IconButton>
<Typography variant='h6' noWrap>
TorrServer {torrServerVersion}
</Typography>
<Typography variant='h6' noWrap>
TorrServer {torrServerVersion}
</Typography>
<div style={{ justifySelf: 'end' }}>
<LanguageSwitch onClick={() => (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}>
{currentLang === 'en' ? 'RU' : 'EN'}
</LanguageSwitch>
</div>
</AppHeader>
<div
style={{ justifySelf: 'end', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}
>
<HeaderToggle
onClick={() => {
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 ? (
<Brightness5Icon />
) : currentThemeMode === THEME_MODES.DARK ? (
<Brightness4Icon />
) : (
<BrightnessAutoIcon />
)}
</HeaderToggle>
<HeaderToggle onClick={() => (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}>
{currentLang === 'en' ? 'RU' : 'EN'}
</HeaderToggle>
</div>
</AppHeader>
<MuiThemeProvider theme={darkTheme}>
<Sidebar
isOffline={isOffline}
isLoading={isLoading}
isDrawerOpen={isDrawerOpen}
setIsDonationDialogOpen={setIsDonationDialogOpen}
/>
</MuiThemeProvider>
<TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />
<TorrentList isOffline={isOffline} torrents={torrents} isLoading={isLoading} />
<MuiThemeProvider theme={lightTheme}>
{isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
</MuiThemeProvider>
<MuiThemeProvider theme={lightTheme}>
{isDonationDialogOpen && <DonateDialog onClose={() => setIsDonationDialogOpen(false)} />}
</MuiThemeProvider>
{!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
</AppWrapper>
</Div100vh>
</StyledComponentsThemeProvider>
</MuiThemeProvider>
{!JSON.parse(localStorage.getItem('snackbarIsClosed')) && <DonateSnackbar />}
</AppWrapper>
</Div100vh>
</StyledComponentsThemeProvider>
</MuiThemeProvider>
</DarkModeContext.Provider>
</>
)
}

84
web/src/components/App/style.js
View File

@@ -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;
}
`}
`

4
web/src/components/DialogTorrentDetailsContent/DetailedView/index.jsx
View File

@@ -42,7 +42,9 @@ export default function DetailedView({
</DetailedViewWidgetSection>
<DetailedViewCacheSection>
<SectionTitle mb={20}>{t('Cache')}</SectionTitle>
<SectionTitle color='#000' mb={20}>
{t('Cache')}
</SectionTitle>
<TorrentCache cache={cache} />
</DetailedViewCacheSection>
</>

36
web/src/components/DialogTorrentDetailsContent/DetailedView/style.js
View File

@@ -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;
}
`}
`

30
web/src/components/DialogTorrentDetailsContent/Table/index.jsx
View File

@@ -60,22 +60,24 @@ const Table = memo(
{fileHasEpisodeText && <td data-label='episode'>{episode}</td>}
{fileHasResolutionText && <td data-label='resolution'>{resolution}</td>}
<td data-label='size'>{humanizeSize(length)}</td>
<td className='button-cell'>
<Button onClick={() => preloadBuffer(id)} variant='outlined' color='primary' size='small'>
{t('Preload')}
</Button>
<a style={{ textDecoration: 'none' }} href={link} target='_blank' rel='noreferrer'>
<Button style={{ width: '100%' }} variant='outlined' color='primary' size='small'>
{t('OpenLink')}
<td>
<div className='button-cell'>
<Button onClick={() => preloadBuffer(id)} variant='outlined' color='primary' size='small'>
{t('Preload')}
</Button>
</a>
<CopyToClipboard text={link}>
<Button variant='outlined' color='primary' size='small'>
{t('CopyLink')}
</Button>
</CopyToClipboard>
<a style={{ textDecoration: 'none' }} href={link} target='_blank' rel='noreferrer'>
<Button style={{ width: '100%' }} variant='outlined' color='primary' size='small'>
{t('OpenLink')}
</Button>
</a>
<CopyToClipboard text={link}>
<Button variant='outlined' color='primary' size='small'>
{t('CopyLink')}
</Button>
</CopyToClipboard>
</div>
</td>
</tr>
)

139
web/src/components/DialogTorrentDetailsContent/Table/style.js
View File

@@ -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;

14
web/src/components/DialogTorrentDetailsContent/TorrentCache/index.jsx
View File

@@ -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 (
<Measure bounds onResize={({ bounds }) => setDimensions(bounds)}>
{({ measureRef }) => (
<div style={{ display: 'flex', flexDirection: 'column' }} ref={measureRef}>
<SnakeWrapper isMini={isMini}>
<SnakeWrapper themeType={theme} isMini={isMini}>
<canvas ref={canvasRef} />
</SnakeWrapper>

74
web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js
View File

@@ -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)

4
web/src/components/DialogTorrentDetailsContent/TorrentCache/style.js
View File

@@ -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;
`}

8
web/src/components/DialogTorrentDetailsContent/TorrentFunctions/style.js
View File

@@ -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;

12
web/src/components/DialogTorrentDetailsContent/index.jsx
View File

@@ -33,7 +33,7 @@ import { isFilePlayable } from './helpers'
const Loader = () => (
<div style={{ minHeight: '80vh', display: 'grid', placeItems: 'center' }}>
<CircularProgress />
<CircularProgress color='secondary' />
</div>
)
@@ -133,7 +133,13 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
{...(isDetailedCacheView && { onBack: () => setIsDetailedCacheView(false) })}
/>
<div style={{ minHeight: '80vh', overflow: 'auto' }}>
<div
style={{
minHeight: '80vh',
overflow: 'auto',
...(isDetailedCacheView && { display: 'flex', flexDirection: 'column' }),
}}
>
{isLoading ? (
<Loader />
) : isDetailedCacheView ? (
@@ -219,7 +225,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
{seasonAmount?.length > 1 && (
<>
<SectionSubName mb={7}>{t('SelectSeason')}</SectionSubName>
<ButtonGroup style={{ marginBottom: '30px' }} color='primary'>
<ButtonGroup style={{ marginBottom: '30px' }} color='secondary'>
{seasonAmount.map(season => (
<Button
key={season}

197
web/src/components/DialogTorrentDetailsContent/style.js
View File

@@ -1,3 +1,4 @@
import { rgba } from 'polished'
import styled, { css } from 'styled-components'
export const DialogContentGrid = styled.div`
@@ -18,7 +19,12 @@ export const DialogContentGrid = styled.div`
}
`
export const Poster = styled.div`
${({ poster }) => css`
${({
poster,
theme: {
dialogTorrentDetailsContent: { posterBGColor },
},
}) => css`
height: 400px;
border-radius: 5px;
overflow: hidden;
@@ -35,7 +41,7 @@ export const Poster = styled.div`
width: 300px;
display: grid;
place-items: center;
background: #74c39c;
background: ${posterBGColor};
svg {
transform: scale(2.5) translateY(-3px);
@@ -58,72 +64,105 @@ export const Poster = styled.div`
`}
`
export const MainSection = styled.section`
grid-area: main;
padding: 40px;
display: grid;
grid-template-columns: min-content 1fr;
gap: 30px;
background: linear-gradient(145deg, #e4f6ed, #b5dec9);
${({
theme: {
dialogTorrentDetailsContent: { gradientStartColor, gradientEndColor },
},
}) => css`
grid-area: main;
padding: 40px;
display: grid;
grid-template-columns: min-content 1fr;
gap: 30px;
background: linear-gradient(145deg, ${gradientStartColor}, ${gradientEndColor});
@media (max-width: 840px) {
grid-template-columns: 1fr;
}
@media (max-width: 800px) {
padding: 20px;
}
`
export const CacheSection = styled.section`
grid-area: cache;
padding: 40px;
display: grid;
align-content: start;
grid-template-rows: min-content 1fr min-content;
background: #88cdaa;
@media (max-width: 800px) {
padding: 20px;
}
`
export const TorrentFilesSection = styled.section`
grid-area: file-list;
padding: 40px;
box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
@media (max-width: 800px) {
padding: 20px;
}
`
export const SectionSubName = styled.div`
${({ mb }) => css`
${mb && `margin-bottom: ${mb}px`};
color: #7c7b7c;
@media (max-width: 840px) {
grid-template-columns: 1fr;
}
@media (max-width: 800px) {
${mb && `margin-bottom: ${mb / 2}px`};
font-size: 11px;
padding: 20px;
}
`}
`
export const SectionTitle = styled.div`
${({ mb }) => css`
${mb && `margin-bottom: ${mb}px`};
font-size: 35px;
font-weight: 300;
line-height: 1;
word-break: break-word;
export const CacheSection = styled.section`
${({
theme: {
dialogTorrentDetailsContent: { chacheSectionBGColor },
},
}) => css`
grid-area: cache;
padding: 40px;
display: grid;
align-content: start;
grid-template-rows: min-content 1fr min-content;
background: ${chacheSectionBGColor};
@media (max-width: 800px) {
font-size: 25px;
${mb && `margin-bottom: ${mb / 2}px`};
padding: 20px;
}
`}
`
export const TorrentFilesSection = styled.section`
${({
theme: {
dialogTorrentDetailsContent: { torrentFilesSectionBGColor },
},
}) => css`
grid-area: file-list;
padding: 40px;
box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
background: ${torrentFilesSectionBGColor};
@media (max-width: 800px) {
padding: 20px;
}
`}
`
export const SectionSubName = styled.div`
${({
theme: {
dialogTorrentDetailsContent: { subNameFontColor },
},
}) => css`
${({ mb }) => css`
${mb && `margin-bottom: ${mb}px`};
color: ${subNameFontColor};
@media (max-width: 800px) {
${mb && `margin-bottom: ${mb / 2}px`};
font-size: 11px;
}
`}
`}
`
export const SectionTitle = styled.div`
${({
color,
theme: {
dialogTorrentDetailsContent: { fontColor },
},
}) => css`
${({ mb }) => css`
${mb && `margin-bottom: ${mb}px`};
font-size: 35px;
font-weight: 300;
line-height: 1;
word-break: break-word;
color: ${color || fontColor};
@media (max-width: 800px) {
font-size: 25px;
${mb && `margin-bottom: ${mb / 2}px`};
}
`}
`}
`
export const SectionHeader = styled.div`
margin-bottom: 20px;
`
@@ -182,18 +221,25 @@ export const WidgetFieldWrapper = styled.div`
}
`
export const WidgetFieldTitle = styled.div`
grid-area: title;
justify-self: start;
text-transform: uppercase;
font-size: 11px;
margin-bottom: 2px;
font-weight: 600;
${({
theme: {
dialogTorrentDetailsContent: { fontColor },
},
}) => css`
grid-area: title;
justify-self: start;
text-transform: uppercase;
font-size: 11px;
margin-bottom: 2px;
font-weight: 600;
color: ${fontColor};
`}
`
export const WidgetFieldIcon = styled.div`
${({ bgColor }) => css`
grid-area: icon;
color: rgba(255, 255, 255, 0.8);
color: ${rgba('#fff', 0.8)};
background: ${bgColor};
border-radius: 5px 0 0 5px;
@@ -220,20 +266,29 @@ export const WidgetFieldValue = styled.div`
`}
`
export const LoadingProgress = styled.div.attrs(({ value, fullAmount }) => {
const percentage = Math.min(100, (value * 100) / fullAmount)
return {
// this block is here according to styled-components recomendation about fast changable components
style: {
background: `linear-gradient(to right, #b5dec9 0%, #b5dec9 ${percentage}%, #fff ${percentage}%, #fff 100%)`,
export const LoadingProgress = styled.div.attrs(
({
value,
fullAmount,
theme: {
dialogTorrentDetailsContent: { gradientEndColor },
},
}
})`
}) => {
const percentage = Math.min(100, (value * 100) / fullAmount)
return {
// this block is here according to styled-components recomendation about fast changable components
style: {
background: `linear-gradient(to right, ${gradientEndColor} 0%, ${gradientEndColor} ${percentage}%, #fff ${percentage}%, #fff 100%)`,
},
}
},
)`
${({ label }) => css`
border: 1px solid;
padding: 10px 20px;
border-radius: 5px;
color: #000;
:before {
content: '${label}';

247
web/src/components/TorrentCard/style.js
View File

@@ -1,7 +1,11 @@
import styled, { css } from 'styled-components'
export const TorrentCard = styled.div`
${({ theme: { primary } }) => css`
${({
theme: {
torrentCard: { cardPrimaryColor },
},
}) => css`
border-radius: 5px;
display: grid;
grid-template-columns: 120px 260px 1fr;
@@ -9,7 +13,7 @@ export const TorrentCard = styled.div`
grid-template-areas: 'poster description buttons';
gap: 10px;
padding: 10px;
background: ${primary};
background: ${cardPrimaryColor};
box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
@media (max-width: 1260px), (max-height: 500px) {
@@ -34,7 +38,12 @@ export const TorrentCardPoster = styled.div`
overflow: hidden;
text-align: center;
${({ isPoster }) =>
${({
isPoster,
theme: {
torrentCard: { cardSecondaryColor, accentCardColor },
},
}) =>
isPoster
? css`
img {
@@ -47,8 +56,8 @@ export const TorrentCardPoster = styled.div`
: css`
display: grid;
place-items: center;
background: #74c39c;
border: 1px solid #337a57;
background: ${cardSecondaryColor};
border: 1px solid ${accentCardColor};
svg {
transform: translateY(-3px);
@@ -76,128 +85,140 @@ export const TorrentCardButtons = styled.div`
}
`
export const TorrentCardDescription = styled.div`
grid-area: description;
background: #74c39c;
border-radius: 5px;
padding: 5px;
display: grid;
grid-template-rows: 55% 1fr;
gap: 10px;
@media (max-width: 770px) {
grid-template-rows: 60% 1fr;
gap: 3px;
}
.description-title-wrapper {
display: flex;
flex-direction: column;
}
.description-section-name {
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.4px;
color: #337a57;
@media (max-width: 770px) {
font-size: 0.4rem;
}
}
.description-torrent-title {
overflow: auto;
word-break: break-all;
}
.description-statistics-wrapper {
${({
theme: {
torrentCard: { cardSecondaryColor, accentCardColor },
},
}) => css`
grid-area: description;
background: ${cardSecondaryColor};
border-radius: 5px;
padding: 5px;
display: grid;
grid-template-columns: 80px 80px 1fr;
align-self: end;
@media (max-width: 1260px), (max-height: 500px) {
grid-template-columns: 70px 70px 1fr;
}
grid-template-rows: 55% 1fr;
gap: 10px;
@media (max-width: 770px) {
grid-template-columns: 65px 65px 1fr;
grid-template-rows: 60% 1fr;
gap: 3px;
}
@media (max-width: 700px) {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
.description-statistics-element-wrapper {
}
.description-statistics-element-value {
margin-left: 5px;
margin-bottom: 10px;
word-break: break-all;
@media (max-width: 1260px), (max-height: 500px) {
font-size: 0.7rem;
margin-bottom: 0;
margin-left: 0;
}
}
.description-torrent-title,
.description-statistics-element-value {
@media (max-width: 770px) {
font-size: 0.6rem;
.description-title-wrapper {
display: flex;
flex-direction: column;
}
@media (max-width: 410px) {
.description-section-name {
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.4px;
color: ${accentCardColor};
@media (max-width: 770px) {
font-size: 0.4rem;
}
}
}
.description-torrent-title {
overflow: auto;
word-break: break-all;
}
.description-statistics-wrapper {
display: grid;
grid-template-columns: 80px 80px 1fr;
align-self: end;
@media (max-width: 1260px), (max-height: 500px) {
grid-template-columns: 70px 70px 1fr;
}
@media (max-width: 770px) {
grid-template-columns: 65px 65px 1fr;
}
@media (max-width: 700px) {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
}
.description-statistics-element-wrapper {
}
.description-statistics-element-value {
margin-left: 5px;
margin-bottom: 10px;
word-break: break-all;
@media (max-width: 1260px), (max-height: 500px) {
font-size: 0.7rem;
margin-bottom: 0;
margin-left: 0;
}
}
.description-torrent-title,
.description-statistics-element-value {
@media (max-width: 770px) {
font-size: 0.6rem;
}
@media (max-width: 410px) {
font-size: 10px;
}
}
`}
`
export const StyledButton = styled.button`
border-radius: 5px;
border: none;
cursor: pointer;
transition: 0.2s;
display: flex;
align-items: center;
text-transform: uppercase;
background: #268757;
color: #fff;
font-size: 0.9rem;
letter-spacing: 0.009em;
padding: 0 12px;
svg {
width: 20px;
}
:hover {
background: #337a57;
}
> :first-child {
margin-right: 10px;
}
@media (max-width: 1260px), (max-height: 500px) {
padding: 7px 10px;
justify-content: center;
font-size: 0.8rem;
${({
theme: {
torrentCard: { buttonBGColor, accentCardColor },
},
}) => css`
border-radius: 5px;
border: none;
cursor: pointer;
transition: 0.2s;
display: flex;
align-items: center;
text-transform: uppercase;
background: ${buttonBGColor};
color: #fff;
font-size: 0.9rem;
letter-spacing: 0.009em;
padding: 0 12px;
svg {
display: none;
width: 20px;
}
}
@media (max-width: 770px) {
font-size: 0.7rem;
}
:hover {
background: ${accentCardColor};
}
@media (max-width: 420px) {
font-size: 0.6rem;
padding: 7px 5px;
}
> :first-child {
margin-right: 10px;
}
@media (max-width: 1260px), (max-height: 500px) {
padding: 7px 10px;
justify-content: center;
font-size: 0.8rem;
svg {
display: none;
}
}
@media (max-width: 770px) {
font-size: 0.7rem;
}
@media (max-width: 420px) {
font-size: 0.6rem;
padding: 7px 5px;
}
`}
`

5
web/src/components/TorrentList/AddFirstTorrent.jsx
View File

@@ -1,6 +1,6 @@
import { useTheme } from '@material-ui/core'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { mainColors } from 'style/colors'
import AddDialog from '../Add/AddDialog'
import IconWrapper from './style'
@@ -10,6 +10,7 @@ export default function AddFirstTorrent() {
const [isDialogOpen, setIsDialogOpen] = useState(false)
const handleClickOpen = () => setIsDialogOpen(true)
const handleClose = () => setIsDialogOpen(false)
const primary = useTheme().palette.primary.main
return (
<>
@@ -17,7 +18,7 @@ export default function AddFirstTorrent() {
<lord-icon
src='https://cdn.lordicon.com/bbnkwdur.json'
trigger='loop'
colors={`primary:#121331,secondary:${mainColors.primary}`}
colors={`primary:#121331,secondary:${primary}`}
stroke='26'
scale='60'
/>

5
web/src/components/TorrentList/NoServerConnection.jsx
View File

@@ -1,17 +1,18 @@
import { useTheme } from '@material-ui/core'
import { useTranslation } from 'react-i18next'
import { mainColors } from 'style/colors'
import IconWrapper from './style'
export default function NoServerConnection() {
const { t } = useTranslation()
const primary = useTheme().palette.primary.main
return (
<IconWrapper>
<lord-icon
src='https://cdn.lordicon.com/wrprwmwt.json'
trigger='loop'
colors={`primary:#121331,secondary:${mainColors.primary}`}
colors={`primary:#121331,secondary:${primary}`}
stroke='26'
scale='60'
/>

2
web/src/components/TorrentList/index.jsx
View File

@@ -12,7 +12,7 @@ export default function TorrentList({ isOffline, isLoading, torrents }) {
{isOffline ? (
<NoServerConnection />
) : isLoading ? (
<CircularProgress />
<CircularProgress color='secondary' />
) : (
!torrents.length && <AddFirstTorrent />
)}

239
web/src/icons/index.jsx
View File

@@ -1,114 +1,129 @@
export const NoImageIcon = () => (
<svg
height='80px'
width='80px'
fill='#248a57'
xmlns='http://www.w3.org/2000/svg'
xmlnsXlink='http://www.w3.org/1999/xlink'
version='1.1'
x='0px'
y='0px'
viewBox='0 0 100 100'
enableBackground='new 0 0 100 100'
xmlSpace='preserve'
>
<g>
<path d='M18.293,93.801c0.066,0.376,0.284,0.718,0.597,0.937c0.313,0.219,0.708,0.307,1.085,0.241l70.058-12.353 c0.376-0.066,0.718-0.284,0.937-0.597c0.219-0.313,0.307-0.708,0.24-1.085l-9.502-53.891c-0.139-0.79-0.892-1.317-1.682-1.178 l-19.402,3.421L47.997,14.16c0.241-0.706,0.375-1.456,0.375-2.229c0-0.399-0.035-0.804-0.106-1.209C47.671,7.363,44.757,5,41.455,5 c-0.4,0-0.804,0.035-1.209,0.106h0c-3.359,0.595-5.723,3.509-5.723,6.812c0,0.4,0.035,0.804,0.106,1.209 c0.178,1.005,0.567,1.918,1.109,2.709l-6.875,19.061L9.968,38.228c-0.79,0.139-1.317,0.892-1.177,1.682L18.293,93.801z M40.75,7.966L40.75,7.966c0.239-0.042,0.474-0.062,0.705-0.062c1.909,0,3.612,1.373,3.953,3.324v0 c0.042,0.238,0.062,0.473,0.062,0.704c0,1.908-1.373,3.612-3.323,3.953h0.001c-0.238,0.042-0.473,0.062-0.705,0.062 c-1.908,0-3.612-1.373-3.953-3.323c-0.042-0.238-0.062-0.473-0.062-0.705C37.427,10.01,38.799,8.306,40.75,7.966z M38.059,17.96 c1.012,0.569,2.17,0.89,3.383,0.89c0.399,0,0.804-0.034,1.208-0.106h0.001c1.48-0.263,2.766-0.976,3.743-1.974l10.935,13.108 L32.16,34.315L38.059,17.96z M29.978,37.648c0.136-0.004,0.268-0.029,0.396-0.07l29.75-5.246c0.134-0.006,0.266-0.027,0.395-0.07 l18.582-3.277l8.998,51.031L20.9,91.867l-8.998-51.032L29.978,37.648z' />
<path d='M49.984,75.561c0.809,0,1.627-0.065,2.449-0.199l0.001,0c7.425-1.213,12.701-7.627,12.701-14.919 c0-0.809-0.065-1.627-0.199-2.449c-1.213-7.425-7.626-12.701-14.919-12.701c-0.808,0-1.627,0.065-2.45,0.199 c-7.425,1.213-12.701,7.626-12.701,14.918c0,0.808,0.065,1.627,0.199,2.449C36.278,70.284,42.692,75.561,49.984,75.561z M51.967,72.496c-0.668,0.109-1.33,0.161-1.983,0.161c-5.883,0-11.079-4.265-12.053-10.265c-0.109-0.668-0.161-1.33-0.161-1.983 c0-2.108,0.555-4.123,1.534-5.892l19.693,14.176C57.206,70.645,54.782,72.039,51.967,72.496z M48.034,48.357L48.034,48.357 c0.668-0.109,1.329-0.161,1.983-0.161c5.882,0,11.079,4.265,12.053,10.265c0.109,0.667,0.161,1.329,0.161,1.983 c0,2.109-0.556,4.127-1.536,5.897L41.001,52.163C42.791,50.21,45.217,48.814,48.034,48.357z' />
<polygon points='47.567,45.492 47.567,45.492 47.568,45.491 ' />
</g>
</svg>
)
import { useTheme } from '@material-ui/core'
export const AddItemIcon = () => (
<svg
height='100px'
width='100px'
fill='#248a57'
viewBox='0 0 452 452'
version='1.1'
xmlns='http://www.w3.org/2000/svg'
>
<g id='#000000ff'>
<path
opacity='1.00'
d=' M 210.49 18.69 C 244.92 16.12 280.02 22.13 311.46 36.47 C 344.90 51.54 374.16 75.69 395.41 105.58 C 415.62 133.87 428.55 167.34 432.48 201.89 C 438.07 248.86 427.02 297.61 401.45 337.43 C 382.92 366.59 357.02 391.04 326.80 407.80 C 300.81 422.31 271.64 431.08 241.96 433.26 C 207.37 435.97 172.14 429.83 140.54 415.51 C 109.95 401.69 82.82 380.33 62.16 353.86 C 39.25 324.67 24.38 289.21 19.78 252.38 C 14.94 214.51 20.65 175.31 36.47 140.54 C 54.11 101.38 84.24 67.99 121.37 46.39 C 148.44 30.52 179.19 20.98 210.49 18.69 M 213.46 36.60 C 178.91 38.80 145.03 50.71 116.76 70.72 C 84.67 93.21 59.84 125.88 46.91 162.88 C 34.87 196.99 32.96 234.54 41.25 269.73 C 48.89 302.45 65.53 332.98 88.79 357.21 C 113.91 383.56 146.78 402.45 182.25 410.72 C 216.67 418.86 253.37 417.21 286.87 405.85 C 329.85 391.49 367.13 361.01 389.89 321.85 C 406.02 294.41 414.96 262.84 415.73 231.03 C 416.71 196.59 408.11 161.91 390.97 132.00 C 372.31 99.13 343.57 72.09 309.61 55.49 C 279.95 40.89 246.43 34.40 213.46 36.60 Z'
/>
<path
opacity='1.00'
d=' M 217.02 117.63 C 223.01 117.45 228.99 117.45 234.98 117.63 C 235.16 150.72 234.93 183.81 235.09 216.89 C 268.18 217.03 301.28 216.82 334.38 216.99 C 334.57 222.99 334.57 229.00 334.38 235.01 C 301.28 235.18 268.18 234.97 235.09 235.11 C 234.93 268.19 235.16 301.28 234.98 334.37 C 228.99 334.55 223.00 334.55 217.02 334.37 C 216.84 301.28 217.07 268.19 216.92 235.11 C 183.82 234.97 150.72 235.17 117.62 235.01 C 117.43 229.00 117.43 222.99 117.62 216.99 C 150.72 216.82 183.82 217.03 216.91 216.89 C 217.07 183.81 216.84 150.72 217.02 117.63 Z'
/>
</g>
</svg>
)
export const NoImageIcon = ({ color }) => {
const primary = useTheme().palette.primary.main
export const TorrentIcon = () => (
<svg width='150px' height='150px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<g id='#248a57ff'>
<path
fill='#248a57'
opacity='1.00'
d=' M 102.41 0.00 L 319.87 0.00 C 320.21 29.68 319.87 59.37 320.04 89.05 C 320.29 97.32 323.88 105.47 329.94 111.12 C 336.01 117.07 344.56 120.18 353.01 120.01 C 382.02 119.87 411.04 120.22 440.05 119.83 C 439.94 236.88 440.04 353.93 440.00 470.98 C 440.01 478.16 440.50 485.68 437.47 492.41 C 432.79 503.85 421.05 511.80 408.71 512.00 L 103.28 512.00 C 90.95 511.79 79.20 503.84 74.53 492.42 C 72.06 486.96 71.87 480.87 71.99 474.97 C 72.01 327.63 71.99 180.30 72.00 32.96 C 71.95 27.61 73.03 22.22 75.52 17.46 C 80.55 7.39 91.19 0.57 102.41 0.00 M 360.00 382.07 C 358.69 383.73 359.01 385.99 358.90 387.97 C 358.95 396.36 358.91 404.75 358.93 413.14 C 352.50 403.51 346.13 393.83 339.77 384.16 C 338.65 382.47 337.13 380.65 334.92 380.63 C 331.97 380.41 329.13 382.87 329.22 385.89 C 328.94 396.58 329.24 407.28 329.08 417.98 C 329.14 420.43 328.85 422.98 329.54 425.38 C 330.75 429.14 337.11 428.63 337.54 424.63 C 338.19 415.09 337.55 405.51 337.83 395.95 C 343.71 404.78 349.41 413.73 355.26 422.58 C 356.92 424.93 358.74 427.96 362.00 428.00 C 365.02 428.51 367.54 425.83 367.40 422.90 C 367.55 411.27 367.39 399.62 367.48 387.99 C 367.40 386.11 367.63 384.06 366.61 382.38 C 365.24 380.16 361.58 380.00 360.00 382.07 M 100.79 382.81 C 98.94 384.82 100.19 388.63 103.01 388.89 C 106.91 389.29 110.85 388.97 114.77 389.07 C 114.77 399.73 114.78 410.39 114.75 421.05 C 114.76 423.37 114.89 426.34 117.28 427.52 C 119.95 429.02 123.67 427.14 123.86 424.04 C 124.22 412.40 123.84 400.72 124.04 389.07 C 128.25 388.87 132.57 389.54 136.71 388.62 C 140.15 387.40 139.25 381.72 135.61 381.56 C 126.10 381.14 116.55 381.57 107.03 381.37 C 104.95 381.53 102.34 381.06 100.79 382.81 M 156.46 381.58 C 150.26 383.15 145.11 388.05 143.12 394.11 C 140.49 401.86 140.79 410.83 144.81 418.06 C 151.07 429.05 167.20 430.79 177.27 424.26 C 183.48 420.06 186.24 412.28 186.28 405.03 C 186.43 398.11 184.59 390.56 179.19 385.85 C 173.03 380.52 164.12 379.62 156.46 381.58 M 197.74 381.67 C 195.24 381.99 194.12 384.61 194.23 386.87 C 194.06 397.92 194.27 408.97 194.15 420.02 C 194.24 422.43 193.92 425.36 195.97 427.11 C 198.62 429.25 203.28 427.47 203.31 423.89 C 203.66 418.45 203.32 412.99 203.49 407.54 C 206.76 407.72 210.68 407.24 213.15 409.89 C 217.60 414.61 220.01 420.80 223.85 425.97 C 225.63 428.66 230.20 428.72 231.83 425.86 C 232.87 424.27 231.80 422.43 231.24 420.89 C 228.63 415.38 225.17 409.99 220.02 406.56 C 223.42 405.53 227.11 404.31 229.29 401.31 C 233.14 395.94 231.83 387.34 226.14 383.76 C 221.99 381.01 216.77 381.52 212.04 381.39 C 207.28 381.52 202.48 381.08 197.74 381.67 M 240.23 386.91 C 240.19 398.28 240.20 409.66 240.22 421.03 C 240.25 423.12 240.14 425.65 241.97 427.09 C 244.58 429.23 249.25 427.52 249.33 423.98 C 249.76 418.50 249.34 413.00 249.49 407.51 C 252.77 407.64 256.62 407.29 259.13 409.85 C 263.88 414.69 266.10 421.38 270.41 426.55 C 272.74 429.20 278.48 428.00 278.28 424.04 C 276.28 417.09 271.87 410.81 266.09 406.46 C 269.75 405.55 273.64 404.05 275.74 400.71 C 278.91 395.49 277.81 387.82 272.73 384.18 C 268.85 381.14 263.64 381.44 259.00 381.41 C 254.02 381.52 249.02 381.13 244.05 381.58 C 241.41 381.77 240.05 384.51 240.23 386.91 M 286.38 386.01 C 286.17 397.35 286.39 408.70 286.27 420.04 C 286.31 422.30 286.17 425.31 288.52 426.53 C 291.20 427.60 294.20 427.07 297.03 427.21 C 304.36 427.04 311.73 427.52 319.04 426.95 C 322.44 426.37 322.43 420.75 319.05 420.15 C 311.25 419.44 303.38 420.13 295.56 419.82 C 295.59 415.47 295.58 411.12 295.58 406.78 C 302.60 406.71 309.65 407.09 316.66 406.54 C 320.07 405.84 319.57 399.91 315.98 399.96 C 309.20 399.54 302.39 399.95 295.59 399.80 C 295.57 396.05 295.57 392.30 295.58 388.55 C 303.03 388.43 310.50 388.74 317.94 388.37 C 321.67 388.25 321.80 381.95 318.11 381.66 C 309.41 381.03 300.65 381.57 291.93 381.42 C 289.16 381.15 286.27 383.00 286.38 386.01 M 375.06 381.95 C 372.19 383.34 372.77 388.27 375.95 388.84 C 379.96 389.33 384.02 388.96 388.05 389.08 C 387.92 400.08 388.05 411.07 387.99 422.07 C 387.75 424.61 389.07 427.71 391.95 427.92 C 394.85 428.51 397.33 425.86 397.14 423.05 C 397.37 411.73 397.16 400.40 397.23 389.08 C 401.42 388.89 405.69 389.52 409.82 388.64 C 413.41 387.46 412.48 381.48 408.64 381.52 C 400.79 381.23 392.93 381.50 385.08 381.39 C 381.74 381.50 378.31 381.05 375.06 381.95 Z'
/>
<path
fill='#248a57'
opacity='1.00'
d=' M 160.39 388.45 C 164.79 387.33 170.01 388.38 173.03 391.97 C 176.12 395.52 177.00 400.46 176.87 405.04 C 176.76 409.47 175.56 414.16 172.29 417.34 C 167.50 421.98 158.82 421.68 154.58 416.43 C 150.59 411.44 150.26 404.45 151.51 398.43 C 152.46 393.85 155.68 389.57 160.39 388.45 Z'
/>
<path
fill='#248a57'
opacity='1.00'
d=' M 203.47 388.42 C 208.28 388.55 213.18 387.93 217.93 388.93 C 222.82 390.10 223.71 398.14 218.81 399.89 C 213.88 401.57 208.52 400.89 203.40 400.90 C 203.44 396.73 203.45 392.57 203.47 388.42 Z'
/>
<path
fill='#248a57'
opacity='1.00'
d=' M 249.45 388.38 C 254.29 388.56 259.22 387.96 264.00 388.94 C 268.52 390.07 269.67 397.04 265.66 399.44 C 260.63 401.83 254.85 400.80 249.47 400.94 C 249.51 396.75 249.48 392.57 249.45 388.38 Z'
/>
</g>
<g id='#74c39cff'>
<path
fill='#74c39c'
opacity='1.00'
d=' M 319.87 0.00 L 320.20 0.00 C 360.20 39.89 400.19 79.79 440.05 119.83 C 411.04 120.22 382.02 119.87 353.01 120.01 C 344.56 120.18 336.01 117.07 329.94 111.12 C 323.88 105.47 320.29 97.32 320.04 89.05 C 319.87 59.37 320.21 29.68 319.87 0.00 Z'
/>
</g>
<g id='#fdfdfdff'>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 360.00 382.07 C 361.58 380.00 365.24 380.16 366.61 382.38 C 367.63 384.06 367.40 386.11 367.48 387.99 C 367.39 399.62 367.55 411.27 367.40 422.90 C 367.54 425.83 365.02 428.51 362.00 428.00 C 358.74 427.96 356.92 424.93 355.26 422.58 C 349.41 413.73 343.71 404.78 337.83 395.95 C 337.55 405.51 338.19 415.09 337.54 424.63 C 337.11 428.63 330.75 429.14 329.54 425.38 C 328.85 422.98 329.14 420.43 329.08 417.98 C 329.24 407.28 328.94 396.58 329.22 385.89 C 329.13 382.87 331.97 380.41 334.92 380.63 C 337.13 380.65 338.65 382.47 339.77 384.16 C 346.13 393.83 352.50 403.51 358.93 413.14 C 358.91 404.75 358.95 396.36 358.90 387.97 C 359.01 385.99 358.69 383.73 360.00 382.07 Z'
/>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 100.79 382.81 C 102.34 381.06 104.95 381.53 107.03 381.37 C 116.55 381.57 126.10 381.14 135.61 381.56 C 139.25 381.72 140.15 387.40 136.71 388.62 C 132.57 389.54 128.25 388.87 124.04 389.07 C 123.84 400.72 124.22 412.40 123.86 424.04 C 123.67 427.14 119.95 429.02 117.28 427.52 C 114.89 426.34 114.76 423.37 114.75 421.05 C 114.78 410.39 114.77 399.73 114.77 389.07 C 110.85 388.97 106.91 389.29 103.01 388.89 C 100.19 388.63 98.94 384.82 100.79 382.81 Z'
/>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 156.46 381.58 C 164.12 379.62 173.03 380.52 179.19 385.85 C 184.59 390.56 186.43 398.11 186.28 405.03 C 186.24 412.28 183.48 420.06 177.27 424.26 C 167.20 430.79 151.07 429.05 144.81 418.06 C 140.79 410.83 140.49 401.86 143.12 394.11 C 145.11 388.05 150.26 383.15 156.46 381.58 M 160.39 388.45 C 155.68 389.57 152.46 393.85 151.51 398.43 C 150.26 404.45 150.59 411.44 154.58 416.43 C 158.82 421.68 167.50 421.98 172.29 417.34 C 175.56 414.16 176.76 409.47 176.87 405.04 C 177.00 400.46 176.12 395.52 173.03 391.97 C 170.01 388.38 164.79 387.33 160.39 388.45 Z'
/>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 197.74 381.67 C 202.48 381.08 207.28 381.52 212.04 381.39 C 216.77 381.52 221.99 381.01 226.14 383.76 C 231.83 387.34 233.14 395.94 229.29 401.31 C 227.11 404.31 223.42 405.53 220.02 406.56 C 225.17 409.99 228.63 415.38 231.24 420.89 C 231.80 422.43 232.87 424.27 231.83 425.86 C 230.20 428.72 225.63 428.66 223.85 425.97 C 220.01 420.80 217.60 414.61 213.15 409.89 C 210.68 407.24 206.76 407.72 203.49 407.54 C 203.32 412.99 203.66 418.45 203.31 423.89 C 203.28 427.47 198.62 429.25 195.97 427.11 C 193.92 425.36 194.24 422.43 194.15 420.02 C 194.27 408.97 194.06 397.92 194.23 386.87 C 194.12 384.61 195.24 381.99 197.74 381.67 M 203.47 388.42 C 203.45 392.57 203.44 396.73 203.40 400.90 C 208.52 400.89 213.88 401.57 218.81 399.89 C 223.71 398.14 222.82 390.10 217.93 388.93 C 213.18 387.93 208.28 388.55 203.47 388.42 Z'
/>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 240.23 386.91 C 240.05 384.51 241.41 381.77 244.05 381.58 C 249.02 381.13 254.02 381.52 259.00 381.41 C 263.64 381.44 268.85 381.14 272.73 384.18 C 277.81 387.82 278.91 395.49 275.74 400.71 C 273.64 404.05 269.75 405.55 266.09 406.46 C 271.87 410.81 276.28 417.09 278.28 424.04 C 278.48 428.00 272.74 429.20 270.41 426.55 C 266.10 421.38 263.88 414.69 259.13 409.85 C 256.62 407.29 252.77 407.64 249.49 407.51 C 249.34 413.00 249.76 418.50 249.33 423.98 C 249.25 427.52 244.58 429.23 241.97 427.09 C 240.14 425.65 240.25 423.12 240.22 421.03 C 240.20 409.66 240.19 398.28 240.23 386.91 M 249.45 388.38 C 249.48 392.57 249.51 396.75 249.47 400.94 C 254.85 400.80 260.63 401.83 265.66 399.44 C 269.67 397.04 268.52 390.07 264.00 388.94 C 259.22 387.96 254.29 388.56 249.45 388.38 Z'
/>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 286.38 386.01 C 286.27 383.00 289.16 381.15 291.93 381.42 C 300.65 381.57 309.41 381.03 318.11 381.66 C 321.80 381.95 321.67 388.25 317.94 388.37 C 310.50 388.74 303.03 388.43 295.58 388.55 C 295.57 392.30 295.57 396.05 295.59 399.80 C 302.39 399.95 309.20 399.54 315.98 399.96 C 319.57 399.91 320.07 405.84 316.66 406.54 C 309.65 407.09 302.60 406.71 295.58 406.78 C 295.58 411.12 295.59 415.47 295.56 419.82 C 303.38 420.13 311.25 419.44 319.05 420.15 C 322.43 420.75 322.44 426.37 319.04 426.95 C 311.73 427.52 304.36 427.04 297.03 427.21 C 294.20 427.07 291.20 427.60 288.52 426.53 C 286.17 425.31 286.31 422.30 286.27 420.04 C 286.39 408.70 286.17 397.35 286.38 386.01 Z'
/>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 375.06 381.95 C 378.31 381.05 381.74 381.50 385.08 381.39 C 392.93 381.50 400.79 381.23 408.64 381.52 C 412.48 381.48 413.41 387.46 409.82 388.64 C 405.69 389.52 401.42 388.89 397.23 389.08 C 397.16 400.40 397.37 411.73 397.14 423.05 C 397.33 425.86 394.85 428.51 391.95 427.92 C 389.07 427.71 387.75 424.61 387.99 422.07 C 388.05 411.07 387.92 400.08 388.05 389.08 C 384.02 388.96 379.96 389.33 375.95 388.84 C 372.77 388.27 372.19 383.34 375.06 381.95 Z'
/>
</g>
</svg>
)
return (
<svg
height='80px'
width='80px'
fill={color || primary}
xmlns='http://www.w3.org/2000/svg'
xmlnsXlink='http://www.w3.org/1999/xlink'
version='1.1'
x='0px'
y='0px'
viewBox='0 0 100 100'
enableBackground='new 0 0 100 100'
xmlSpace='preserve'
>
<g>
<path d='M18.293,93.801c0.066,0.376,0.284,0.718,0.597,0.937c0.313,0.219,0.708,0.307,1.085,0.241l70.058-12.353 c0.376-0.066,0.718-0.284,0.937-0.597c0.219-0.313,0.307-0.708,0.24-1.085l-9.502-53.891c-0.139-0.79-0.892-1.317-1.682-1.178 l-19.402,3.421L47.997,14.16c0.241-0.706,0.375-1.456,0.375-2.229c0-0.399-0.035-0.804-0.106-1.209C47.671,7.363,44.757,5,41.455,5 c-0.4,0-0.804,0.035-1.209,0.106h0c-3.359,0.595-5.723,3.509-5.723,6.812c0,0.4,0.035,0.804,0.106,1.209 c0.178,1.005,0.567,1.918,1.109,2.709l-6.875,19.061L9.968,38.228c-0.79,0.139-1.317,0.892-1.177,1.682L18.293,93.801z M40.75,7.966L40.75,7.966c0.239-0.042,0.474-0.062,0.705-0.062c1.909,0,3.612,1.373,3.953,3.324v0 c0.042,0.238,0.062,0.473,0.062,0.704c0,1.908-1.373,3.612-3.323,3.953h0.001c-0.238,0.042-0.473,0.062-0.705,0.062 c-1.908,0-3.612-1.373-3.953-3.323c-0.042-0.238-0.062-0.473-0.062-0.705C37.427,10.01,38.799,8.306,40.75,7.966z M38.059,17.96 c1.012,0.569,2.17,0.89,3.383,0.89c0.399,0,0.804-0.034,1.208-0.106h0.001c1.48-0.263,2.766-0.976,3.743-1.974l10.935,13.108 L32.16,34.315L38.059,17.96z M29.978,37.648c0.136-0.004,0.268-0.029,0.396-0.07l29.75-5.246c0.134-0.006,0.266-0.027,0.395-0.07 l18.582-3.277l8.998,51.031L20.9,91.867l-8.998-51.032L29.978,37.648z' />
<path d='M49.984,75.561c0.809,0,1.627-0.065,2.449-0.199l0.001,0c7.425-1.213,12.701-7.627,12.701-14.919 c0-0.809-0.065-1.627-0.199-2.449c-1.213-7.425-7.626-12.701-14.919-12.701c-0.808,0-1.627,0.065-2.45,0.199 c-7.425,1.213-12.701,7.626-12.701,14.918c0,0.808,0.065,1.627,0.199,2.449C36.278,70.284,42.692,75.561,49.984,75.561z M51.967,72.496c-0.668,0.109-1.33,0.161-1.983,0.161c-5.883,0-11.079-4.265-12.053-10.265c-0.109-0.668-0.161-1.33-0.161-1.983 c0-2.108,0.555-4.123,1.534-5.892l19.693,14.176C57.206,70.645,54.782,72.039,51.967,72.496z M48.034,48.357L48.034,48.357 c0.668-0.109,1.329-0.161,1.983-0.161c5.882,0,11.079,4.265,12.053,10.265c0.109,0.667,0.161,1.329,0.161,1.983 c0,2.109-0.556,4.127-1.536,5.897L41.001,52.163C42.791,50.21,45.217,48.814,48.034,48.357z' />
<polygon points='47.567,45.492 47.567,45.492 47.568,45.491 ' />
</g>
</svg>
)
}
export const AddItemIcon = () => {
const primary = useTheme().palette.primary.main
return (
<svg
height='100px'
width='100px'
fill={primary}
viewBox='0 0 452 452'
version='1.1'
xmlns='http://www.w3.org/2000/svg'
>
<g id='#000000'>
<path
opacity='1.00'
d=' M 210.49 18.69 C 244.92 16.12 280.02 22.13 311.46 36.47 C 344.90 51.54 374.16 75.69 395.41 105.58 C 415.62 133.87 428.55 167.34 432.48 201.89 C 438.07 248.86 427.02 297.61 401.45 337.43 C 382.92 366.59 357.02 391.04 326.80 407.80 C 300.81 422.31 271.64 431.08 241.96 433.26 C 207.37 435.97 172.14 429.83 140.54 415.51 C 109.95 401.69 82.82 380.33 62.16 353.86 C 39.25 324.67 24.38 289.21 19.78 252.38 C 14.94 214.51 20.65 175.31 36.47 140.54 C 54.11 101.38 84.24 67.99 121.37 46.39 C 148.44 30.52 179.19 20.98 210.49 18.69 M 213.46 36.60 C 178.91 38.80 145.03 50.71 116.76 70.72 C 84.67 93.21 59.84 125.88 46.91 162.88 C 34.87 196.99 32.96 234.54 41.25 269.73 C 48.89 302.45 65.53 332.98 88.79 357.21 C 113.91 383.56 146.78 402.45 182.25 410.72 C 216.67 418.86 253.37 417.21 286.87 405.85 C 329.85 391.49 367.13 361.01 389.89 321.85 C 406.02 294.41 414.96 262.84 415.73 231.03 C 416.71 196.59 408.11 161.91 390.97 132.00 C 372.31 99.13 343.57 72.09 309.61 55.49 C 279.95 40.89 246.43 34.40 213.46 36.60 Z'
/>
<path
opacity='1.00'
d=' M 217.02 117.63 C 223.01 117.45 228.99 117.45 234.98 117.63 C 235.16 150.72 234.93 183.81 235.09 216.89 C 268.18 217.03 301.28 216.82 334.38 216.99 C 334.57 222.99 334.57 229.00 334.38 235.01 C 301.28 235.18 268.18 234.97 235.09 235.11 C 234.93 268.19 235.16 301.28 234.98 334.37 C 228.99 334.55 223.00 334.55 217.02 334.37 C 216.84 301.28 217.07 268.19 216.92 235.11 C 183.82 234.97 150.72 235.17 117.62 235.01 C 117.43 229.00 117.43 222.99 117.62 216.99 C 150.72 216.82 183.82 217.03 216.91 216.89 C 217.07 183.81 216.84 150.72 217.02 117.63 Z'
/>
</g>
</svg>
)
}
export const TorrentIcon = () => {
const primary = useTheme().palette.primary.main
const secondaryColor = primary === '#00a572' ? '#74c39c' : '#4a5255'
return (
<svg width='150px' height='150px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<g id={primary}>
<path
fill={primary}
opacity='1.00'
d=' M 102.41 0.00 L 319.87 0.00 C 320.21 29.68 319.87 59.37 320.04 89.05 C 320.29 97.32 323.88 105.47 329.94 111.12 C 336.01 117.07 344.56 120.18 353.01 120.01 C 382.02 119.87 411.04 120.22 440.05 119.83 C 439.94 236.88 440.04 353.93 440.00 470.98 C 440.01 478.16 440.50 485.68 437.47 492.41 C 432.79 503.85 421.05 511.80 408.71 512.00 L 103.28 512.00 C 90.95 511.79 79.20 503.84 74.53 492.42 C 72.06 486.96 71.87 480.87 71.99 474.97 C 72.01 327.63 71.99 180.30 72.00 32.96 C 71.95 27.61 73.03 22.22 75.52 17.46 C 80.55 7.39 91.19 0.57 102.41 0.00 M 360.00 382.07 C 358.69 383.73 359.01 385.99 358.90 387.97 C 358.95 396.36 358.91 404.75 358.93 413.14 C 352.50 403.51 346.13 393.83 339.77 384.16 C 338.65 382.47 337.13 380.65 334.92 380.63 C 331.97 380.41 329.13 382.87 329.22 385.89 C 328.94 396.58 329.24 407.28 329.08 417.98 C 329.14 420.43 328.85 422.98 329.54 425.38 C 330.75 429.14 337.11 428.63 337.54 424.63 C 338.19 415.09 337.55 405.51 337.83 395.95 C 343.71 404.78 349.41 413.73 355.26 422.58 C 356.92 424.93 358.74 427.96 362.00 428.00 C 365.02 428.51 367.54 425.83 367.40 422.90 C 367.55 411.27 367.39 399.62 367.48 387.99 C 367.40 386.11 367.63 384.06 366.61 382.38 C 365.24 380.16 361.58 380.00 360.00 382.07 M 100.79 382.81 C 98.94 384.82 100.19 388.63 103.01 388.89 C 106.91 389.29 110.85 388.97 114.77 389.07 C 114.77 399.73 114.78 410.39 114.75 421.05 C 114.76 423.37 114.89 426.34 117.28 427.52 C 119.95 429.02 123.67 427.14 123.86 424.04 C 124.22 412.40 123.84 400.72 124.04 389.07 C 128.25 388.87 132.57 389.54 136.71 388.62 C 140.15 387.40 139.25 381.72 135.61 381.56 C 126.10 381.14 116.55 381.57 107.03 381.37 C 104.95 381.53 102.34 381.06 100.79 382.81 M 156.46 381.58 C 150.26 383.15 145.11 388.05 143.12 394.11 C 140.49 401.86 140.79 410.83 144.81 418.06 C 151.07 429.05 167.20 430.79 177.27 424.26 C 183.48 420.06 186.24 412.28 186.28 405.03 C 186.43 398.11 184.59 390.56 179.19 385.85 C 173.03 380.52 164.12 379.62 156.46 381.58 M 197.74 381.67 C 195.24 381.99 194.12 384.61 194.23 386.87 C 194.06 397.92 194.27 408.97 194.15 420.02 C 194.24 422.43 193.92 425.36 195.97 427.11 C 198.62 429.25 203.28 427.47 203.31 423.89 C 203.66 418.45 203.32 412.99 203.49 407.54 C 206.76 407.72 210.68 407.24 213.15 409.89 C 217.60 414.61 220.01 420.80 223.85 425.97 C 225.63 428.66 230.20 428.72 231.83 425.86 C 232.87 424.27 231.80 422.43 231.24 420.89 C 228.63 415.38 225.17 409.99 220.02 406.56 C 223.42 405.53 227.11 404.31 229.29 401.31 C 233.14 395.94 231.83 387.34 226.14 383.76 C 221.99 381.01 216.77 381.52 212.04 381.39 C 207.28 381.52 202.48 381.08 197.74 381.67 M 240.23 386.91 C 240.19 398.28 240.20 409.66 240.22 421.03 C 240.25 423.12 240.14 425.65 241.97 427.09 C 244.58 429.23 249.25 427.52 249.33 423.98 C 249.76 418.50 249.34 413.00 249.49 407.51 C 252.77 407.64 256.62 407.29 259.13 409.85 C 263.88 414.69 266.10 421.38 270.41 426.55 C 272.74 429.20 278.48 428.00 278.28 424.04 C 276.28 417.09 271.87 410.81 266.09 406.46 C 269.75 405.55 273.64 404.05 275.74 400.71 C 278.91 395.49 277.81 387.82 272.73 384.18 C 268.85 381.14 263.64 381.44 259.00 381.41 C 254.02 381.52 249.02 381.13 244.05 381.58 C 241.41 381.77 240.05 384.51 240.23 386.91 M 286.38 386.01 C 286.17 397.35 286.39 408.70 286.27 420.04 C 286.31 422.30 286.17 425.31 288.52 426.53 C 291.20 427.60 294.20 427.07 297.03 427.21 C 304.36 427.04 311.73 427.52 319.04 426.95 C 322.44 426.37 322.43 420.75 319.05 420.15 C 311.25 419.44 303.38 420.13 295.56 419.82 C 295.59 415.47 295.58 411.12 295.58 406.78 C 302.60 406.71 309.65 407.09 316.66 406.54 C 320.07 405.84 319.57 399.91 315.98 399.96 C 309.20 399.54 302.39 399.95 295.59 399.80 C 295.57 396.05 295.57 392.30 295.58 388.55 C 303.03 388.43 310.50 388.74 317.94 388.37 C 321.67 388.25 321.80 381.95 318.11 381.66 C 309.41 381.03 300.65 381.57 291.93 381.42 C 289.16 381.15 286.27 383.00 286.38 386.01 M 375.06 381.95 C 372.19 383.34 372.77 388.27 375.95 388.84 C 379.96 389.33 384.02 388.96 388.05 389.08 C 387.92 400.08 388.05 411.07 387.99 422.07 C 387.75 424.61 389.07 427.71 391.95 427.92 C 394.85 428.51 397.33 425.86 397.14 423.05 C 397.37 411.73 397.16 400.40 397.23 389.08 C 401.42 388.89 405.69 389.52 409.82 388.64 C 413.41 387.46 412.48 381.48 408.64 381.52 C 400.79 381.23 392.93 381.50 385.08 381.39 C 381.74 381.50 378.31 381.05 375.06 381.95 Z'
/>
<path
fill={primary}
opacity='1.00'
d=' M 160.39 388.45 C 164.79 387.33 170.01 388.38 173.03 391.97 C 176.12 395.52 177.00 400.46 176.87 405.04 C 176.76 409.47 175.56 414.16 172.29 417.34 C 167.50 421.98 158.82 421.68 154.58 416.43 C 150.59 411.44 150.26 404.45 151.51 398.43 C 152.46 393.85 155.68 389.57 160.39 388.45 Z'
/>
<path
fill={primary}
opacity='1.00'
d=' M 203.47 388.42 C 208.28 388.55 213.18 387.93 217.93 388.93 C 222.82 390.10 223.71 398.14 218.81 399.89 C 213.88 401.57 208.52 400.89 203.40 400.90 C 203.44 396.73 203.45 392.57 203.47 388.42 Z'
/>
<path
fill={primary}
opacity='1.00'
d=' M 249.45 388.38 C 254.29 388.56 259.22 387.96 264.00 388.94 C 268.52 390.07 269.67 397.04 265.66 399.44 C 260.63 401.83 254.85 400.80 249.47 400.94 C 249.51 396.75 249.48 392.57 249.45 388.38 Z'
/>
</g>
<g id={secondaryColor}>
<path
fill={secondaryColor}
opacity='1.00'
d=' M 319.87 0.00 L 320.20 0.00 C 360.20 39.89 400.19 79.79 440.05 119.83 C 411.04 120.22 382.02 119.87 353.01 120.01 C 344.56 120.18 336.01 117.07 329.94 111.12 C 323.88 105.47 320.29 97.32 320.04 89.05 C 319.87 59.37 320.21 29.68 319.87 0.00 Z'
/>
</g>
<g id='#fdfdfd'>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 360.00 382.07 C 361.58 380.00 365.24 380.16 366.61 382.38 C 367.63 384.06 367.40 386.11 367.48 387.99 C 367.39 399.62 367.55 411.27 367.40 422.90 C 367.54 425.83 365.02 428.51 362.00 428.00 C 358.74 427.96 356.92 424.93 355.26 422.58 C 349.41 413.73 343.71 404.78 337.83 395.95 C 337.55 405.51 338.19 415.09 337.54 424.63 C 337.11 428.63 330.75 429.14 329.54 425.38 C 328.85 422.98 329.14 420.43 329.08 417.98 C 329.24 407.28 328.94 396.58 329.22 385.89 C 329.13 382.87 331.97 380.41 334.92 380.63 C 337.13 380.65 338.65 382.47 339.77 384.16 C 346.13 393.83 352.50 403.51 358.93 413.14 C 358.91 404.75 358.95 396.36 358.90 387.97 C 359.01 385.99 358.69 383.73 360.00 382.07 Z'
/>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 100.79 382.81 C 102.34 381.06 104.95 381.53 107.03 381.37 C 116.55 381.57 126.10 381.14 135.61 381.56 C 139.25 381.72 140.15 387.40 136.71 388.62 C 132.57 389.54 128.25 388.87 124.04 389.07 C 123.84 400.72 124.22 412.40 123.86 424.04 C 123.67 427.14 119.95 429.02 117.28 427.52 C 114.89 426.34 114.76 423.37 114.75 421.05 C 114.78 410.39 114.77 399.73 114.77 389.07 C 110.85 388.97 106.91 389.29 103.01 388.89 C 100.19 388.63 98.94 384.82 100.79 382.81 Z'
/>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 156.46 381.58 C 164.12 379.62 173.03 380.52 179.19 385.85 C 184.59 390.56 186.43 398.11 186.28 405.03 C 186.24 412.28 183.48 420.06 177.27 424.26 C 167.20 430.79 151.07 429.05 144.81 418.06 C 140.79 410.83 140.49 401.86 143.12 394.11 C 145.11 388.05 150.26 383.15 156.46 381.58 M 160.39 388.45 C 155.68 389.57 152.46 393.85 151.51 398.43 C 150.26 404.45 150.59 411.44 154.58 416.43 C 158.82 421.68 167.50 421.98 172.29 417.34 C 175.56 414.16 176.76 409.47 176.87 405.04 C 177.00 400.46 176.12 395.52 173.03 391.97 C 170.01 388.38 164.79 387.33 160.39 388.45 Z'
/>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 197.74 381.67 C 202.48 381.08 207.28 381.52 212.04 381.39 C 216.77 381.52 221.99 381.01 226.14 383.76 C 231.83 387.34 233.14 395.94 229.29 401.31 C 227.11 404.31 223.42 405.53 220.02 406.56 C 225.17 409.99 228.63 415.38 231.24 420.89 C 231.80 422.43 232.87 424.27 231.83 425.86 C 230.20 428.72 225.63 428.66 223.85 425.97 C 220.01 420.80 217.60 414.61 213.15 409.89 C 210.68 407.24 206.76 407.72 203.49 407.54 C 203.32 412.99 203.66 418.45 203.31 423.89 C 203.28 427.47 198.62 429.25 195.97 427.11 C 193.92 425.36 194.24 422.43 194.15 420.02 C 194.27 408.97 194.06 397.92 194.23 386.87 C 194.12 384.61 195.24 381.99 197.74 381.67 M 203.47 388.42 C 203.45 392.57 203.44 396.73 203.40 400.90 C 208.52 400.89 213.88 401.57 218.81 399.89 C 223.71 398.14 222.82 390.10 217.93 388.93 C 213.18 387.93 208.28 388.55 203.47 388.42 Z'
/>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 240.23 386.91 C 240.05 384.51 241.41 381.77 244.05 381.58 C 249.02 381.13 254.02 381.52 259.00 381.41 C 263.64 381.44 268.85 381.14 272.73 384.18 C 277.81 387.82 278.91 395.49 275.74 400.71 C 273.64 404.05 269.75 405.55 266.09 406.46 C 271.87 410.81 276.28 417.09 278.28 424.04 C 278.48 428.00 272.74 429.20 270.41 426.55 C 266.10 421.38 263.88 414.69 259.13 409.85 C 256.62 407.29 252.77 407.64 249.49 407.51 C 249.34 413.00 249.76 418.50 249.33 423.98 C 249.25 427.52 244.58 429.23 241.97 427.09 C 240.14 425.65 240.25 423.12 240.22 421.03 C 240.20 409.66 240.19 398.28 240.23 386.91 M 249.45 388.38 C 249.48 392.57 249.51 396.75 249.47 400.94 C 254.85 400.80 260.63 401.83 265.66 399.44 C 269.67 397.04 268.52 390.07 264.00 388.94 C 259.22 387.96 254.29 388.56 249.45 388.38 Z'
/>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 286.38 386.01 C 286.27 383.00 289.16 381.15 291.93 381.42 C 300.65 381.57 309.41 381.03 318.11 381.66 C 321.80 381.95 321.67 388.25 317.94 388.37 C 310.50 388.74 303.03 388.43 295.58 388.55 C 295.57 392.30 295.57 396.05 295.59 399.80 C 302.39 399.95 309.20 399.54 315.98 399.96 C 319.57 399.91 320.07 405.84 316.66 406.54 C 309.65 407.09 302.60 406.71 295.58 406.78 C 295.58 411.12 295.59 415.47 295.56 419.82 C 303.38 420.13 311.25 419.44 319.05 420.15 C 322.43 420.75 322.44 426.37 319.04 426.95 C 311.73 427.52 304.36 427.04 297.03 427.21 C 294.20 427.07 291.20 427.60 288.52 426.53 C 286.17 425.31 286.31 422.30 286.27 420.04 C 286.39 408.70 286.17 397.35 286.38 386.01 Z'
/>
<path
fill='#fdfdfd'
opacity='1.00'
d=' M 375.06 381.95 C 378.31 381.05 381.74 381.50 385.08 381.39 C 392.93 381.50 400.79 381.23 408.64 381.52 C 412.48 381.48 413.41 387.46 409.82 388.64 C 405.69 389.52 401.42 388.89 397.23 389.08 C 397.16 400.40 397.37 411.73 397.14 423.05 C 397.33 425.86 394.85 428.51 391.95 427.92 C 389.07 427.71 387.75 424.61 387.99 422.07 C 388.05 411.07 387.92 400.08 388.05 389.08 C 384.02 388.96 379.96 389.33 375.95 388.84 C 372.77 388.27 372.19 383.34 375.06 381.95 Z'
/>
</g>
</svg>
)
}

105
web/src/style/colors.js
View File

@@ -1,8 +1,107 @@
import { rgba } from 'polished'
export const themeColors = {
light: {},
dark: {},
light: {
app: {
headerToggleColor: '#4db380',
appSecondaryColor: '#CBE8D9',
sidebarBGColor: '#575757',
sidebarFillColor: '#dee3e5',
},
torrentCard: {
accentCardColor: '#337a57',
buttonBGColor: rgba('#337a57', 0.5),
cardPrimaryColor: '#00a572',
cardSecondaryColor: '#74c39c',
},
dialogTorrentDetailsContent: {
posterBGColor: '#74c39c',
gradientStartColor: '#e4f6ed',
gradientEndColor: '#b5dec9',
chacheSectionBGColor: '#88cdaa',
fontColor: '#000',
subNameFontColor: '#7c7b7c',
torrentFilesSectionBGColor: '#f1eff3',
},
detailedView: {
gradientStartColor: '#e4f6ed',
gradientEndColor: '#b5dec9',
cacheSectionBGColor: '#fff',
},
addDialog: {
gradientStartColor: '#e4f6ed',
gradientEndColor: '#b5dec9',
fontColor: '#000',
notificationErrorBGColor: '#cda184',
notificationSuccessBGColor: '#88cdaa',
languageSwitchBGColor: '#74c39c',
languageSwitchFontColor: '#e4f6ed',
posterBGColor: '#74c39c',
},
torrentFunctions: {
fontColor: '#000',
},
table: {
defaultPrimaryColor: '#009879',
defaultSecondaryColor: '#00a383',
defaultTertiaryColor: '#03aa89',
},
},
dark: {
app: {
headerToggleColor: '#545a5e',
appSecondaryColor: '#545a5e',
sidebarBGColor: '#323637',
sidebarFillColor: '#dee3e5',
},
torrentCard: {
accentCardColor: '#323637',
buttonBGColor: rgba('#323637', 0.5),
cardPrimaryColor: '#545a5e',
cardSecondaryColor: rgba('#dee3e5', 0.4),
},
dialogTorrentDetailsContent: {
posterBGColor: rgba('#dee3e5', 0.4),
gradientStartColor: '#656f76',
gradientEndColor: '#545a5e',
chacheSectionBGColor: '#3c4244',
fontColor: '#f1eff3',
subNameFontColor: '#dee3e5',
torrentFilesSectionBGColor: rgba('#545a5e', 0.9),
},
detailedView: {
gradientStartColor: '#656f76',
gradientEndColor: '#545a5e',
cacheSectionBGColor: '#dee3e5',
},
addDialog: {
gradientStartColor: '#656f76',
gradientEndColor: '#545a5e',
fontColor: '#fff',
notificationErrorBGColor: '#c82e3f',
notificationSuccessBGColor: '#323637',
languageSwitchBGColor: '#545a5e',
languageSwitchFontColor: '#dee3e5',
posterBGColor: '#dee3e5',
},
torrentFunctions: {
fontColor: '#f1eff3',
},
table: {
defaultPrimaryColor: '#323637',
defaultSecondaryColor: rgba('#545a5e', 0.9),
defaultTertiaryColor: '#545a5e',
},
},
}
export const mainColors = {
primary: '#00a572',
light: {
primary: '#00a572',
secondary: '#00a572',
},
dark: {
primary: '#323637',
secondary: '#dee3e5',
},
}

2
web/src/style/getStyledComponentsTheme.js
View File

@@ -1,3 +1,3 @@
import { mainColors, themeColors } from './colors'
export default type => ({ ...themeColors[type], ...mainColors })
export default type => ({ ...themeColors[type], ...mainColors[type] })

48
web/src/style/materialUISetup.js
View File

@@ -1,44 +1,60 @@
import useMediaQuery from '@material-ui/core/useMediaQuery'
import { createMuiTheme } from '@material-ui/core'
import { useMemo } from 'react'
import { createMuiTheme, useMediaQuery } from '@material-ui/core'
import { useEffect, useMemo, useState } from 'react'
import { mainColors } from './colors'
const primary = { main: mainColors.primary }
export const THEME_MODES = { LIGHT: 'light', DARK: 'dark', AUTO: 'auto' }
const typography = { fontFamily: 'Open Sans, sans-serif' }
// https://material-ui.com/ru/customization/default-theme/
export const darkTheme = createMuiTheme({
typography,
palette: {
type: 'dark',
background: { paper: '#575757' },
primary,
type: THEME_MODES.DARK,
primary: { main: mainColors.dark.primary },
secondary: { main: mainColors.dark.secondary },
},
})
export const lightTheme = createMuiTheme({
typography,
palette: {
type: 'light',
background: { paper: '#f1f1f1' },
primary,
type: THEME_MODES.LIGHT,
primary: { main: mainColors.light.primary },
secondary: { main: mainColors.light.secondary },
},
})
export const useMaterialUITheme = () => {
const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
const savedThemeMode = localStorage.getItem('themeMode')
const isSystemModeDark = useMediaQuery('(prefers-color-scheme: dark)')
const [isDarkMode, setIsDarkMode] = useState(savedThemeMode === 'dark' || isSystemModeDark)
const [currentThemeMode, setCurrentThemeMode] = useState(savedThemeMode || THEME_MODES.LIGHT)
const updateThemeMode = mode => {
setCurrentThemeMode(mode)
localStorage.setItem('themeMode', mode)
}
useEffect(() => {
currentThemeMode === THEME_MODES.LIGHT && setIsDarkMode(false)
currentThemeMode === THEME_MODES.DARK && setIsDarkMode(true)
currentThemeMode === THEME_MODES.AUTO && setIsDarkMode(isSystemModeDark)
}, [isSystemModeDark, currentThemeMode])
const theme = isDarkMode ? THEME_MODES.DARK : THEME_MODES.LIGHT
const muiTheme = useMemo(
() =>
createMuiTheme({
typography,
palette: {
type: isDarkMode ? 'dark' : 'light',
primary,
type: theme,
primary: { main: mainColors[theme].primary },
secondary: { main: mainColors[theme].secondary },
},
}),
[isDarkMode],
[theme],
)
return [isDarkMode, muiTheme]
return [isDarkMode, currentThemeMode, updateThemeMode, muiTheme]
}

7
web/yarn.lock
View File

@@ -9416,6 +9416,13 @@ pnp-webpack-plugin@1.6.4:
dependencies:
ts-pnp "^1.1.6"
polished@^4.1.3:
version "4.1.3"
resolved "https://registry.yarnpkg.com/polished/-/polished-4.1.3.tgz#7a3abf2972364e7d97770b827eec9a9e64002cfc"
integrity sha512-ocPAcVBUOryJEKe0z2KLd1l9EBa1r5mSwlKpExmrLzsnIzJo4axsoU9O2BjOTkDGDT4mZ0WFE5XKTlR3nLnZOA==
dependencies:
"@babel/runtime" "^7.14.0"
popper.js@1.16.1-lts:
version "1.16.1-lts"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"