added icons for noserver or no files

web/src/components/TorrentList/AddFirstTorrent.jsx

@@ -0,0 +1,29 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import AddDialog from '../Add/AddDialog'
+import IconWrapper from './style'
+
+export default function AddFirstTorrent() {
+  const { t } = useTranslation()
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const handleClickOpen = () => setIsDialogOpen(true)
+  const handleClose = () => setIsDialogOpen(false)
+
+  return (
+    <>
+      <IconWrapper onClick={() => handleClickOpen(true)} isButton>
+        <lord-icon
+          src='https://cdn.lordicon.com/bbnkwdur.json'
+          trigger='loop'
+          colors='primary:#121331,secondary:#00A572'
+          stroke='26'
+          scale='60'
+        />
+        <div className='icon-label'>{t('NoTorrentsAdded')}</div>
+      </IconWrapper>
+
+      {isDialogOpen && <AddDialog handleClose={handleClose} />}
+    </>
+  )
+}

web/src/components/TorrentList/NoServerConnection.jsx

@@ -0,0 +1,20 @@
+import { useTranslation } from 'react-i18next'
+
+import IconWrapper from './style'
+
+export default function NoServerConnection() {
+  const { t } = useTranslation()
+
+  return (
+    <IconWrapper>
+      <lord-icon
+        src='https://cdn.lordicon.com/wrprwmwt.json'
+        trigger='loop'
+        colors='primary:#121331,secondary:#00A572'
+        stroke='26'
+        scale='60'
+      />
+      <div className='icon-label'>{t('Offline')}</div>
+    </IconWrapper>
+  )
+}

web/src/components/TorrentList/index.jsx

@@ -0,0 +1,30 @@
+import TorrentCard from 'components/TorrentCard'
+import CircularProgress from '@material-ui/core/CircularProgress'
+import { TorrentListWrapper, CenteredGrid } from 'components/App/style'
+
+import NoServerConnection from './NoServerConnection'
+import AddFirstTorrent from './AddFirstTorrent'
+
+export default function TorrentList({ isOffline, isLoading, torrents }) {
+  if (isLoading || isOffline || !torrents.length) {
+    return (
+      <CenteredGrid>
+        {isOffline ? (
+          <NoServerConnection />
+        ) : isLoading ? (
+          <CircularProgress />
+        ) : (
+          !torrents.length && <AddFirstTorrent />
+        )}
+      </CenteredGrid>
+    )
+  }
+
+  return (
+    <TorrentListWrapper>
+      {torrents.map(torrent => (
+        <TorrentCard key={torrent.hash} torrent={torrent} />
+      ))}
+    </TorrentListWrapper>
+  )
+}

web/src/components/TorrentList/style.js

@@ -0,0 +1,30 @@
+import styled, { css } from 'styled-components'
+
+export default styled.div`
+  ${({ isButton }) => css`
+    display: grid;
+    place-items: center;
+    padding: 20px 40px;
+    border-radius: 5px;
+
+    ${isButton &&
+    css`
+      background: #93d7b4;
+      transition: 0.2s;
+
+      cursor: pointer;
+      :hover {
+        background: #71cc9d;
+      }
+    `}
+
+    lord-icon {
+      width: 200px;
+      height: 200px;
+    }
+
+    .icon-label {
+      font-size: 20px;
+    }
+  `}
+`