unify snake across themes and close button

web/src/components/DialogTorrentDetailsContent/DialogHeader.jsx

@@ -1,34 +1,31 @@
-import Button from '@material-ui/core/Button'
 import { AppBar, IconButton, makeStyles, Toolbar, Typography } from '@material-ui/core'
 import CloseIcon from '@material-ui/icons/Close'
 import { ArrowBack } from '@material-ui/icons'
-import { useTranslation } from 'react-i18next'
 
 const useStyles = makeStyles({
   appBar: { position: 'relative' },
-  title: { marginLeft: '6px', flex: 1 },
+  title: { marginLeft: '5px', flex: 1 },
 })
 
 export default function DialogHeader({ title, onClose, onBack }) {
-  const { t } = useTranslation()
   const classes = useStyles()
 
   return (
     <AppBar className={classes.appBar}>
       <Toolbar>
-        <IconButton edge='start' color='inherit' onClick={onBack || onClose} aria-label='close'>
-          {onBack ? <ArrowBack /> : <CloseIcon />}
+        {onBack && (
+          <IconButton edge='start' color='inherit' onClick={onBack} aria-label='back'>
+            <ArrowBack />
           </IconButton>
+        )}
 
         <Typography variant='h6' className={classes.title}>
           {title}
         </Typography>
 
-        {onBack && (
-          <Button autoFocus color='inherit' onClick={onClose}>
-            {t('Close')}
-          </Button>
-        )}
+        <IconButton autoFocus color='inherit' onClick={onClose} aria-label='close' style={{ marginRight: '-10px' }}>
+          <CloseIcon />
+        </IconButton>
       </Toolbar>
     </AppBar>
   )

web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js

@@ -4,14 +4,14 @@ import { mainColors } from 'style/colors'
 export const snakeSettings = {
   dark: {
     default: {
-      borderWidth: 2,
+      borderWidth: 1,
       pieceSize: 14,
       gapBetweenPieces: 3,
-      borderColor: mainColors.dark.secondary,
-      completeColor: rgba(mainColors.dark.primary, 0.65),
+      borderColor: rgba('#949ca0', 0.25),
+      completeColor: rgba(mainColors.dark.primary, 0.5),
       backgroundColor: '#f1eff3',
       progressColor: mainColors.dark.secondary,
-      readerColor: '#000',
+      readerColor: '#8f0405',
       rangeColor: '#cda184',
     },
     mini: {
@@ -19,11 +19,11 @@ export const snakeSettings = {
       borderWidth: 2,
       pieceSize: 23,
       gapBetweenPieces: 6,
-      borderColor: '#545a5e',
-      completeColor: '#545a5e',
-      backgroundColor: '#dee3e5',
-      progressColor: '#dee3e5',
-      readerColor: '#000',
+      borderColor: '#5c6469',
+      completeColor: '#5c6469',
+      backgroundColor: '#949ca0',
+      progressColor: '#949ca0',
+      readerColor: '#00a572',
       rangeColor: '#cda184',
     },
   },
@@ -48,7 +48,7 @@ export const snakeSettings = {
       completeColor: '#4db380',
       backgroundColor: '#dbf2e8',
       progressColor: '#dbf2e8',
-      readerColor: '#2d714f',
+      readerColor: '#303030',
       rangeColor: '#afa6e3',
     },
   },

web/src/components/DialogTorrentDetailsContent/index.jsx

@@ -204,6 +204,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
                 {bufferSize <= 33554432 && <SectionSubName>{t('BufferNote')}</SectionSubName>}
                 <LoadingProgress
                   value={Filled}
+                  style={{ marginTop: '5px' }}
                   fullAmount={bufferSize}
                   label={`${humanizeSize(bufferSize)} / ${humanizeSize(Filled) || `0 ${t('B')}`}`}
                 />

web/src/components/DialogTorrentDetailsContent/style.js

@@ -281,7 +281,7 @@ export const LoadingProgress = styled.div.attrs(
     value,
     fullAmount,
     theme: {
-      dialogTorrentDetailsContent: { gradientEndColor },
+      dialogTorrentDetailsContent: { gradientStartColor, gradientEndColor },
     },
   }) => {
     const percentage = Math.min(100, (value * 100) / fullAmount)
@@ -289,7 +289,7 @@ export const LoadingProgress = styled.div.attrs(
     return {
       // this block is here according to styled-components recomendation about fast changable components
       style: {
-        background: `linear-gradient(to right, ${gradientEndColor} 0%, ${gradientEndColor} ${percentage}%, #fff ${percentage}%, #fff 100%)`,
+        background: `linear-gradient(to right, ${gradientStartColor} 0%, ${gradientEndColor} ${percentage}%, #fff ${percentage}%, #fff 100%)`,
       },
     }
   },