diff --git a/web/src/components/DialogTorrentDetailsContent/index.jsx b/web/src/components/DialogTorrentDetailsContent/index.jsx
index b3b8a32..8537acc 100644
--- a/web/src/components/DialogTorrentDetailsContent/index.jsx
+++ b/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 }) {
) : isDetailedCacheView ? (
-
-
+
+
Data
@@ -134,13 +136,13 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
-
+
-
+
Cache
-
-
+
+
) : (
diff --git a/web/src/components/DialogTorrentDetailsContent/style.js b/web/src/components/DialogTorrentDetailsContent/style.js
index f83b93b..67a5591 100644
--- a/web/src/components/DialogTorrentDetailsContent/style.js
+++ b/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);
+`