dark mode widget colors change

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

@@ -0,0 +1,128 @@
+import {
+  ArrowDownward as ArrowDownwardIcon,
+  ArrowUpward as ArrowUpwardIcon,
+  SwapVerticalCircle as SwapVerticalCircleIcon,
+  ViewAgenda as ViewAgendaIcon,
+  Widgets as WidgetsIcon,
+  PhotoSizeSelectSmall as PhotoSizeSelectSmallIcon,
+  Build as BuildIcon,
+} from '@material-ui/icons'
+import { getPeerString, humanizeSize } from 'utils/Utils'
+import { useTranslation } from 'react-i18next'
+import { GETTING_INFO, IN_DB, CLOSED, PRELOAD, WORKING } from 'torrentStates'
+
+import StatisticsField from '../StatisticsField'
+import useGetWidgetColors from './useGetWidgetColors'
+
+export const DownlodSpeedWidget = ({ data }) => {
+  const { t } = useTranslation()
+  const { iconBGColor, valueBGColor } = useGetWidgetColors('downloadSpeed')
+
+  return (
+    <StatisticsField
+      title={t('DownloadSpeed')}
+      value={humanizeSize(data) || '0 B'}
+      iconBg={iconBGColor}
+      valueBg={valueBGColor}
+      icon={ArrowDownwardIcon}
+    />
+  )
+}
+
+export const UploadSpeedWidget = ({ data }) => {
+  const { t } = useTranslation()
+  const { iconBGColor, valueBGColor } = useGetWidgetColors('uploadSpeed')
+
+  return (
+    <StatisticsField
+      title={t('UploadSpeed')}
+      value={humanizeSize(data) || '0 B'}
+      iconBg={iconBGColor}
+      valueBg={valueBGColor}
+      icon={ArrowUpwardIcon}
+    />
+  )
+}
+
+export const PeersWidget = ({ data }) => {
+  const { t } = useTranslation()
+  const { iconBGColor, valueBGColor } = useGetWidgetColors('peers')
+
+  return (
+    <StatisticsField
+      title={t('Peers')}
+      value={getPeerString(data) || '[0] 0 / 0'}
+      iconBg={iconBGColor}
+      valueBg={valueBGColor}
+      icon={SwapVerticalCircleIcon}
+    />
+  )
+}
+
+export const PiecesCountWidget = ({ data }) => {
+  const { t } = useTranslation()
+  const { iconBGColor, valueBGColor } = useGetWidgetColors('piecesCount')
+
+  return (
+    <StatisticsField
+      title={t('PiecesCount')}
+      value={data}
+      iconBg={iconBGColor}
+      valueBg={valueBGColor}
+      icon={WidgetsIcon}
+    />
+  )
+}
+
+export const PiecesLengthWidget = ({ data }) => {
+  const { t } = useTranslation()
+  const { iconBGColor, valueBGColor } = useGetWidgetColors('piecesLength')
+
+  return (
+    <StatisticsField
+      title={t('PiecesLength')}
+      value={humanizeSize(data)}
+      iconBg={iconBGColor}
+      valueBg={valueBGColor}
+      icon={PhotoSizeSelectSmallIcon}
+    />
+  )
+}
+
+export const StatusWidget = ({ stat }) => {
+  const { t } = useTranslation()
+
+  const values = {
+    [GETTING_INFO]: t('TorrentGettingInfo'),
+    [PRELOAD]: t('TorrentPreload'),
+    [WORKING]: t('TorrentWorking'),
+    [CLOSED]: t('TorrentClosed'),
+    [IN_DB]: t('TorrentInDb'),
+  }
+  const { iconBGColor, valueBGColor } = useGetWidgetColors('status')
+
+  return (
+    <StatisticsField
+      title={t('TorrentStatus')}
+      value={values[stat]}
+      iconBg={iconBGColor}
+      valueBg={valueBGColor}
+      icon={BuildIcon}
+    />
+  )
+}
+
+export const SizeWidget = ({ data }) => {
+  const { t } = useTranslation()
+  const { iconBGColor, valueBGColor } = useGetWidgetColors('size')
+
+  return (
+    <StatisticsField
+      title={t('TorrentSize')}
+      value={humanizeSize(data)}
+      iconBg={iconBGColor}
+      valueBg={valueBGColor}
+      icon={ViewAgendaIcon}
+    />
+  )
+}