From e2241cf7fd0b49ad41fc7ec0fb15c7237e82da48 Mon Sep 17 00:00:00 2001
From: Daniel Shleifman <dancheskus@gmail.com>
Date: Sat, 26 Jun 2021 22:28:50 +0300
Subject: [PATCH] refactor

---
 web/src/components/Add/AddDialog.jsx                |  2 +-
 .../DetailedView/index.jsx                          |  4 +++-
 .../TorrentCache/snakeSettings.js                   | 13 +++++++------
 .../DialogTorrentDetailsContent/index.jsx           |  4 ++--
 .../components/DialogTorrentDetailsContent/style.js |  3 ++-
 web/src/components/TorrentList/index.jsx            |  2 +-
 web/src/style/colors.js                             |  4 +++-
 web/src/style/materialUISetup.js                    |  3 +++
 8 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/web/src/components/Add/AddDialog.jsx b/web/src/components/Add/AddDialog.jsx
index 65262cf..69431d9 100644
--- a/web/src/components/Add/AddDialog.jsx
+++ b/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>
 
diff --git a/web/src/components/DialogTorrentDetailsContent/DetailedView/index.jsx b/web/src/components/DialogTorrentDetailsContent/DetailedView/index.jsx
index 926712e..4222d7d 100644
--- a/web/src/components/DialogTorrentDetailsContent/DetailedView/index.jsx
+++ b/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>
     </>
diff --git a/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js b/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js
index 4f79f27..b2fc35b 100644
--- a/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js
+++ b/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: {
diff --git a/web/src/components/DialogTorrentDetailsContent/index.jsx b/web/src/components/DialogTorrentDetailsContent/index.jsx
index 3df8f30..7db86dd 100644
--- a/web/src/components/DialogTorrentDetailsContent/index.jsx
+++ b/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}
diff --git a/web/src/components/DialogTorrentDetailsContent/style.js b/web/src/components/DialogTorrentDetailsContent/style.js
index 261c57e..d749567 100644
--- a/web/src/components/DialogTorrentDetailsContent/style.js
+++ b/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;
diff --git a/web/src/components/TorrentList/index.jsx b/web/src/components/TorrentList/index.jsx
index d7c7c2a..aae835c 100644
--- a/web/src/components/TorrentList/index.jsx
+++ b/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 />
         )}
diff --git a/web/src/style/colors.js b/web/src/style/colors.js
index afedb59..bb8f512 100644
--- a/web/src/style/colors.js
+++ b/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',
   },
 }
diff --git a/web/src/style/materialUISetup.js b/web/src/style/materialUISetup.js
index 705977f..550d96f 100644
--- a/web/src/style/materialUISetup.js
+++ b/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],