refactor

web/src/components/DialogTorrentDetailsContent/index.jsx

@@ -22,7 +22,6 @@ import {
   DialogContentGrid,
   TorrentMainSection,
   Poster,
-  TorrentData,
   SectionTitle,
   SectionSubName,
   StatisticsWrapper,
@@ -116,17 +115,15 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
           <TorrentMainSection>
             <Poster poster={poster}>{poster ? <img alt='poster' src={poster} /> : <NoImageIcon />}</Poster>
 
-            <TorrentData>
             <div>
               {name && name !== title ? (
                 <>
                   <SectionTitle>{shortenText(name, 50)}</SectionTitle>
-                    <SectionSubName>{shortenText(title, 160)}</SectionSubName>
+                  <SectionSubName mb={20}>{shortenText(title, 160)}</SectionSubName>
                 </>
               ) : (
-                  <SectionTitle>{shortenText(title, 50)}</SectionTitle>
+                <SectionTitle mb={20}>{shortenText(title, 50)}</SectionTitle>
               )}
-              </div>
 
               <StatisticsWrapper>
                 <StatisticsField
@@ -161,12 +158,12 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
                   icon={ViewAgendaIcon}
                 />
               </StatisticsWrapper>
-            </TorrentData>
+            </div>
           </TorrentMainSection>
 
           <CacheSection>
             <SectionHeader>
-              <SectionTitle>Buffer</SectionTitle>
+              <SectionTitle mb={20}>Buffer</SectionTitle>
               {!settings?.PreloadBuffer && (
                 <SectionSubName>Enable &quot;Preload Buffer&quot; in settings to change buffer size</SectionSubName>
               )}
@@ -209,7 +206,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
           </ButtonSection>
 
           <TorrentFilesSection>
-            <SectionTitle>Torrent Content</SectionTitle>
+            <SectionTitle mb={20}>Torrent Content</SectionTitle>
 
             {!playableFileList?.length
               ? 'No playable files in this torrent'

web/src/components/DialogTorrentDetailsContent/style.js

@@ -43,12 +43,6 @@ export const TorrentMainSection = styled.section`
   background: linear-gradient(145deg, #e4f6ed, #b5dec9);
 `
 
-export const TorrentData = styled.div`
-  > :not(:last-child) {
-    margin-bottom: 20px;
-  }
-`
-
 export const CacheSection = styled.section`
   grid-area: cache;
   padding: 40px;
@@ -100,14 +94,20 @@ export const TorrentFilesSection = styled.div`
 `
 
 export const SectionSubName = styled.div`
+  ${({ mb }) => css`
+    ${mb && `margin-bottom: ${mb}px`};
     color: #7c7b7c;
+  `}
 `
 
 export const SectionTitle = styled.div`
+  ${({ mb }) => css`
+    ${mb && `margin-bottom: ${mb}px`};
     font-size: 35px;
     font-weight: 200;
     line-height: 1;
     word-break: break-word;
+  `}
 `
 
 export const SectionHeader = styled.div`