about dialog updated

web/src/components/About.jsx

@@ -1,88 +0,0 @@
-import axios from 'axios'
-import { useEffect, useState } from 'react'
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import DialogActions from '@material-ui/core/DialogActions'
-import DialogContent from '@material-ui/core/DialogContent'
-import DialogTitle from '@material-ui/core/DialogTitle'
-import InfoIcon from '@material-ui/icons/Info'
-import ListItem from '@material-ui/core/ListItem'
-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, useTheme } from '@material-ui/core/styles'
-
-import { lightTheme } from '../style/materialUISetup'
-
-export default function AboutDialog() {
-  const { t } = useTranslation()
-  const [open, setOpen] = useState(false)
-  const [torrServerVersion, setTorrServerVersion] = useState('')
-  useEffect(() => {
-    axios.get(echoHost()).then(({ data }) => setTorrServerVersion(data))
-  }, [])
-
-  const primary = useTheme().palette.primary.main
-
-  return (
-    <div>
-      <ListItem button key='Settings' onClick={() => setOpen(true)}>
-        <ListItemIcon>
-          <InfoIcon />
-        </ListItemIcon>
-        <ListItemText primary={t('About')} />
-      </ListItem>
-
-      <ThemeProvider theme={lightTheme}>
-        <Dialog open={open} onClose={() => setOpen(false)} aria-labelledby='form-dialog-title' fullWidth maxWidth='sm'>
-          <DialogTitle id='form-dialog-title'>{t('About')}</DialogTitle>
-
-          <DialogContent>
-            <center>
-              <h2>TorrServer {torrServerVersion}</h2>
-              <a style={{ color: primary }} href='https://github.com/YouROK/TorrServer'>
-                https://github.com/YouROK/TorrServer
-              </a>
-            </center>
-            <DialogContent>
-              <center>
-                <h2>{t('ThanksToEveryone')}</h2>
-              </center>
-              <br />
-              <h2>{t('SpecialThanks')}</h2>
-              <b>anacrolix Matt Joiner</b>&nbsp;
-              <a style={{ color: primary }} href='https://github.com/anacrolix/'>
-                github.com/anacrolix
-              </a>
-              <br />
-              <b>nikk</b>&nbsp;
-              <a style={{ color: primary }} href='https://github.com/tsynik'>
-                github.com/tsynik
-              </a>
-              <br />
-              <b>dancheskus</b>&nbsp;
-              <a style={{ color: primary }} href='https://github.com/dancheskus'>
-                github.com/dancheskus
-              </a>
-              <br />
-              <b>tw1cker Руслан Пахнев</b>&nbsp;
-              <a style={{ color: primary }} href='https://github.com/Nemiroff'>
-                github.com/Nemiroff
-              </a>
-              <br />
-              <b>SpAwN_LMG</b>
-              <br />
-            </DialogContent>
-          </DialogContent>
-
-          <DialogActions>
-            <Button onClick={() => setOpen(false)} color='primary' variant='outlined' autoFocus>
-              {t('Close')}
-            </Button>
-          </DialogActions>
-        </Dialog>
-      </ThemeProvider>
-    </div>
-  )
-}

web/src/components/About/NameComponent.jsx

@@ -0,0 +1,17 @@
+import { GitHub as GitHubIcon } from '@material-ui/icons'
+
+import { NameWrapper, NameIcon } from './style'
+
+export default function NameComponent({ name, link }) {
+  return (
+    <NameWrapper isLink={!!link} href={link} target='_blank' rel='noreferrer'>
+      {link && (
+        <NameIcon>
+          <GitHubIcon />
+        </NameIcon>
+      )}
+
+      {name}
+    </NameWrapper>
+  )
+}

web/src/components/About/index.jsx

@@ -0,0 +1,75 @@
+import { useState } from 'react'
+import Button from '@material-ui/core/Button'
+import Dialog from '@material-ui/core/Dialog'
+import InfoIcon from '@material-ui/icons/Info'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemText from '@material-ui/core/ListItemText'
+import { useTranslation } from 'react-i18next'
+import { GitHub as GitHubIcon } from '@material-ui/icons'
+import { useMediaQuery } from '@material-ui/core'
+
+import NameComponent from './NameComponent'
+import tsIcon from './ts-icon-192x192.png'
+import { DialogWrapper, HeaderSection, ThanksSection, SpecialThanksSection, FooterSection } from './style'
+
+export default function AboutDialog() {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const fullScreen = useMediaQuery('@media (max-width:930px)')
+
+  return (
+    <>
+      <ListItem button key='Settings' onClick={() => setOpen(true)}>
+        <ListItemIcon>
+          <InfoIcon />
+        </ListItemIcon>
+        <ListItemText primary={t('About')} />
+      </ListItem>
+
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        aria-labelledby='form-dialog-title'
+        fullScreen={fullScreen}
+        maxWidth='xl'
+      >
+        <DialogWrapper>
+          <HeaderSection>
+            <div>{t('About')}</div>
+            <img src={tsIcon} alt='ts-icon' />
+          </HeaderSection>
+
+          <div style={{ overflow: 'auto' }}>
+            <ThanksSection>{t('ThanksToEveryone')}</ThanksSection>
+
+            <SpecialThanksSection>
+              <span>{t('SpecialThanks')}</span>
+
+              <div>
+                <NameComponent name='Daniel Shleifman' link='https://github.com/dancheskus' />
+                <NameComponent name='Matt Joiner' link='https://github.com/anacrolix' />
+                <NameComponent name='nikk' link='https://github.com/tsynik' />
+                <NameComponent name='tw1cker Руслан Пахнев' link='https://github.com/Nemiroff' />
+                <NameComponent name='SpAwN_LMG' />
+              </div>
+            </SpecialThanksSection>
+          </div>
+
+          <FooterSection>
+            <a href='https://github.com/YouROK/TorrServer' target='_blank' rel='noreferrer'>
+              <Button color='primary' variant='outlined'>
+                <GitHubIcon style={{ marginRight: '10px' }} />
+                {t('ProjectSource')}
+              </Button>
+            </a>
+
+            <Button onClick={() => setOpen(false)} color='primary' variant='contained' autoFocus>
+              {t('Close')}
+            </Button>
+          </FooterSection>
+        </DialogWrapper>
+      </Dialog>
+    </>
+  )
+}

web/src/components/About/style.js

@@ -0,0 +1,132 @@
+import styled, { css } from 'styled-components'
+
+export const DialogWrapper = styled.div`
+  background: #f1eff3;
+  height: 100%;
+  display: grid;
+  grid-template-rows: max-content 1fr max-content;
+`
+
+export const HeaderSection = styled.section`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 40px;
+  font-weight: 300;
+  padding: 20px;
+  color: #323637;
+
+  img {
+    width: 80px;
+  }
+
+  @media (max-width: 930px) {
+    font-size: 30px;
+    padding: 10px 20px;
+
+    img {
+      width: 60px;
+    }
+  }
+`
+
+export const ThanksSection = styled.section`
+  background: #545a5e;
+  color: #f1eff3;
+  padding: 40px 20px;
+  text-align: center;
+  font-size: 30px;
+  font-weight: 300;
+
+  @media (max-width: 930px) {
+    font-size: 20px;
+    padding: 30px 20px;
+  }
+`
+
+export const SpecialThanksSection = styled.section`
+  padding: 40px 20px;
+  color: #323637;
+
+  > span {
+    font-size: 20px;
+    display: block;
+    margin-bottom: 15px;
+  }
+
+  > div {
+    display: grid;
+    gap: 10px;
+    grid-template-columns: repeat(4, max-content);
+
+    @media (max-width: 930px) {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    @media (max-width: 780px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (max-width: 550px) {
+      grid-template-columns: 1fr;
+    }
+  }
+`
+
+export const FooterSection = styled.div`
+  padding: 20px;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: repeat(2, max-content);
+  justify-content: end;
+  gap: 15px;
+  align-self: end;
+  background: #e8e5eb;
+
+  a {
+    text-decoration: none;
+  }
+`
+
+export const NameWrapper = styled.a`
+  ${({ isLink }) => css`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid;
+    padding: 10px;
+    border-radius: 5px;
+    text-transform: uppercase;
+    text-decoration: none;
+    background: #545a5e;
+    color: #f1eff3;
+    transition: 0.2s;
+
+    @media (max-width: 550px) {
+      justify-content: start;
+    }
+
+    > * {
+      transition: 0.2s;
+    }
+
+    ${isLink
+      ? css`
+          :hover {
+            filter: brightness(1.1);
+
+            > * {
+              transform: translateY(-1px);
+            }
+          }
+        `
+      : css`
+          cursor: default;
+        `}
+  `}
+`
+
+export const NameIcon = styled.div`
+  display: grid;
+  margin-right: 10px;
+`

web/src/components/CloseServer.jsx

@@ -3,9 +3,6 @@ import { Button, Dialog, DialogActions, DialogTitle, ListItem, ListItemIcon, Lis
 import { PowerSettingsNew as PowerSettingsNewIcon } from '@material-ui/icons'
 import { shutdownHost } from 'utils/Hosts'
 import { useTranslation } from 'react-i18next'
-import { ThemeProvider } from '@material-ui/core/styles'
-
-import { lightTheme } from '../style/materialUISetup'
 
 export default function CloseServer({ isOffline, isLoading }) {
   const { t } = useTranslation()
@@ -23,28 +20,26 @@ export default function CloseServer({ isOffline, isLoading }) {
         <ListItemText primary={t('CloseServer')} />
       </ListItem>
 
-      <ThemeProvider theme={lightTheme}>
+      <Dialog open={open} onClose={closeDialog}>
-        <Dialog open={open} onClose={closeDialog}>
+        <DialogTitle>{t('CloseServer?')}</DialogTitle>
-          <DialogTitle>{t('CloseServer?')}</DialogTitle>
+        <DialogActions>
-          <DialogActions>
+          <Button variant='outlined' onClick={closeDialog} color='secondary'>
-            <Button variant='outlined' onClick={closeDialog} color='primary'>
+            {t('Cancel')}
-              {t('Cancel')}
+          </Button>
-            </Button>
 
-            <Button
+          <Button
-              variant='contained'
+            variant='contained'
-              onClick={() => {
+            onClick={() => {
-                fetch(shutdownHost())
+              fetch(shutdownHost())
-                closeDialog()
+              closeDialog()
-              }}
+            }}
-              color='primary'
+            color='secondary'
-              autoFocus
+            autoFocus
-            >
+          >
-              {t('TurnOff')}
+            {t('TurnOff')}
-            </Button>
+          </Button>
-          </DialogActions>
+        </DialogActions>
-        </Dialog>
+      </Dialog>
-      </ThemeProvider>
     </>
   )
 }

web/src/components/RemoveAll.jsx

@@ -6,9 +6,6 @@ import DeleteIcon from '@material-ui/icons/Delete'
 import { useState } from 'react'
 import { torrentsHost } from 'utils/Hosts'
 import { useTranslation } from 'react-i18next'
-import { ThemeProvider } from '@material-ui/core/styles'
-
-import { lightTheme } from '../style/materialUISetup'
 
 const fnRemoveAll = () => {
   fetch(torrentsHost(), {
@@ -50,28 +47,26 @@ export default function RemoveAll({ isOffline, isLoading }) {
         <ListItemText primary={t('RemoveAll')} />
       </ListItem>
 
-      <ThemeProvider theme={lightTheme}>
+      <Dialog open={open} onClose={closeDialog}>
-        <Dialog open={open} onClose={closeDialog}>
+        <DialogTitle>{t('DeleteTorrents?')}</DialogTitle>
-          <DialogTitle>{t('DeleteTorrents?')}</DialogTitle>
+        <DialogActions>
-          <DialogActions>
+          <Button variant='outlined' onClick={closeDialog} color='secondary'>
-            <Button variant='outlined' onClick={closeDialog} color='primary'>
+            {t('Cancel')}
-              {t('Cancel')}
+          </Button>
-            </Button>
 
-            <Button
+          <Button
-              variant='contained'
+            variant='contained'
-              onClick={() => {
+            onClick={() => {
-                fnRemoveAll()
+              fnRemoveAll()
-                closeDialog()
+              closeDialog()
-              }}
+            }}
-              color='primary'
+            color='secondary'
-              autoFocus
+            autoFocus
-            >
+          >
-              {t('OK')}
+            {t('OK')}
-            </Button>
+          </Button>
-          </DialogActions>
+        </DialogActions>
-        </Dialog>
+      </Dialog>
-      </ThemeProvider>
     </>
   )
 }

web/src/locales/en/translation.json

@@ -74,6 +74,7 @@
   "PiecesLength": "Pieces length",
   "Preload": "Preload",
   "PreloadBuffer": "Preload Buffer",
+  "ProjectSource": "Project source",
   "ReaderReadAHead": "Reader Read Ahead (5-100%)",
   "RemoveAll": "Remove All",
   "RemoveCacheOnDrop": "Remove Cache from Disk on Drop Torrent",

web/src/locales/ru/translation.json

@@ -74,6 +74,7 @@
   "PiecesLength": "Размер блока",
   "Preload": "Предзагр.",
   "PreloadBuffer": "Наполнять кеш перед началом воспроизведения",
+  "ProjectSource": "Проект",
   "ReaderReadAHead": "Кеш предзагрузки (5-100%, рек. 95%)",
   "RemoveAll": "Удалить все",
   "RemoveCacheOnDrop": "Очищать кеш на диске при отключении торрента",