about dialog updated

web/src/components/About/LinkComponent.jsx

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

web/src/components/About/NameComponent.jsx

@@ -1,17 +0,0 @@
-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

@@ -6,12 +6,11 @@ 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 LinkComponent from './LinkComponent'
 import tsIcon from './ts-icon-192x192.png'
-import { DialogWrapper, HeaderSection, ThanksSection, SpecialThanksSection, FooterSection } from './style'
+import { DialogWrapper, HeaderSection, ThanksSection, Section, FooterSection } from './style'
 
 export default function AboutDialog() {
   const { t } = useTranslation()
@@ -43,27 +42,30 @@ export default function AboutDialog() {
           <div style={{ overflow: 'auto' }}>
             <ThanksSection>{t('ThanksToEveryone')}</ThanksSection>
 
-            <SpecialThanksSection>
+            <Section>
+              <span>{t('Links')}</span>
+
+              <div>
+                <LinkComponent name={t('ProjectSource')} link='https://github.com/YouROK/TorrServer' />
+                <LinkComponent name={t('Releases')} link='https://github.com/YouROK/TorrServer/releases' />
+                <LinkComponent name='API' link='https://github.com/YouROK/TorrServer/blob/master/README.md' />
+              </div>
+            </Section>
+
+            <Section>
               <span>{t('SpecialThanks')}</span>
 
               <div>
-                <NameComponent name='Daniel Shleifman' link='https://github.com/dancheskus' />
+                <LinkComponent name='Daniel Shleifman' link='https://github.com/dancheskus' />
-                <NameComponent name='Matt Joiner' link='https://github.com/anacrolix' />
+                <LinkComponent name='Matt Joiner' link='https://github.com/anacrolix' />
-                <NameComponent name='nikk' link='https://github.com/tsynik' />
+                <LinkComponent name='nikk' link='https://github.com/tsynik' />
-                <NameComponent name='tw1cker Руслан Пахнев' link='https://github.com/Nemiroff' />
+                <LinkComponent name='tw1cker Руслан Пахнев' link='https://github.com/Nemiroff' />
-                <NameComponent name='SpAwN_LMG' link='https://github.com/spawnlmg' />
+                <LinkComponent name='SpAwN_LMG' link='https://github.com/spawnlmg' />
               </div>
-            </SpecialThanksSection>
+            </Section>
           </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>

web/src/components/About/style.js

@@ -44,8 +44,8 @@ export const ThanksSection = styled.section`
   }
 `
 
-export const SpecialThanksSection = styled.section`
+export const Section = styled.section`
-  padding: 40px 20px;
+  padding: 20px;
   color: #323637;
 
   > span {
@@ -54,6 +54,10 @@ export const SpecialThanksSection = styled.section`
     margin-bottom: 15px;
   }
 
+  a {
+    text-decoration: none;
+  }
+
   > div {
     display: grid;
     gap: 10px;
@@ -75,20 +79,12 @@ export const SpecialThanksSection = styled.section`
 
 export const FooterSection = styled.div`
   padding: 20px;
-  display: grid;
+  display: flex;
-  grid-auto-flow: column;
+  justify-content: flex-end;
-  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`
+export const LinkWrapper = styled.a`
   ${({ isLink }) => css`
     display: inline-flex;
     align-items: center;
@@ -122,7 +118,7 @@ export const NameWrapper = styled.a`
   `}
 `
 
-export const NameIcon = styled.div`
+export const LinkIcon = styled.div`
   display: grid;
   margin-right: 10px;
 `

web/src/locales/en/translation.json

@@ -62,6 +62,7 @@
   "Host": "Host",
   "Info": "Info",
   "LatestFilePlayed": "Latest file played:",
+  "Links": "Links",
   "Name": "Name",
   "NoTorrentsAdded": "No torrents added",
   "Offline": "Offline",
@@ -74,8 +75,9 @@
   "PiecesLength": "Pieces length",
   "Preload": "Preload",
   "PreloadBuffer": "Preload Buffer",
-  "ProjectSource": "Project source",
+  "ProjectSource": "Project page",
   "ReaderReadAHead": "Reader Read Ahead (5-100%)",
+  "Releases": "Releases",
   "RemoveAll": "Remove All",
   "RemoveCacheOnDrop": "Remove Cache from Disk on Drop Torrent",
   "RemoveCacheOnDropDesc": "If disabled, remove cache on delete torrent.",

web/src/locales/ru/translation.json

@@ -62,6 +62,7 @@
   "Host": "Хост",
   "Info": "Инфо",
   "LatestFilePlayed": "Последний воспроизведенный файл:",
+  "Links": "Ссылки",
   "Name": "Название",
   "NoTorrentsAdded": "Нет торрентов",
   "Offline": "Сервер не доступен",
@@ -74,8 +75,9 @@
   "PiecesLength": "Размер блока",
   "Preload": "Предзагр.",
   "PreloadBuffer": "Наполнять кеш перед началом воспроизведения",
-  "ProjectSource": "Проект",
+  "ProjectSource": "Сайт проекта",
   "ReaderReadAHead": "Кеш предзагрузки (5-100%, рек. 95%)",
+  "Releases": "Релизы",
   "RemoveAll": "Удалить все",
   "RemoveCacheOnDrop": "Очищать кеш на диске при отключении торрента",
   "RemoveCacheOnDropDesc": "Если отключено, кэш очищается при удалении торрента.",