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/DialogTorrentDetailsContent/DetailedView/style.js
+++ b/web/src/components/DialogTorrentDetailsContent/DetailedView/style.js
@@ -1,19 +1,33 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'

 export const DetailedViewWidgetSection = styled.section`
-  padding: 40px;
-  background: linear-gradient(145deg, #e4f6ed, #b5dec9);
+  ${({
+    theme: {
+      detailedView: { gradientStartColor, gradientEndColor },
+    },
+  }) => css`
+    padding: 40px;
+    background: linear-gradient(145deg, ${gradientStartColor}, ${gradientEndColor});

-  @media (max-width: 800px) {
-    padding: 20px;
-  }
+    @media (max-width: 800px) {
+      padding: 20px;
+    }
+  `}
 `

 export const DetailedViewCacheSection = styled.section`
-  padding: 40px;
-  box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
+  ${({
+    theme: {
+      detailedView: { cacheSectionBGColor },
+    },
+  }) => css`
+    padding: 40px;
+    box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
+    background: ${cacheSectionBGColor};
+    flex: 1;

-  @media (max-width: 800px) {
-    padding: 20px;
-  }
+    @media (max-width: 800px) {
+      padding: 20px;
+    }
+  `}
 `
--- a/web/src/components/DialogTorrentDetailsContent/Table/style.js
+++ b/web/src/components/DialogTorrentDetailsContent/Table/style.js
@@ -1,77 +1,89 @@
 import styled, { css } from 'styled-components'

-const bigTableDividerColor = '#ddd'
-const bigTableViewedColor = '#f3f3f3'
-const defaultPrimaryColor = '#009879'
-const defaultSecondaryColor = '#00a383'
-const defaultTertiaryColor = '#03aa89'
 const viewedPrimaryColor = '#bdbdbd'
 const viewedSecondaryColor = '#c4c4c4'
 const viewedTertiaryColor = '#c9c9c9'
+const bigTableDividerColor = '#ddd'
+const bigTableDefaultRowColor = '#fff'
+const bigTableViewedRowColor = '#f3f3f3'

 const viewedIndicator = css`
-  :before {
-    content: '';
-    width: 10px;
-    height: 10px;
-    background: ${defaultPrimaryColor};
-    border-radius: 50%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
+  ${({
+    theme: {
+      table: { defaultPrimaryColor },
+    },
+  }) => css`
+    :before {
+      content: '';
+      width: 10px;
+      height: 10px;
+      background: ${defaultPrimaryColor};
+      border-radius: 50%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  `}
 `
 export const TableStyle = styled.table`
-  border-collapse: collapse;
-  margin: 25px 0;
-  font-size: 0.9em;
-  width: 100%;
-  border-radius: 5px 5px 0 0;
-  overflow: hidden;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+  ${({
+    theme: {
+      table: { defaultPrimaryColor },
+    },
+  }) => css`
+    border-collapse: collapse;
+    margin: 25px 0;
+    font-size: 0.9em;
+    width: 100%;
+    border-radius: 5px 5px 0 0;
+    overflow: hidden;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+    color: #000;

-  thead tr {
-    background: ${defaultPrimaryColor};
-    color: #fff;
-    text-align: left;
-    text-transform: uppercase;
-  }
-
-  th,
-  td {
-    padding: 12px 15px;
-  }
-
-  tbody tr {
-    border-bottom: 1px solid ${bigTableDividerColor};
-
-    :last-of-type {
-      border-bottom: 2px solid ${defaultPrimaryColor};
+    thead tr {
+      background: ${defaultPrimaryColor};
+      color: #fff;
+      text-align: left;
+      text-transform: uppercase;
    }

-    &.viewed-file-row {
-      background: ${bigTableViewedColor};
+    th,
+    td {
+      padding: 12px 15px;
    }
-  }

-  td {
-    &.viewed-file-indicator {
-      position: relative;
+    tbody tr {
+      border-bottom: 1px solid ${bigTableDividerColor};
+      background: ${bigTableDefaultRowColor};

-      ${viewedIndicator}
+      :last-of-type {
+        border-bottom: 2px solid ${defaultPrimaryColor};
+      }
+
+      &.viewed-file-row {
+        background: ${bigTableViewedRowColor};
+      }
    }
-  }

-  .button-cell {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 10px;
-  }
+    td {
+      &.viewed-file-indicator {
+        position: relative;

-  @media (max-width: 970px) {
-    display: none;
-  }
+        ${viewedIndicator}
+      }
+    }
+
+    .button-cell {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px;
+    }
+
+    @media (max-width: 970px) {
+      display: none;
+    }
+  `}
 `

 export const ShortTableWrapper = styled.div`
@@ -91,7 +103,12 @@ export const ShortTableWrapper = styled.div`
 `

 export const ShortTable = styled.div`
-  ${({ isViewed }) => css`
+  ${({
+    isViewed,
+    theme: {
+      table: { defaultPrimaryColor, defaultSecondaryColor, defaultTertiaryColor },
+    },
+  }) => css`
    width: 100%;
    grid-template-rows: repeat(3, max-content);
    border-radius: 5px;
@@ -170,6 +187,7 @@ export const ShortTable = styled.div`
        grid-template-columns: repeat(3, 1fr);
        align-items: center;
        gap: 20px;
+        background: #fff;

        @media (max-width: 410px) {
          gap: 10px;
--- a/web/src/components/DialogTorrentDetailsContent/TorrentCache/index.jsx
+++ b/web/src/components/DialogTorrentDetailsContent/TorrentCache/index.jsx
@@ -1,7 +1,8 @@
 import Measure from 'react-measure'
-import { useState, memo, useRef, useEffect } from 'react'
+import { useState, memo, useRef, useEffect, useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import isEqual from 'lodash/isEqual'
+import { DarkModeContext } from 'components/App'

 import { useCreateCacheMap } from '../customHooks'
 import getShortCacheMap from './getShortCacheMap'
@@ -16,6 +17,9 @@ const TorrentCache = ({ cache, isMini }) => {
  const ctxRef = useRef(null)
  const cacheMap = useCreateCacheMap(cache)
  const settingsTarget = isMini ? 'mini' : 'default'
+  const { isDarkMode } = useContext(DarkModeContext)
+  const theme = isDarkMode ? 'dark' : 'light'
+
  const {
    readerColor,
    rangeColor,
@@ -26,7 +30,7 @@ const TorrentCache = ({ cache, isMini }) => {
    borderColor,
    cacheMaxHeight,
    completeColor,
-  } = snakeSettings[settingsTarget]
+  } = snakeSettings[theme][settingsTarget]

  const canvasWidth = isMini ? width * 0.93 : width

@@ -69,7 +73,7 @@ const TorrentCache = ({ cache, isMini }) => {

      ctx.lineWidth = borderWidth
      ctx.fillStyle = inProgress
-        ? createGradient(ctx, percentage, settingsTarget)
+        ? createGradient(ctx, percentage, theme, settingsTarget)
        : isCompleted
        ? completeColor
        : backgroundColor
@@ -102,13 +106,14 @@ const TorrentCache = ({ cache, isMini }) => {
    completeColor,
    readerColor,
    rangeColor,
+    theme,
  ])

  return (
    <Measure bounds onResize={({ bounds }) => setDimensions(bounds)}>
      {({ measureRef }) => (
        <div style={{ display: 'flex', flexDirection: 'column' }} ref={measureRef}>
-          <SnakeWrapper isMini={isMini}>
+          <SnakeWrapper themeType={theme} isMini={isMini}>
            <canvas ref={canvasRef} />
          </SnakeWrapper>

--- a/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js
+++ b/web/src/components/DialogTorrentDetailsContent/TorrentCache/snakeSettings.js
@@ -1,33 +1,60 @@
 import { mainColors } from 'style/colors'

 export const snakeSettings = {
-  default: {
-    borderWidth: 1,
-    pieceSize: 14,
-    gapBetweenPieces: 3,
-    borderColor: '#dbf2e8',
-    completeColor: mainColors.primary,
-    backgroundColor: '#fff',
-    progressColor: '#b3dfc9',
-    readerColor: '#000',
-    rangeColor: '#afa6e3',
+  dark: {
+    default: {
+      borderWidth: 1,
+      pieceSize: 14,
+      gapBetweenPieces: 3,
+      borderColor: mainColors.dark.primary,
+      completeColor: mainColors.dark.primary,
+      backgroundColor: '#fff',
+      progressColor: '#545a5e',
+      readerColor: '#fff',
+      rangeColor: '#cda184',
+    },
+    mini: {
+      cacheMaxHeight: 340,
+      borderWidth: 2,
+      pieceSize: 23,
+      gapBetweenPieces: 6,
+      borderColor: '#545a5e',
+      completeColor: '#545a5e',
+      backgroundColor: '#dee3e5',
+      progressColor: '#dee3e5',
+      readerColor: '#000',
+      rangeColor: '#cda184',
+    },
  },
-  mini: {
-    cacheMaxHeight: 340,
-    borderWidth: 2,
-    pieceSize: 23,
-    gapBetweenPieces: 6,
-    borderColor: '#4db380',
-    completeColor: '#4db380',
-    backgroundColor: '#dbf2e8',
-    progressColor: '#dbf2e8',
-    readerColor: '#2d714f',
-    rangeColor: '#afa6e3',
+  light: {
+    default: {
+      borderWidth: 1,
+      pieceSize: 14,
+      gapBetweenPieces: 3,
+      borderColor: '#dbf2e8',
+      completeColor: mainColors.light.primary,
+      backgroundColor: '#fff',
+      progressColor: '#b3dfc9',
+      readerColor: '#000',
+      rangeColor: '#afa6e3',
+    },
+    mini: {
+      cacheMaxHeight: 340,
+      borderWidth: 2,
+      pieceSize: 23,
+      gapBetweenPieces: 6,
+      borderColor: '#4db380',
+      completeColor: '#4db380',
+      backgroundColor: '#dbf2e8',
+      progressColor: '#dbf2e8',
+      readerColor: '#2d714f',
+      rangeColor: '#afa6e3',
+    },
  },
 }

-export const createGradient = (ctx, percentage, snakeType) => {
-  const { pieceSize, completeColor, progressColor } = snakeSettings[snakeType]
+export const createGradient = (ctx, percentage, theme, snakeType) => {
+  const { pieceSize, completeColor, progressColor } = snakeSettings[theme][snakeType]

  const gradient = ctx.createLinearGradient(0, pieceSize, 0, 0)
  gradient.addColorStop(0, completeColor)
--- a/web/src/components/DialogTorrentDetailsContent/TorrentCache/style.js
+++ b/web/src/components/DialogTorrentDetailsContent/TorrentCache/style.js
@@ -10,12 +10,12 @@ export const ScrollNotification = styled.div`
 `

 export const SnakeWrapper = styled.div`
-  ${({ isMini }) => css`
+  ${({ isMini, themeType }) => css`
    ${isMini &&
    css`
      display: grid;
      justify-content: center;
-      max-height: ${snakeSettings.mini.cacheMaxHeight}px;
+      max-height: ${snakeSettings[themeType].mini.cacheMaxHeight}px;
      overflow: auto;
    `}

--- a/web/src/components/DialogTorrentDetailsContent/TorrentFunctions/style.js
+++ b/web/src/components/DialogTorrentDetailsContent/TorrentFunctions/style.js
@@ -19,11 +19,17 @@ export const MainSectionButtonGroup = styled.div`
 `

 export const SmallLabel = styled.div`
-  ${({ mb }) => css`
+  ${({
+    mb,
+    theme: {
+      torrentFunctions: { fontColor },
+    },
+  }) => css`
    ${mb && `margin-bottom: ${mb}px`};
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
+    color: ${fontColor};

    @media (max-width: 800px) {
      font-size: 18px;
--- a/web/src/components/DialogTorrentDetailsContent/index.jsx
+++ b/web/src/components/DialogTorrentDetailsContent/index.jsx
@@ -133,7 +133,13 @@ export default function DialogTorrentDetailsContent({ closeDialog, torrent }) {
        {...(isDetailedCacheView && { onBack: () => setIsDetailedCacheView(false) })}
      />

-      <div style={{ minHeight: '80vh', overflow: 'auto' }}>
+      <div
+        style={{
+          minHeight: '80vh',
+          overflow: 'auto',
+          ...(isDetailedCacheView && { display: 'flex', flexDirection: 'column' }),
+        }}
+      >
        {isLoading ? (
          <Loader />
        ) : isDetailedCacheView ? (
--- a/web/src/components/DialogTorrentDetailsContent/style.js
+++ b/web/src/components/DialogTorrentDetailsContent/style.js
@@ -1,3 +1,4 @@
+import { rgba } from 'polished'
 import styled, { css } from 'styled-components'

 export const DialogContentGrid = styled.div`
@@ -18,7 +19,12 @@ export const DialogContentGrid = styled.div`
  }
 `
 export const Poster = styled.div`
-  ${({ poster }) => css`
+  ${({
+    poster,
+    theme: {
+      dialogTorrentDetailsContent: { posterBGColor },
+    },
+  }) => css`
    height: 400px;
    border-radius: 5px;
    overflow: hidden;
@@ -35,7 +41,7 @@ export const Poster = styled.div`
          width: 300px;
          display: grid;
          place-items: center;
-          background: #74c39c;
+          background: ${posterBGColor};

          svg {
            transform: scale(2.5) translateY(-3px);
@@ -58,72 +64,104 @@ export const Poster = styled.div`
  `}
 `
 export const MainSection = styled.section`
-  grid-area: main;
-  padding: 40px;
-  display: grid;
-  grid-template-columns: min-content 1fr;
-  gap: 30px;
-  background: linear-gradient(145deg, #e4f6ed, #b5dec9);
+  ${({
+    theme: {
+      dialogTorrentDetailsContent: { gradientStartColor, gradientEndColor },
+    },
+  }) => css`
+    grid-area: main;
+    padding: 40px;
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    gap: 30px;
+    background: linear-gradient(145deg, ${gradientStartColor}, ${gradientEndColor});

-  @media (max-width: 840px) {
-    grid-template-columns: 1fr;
-  }
-
-  @media (max-width: 800px) {
-    padding: 20px;
-  }
-`
-
-export const CacheSection = styled.section`
-  grid-area: cache;
-  padding: 40px;
-  display: grid;
-  align-content: start;
-  grid-template-rows: min-content 1fr min-content;
-  background: #88cdaa;
-
-  @media (max-width: 800px) {
-    padding: 20px;
-  }
-`
-
-export const TorrentFilesSection = styled.section`
-  grid-area: file-list;
-  padding: 40px;
-  box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
-
-  @media (max-width: 800px) {
-    padding: 20px;
-  }
-`
-
-export const SectionSubName = styled.div`
-  ${({ mb }) => css`
-    ${mb && `margin-bottom: ${mb}px`};
-    color: #7c7b7c;
+    @media (max-width: 840px) {
+      grid-template-columns: 1fr;
+    }

    @media (max-width: 800px) {
-      ${mb && `margin-bottom: ${mb / 2}px`};
-      font-size: 11px;
+      padding: 20px;
    }
  `}
 `

-export const SectionTitle = styled.div`
-  ${({ mb }) => css`
-    ${mb && `margin-bottom: ${mb}px`};
-    font-size: 35px;
-    font-weight: 300;
-    line-height: 1;
-    word-break: break-word;
+export const CacheSection = styled.section`
+  ${({
+    theme: {
+      dialogTorrentDetailsContent: { chacheSectionBGColor },
+    },
+  }) => css`
+    grid-area: cache;
+    padding: 40px;
+    display: grid;
+    align-content: start;
+    grid-template-rows: min-content 1fr min-content;
+    background: ${chacheSectionBGColor};

    @media (max-width: 800px) {
-      font-size: 25px;
-      ${mb && `margin-bottom: ${mb / 2}px`};
+      padding: 20px;
    }
  `}
 `

+export const TorrentFilesSection = styled.section`
+  ${({
+    theme: {
+      dialogTorrentDetailsContent: { torrentFilesSectionBGColor },
+    },
+  }) => css`
+    grid-area: file-list;
+    padding: 40px;
+    box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
+    background: ${torrentFilesSectionBGColor};
+
+    @media (max-width: 800px) {
+      padding: 20px;
+    }
+  `}
+`
+
+export const SectionSubName = styled.div`
+  ${({
+    theme: {
+      dialogTorrentDetailsContent: { subNameFontColor },
+    },
+  }) => css`
+    ${({ mb }) => css`
+      ${mb && `margin-bottom: ${mb}px`};
+      color: ${subNameFontColor};
+
+      @media (max-width: 800px) {
+        ${mb && `margin-bottom: ${mb / 2}px`};
+        font-size: 11px;
+      }
+    `}
+  `}
+`
+
+export const SectionTitle = styled.div`
+  ${({
+    theme: {
+      dialogTorrentDetailsContent: { fontColor },
+    },
+  }) => css`
+    ${({ mb }) => css`
+      ${mb && `margin-bottom: ${mb}px`};
+      font-size: 35px;
+      font-weight: 300;
+      line-height: 1;
+      word-break: break-word;
+      color: ${fontColor};
+
+      @media (max-width: 800px) {
+        font-size: 25px;
+        ${mb && `margin-bottom: ${mb / 2}px`};
+      }
+    `}
+  `}
+`
+
 export const SectionHeader = styled.div`
  margin-bottom: 20px;
 `
@@ -182,18 +220,25 @@ export const WidgetFieldWrapper = styled.div`
  }
 `
 export const WidgetFieldTitle = styled.div`
-  grid-area: title;
-  justify-self: start;
-  text-transform: uppercase;
-  font-size: 11px;
-  margin-bottom: 2px;
-  font-weight: 600;
+  ${({
+    theme: {
+      dialogTorrentDetailsContent: { fontColor },
+    },
+  }) => css`
+    grid-area: title;
+    justify-self: start;
+    text-transform: uppercase;
+    font-size: 11px;
+    margin-bottom: 2px;
+    font-weight: 600;
+    color: ${fontColor};
+  `}
 `

 export const WidgetFieldIcon = styled.div`
  ${({ bgColor }) => css`
    grid-area: icon;
-    color: rgba(255, 255, 255, 0.8);
+    color: ${rgba('#fff', 0.8)};
    background: ${bgColor};
    border-radius: 5px 0 0 5px;

@@ -220,20 +265,29 @@ export const WidgetFieldValue = styled.div`
  `}
 `

-export const LoadingProgress = styled.div.attrs(({ value, fullAmount }) => {
-  const percentage = Math.min(100, (value * 100) / fullAmount)
-
-  return {
-    // this block is here according to styled-components recomendation about fast changable components
-    style: {
-      background: `linear-gradient(to right, #b5dec9 0%, #b5dec9 ${percentage}%, #fff ${percentage}%, #fff 100%)`,
+export const LoadingProgress = styled.div.attrs(
+  ({
+    value,
+    fullAmount,
+    theme: {
+      dialogTorrentDetailsContent: { gradientEndColor },
    },
-  }
-})`
+  }) => {
+    const percentage = Math.min(100, (value * 100) / fullAmount)
+
+    return {
+      // this block is here according to styled-components recomendation about fast changable components
+      style: {
+        background: `linear-gradient(to right, ${gradientEndColor} 0%, ${gradientEndColor} ${percentage}%, #fff ${percentage}%, #fff 100%)`,
+      },
+    }
+  },
+)`
  ${({ label }) => css`
    border: 1px solid;
    padding: 10px 20px;
    border-radius: 5px;
+    color: #000;

    :before {
      content: '${label}';