created object for separate snake settings

web/src/components/DialogTorrentDetailsContent/TorrentCache/index.jsx

@@ -6,22 +6,7 @@ import isEqual from 'lodash/isEqual'
 import { useCreateCacheMap } from '../customHooks'
 import getShortCacheMap from './getShortCacheMap'
 import { SnakeWrapper, ScrollNotification } from './style'
-import {
-  defaultBorderWidth,
-  miniCacheMaxHeight,
-  pieceSizeForMiniMap,
-  defaultPieceSize,
-  defaultBackgroundColor,
-  defaultBorderColor,
-  completeColor,
-  activeColor,
-  rangeColor,
-  defaultGapBetweenPieces,
-  miniBackgroundColor,
-  miniBorderWidth,
-  miniGapBetweenPieces,
-  createGradient,
-} from './snakeSettings'
+import { readerColor, rangeColor, createGradient, snakeSettings } from './snakeSettings'
 
 const TorrentCache = ({ cache, isMini }) => {
   const { t } = useTranslation()
@@ -30,10 +15,11 @@ const TorrentCache = ({ cache, isMini }) => {
   const canvasRef = useRef(null)
   const ctxRef = useRef(null)
   const cacheMap = useCreateCacheMap(cache)
+  const settingsTarget = isMini ? 'mini' : 'default'
+  const { borderWidth, pieceSize, gapBetweenPieces, backgroundColor, borderColor, cacheMaxHeight, completeColor } =
+    snakeSettings[settingsTarget]
 
   const canvasWidth = isMini ? width * 0.93 : width
-  const pieceSize = isMini ? pieceSizeForMiniMap : defaultPieceSize
-  const gapBetweenPieces = isMini ? miniGapBetweenPieces : defaultGapBetweenPieces
 
   const pieceSizeWithGap = pieceSize + gapBetweenPieces
   const piecesInOneRow = Math.floor(canvasWidth / pieceSizeWithGap)
@@ -67,7 +53,6 @@ const TorrentCache = ({ cache, isMini }) => {
       const isCompleted = percentage === 100
       const currentRow = i % piecesInOneRow
       const currentColumn = Math.floor(i / piecesInOneRow)
-      const borderWidth = isMini ? miniBorderWidth : defaultBorderWidth
       const fixBlurStroke = borderWidth % 2 === 0 ? 0 : 0.5
       const requiredFix = Math.ceil(borderWidth / 2) + 1 + fixBlurStroke
       const x = currentRow * pieceSize + currentRow * gapBetweenPieces + startingXPoint + requiredFix
@@ -75,26 +60,38 @@ const TorrentCache = ({ cache, isMini }) => {
 
       ctx.lineWidth = borderWidth
       ctx.fillStyle = inProgress
-        ? createGradient(ctx, percentage, pieceSize)
+        ? createGradient(ctx, percentage, settingsTarget)
         : isCompleted
         ? completeColor
-        : isMini
-        ? miniBackgroundColor
-        : defaultBackgroundColor
+        : backgroundColor
       ctx.strokeStyle = isReader
-        ? activeColor
+        ? readerColor
         : inProgress || isCompleted
         ? completeColor
         : isReaderRange
         ? rangeColor
-        : defaultBorderColor
+        : borderColor
 
       ctx.translate(x, y)
       ctx.fillRect(0, 0, pieceSize, pieceSize)
       ctx.strokeRect(0, 0, pieceSize, pieceSize)
       ctx.setTransform(1, 0, 0, 1, 0, 0)
     })
-  }, [cacheMap, height, canvasWidth, piecesInOneRow, isMini, startingXPoint, pieceSize, gapBetweenPieces, source])
+  }, [
+    cacheMap,
+    height,
+    canvasWidth,
+    piecesInOneRow,
+    startingXPoint,
+    pieceSize,
+    gapBetweenPieces,
+    source,
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    settingsTarget,
+    completeColor,
+  ])
 
   return (
     <Measure bounds onResize={({ bounds }) => setDimensions(bounds)}>
@@ -104,7 +101,7 @@ const TorrentCache = ({ cache, isMini }) => {
             <canvas ref={canvasRef} />
           </SnakeWrapper>
 
-          {isMini && height >= miniCacheMaxHeight && <ScrollNotification>{t('ScrollDown')}</ScrollNotification>}
+          {isMini && height >= cacheMaxHeight && <ScrollNotification>{t('ScrollDown')}</ScrollNotification>}
         </div>
       )}
     </Measure>

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

@@ -1,22 +1,30 @@
-import { cacheBackground } from '../style'
-
-export const defaultBorderWidth = 1
-export const miniBorderWidth = 2
-export const defaultPieceSize = 14
-export const pieceSizeForMiniMap = 23
-export const defaultGapBetweenPieces = 3
-export const miniGapBetweenPieces = 6
-export const miniCacheMaxHeight = 340
-
-export const defaultBorderColor = '#dbf2e8'
-export const defaultBackgroundColor = '#fff'
-export const miniBackgroundColor = cacheBackground
-export const completeColor = '#00a572'
-export const progressColor = '#86beee'
-export const activeColor = '#000'
+export const readerColor = '#000'
 export const rangeColor = '#afa6e3'
 
-export const createGradient = (ctx, percentage, pieceSize) => {
+export const snakeSettings = {
+  default: {
+    borderWidth: 1,
+    pieceSize: 14,
+    gapBetweenPieces: 3,
+    backgroundColor: '#fff',
+    borderColor: '#dbf2e8',
+    completeColor: '#00a572',
+    progressColor: '#b3dfc9',
+  },
+  mini: {
+    cacheMaxHeight: 340,
+    borderWidth: 2,
+    pieceSize: 23,
+    gapBetweenPieces: 6,
+    backgroundColor: '#dbf2e8',
+    borderColor: '#6cc196',
+    completeColor: '#4db380',
+    progressColor: '#b3dfc9',
+  },
+}
+
+export const createGradient = (ctx, percentage, snakeType) => {
+  const { pieceSize, completeColor, progressColor } = snakeSettings[snakeType]
   const gradient = ctx.createLinearGradient(0, pieceSize, 0, 0)
   gradient.addColorStop(0, completeColor)
   gradient.addColorStop(percentage / 100, completeColor)

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

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components'
 
-import { miniCacheMaxHeight } from './snakeSettings'
+import { snakeSettings } from './snakeSettings'
 
 export const ScrollNotification = styled.div`
   margin-top: 10px;
@@ -15,7 +15,7 @@ export const SnakeWrapper = styled.div`
     css`
       display: grid;
       justify-content: center;
-      max-height: ${miniCacheMaxHeight}px;
+      max-height: ${snakeSettings.mini.cacheMaxHeight}px;
       overflow: auto;
     `}
 

web/src/components/DialogTorrentDetailsContent/style.js

@@ -74,14 +74,13 @@ export const MainSection = styled.section`
   }
 `
 
-export const cacheBackground = '#88cdaa'
 export const CacheSection = styled.section`
   grid-area: cache;
   padding: 40px;
   display: grid;
   align-content: start;
   grid-template-rows: min-content 1fr min-content;
-  background: ${cacheBackground};
+  background: #88cdaa;
 
   @media (max-width: 800px) {
     padding: 20px;