background added

web/src/components/DialogTorrentDetailsContent/index.jsx

@@ -13,7 +13,9 @@ import { useUpdateCache, useCreateCacheMap, useGetSettings } from './customHooks
 import DialogHeader from './DialogHeader'
 import TorrentCache from './TorrentCache'
 import {
-  DetailedTorrentCacheViewWrapper,
+  DetailedViewWrapper,
+  DetailedViewWidgetSection,
+  DetailedViewCacheSection,
   DialogContentGrid,
   MainSection,
   MainSectionButtonGroup,
@@ -122,8 +124,8 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
             <CircularProgress />
           </div>
         ) : isDetailedCacheView ? (
-          <DetailedTorrentCacheViewWrapper>
-            <div>
+          <DetailedViewWrapper>
+            <DetailedViewWidgetSection>
               <SectionTitle mb={20}>Data</SectionTitle>
               <WidgetWrapper>
                 <DownlodSpeedWidget data={downloadSpeed} />
@@ -134,13 +136,13 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
                 <PiecesLengthWidget data={PiecesLength} />
                 <StatusWidget data={statString} />
               </WidgetWrapper>
-            </div>
+            </DetailedViewWidgetSection>
 
-            <div>
+            <DetailedViewCacheSection>
               <SectionTitle mb={20}>Cache</SectionTitle>
               <TorrentCache cache={cache} cacheMap={cacheMap} />
-            </div>
-          </DetailedTorrentCacheViewWrapper>
+            </DetailedViewCacheSection>
+          </DetailedViewWrapper>
         ) : (
           <DialogContentGrid>
             <MainSection>

web/src/components/DialogTorrentDetailsContent/style.js

@@ -90,12 +90,8 @@ export const SectionHeader = styled.div`
   margin-bottom: 20px;
 `
 
-export const DetailedTorrentCacheViewWrapper = styled.div`
+export const DetailedViewWrapper = styled.div`
   overflow: auto;
-  padding: 40px;
-  > :not(:last-child) {
-    padding-bottom: 50px;
-  }
 `
 
 export const WidgetWrapper = styled.div`
@@ -241,3 +237,13 @@ export const Table = styled.table`
     }
   }
 `
+
+export const DetailedViewWidgetSection = styled.section`
+  padding: 40px;
+  background: linear-gradient(145deg, #e4f6ed, #b5dec9);
+`
+
+export const DetailedViewCacheSection = styled.section`
+  padding: 40px;
+  box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
+`