From 913974d9a79a82ee7afbd5376a2f6eea322dc8d3 Mon Sep 17 00:00:00 2001 From: Daniel Shleifman Date: Mon, 28 Jun 2021 12:47:27 +0300 Subject: [PATCH] dark mode widget colors change --- web/src/components/App/Sidebar.jsx | 1 + .../DialogTorrentDetailsContent/style.js | 17 ++++--- .../{widgets.jsx => widgets/index.jsx} | 50 +++++++++++++------ .../widgets/useGetWidgetColors.jsx | 33 ++++++++++++ web/src/style/colors.js | 6 ++- 5 files changed, 85 insertions(+), 22 deletions(-) rename web/src/components/DialogTorrentDetailsContent/{widgets.jsx => widgets/index.jsx} (65%) create mode 100644 web/src/components/DialogTorrentDetailsContent/widgets/useGetWidgetColors.jsx diff --git a/web/src/components/App/Sidebar.jsx b/web/src/components/App/Sidebar.jsx index 03e098b..344bcaf 100644 --- a/web/src/components/App/Sidebar.jsx +++ b/web/src/components/App/Sidebar.jsx @@ -36,6 +36,7 @@ const Sidebar = ({ isDrawerOpen, setIsDonationDialogOpen, isOffline, isLoading } + diff --git a/web/src/components/DialogTorrentDetailsContent/style.js b/web/src/components/DialogTorrentDetailsContent/style.js index d749567..643ffa5 100644 --- a/web/src/components/DialogTorrentDetailsContent/style.js +++ b/web/src/components/DialogTorrentDetailsContent/style.js @@ -144,7 +144,7 @@ export const SectionTitle = styled.div` ${({ color, theme: { - dialogTorrentDetailsContent: { fontColor }, + dialogTorrentDetailsContent: { titleFontColor }, }, }) => css` ${({ mb }) => css` @@ -153,7 +153,7 @@ export const SectionTitle = styled.div` font-weight: 300; line-height: 1; word-break: break-word; - color: ${color || fontColor}; + color: ${color || titleFontColor}; @media (max-width: 800px) { font-size: 25px; @@ -223,7 +223,7 @@ export const WidgetFieldWrapper = styled.div` export const WidgetFieldTitle = styled.div` ${({ theme: { - dialogTorrentDetailsContent: { fontColor }, + dialogTorrentDetailsContent: { titleFontColor }, }, }) => css` grid-area: title; @@ -232,7 +232,7 @@ export const WidgetFieldTitle = styled.div` font-size: 11px; margin-bottom: 2px; font-weight: 600; - color: ${fontColor}; + color: ${titleFontColor}; `} ` @@ -251,10 +251,15 @@ export const WidgetFieldIcon = styled.div` `} ` export const WidgetFieldValue = styled.div` - ${({ bgColor }) => css` + ${({ + bgColor, + theme: { + dialogTorrentDetailsContent: { widgetFontColor }, + }, + }) => css` grid-area: value; padding: 0 20px; - color: #fff; + color: ${widgetFontColor}; font-size: 25px; background: ${bgColor}; border-radius: 0 5px 5px 0; diff --git a/web/src/components/DialogTorrentDetailsContent/widgets.jsx b/web/src/components/DialogTorrentDetailsContent/widgets/index.jsx similarity index 65% rename from web/src/components/DialogTorrentDetailsContent/widgets.jsx rename to web/src/components/DialogTorrentDetailsContent/widgets/index.jsx index a4a1437..978f358 100644 --- a/web/src/components/DialogTorrentDetailsContent/widgets.jsx +++ b/web/src/components/DialogTorrentDetailsContent/widgets/index.jsx @@ -11,16 +11,19 @@ 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 StatisticsField from '../StatisticsField' +import useGetWidgetColors from './useGetWidgetColors' export const DownlodSpeedWidget = ({ data }) => { const { t } = useTranslation() + const { iconBGColor, valueBGColor } = useGetWidgetColors('downloadSpeed') + return ( ) @@ -28,12 +31,14 @@ export const DownlodSpeedWidget = ({ data }) => { export const UploadSpeedWidget = ({ data }) => { const { t } = useTranslation() + const { iconBGColor, valueBGColor } = useGetWidgetColors('uploadSpeed') + return ( ) @@ -41,12 +46,14 @@ export const UploadSpeedWidget = ({ data }) => { export const PeersWidget = ({ data }) => { const { t } = useTranslation() + const { iconBGColor, valueBGColor } = useGetWidgetColors('peers') + return ( ) @@ -54,17 +61,29 @@ export const PeersWidget = ({ data }) => { export const PiecesCountWidget = ({ data }) => { const { t } = useTranslation() - return + const { iconBGColor, valueBGColor } = useGetWidgetColors('piecesCount') + + return ( + + ) } export const PiecesLengthWidget = ({ data }) => { const { t } = useTranslation() + const { iconBGColor, valueBGColor } = useGetWidgetColors('piecesLength') + return ( ) @@ -80,13 +99,14 @@ export const StatusWidget = ({ stat }) => { [CLOSED]: t('TorrentClosed'), [IN_DB]: t('TorrentInDb'), } + const { iconBGColor, valueBGColor } = useGetWidgetColors('status') return ( ) @@ -94,12 +114,14 @@ export const StatusWidget = ({ stat }) => { export const SizeWidget = ({ data }) => { const { t } = useTranslation() + const { iconBGColor, valueBGColor } = useGetWidgetColors('size') + return ( ) diff --git a/web/src/components/DialogTorrentDetailsContent/widgets/useGetWidgetColors.jsx b/web/src/components/DialogTorrentDetailsContent/widgets/useGetWidgetColors.jsx new file mode 100644 index 0000000..f9305f9 --- /dev/null +++ b/web/src/components/DialogTorrentDetailsContent/widgets/useGetWidgetColors.jsx @@ -0,0 +1,33 @@ +import { DarkModeContext } from 'components/App' +import { useContext } from 'react' +import { THEME_MODES } from 'style/materialUISetup' + +const { LIGHT, DARK } = THEME_MODES + +const colors = { + light: { + downloadSpeed: { iconBGColor: '#118f00', valueBGColor: '#13a300' }, + uploadSpeed: { iconBGColor: '#0146ad', valueBGColor: '#0058db' }, + peers: { iconBGColor: '#cdc118', valueBGColor: '#d8cb18' }, + piecesCount: { iconBGColor: '#b6c95e', valueBGColor: '#c0d076' }, + piecesLength: { iconBGColor: '#0982c8', valueBGColor: '#098cd7' }, + status: { iconBGColor: '#aea25b', valueBGColor: '#b4aa6e' }, + size: { iconBGColor: '#9b01ad', valueBGColor: '#ac03bf' }, + }, + dark: { + downloadSpeed: { iconBGColor: '#0c6600', valueBGColor: '#0d7000' }, + uploadSpeed: { iconBGColor: '#003f9e', valueBGColor: '#0047b3' }, + peers: { iconBGColor: '#a69c11', valueBGColor: '#b4a913' }, + piecesCount: { iconBGColor: '#8da136', valueBGColor: '#99ae3d' }, + piecesLength: { iconBGColor: '#07659c', valueBGColor: '#0872af' }, + status: { iconBGColor: '#938948', valueBGColor: '#9f9450' }, + size: { iconBGColor: '#81008f', valueBGColor: '#9102a1' }, + }, +} + +export default function useGetWidgetColors(widgetName) { + const { isDarkMode } = useContext(DarkModeContext) + const widgetColors = colors[isDarkMode ? DARK : LIGHT][widgetName] + + return widgetColors +} diff --git a/web/src/style/colors.js b/web/src/style/colors.js index bb8f512..1a009a0 100644 --- a/web/src/style/colors.js +++ b/web/src/style/colors.js @@ -19,7 +19,8 @@ export const themeColors = { gradientStartColor: '#e4f6ed', gradientEndColor: '#b5dec9', chacheSectionBGColor: '#88cdaa', - fontColor: '#000', + widgetFontColor: '#fff', + titleFontColor: '#000', subNameFontColor: '#7c7b7c', torrentFilesSectionBGColor: '#f1eff3', }, @@ -65,7 +66,8 @@ export const themeColors = { gradientStartColor: '#656f76', gradientEndColor: '#545a5e', chacheSectionBGColor: '#3c4244', - fontColor: '#f1eff3', + widgetFontColor: rgba('#fff', 0.8), + titleFontColor: '#f1eff3', subNameFontColor: '#dee3e5', torrentFilesSectionBGColor: rgba('#545a5e', 0.9), },