diff --git a/web/src/components/About.jsx b/web/src/components/About.jsx index 5b2ca47..ed1b4b1 100644 --- a/web/src/components/About.jsx +++ b/web/src/components/About.jsx @@ -12,8 +12,11 @@ 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 { themeColors } from 'style/colors' -import { lightTheme } from './App/materialUISetup' +import { lightTheme } from '../style/materialUISetup' + +const { primary } = themeColors export default function AboutDialog() { const { t } = useTranslation() @@ -39,7 +42,7 @@ export default function AboutDialog() {

TorrServer {torrServerVersion}

- + https://github.com/YouROK/TorrServer
@@ -50,22 +53,22 @@ export default function AboutDialog() {

{t('SpecialThanks')}

anacrolix Matt Joiner  - + github.com/anacrolix
nikk  - + github.com/tsynik
dancheskus  - + github.com/dancheskus
tw1cker Руслан Пахнев  - + github.com/Nemiroff
diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx index 5bcd83c..73a2d2c 100644 --- a/web/src/components/Add/AddDialog.jsx +++ b/web/src/components/Add/AddDialog.jsx @@ -13,7 +13,7 @@ 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 'components/App/materialUISetup' +import { lightTheme } from 'style/materialUISetup' import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers' import { ButtonWrapper, Content, Header } from './style' diff --git a/web/src/components/Add/style.js b/web/src/components/Add/style.js index c81803a..a1ffc6f 100644 --- a/web/src/components/Add/style.js +++ b/web/src/components/Add/style.js @@ -2,14 +2,16 @@ import { Button } from '@material-ui/core' import styled, { css } from 'styled-components' export const Header = styled.div` - background: #00a572; - color: rgba(0, 0, 0, 0.87); - font-size: 20px; - color: #fff; - font-weight: 600; - 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%); - padding: 15px 24px; - position: relative; + ${({ theme: { primary } }) => css` + background: ${primary}; + color: rgba(0, 0, 0, 0.87); + font-size: 20px; + color: #fff; + font-weight: 600; + 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%); + padding: 15px 24px; + position: relative; + `} ` export const Content = styled.div` diff --git a/web/src/components/App/index.jsx b/web/src/components/App/index.jsx index a7ffab5..d835286 100644 --- a/web/src/components/App/index.jsx +++ b/web/src/components/App/index.jsx @@ -1,4 +1,3 @@ -import { MuiThemeProvider } from '@material-ui/core' import CssBaseline from '@material-ui/core/CssBaseline' import { useEffect, useState } from 'react' import Typography from '@material-ui/core/Typography' @@ -11,13 +10,16 @@ import TorrentList from 'components/TorrentList' import DonateSnackbar from 'components/Donate' import DonateDialog from 'components/Donate/DonateDialog' import useChangeLanguage from 'utils/useChangeLanguage' -import { ThemeProvider } from '@material-ui/core/styles' +import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles' +import { ThemeProvider as StyledComponentsThemeProvider } from 'styled-components' import { useQuery } from 'react-query' import { getTorrents } from 'utils/Utils' +import GlobalStyle from 'style/GlobalStyle' import { AppWrapper, AppHeader, LanguageSwitch } from './style' import Sidebar from './Sidebar' -import { darkTheme, lightTheme, useMaterialUITheme } from './materialUISetup' +import { darkTheme, lightTheme, useMaterialUITheme } from '../../style/materialUISetup' +import getStyledComponentsTheme from '../../style/getStyledComponentsTheme' export default function App() { const [isDrawerOpen, setIsDrawerOpen] = useState(false) @@ -25,7 +27,7 @@ export default function App() { const [torrServerVersion, setTorrServerVersion] = useState('') // https://material-ui.com/ru/customization/palette/ - const materialUITheme = useMaterialUITheme() + const [isDarkMode, muiTheme] = useMaterialUITheme() const [currentLang, changeLang] = useChangeLanguage() const [isOffline, setIsOffline] = useState(false) const { data: torrents, isLoading } = useQuery('torrents', getTorrents, { @@ -40,51 +42,57 @@ export default function App() { }, []) return ( - - + <> + - {/* Div100vh - iOS WebKit fix */} - - - - setIsDrawerOpen(!isDrawerOpen)} - edge='start' - > - {isDrawerOpen ? : } - + + + - - TorrServer {torrServerVersion} - + {/* Div100vh - iOS WebKit fix */} + + + + setIsDrawerOpen(!isDrawerOpen)} + edge='start' + > + {isDrawerOpen ? : } + -
- (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}> - {currentLang === 'en' ? 'RU' : 'EN'} - -
- + + TorrServer {torrServerVersion} + - - - +
+ (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}> + {currentLang === 'en' ? 'RU' : 'EN'} + +
+ - + + + - - {isDonationDialogOpen && setIsDonationDialogOpen(false)} />} - + - {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && } - - - + + {isDonationDialogOpen && setIsDonationDialogOpen(false)} />} + + + {!JSON.parse(localStorage.getItem('snackbarIsClosed')) && } + + + + + ) } diff --git a/web/src/components/App/style.js b/web/src/components/App/style.js index 6e31860..2cfb19c 100644 --- a/web/src/components/App/style.js +++ b/web/src/components/App/style.js @@ -18,16 +18,18 @@ export const CenteredGrid = styled.div` ` export const AppHeader = styled.div` - background: #00a572; - color: #fff; - grid-area: head; - display: grid; - grid-auto-flow: column; - align-items: center; - grid-template-columns: repeat(2, max-content) 1fr; - 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%); - padding: 0 16px; - z-index: 3; + ${({ theme: { primary } }) => css` + background: ${primary}; + color: #fff; + grid-area: head; + display: grid; + grid-auto-flow: column; + align-items: center; + grid-template-columns: repeat(2, max-content) 1fr; + 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%); + padding: 0 16px; + z-index: 3; + `} ` export const AppSidebarStyle = styled.div` ${({ isDrawerOpen }) => css` diff --git a/web/src/components/CloseServer.jsx b/web/src/components/CloseServer.jsx index 4704188..d4dab5d 100644 --- a/web/src/components/CloseServer.jsx +++ b/web/src/components/CloseServer.jsx @@ -5,7 +5,7 @@ import { shutdownHost } from 'utils/Hosts' import { useTranslation } from 'react-i18next' import { ThemeProvider } from '@material-ui/core/styles' -import { lightTheme } from './App/materialUISetup' +import { lightTheme } from '../style/materialUISetup' export default function CloseServer({ isOffline, isLoading }) { const { t } = useTranslation() diff --git a/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js b/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js index 3fdaf09..a45f514 100644 --- a/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js +++ b/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js @@ -1,10 +1,12 @@ +import { themeColors } from 'style/colors' + export const snakeSettings = { default: { borderWidth: 1, pieceSize: 14, gapBetweenPieces: 3, borderColor: '#dbf2e8', - completeColor: '#00a572', + completeColor: themeColors.primary, backgroundColor: '#fff', progressColor: '#b3dfc9', readerColor: '#000', diff --git a/web/src/components/RemoveAll.jsx b/web/src/components/RemoveAll.jsx index b14f006..257b73a 100644 --- a/web/src/components/RemoveAll.jsx +++ b/web/src/components/RemoveAll.jsx @@ -8,7 +8,7 @@ import { torrentsHost } from 'utils/Hosts' import { useTranslation } from 'react-i18next' import { ThemeProvider } from '@material-ui/core/styles' -import { lightTheme } from './App/materialUISetup' +import { lightTheme } from '../style/materialUISetup' const fnRemoveAll = () => { fetch(torrentsHost(), { diff --git a/web/src/components/Settings.jsx b/web/src/components/Settings.jsx index e0f8507..55d4c91 100644 --- a/web/src/components/Settings.jsx +++ b/web/src/components/Settings.jsx @@ -15,7 +15,7 @@ import { settingsHost, setTorrServerHost, getTorrServerHost } from 'utils/Hosts' import { useTranslation } from 'react-i18next' import { ThemeProvider } from '@material-ui/core/styles' -import { lightTheme } from './App/materialUISetup' +import { lightTheme } from '../style/materialUISetup' export default function SettingsDialog() { const { t } = useTranslation() diff --git a/web/src/components/TorrentCard/style.js b/web/src/components/TorrentCard/style.js index 1e8e874..25c3fd1 100644 --- a/web/src/components/TorrentCard/style.js +++ b/web/src/components/TorrentCard/style.js @@ -1,29 +1,31 @@ import styled, { css } from 'styled-components' export const TorrentCard = styled.div` - border-radius: 5px; - display: grid; - grid-template-columns: 120px 260px 1fr; - grid-template-rows: 180px; - grid-template-areas: 'poster description buttons'; - gap: 10px; - padding: 10px; - background: #00a572; - 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%); + ${({ theme: { primary } }) => css` + border-radius: 5px; + display: grid; + grid-template-columns: 120px 260px 1fr; + grid-template-rows: 180px; + grid-template-areas: 'poster description buttons'; + gap: 10px; + padding: 10px; + background: ${primary}; + 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) { - grid-template-areas: - 'poster description' - 'buttons buttons'; + @media (max-width: 1260px), (max-height: 500px) { + grid-template-areas: + 'poster description' + 'buttons buttons'; - grid-template-columns: 70px 1fr; - grid-template-rows: 110px max-content; - } + grid-template-columns: 70px 1fr; + grid-template-rows: 110px max-content; + } - @media (max-width: 770px) { - grid-template-columns: 60px 1fr; - grid-template-rows: 90px max-content; - } + @media (max-width: 770px) { + grid-template-columns: 60px 1fr; + grid-template-rows: 90px max-content; + } + `} ` export const TorrentCardPoster = styled.div` diff --git a/web/src/components/TorrentList/AddFirstTorrent.jsx b/web/src/components/TorrentList/AddFirstTorrent.jsx index 7d81d57..296f91b 100644 --- a/web/src/components/TorrentList/AddFirstTorrent.jsx +++ b/web/src/components/TorrentList/AddFirstTorrent.jsx @@ -1,5 +1,6 @@ import { useState } from 'react' import { useTranslation } from 'react-i18next' +import { themeColors } from 'style/colors' import AddDialog from '../Add/AddDialog' import IconWrapper from './style' @@ -16,7 +17,7 @@ export default function AddFirstTorrent() { diff --git a/web/src/components/TorrentList/NoServerConnection.jsx b/web/src/components/TorrentList/NoServerConnection.jsx index d54c198..89a2090 100644 --- a/web/src/components/TorrentList/NoServerConnection.jsx +++ b/web/src/components/TorrentList/NoServerConnection.jsx @@ -1,4 +1,5 @@ import { useTranslation } from 'react-i18next' +import { themeColors } from 'style/colors' import IconWrapper from './style' @@ -10,7 +11,7 @@ export default function NoServerConnection() { diff --git a/web/src/index.css b/web/src/index.css deleted file mode 100644 index d45520b..0000000 --- a/web/src/index.css +++ /dev/null @@ -1,20 +0,0 @@ -*, -*::before, -*::after { - margin: 0; - padding: 0; - box-sizing: inherit; -} - -body { - font-family: "Open Sans", sans-serif; - box-sizing: border-box; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - letter-spacing: -0.1px; -} - -button { - font-family: "Open Sans", sans-serif; - letter-spacing: -0.1px; -} \ No newline at end of file diff --git a/web/src/index.jsx b/web/src/index.jsx index d9e88e1..ac8c027 100644 --- a/web/src/index.jsx +++ b/web/src/index.jsx @@ -5,8 +5,6 @@ import { QueryClientProvider, QueryClient } from 'react-query' import App from './components/App' import 'i18n' -import './index.css' - const queryClient = new QueryClient() ReactDOM.render( diff --git a/web/src/style/GlobalStyle.js b/web/src/style/GlobalStyle.js new file mode 100755 index 0000000..d3bc618 --- /dev/null +++ b/web/src/style/GlobalStyle.js @@ -0,0 +1,24 @@ +import { createGlobalStyle } from 'styled-components' + +export default createGlobalStyle` + *, + *::before, + *::after { + margin: 0; + padding: 0; + box-sizing: inherit; + } + + body { + font-family: "Open Sans", sans-serif; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + letter-spacing: -0.1px; + } + + button { + font-family: "Open Sans", sans-serif; + letter-spacing: -0.1px; + } +` diff --git a/web/src/style/colors.js b/web/src/style/colors.js new file mode 100644 index 0000000..7ea161b --- /dev/null +++ b/web/src/style/colors.js @@ -0,0 +1,8 @@ +export const themeColors = { + light: {}, + dark: {}, +} + +export const mainColors = { + primary: '#00a572', +} diff --git a/web/src/style/getStyledComponentsTheme.js b/web/src/style/getStyledComponentsTheme.js new file mode 100644 index 0000000..f9a019e --- /dev/null +++ b/web/src/style/getStyledComponentsTheme.js @@ -0,0 +1,3 @@ +import { mainColors, themeColors } from './colors' + +export default type => ({ ...themeColors[type], ...mainColors }) diff --git a/web/src/components/App/materialUISetup.js b/web/src/style/materialUISetup.js similarity index 69% rename from web/src/components/App/materialUISetup.js rename to web/src/style/materialUISetup.js index 230d942..d365ec4 100644 --- a/web/src/components/App/materialUISetup.js +++ b/web/src/style/materialUISetup.js @@ -2,6 +2,8 @@ import useMediaQuery from '@material-ui/core/useMediaQuery' import { createMuiTheme } from '@material-ui/core' import { useMemo } from 'react' +import { mainColors } from './colors' + // https://material-ui.com/ru/customization/default-theme/ export const darkTheme = createMuiTheme({ palette: { @@ -17,19 +19,19 @@ export const lightTheme = createMuiTheme({ }) export const useMaterialUITheme = () => { - const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)') + const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)') - const materialUITheme = useMemo( + const muiTheme = useMemo( () => createMuiTheme({ palette: { - type: prefersDarkMode ? 'dark' : 'light', - primary: { main: '#00a572' }, + type: isDarkMode ? 'dark' : 'light', + primary: { main: mainColors.primary }, }, typography: { fontFamily: 'Open Sans, sans-serif' }, }), - [prefersDarkMode], + [isDarkMode], ) - return materialUITheme + return [isDarkMode, muiTheme] }