refactor

web/src/components/DialogTorrentDetailsContent/style.js

@@ -70,23 +70,9 @@ export const MainSection = styled.section`
   @media (max-width: 840px) {
     grid-template-columns: 1fr;
   }
-`
 
-export const MainSectionButtonGroup = styled.div`
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 20px;
-
-  :not(:last-child) {
-    margin-bottom: 30px;
-  }
-
-  @media (max-width: 1045px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @media (max-width: 880px) {
-    grid-template-columns: 1fr;
+  @media (max-width: 800px) {
+    padding: 20px;
   }
 `
 
@@ -97,12 +83,20 @@ export const CacheSection = styled.section`
   align-content: start;
   grid-template-rows: min-content 1fr min-content;
   background: #88cdaa;
+
+  @media (max-width: 800px) {
+    padding: 20px;
+  }
 `
 
 export const TorrentFilesSection = styled.section`
   grid-area: file-list;
   padding: 40px;
   box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
+
+  @media (max-width: 800px) {
+    padding: 20px;
+  }
 `
 
 export const SectionSubName = styled.div`
@@ -159,7 +153,13 @@ export const WidgetWrapper = styled.div`
           }
         `
       : css`
-          @media (max-width: 840px) {
+          @media (max-width: 800px) {
+            grid-template-columns: repeat(auto-fit, minmax(max-content, 185px));
+          }
+          @media (max-width: 480px) {
+            grid-template-columns: 1fr 1fr;
+          }
+          @media (max-width: 390px) {
             grid-template-columns: 1fr;
           }
         `}
@@ -252,77 +252,6 @@ export const Divider = styled.div`
   margin: 30px 0;
 `
 
-export const SmallLabel = styled.div`
-  ${({ mb }) => css`
-    ${mb && `margin-bottom: ${mb}px`};
-    font-size: 20px;
-    font-weight: 300;
-    line-height: 1;
-
-    @media (max-width: 800px) {
-      font-size: 18px;
-      ${mb && `margin-bottom: ${mb / 1.5}px`};
-    }
-  `}
-`
-
-export const Table = styled.table`
-  border-collapse: collapse;
-  margin: 25px 0;
-  font-size: 0.9em;
-  width: 100%;
-  border-radius: 5px 5px 0 0;
-  overflow: hidden;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
-
-  thead tr {
-    background: #009879;
-    color: #fff;
-    text-align: left;
-    text-transform: uppercase;
-  }
-
-  th,
-  td {
-    padding: 12px 15px;
-  }
-
-  tbody tr {
-    border-bottom: 1px solid #ddd;
-
-    :last-of-type {
-      border-bottom: 2px solid #009879;
-    }
-
-    &.viewed-file-row {
-      background: #f3f3f3;
-    }
-  }
-
-  td {
-    &.viewed-file-indicator {
-      position: relative;
-      :before {
-        content: '';
-        width: 10px;
-        height: 10px;
-        background: #15d5af;
-        border-radius: 50%;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-    }
-
-    &.button-cell {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 10px;
-    }
-  }
-`
-
 export const DetailedViewWidgetSection = styled.section`
   padding: 40px;
   background: linear-gradient(145deg, #e4f6ed, #b5dec9);