divider added

web/src/components/DialogTorrentDetailsContent/index.jsx

@@ -20,7 +20,8 @@ import TorrentCache from './TorrentCache'
 import {
   DetailedTorrentCacheViewWrapper,
   DialogContentGrid,
-  TorrentMainSection,
+  MainSection,
+  MainSectionButtonGroup,
   Poster,
   SectionTitle,
   SectionSubName,
@@ -31,6 +32,8 @@ import {
   CacheSection,
   ButtonSectionButton,
   TorrentFilesSection,
+  Divider,
+  SmallLabel,
 } from './style'
 import StatisticsField from './StatisticsField'
 
@@ -112,7 +115,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
         </DetailedTorrentCacheViewWrapper>
       ) : (
         <DialogContentGrid>
-          <TorrentMainSection>
+          <MainSection>
             <Poster poster={poster}>{poster ? <img alt='poster' src={poster} /> : <NoImageIcon />}</Poster>
 
             <div>
@@ -158,8 +161,51 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
                   icon={ViewAgendaIcon}
                 />
               </StatisticsWrapper>
+
+              <Divider />
+
+              <SmallLabel>Download Playlist</SmallLabel>
+              <MainSectionButtonGroup>
+                <Button variant='contained' color='primary' size='large'>
+                  full
+                </Button>
+                <Button variant='contained' color='primary' size='large'>
+                  latest
+                </Button>
+              </MainSectionButtonGroup>
+
+              <SmallLabel>More</SmallLabel>
+              <MainSectionButtonGroup>
+                <Button variant='contained' color='primary' size='large'>
+                  copy hash
+                </Button>
+                <Button variant='contained' color='primary' size='large'>
+                  remove views
+                </Button>
+                <Button variant='contained' color='primary' size='large'>
+                  drop torrent
+                </Button>
+              </MainSectionButtonGroup>
+
+              {/* <MainSectionButtonGroup>
+                <Button variant='contained' color='primary' size='large'>
+                  copy hash
+                </Button>
+                <Button variant='contained' color='primary' size='large'>
+                  remove views
+                </Button>
+                <Button variant='contained' color='primary' size='large'>
+                  drop torrent
+                </Button>
+                <Button variant='contained' color='primary' size='large'>
+                  download full playlist
+                </Button>
+                <Button variant='contained' color='primary' size='large'>
+                  download playlist after last view
+                </Button>
+              </MainSectionButtonGroup> */}
             </div>
-          </TorrentMainSection>
+          </MainSection>
 
           <CacheSection>
             <SectionHeader>
@@ -200,7 +246,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
 
             <ButtonSectionButton onClick={() => dropTorrent()}>drop torrent</ButtonSectionButton>
 
-            <ButtonSectionButton>download playlist</ButtonSectionButton>
+            <ButtonSectionButton>download full playlist</ButtonSectionButton>
 
             <ButtonSectionButton>download playlist after last view</ButtonSectionButton>
           </ButtonSection>

web/src/components/DialogTorrentDetailsContent/style.js

@@ -14,6 +14,7 @@ export const Poster = styled.div`
     height: 400px;
     border-radius: 5px;
     overflow: hidden;
+    align-self: center;
 
     ${poster
       ? css`
@@ -34,7 +35,7 @@ export const Poster = styled.div`
         `}
   `}
 `
-export const TorrentMainSection = styled.section`
+export const MainSection = styled.section`
   grid-area: main;
   padding: 40px;
   display: grid;
@@ -43,6 +44,16 @@ export const TorrentMainSection = styled.section`
   background: linear-gradient(145deg, #e4f6ed, #b5dec9);
 `
 
+export const MainSectionButtonGroup = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+
+  :not(:last-child) {
+    margin-bottom: 30px;
+  }
+`
+
 export const CacheSection = styled.section`
   grid-area: cache;
   padding: 40px;
@@ -120,7 +131,7 @@ export const DetailedTorrentCacheViewWrapper = styled.div`
 
 export const StatisticsWrapper = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(190px, min-content));
+  grid-template-columns: repeat(auto-fit, minmax(210px, min-content));
   gap: 20px;
 `
 
@@ -157,7 +168,7 @@ export const StatisticsFieldIcon = styled.div`
 export const StatisticsFieldValue = styled.div`
   ${({ bgColor }) => css`
     grid-area: value;
-    min-width: 150px;
+    min-width: 170px;
     padding: 0 20px;
     color: #fff;
     font-size: 25px;
@@ -189,3 +200,16 @@ export const LoadingProgress = styled.div.attrs(({ value, fullAmount }) => {
     }
   `}
 `
+
+export const Divider = styled.div`
+  height: 1px;
+  background-color: rgba(0, 0, 0, 0.12);
+  margin: 30px 0;
+`
+
+export const SmallLabel = styled.div`
+  font-size: 20px;
+  margin-bottom: 10px;
+  font-weight: 300;
+  line-height: 1;
+`