added dark theme

2025-12-20 05:56:10 +05:00 · 2021-06-26 21:31:43 +03:00
parent d5458a112e
commit 72ff729ee8
24 changed files with 950 additions and 587 deletions
--- a/web/src/components/Add/AddDialog.jsx
+++ b/web/src/components/Add/AddDialog.jsx
@@ -12,8 +12,6 @@ import usePreviousState from 'utils/usePreviousState'
 import { useQuery } from 'react-query'
 import { getTorrents } from 'utils/Utils'
 import parseTorrent from 'parse-torrent'
-import { ThemeProvider } from '@material-ui/core/styles'
-import { lightTheme } from 'style/materialUISetup'

 import { checkImageURL, getMoviePosters, chechTorrentSource, parseTorrentTitle } from './helpers'
 import { ButtonWrapper, Content, Header } from './style'
@@ -221,71 +219,69 @@ export default function AddDialog({
  }

  return (
-    <ThemeProvider theme={lightTheme}>
-      <Dialog
-        open
-        onClose={handleClose}
-        aria-labelledby='form-dialog-title'
-        fullScreen={fullScreen}
-        fullWidth
-        maxWidth='md'
-      >
-        <Header>{t(isEditMode ? 'EditTorrent' : 'AddNewTorrent')}</Header>
+    <Dialog
+      open
+      onClose={handleClose}
+      aria-labelledby='form-dialog-title'
+      fullScreen={fullScreen}
+      fullWidth
+      maxWidth='md'
+    >
+      <Header>{t(isEditMode ? 'EditTorrent' : 'AddNewTorrent')}</Header>

-        <Content isEditMode={isEditMode}>
-          {!isEditMode && (
-            <LeftSideComponent
-              setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
-              setSelectedFile={setSelectedFile}
-              torrentSource={torrentSource}
-              setTorrentSource={setTorrentSource}
-              selectedFile={selectedFile}
-            />
-          )}
-
-          <RightSideComponent
-            originalTorrentTitle={originalTorrentTitle}
-            setTitle={setTitle}
-            setPosterUrl={setPosterUrl}
-            setIsPosterUrlCorrect={setIsPosterUrlCorrect}
+      <Content isEditMode={isEditMode}>
+        {!isEditMode && (
+          <LeftSideComponent
            setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
-            setPosterList={setPosterList}
-            isTorrentSourceCorrect={isTorrentSourceCorrect}
-            isHashAlreadyExists={isHashAlreadyExists}
-            title={title}
-            parsedTitle={parsedTitle}
-            posterUrl={posterUrl}
-            isPosterUrlCorrect={isPosterUrlCorrect}
-            posterList={posterList}
-            currentLang={currentLang}
-            posterSearchLanguage={posterSearchLanguage}
-            setPosterSearchLanguage={setPosterSearchLanguage}
-            posterSearch={posterSearch}
-            removePoster={removePoster}
-            updateTitleFromSource={updateTitleFromSource}
+            setSelectedFile={setSelectedFile}
            torrentSource={torrentSource}
-            isCustomTitleEnabled={isCustomTitleEnabled}
-            setIsCustomTitleEnabled={setIsCustomTitleEnabled}
-            isEditMode={isEditMode}
+            setTorrentSource={setTorrentSource}
+            selectedFile={selectedFile}
          />
-        </Content>
+        )}

-        <ButtonWrapper>
-          <Button onClick={handleClose} color='primary' variant='outlined'>
-            {t('Cancel')}
-          </Button>
+        <RightSideComponent
+          originalTorrentTitle={originalTorrentTitle}
+          setTitle={setTitle}
+          setPosterUrl={setPosterUrl}
+          setIsPosterUrlCorrect={setIsPosterUrlCorrect}
+          setIsUserInteractedWithPoster={setIsUserInteractedWithPoster}
+          setPosterList={setPosterList}
+          isTorrentSourceCorrect={isTorrentSourceCorrect}
+          isHashAlreadyExists={isHashAlreadyExists}
+          title={title}
+          parsedTitle={parsedTitle}
+          posterUrl={posterUrl}
+          isPosterUrlCorrect={isPosterUrlCorrect}
+          posterList={posterList}
+          currentLang={currentLang}
+          posterSearchLanguage={posterSearchLanguage}
+          setPosterSearchLanguage={setPosterSearchLanguage}
+          posterSearch={posterSearch}
+          removePoster={removePoster}
+          updateTitleFromSource={updateTitleFromSource}
+          torrentSource={torrentSource}
+          isCustomTitleEnabled={isCustomTitleEnabled}
+          setIsCustomTitleEnabled={setIsCustomTitleEnabled}
+          isEditMode={isEditMode}
+        />
+      </Content>

-          <Button
-            variant='contained'
-            style={{ minWidth: '110px' }}
-            disabled={!torrentSource || (isHashAlreadyExists && !isEditMode) || !isTorrentSourceCorrect}
-            onClick={handleSave}
-            color='primary'
-          >
-            {isSaving ? <CircularProgress style={{ color: 'white' }} size={20} /> : t(isEditMode ? 'Save' : 'Add')}
-          </Button>
-        </ButtonWrapper>
-      </Dialog>
-    </ThemeProvider>
+      <ButtonWrapper>
+        <Button onClick={handleClose} color='primary' variant='outlined'>
+          {t('Cancel')}
+        </Button>
+
+        <Button
+          variant='contained'
+          style={{ minWidth: '110px' }}
+          disabled={!torrentSource || (isHashAlreadyExists && !isEditMode) || !isTorrentSourceCorrect}
+          onClick={handleSave}
+          color='primary'
+        >
+          {isSaving ? <CircularProgress style={{ color: 'white' }} size={20} /> : t(isEditMode ? 'Save' : 'Add')}
+        </Button>
+      </ButtonWrapper>
+    </Dialog>
  )
 }
--- a/web/src/components/Add/RightSideComponent.jsx
+++ b/web/src/components/Add/RightSideComponent.jsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { NoImageIcon } from 'icons'
-import { IconButton, InputAdornment, TextField } from '@material-ui/core'
+import { IconButton, InputAdornment, TextField, useTheme } from '@material-ui/core'
 import { CheckBox as CheckBoxIcon } from '@material-ui/icons'

 import {
@@ -41,6 +41,7 @@ export default function RightSideComponent({
  isEditMode,
 }) {
  const { t } = useTranslation()
+  const primary = useTheme().palette.primary.main

  const handleTitleChange = ({ target: { value } }) => setTitle(value)
  const handlePosterUrlChange = ({ target: { value } }) => {
@@ -91,7 +92,7 @@ export default function RightSideComponent({
                        setIsUserInteractedWithPoster(false)
                      }}
                    >
-                      <CheckBoxIcon style={{ color: isCustomTitleEnabled ? 'green' : 'gray' }} />
+                      <CheckBoxIcon style={{ color: isCustomTitleEnabled ? primary : 'gray' }} />
                    </IconButton>
                  </InputAdornment>
                ),
--- a/web/src/components/Add/style.js
+++ b/web/src/components/Add/style.js
@@ -15,14 +15,20 @@ export const Header = styled.div`
 `

 export const Content = styled.div`
-  ${({ isEditMode }) => css`
+  ${({
+    isEditMode,
+    theme: {
+      addDialog: { gradientStartColor, gradientEndColor, fontColor },
+    },
+  }) => css`
    height: 550px;
-    background: linear-gradient(145deg, #e4f6ed, #b5dec9);
+    background: linear-gradient(145deg, ${gradientStartColor}, ${gradientEndColor});
    flex: 1;
    display: grid;
    grid-template-columns: repeat(${isEditMode ? '1' : '2'}, 1fr);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    overflow: auto;
+    color: ${fontColor};

    @media (max-width: 540px) {
      ${'' /* Just for bug fixing on small screens */}
@@ -44,7 +50,14 @@ export const RightSide = styled.div`
 `

 export const RightSideContainer = styled.div`
-  ${({ isHidden, notificationMessage, isError }) => css`
+  ${({
+    isHidden,
+    notificationMessage,
+    isError,
+    theme: {
+      addDialog: { notificationErrorBGColor, notificationSuccessBGColor },
+    },
+  }) => css`
    height: 530px;

    ${notificationMessage &&
@@ -58,7 +71,7 @@ export const RightSideContainer = styled.div`
        content: '${notificationMessage}';
        display: grid;
        place-items: center;
-        background: ${isError ? '#cda184' : '#88cdaa'};
+        background: ${isError ? notificationErrorBGColor : notificationSuccessBGColor};
        padding: 10px 15px;
        position: absolute;
        top: 52%;
@@ -172,11 +185,18 @@ export const IconWrapper = styled.div`
 `

 export const LeftSideTopSection = styled.div`
-  background: #e4f6ed;
-  padding: 0 20px 20px 20px;
-  transition: all 0.3s;
+  ${({
+    active,
+    theme: {
+      addDialog: { gradientStartColor },
+    },
+  }) => css`
+    background: ${gradientStartColor};
+    padding: 0 20px 20px 20px;
+    transition: all 0.3s;

-  ${({ active }) => active && 'box-shadow: 0 8px 10px -9px rgba(0, 0, 0, 0.5)'};
+    ${active && 'box-shadow: 0 8px 10px -9px rgba(0, 0, 0, 0.5)'};
+  `}
 `

 export const PosterWrapper = styled.div`
@@ -254,7 +274,12 @@ export const PosterSuggestionsItem = styled.div`
 `

 export const Poster = styled.div`
-  ${({ poster }) => css`
+  ${({
+    poster,
+    theme: {
+      addDialog: { posterBGColor },
+    },
+  }) => css`
    border-radius: 5px;
    overflow: hidden;
    width: 200px;
@@ -272,7 +297,7 @@ export const Poster = styled.div`
      : css`
          display: grid;
          place-items: center;
-          background: #74c39c;
+          background: ${posterBGColor};

          svg {
            transform: scale(1.5) translateY(-3px);
@@ -294,28 +319,35 @@ export const ClearPosterButton = styled(Button)`
 `

 export const PosterLanguageSwitch = styled.div`
-  grid-area: poster;
-  z-index: 5;
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 30px;
-  height: 30px;
-  background: #74c39c;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  color: #e4f6ed;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s;
+  ${({
+    showbutton,
+    theme: {
+      addDialog: { languageSwitchBGColor, languageSwitchFontColor },
+    },
+  }) => css`
+    grid-area: poster;
+    z-index: 5;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 30px;
+    height: 30px;
+    background: ${languageSwitchBGColor};
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    color: ${languageSwitchFontColor};
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;

-  ${({ showbutton }) => !showbutton && 'display: none'};
+    ${!showbutton && 'display: none'};

-  :hover {
-    filter: brightness(1.1);
-  }
+    :hover {
+      filter: brightness(1.1);
+    }
+  `}
 `

 export const ButtonWrapper = styled.div`