From d6633f75559c7f5110644610ded13cd46b74ebb9 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Fri, 19 Feb 2021 20:18:02 +0100 Subject: [PATCH] More dark theme styles for visits page --- src/index.scss | 10 +++++++++- src/settings/Settings.tsx | 2 +- src/theme/theme.scss | 4 ++++ src/utils/DropdownBtn.scss | 2 ++ src/utils/theme/index.ts | 12 +++++++++++- src/visits/VisitsTable.tsx | 2 +- src/visits/helpers/DefaultChart.tsx | 12 ++++++++++-- test/visits/VisitsTable.test.tsx | 2 +- 8 files changed, 39 insertions(+), 7 deletions(-) diff --git a/src/index.scss b/src/index.scss index 9bb67870..ea594f29 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,3 +1,5 @@ +/* stylelint-disable no-descending-specificity */ + @import './utils/base'; @import 'node_modules/bootstrap/scss/bootstrap.scss'; @import './common/react-tagsinput.scss'; @@ -65,7 +67,7 @@ body, .page-link, .page-link:hover, .page-item.disabled .page-link, -.dropdown-divider{ +.dropdown-divider { border-color: var(--border-color); } @@ -146,6 +148,12 @@ body, background-color: var(--input-color); } +.table-active, +.table-active > th, +.table-active > td { + background-color: var(--table-highlight-color) !important; +} + .navbar-brand { @media (max-width: $smMax) { margin: 0 auto !important; diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index 31e6fc6f..8e6731f5 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -2,7 +2,7 @@ import { FC } from 'react'; import { Row } from 'reactstrap'; import NoMenuLayout from '../common/NoMenuLayout'; -const Settings = (RealTimeUpdates: FC, ShortUrlCreation: FC, UserInterface:FC) => () => ( +const Settings = (RealTimeUpdates: FC, ShortUrlCreation: FC, UserInterface: FC) => () => (
diff --git a/src/theme/theme.scss b/src/theme/theme.scss index ba9c1e3c..3b7b8d57 100644 --- a/src/theme/theme.scss +++ b/src/theme/theme.scss @@ -12,6 +12,7 @@ $lightBrandColor: $mainColor; $lightInputColor: $lightPrimaryColor; $lightDisabledInputColor: $lightColor; $lightBorderInputColor: rgba(0, 0, 0, .19); +$lightTableHighlightColor: rgba(0, 0, 0, .075); // Dark theme colors $darkPrimaryColor: #161b22; @@ -25,6 +26,7 @@ $darkBrandColor: #0b2d4e; $darkInputColor: darken($darkPrimaryColor, 2%); $darkDisabledInputColor: lighten($darkPrimaryColor, 2%); $darkBorderInputColor: rgba(0, 0, 0, .3); +$darkTableHighlightColor: $darkBorderColor; html:not([data-theme='dark']) { --primary-color: #{$lightPrimaryColor}; @@ -38,6 +40,7 @@ html:not([data-theme='dark']) { --input-disabled-color: #{$lightDisabledInputColor}; --input-border-color: #{$lightBorderInputColor}; --table-border-color: #{$lightTableBorderColor}; + --table-highlight-color: #{$lightTableHighlightColor}; } html[data-theme='dark'] { @@ -52,4 +55,5 @@ html[data-theme='dark'] { --input-disabled-color: #{$darkDisabledInputColor}; --input-border-color: #{$darkBorderInputColor}; --table-border-color: #{$darkTableBorderColor}; + --table-highlight-color: #{$darkTableHighlightColor}; } diff --git a/src/utils/DropdownBtn.scss b/src/utils/DropdownBtn.scss index f630328e..663e8e09 100644 --- a/src/utils/DropdownBtn.scss +++ b/src/utils/DropdownBtn.scss @@ -1,3 +1,5 @@ +/* stylelint-disable no-descending-specificity */ + @import '../utils/mixins/vertical-align'; .dropdown-btn__toggle.dropdown-btn__toggle, diff --git a/src/utils/theme/index.ts b/src/utils/theme/index.ts index ca56555b..3f47f7eb 100644 --- a/src/utils/theme/index.ts +++ b/src/utils/theme/index.ts @@ -2,10 +2,14 @@ export const MAIN_COLOR = '#4696e5'; export const MAIN_COLOR_ALPHA = 'rgba(70, 150, 229, 0.4)'; -export const HIGHLIGHTED_COLOR = '#F77F28'; +export const HIGHLIGHTED_COLOR = '#f77f28'; export const HIGHLIGHTED_COLOR_ALPHA = 'rgba(247, 127, 40, 0.4)'; +export const PRIMARY_LIGHT_COLOR = 'white'; + +export const PRIMARY_DARK_COLOR = '#161b22'; + export type Theme = 'dark' | 'light'; export const changeThemeInMarkup = (theme: Theme) => { @@ -13,3 +17,9 @@ export const changeThemeInMarkup = (theme: Theme) => { html?.[0]?.setAttribute('data-theme', theme); }; + +export const isDarkThemeEnabled = (): boolean => { + const html = document.getElementsByTagName('html'); + + return html?.[0]?.getAttribute('data-theme') === 'dark'; +}; diff --git a/src/visits/VisitsTable.tsx b/src/visits/VisitsTable.tsx index 54e16602..fb99a950 100644 --- a/src/visits/VisitsTable.tsx +++ b/src/visits/VisitsTable.tsx @@ -154,7 +154,7 @@ const VisitsTable = ({ setSelectedVisits( isSelected ? selectedVisits.filter((v) => v !== visit) : [ ...selectedVisits, visit ], )} diff --git a/src/visits/helpers/DefaultChart.tsx b/src/visits/helpers/DefaultChart.tsx index 78d1863a..74dd083a 100644 --- a/src/visits/helpers/DefaultChart.tsx +++ b/src/visits/helpers/DefaultChart.tsx @@ -7,7 +7,15 @@ import { fillTheGaps } from '../../utils/helpers/visits'; import { Stats } from '../types'; import { prettify } from '../../utils/helpers/numbers'; import { pointerOnHover, renderDoughnutChartLabel, renderNonDoughnutChartLabel } from '../../utils/helpers/charts'; -import { HIGHLIGHTED_COLOR, HIGHLIGHTED_COLOR_ALPHA, MAIN_COLOR, MAIN_COLOR_ALPHA } from '../../utils/theme'; +import { + HIGHLIGHTED_COLOR, + HIGHLIGHTED_COLOR_ALPHA, + isDarkThemeEnabled, + MAIN_COLOR, + MAIN_COLOR_ALPHA, + PRIMARY_DARK_COLOR, + PRIMARY_LIGHT_COLOR, +} from '../../utils/theme'; import './DefaultChart.scss'; export interface DefaultChartProps { @@ -47,7 +55,7 @@ const generateGraphData = ( '#DCDCDC', '#463730', ], - borderColor: isBarChart ? MAIN_COLOR : 'white', + borderColor: isBarChart ? MAIN_COLOR : (isDarkThemeEnabled() ? PRIMARY_DARK_COLOR : PRIMARY_LIGHT_COLOR), borderWidth: 2, }, highlightedData && { diff --git a/test/visits/VisitsTable.test.tsx b/test/visits/VisitsTable.test.tsx index 339233d0..a2d01c4a 100644 --- a/test/visits/VisitsTable.test.tsx +++ b/test/visits/VisitsTable.test.tsx @@ -85,7 +85,7 @@ describe('', () => { ); expect(wrapper.find('.text-primary')).toHaveLength(3); - expect(wrapper.find('.table-primary')).toHaveLength(2); + expect(wrapper.find('.table-active')).toHaveLength(2); // Select one extra wrapper.find('tr').at(5).simulate('click');