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,
+      borderColor: mainColors.dark.secondary,
-      completeColor: mainColors.dark.primary,
+      completeColor: rgba(mainColors.dark.primary, 0.65),
-      backgroundColor: '#fff',
+      backgroundColor: '#f1eff3',
-      progressColor: '#545a5e',
+      progressColor: mainColors.dark.secondary,
-      readerColor: '#fff',
+      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 />
         )}

web/src/style/colors.js

@@ -72,7 +72,7 @@ export const themeColors = {
     detailedView: {
       gradientStartColor: '#656f76',
       gradientEndColor: '#545a5e',
-      cacheSectionBGColor: rgba('#545a5e', 0.7),
+      cacheSectionBGColor: '#dee3e5',
     },
     addDialog: {
       gradientStartColor: '#656f76',
@@ -98,8 +98,10 @@ export const themeColors = {
 export const mainColors = {
   light: {
     primary: '#00a572',
+    secondary: '#00a572',
   },
   dark: {
     primary: '#323637',
+    secondary: '#dee3e5',
   },
 }

web/src/style/materialUISetup.js

@@ -12,6 +12,7 @@ export const darkTheme = createMuiTheme({
   palette: {
     type: THEME_MODES.DARK,
     primary: { main: mainColors.dark.primary },
+    secondary: { main: mainColors.dark.secondary },
   },
 })
 export const lightTheme = createMuiTheme({
@@ -19,6 +20,7 @@ export const lightTheme = createMuiTheme({
   palette: {
     type: THEME_MODES.LIGHT,
     primary: { main: mainColors.light.primary },
+    secondary: { main: mainColors.light.secondary },
   },
 })
 
@@ -48,6 +50,7 @@ export const useMaterialUITheme = () => {
         palette: {
           type: theme,
           primary: { main: mainColors[theme].primary },
+          secondary: { main: mainColors[theme].secondary },
         },
       }),
     [theme],