background added

This commit is contained in:
Daniel Shleifman
2021-05-31 18:14:45 +03:00
parent fcd2e9b74e
commit 6f728d2fee
2 changed files with 20 additions and 12 deletions

View File

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

View File

@@ -90,12 +90,8 @@ export const SectionHeader = styled.div`
margin-bottom: 20px; margin-bottom: 20px;
` `
export const DetailedTorrentCacheViewWrapper = styled.div` export const DetailedViewWrapper = styled.div`
overflow: auto; overflow: auto;
padding: 40px;
> :not(:last-child) {
padding-bottom: 50px;
}
` `
export const WidgetWrapper = styled.div` 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);
`