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' />
-                <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' link='https://github.com/spawnlmg' />
+                <LinkComponent name='Daniel Shleifman' link='https://github.com/dancheskus' />
+                <LinkComponent name='Matt Joiner' link='https://github.com/anacrolix' />
+                <LinkComponent name='nikk' link='https://github.com/tsynik' />
+                <LinkComponent name='tw1cker Руслан Пахнев' link='https://github.com/Nemiroff' />
+                <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`
-  padding: 40px 20px;
+export const Section = styled.section`
+  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;
-  grid-auto-flow: column;
-  grid-template-columns: repeat(2, max-content);
-  justify-content: end;
-  gap: 15px;
-  align-self: end;
+  display: flex;
+  justify-content: flex-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;
 `