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