More dark theme styles for visits page

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;

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) => () => (
   <NoMenuLayout>
     <Row>
       <div className="col-lg-6">

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};
 }

src/utils/DropdownBtn.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable no-descending-specificity */
+
 @import '../utils/mixins/vertical-align';
 
 .dropdown-btn__toggle.dropdown-btn__toggle,

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';
+};

src/visits/VisitsTable.tsx

@@ -154,7 +154,7 @@ const VisitsTable = ({
             <tr
               key={index}
               style={{ cursor: 'pointer' }}
-              className={classNames({ 'table-primary': isSelected })}
+              className={classNames({ 'table-active': isSelected })}
               onClick={() => setSelectedVisits(
                 isSelected ? selectedVisits.filter((v) => v !== visit) : [ ...selectedVisits, visit ],
               )}

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 && {

test/visits/VisitsTable.test.tsx

@@ -85,7 +85,7 @@ describe('<VisitsTable />', () => {
     );
 
     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');