refactor

web/src/components/Add/AddDialog.jsx

@@ -268,7 +268,7 @@ export default function AddDialog({
       </Content>
 
       <ButtonWrapper>
-        <Button onClick={handleClose} color='primary' variant='outlined'>
+        <Button onClick={handleClose} color='secondary' variant='outlined'>
           {t('Cancel')}
         </Button>
 

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

@@ -42,7 +42,9 @@ export default function DetailedView({
       </DetailedViewWidgetSection>
 
       <DetailedViewCacheSection>
-        <SectionTitle mb={20}>{t('Cache')}</SectionTitle>
+        <SectionTitle color='#000' mb={20}>
+          {t('Cache')}
+        </SectionTitle>
         <TorrentCache cache={cache} />
       </DetailedViewCacheSection>
     </>

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

@@ -1,16 +1,17 @@
+import { rgba } from 'polished'
 import { mainColors } from 'style/colors'
 
 export const snakeSettings = {
   dark: {
     default: {
-      borderWidth: 1,
+      borderWidth: 2,
       pieceSize: 14,
       gapBetweenPieces: 3,
-      borderColor: mainColors.dark.primary,
-      completeColor: mainColors.dark.primary,
-      backgroundColor: '#fff',
-      progressColor: '#545a5e',
-      readerColor: '#fff',
+      borderColor: mainColors.dark.secondary,
+      completeColor: rgba(mainColors.dark.primary, 0.65),
+      backgroundColor: '#f1eff3',
+      progressColor: mainColors.dark.secondary,
+      readerColor: '#000',
       rangeColor: '#cda184',
     },
     mini: {

web/src/components/DialogTorrentDetailsContent/index.jsx

@@ -33,7 +33,7 @@ import { isFilePlayable } from './helpers'
 
 const Loader = () => (
   <div style={{ minHeight: '80vh', display: 'grid', placeItems: 'center' }}>
-    <CircularProgress />
+    <CircularProgress color='secondary' />
   </div>
 )
 
@@ -225,7 +225,7 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
               {seasonAmount?.length > 1 && (
                 <>
                   <SectionSubName mb={7}>{t('SelectSeason')}</SectionSubName>
-                  <ButtonGroup style={{ marginBottom: '30px' }} color='primary'>
+                  <ButtonGroup style={{ marginBottom: '30px' }} color='secondary'>
                     {seasonAmount.map(season => (
                       <Button
                         key={season}

web/src/components/DialogTorrentDetailsContent/style.js

@@ -142,6 +142,7 @@ export const SectionSubName = styled.div`
 
 export const SectionTitle = styled.div`
   ${({
+    color,
     theme: {
       dialogTorrentDetailsContent: { fontColor },
     },
@@ -152,7 +153,7 @@ export const SectionTitle = styled.div`
       font-weight: 300;
       line-height: 1;
       word-break: break-word;
-      color: ${fontColor};
+      color: ${color || fontColor};
 
       @media (max-width: 800px) {
         font-size: 25px;

web/src/components/TorrentList/index.jsx

@@ -12,7 +12,7 @@ export default function TorrentList({ isOffline, isLoading, torrents }) {
         {isOffline ? (
           <NoServerConnection />
         ) : isLoading ? (
-          <CircularProgress />
+          <CircularProgress color='secondary' />
         ) : (
           !torrents.length && <AddFirstTorrent />
         )}