divider added

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;
+`