Tweak styles a little more, especially highlighted View row

Author: pimterry

src/components/send/send-tabs.tsx

@@ -18,6 +18,7 @@ const TabsContainer = styled.div.attrs(() => ({
     height: ${TAB_BAR_HEIGHT};
     box-sizing: border-box;
 
+    color: ${p => p.theme.mainColor};
     background-color: ${p => p.theme.mainLowlightBackground};
 
     font-size: ${p => p.theme.textSize};

src/components/view/view-event-list.tsx

@@ -6,7 +6,7 @@ import { action, computed } from 'mobx';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList as List, ListChildComponentProps } from 'react-window';
 
-import { css, highContrastTheme, styled } from '../../styles'
+import { styled } from '../../styles'
 import { ArrowIcon, Icon, WarningIcon, Icons } from '../../icons';
 
 import {
@@ -233,15 +233,12 @@ const EventListRow = styled.div<{ role: 'row' }>`
 
     &.selected {
         background-color: ${p => p.theme.highlightBackground};
-        color: ${p => p.theme.highlightColor};
         font-weight: bold;
 
-        ${(p): any => p.theme === highContrastTheme &&
-            css`
-                ${StatusCode} {
-                    color: ${p => p.theme.highlightColor};
-                }
-            `
+        color: ${p => p.theme.highlightColor};
+        * {
+            /* Override status etc colours to ensure contrast & give row max visibility */
+            color: ${p => p.theme.highlightColor};
         }
     }
 

src/styles.ts

@@ -55,6 +55,9 @@ export const lightTheme = {
     mainLowlightBackground: greyWhite,
     mainColor: inkGrey,
 
+    highlightBackground: white,
+    highlightColor: inkGrey,
+
     lowlightTextOpacity: 0.65,
     boxShadowAlpha: 0.3,
 
@@ -69,14 +72,11 @@ export const lightTheme = {
 
     inputBackground: white,
     inputHoverBackground: greyWhite,
-    inputBorder: darkGrey,
+    inputBorder: darkishGrey,
     inputColor: inkGrey,
     inputPlaceholderColor: darkishGrey,
     inputWarningPlaceholder: '#8c5c1d', // Mix of warning + inkGrey
 
-    highlightBackground: white,
-    highlightColor: inkGrey,
-
     popColor,
 
     warningColor,
@@ -110,7 +110,10 @@ export const darkTheme = {
     mainLowlightBackground: darkerGrey,
     mainColor: white,
 
-    lowlightTextOpacity: 0.6,
+    highlightBackground: darkishGrey,
+    highlightColor: white,
+
+    lowlightTextOpacity: 0.65,
     boxShadowAlpha: 0.4,
 
     pillContrast: 0.85,
@@ -129,9 +132,6 @@ export const darkTheme = {
     inputPlaceholderColor: mediumGrey,
     inputWarningPlaceholder: '#e8b978', // Mix of warning + white
 
-    highlightBackground: darkishGrey,
-    highlightColor: white,
-
     popColor,
 
     warningColor,
@@ -186,6 +186,9 @@ export const highContrastTheme = {
     mainLowlightBackground: '#262626',
     mainColor: '#ffffff',
 
+    highlightBackground: '#ffffff',
+    highlightColor: '#000',
+
     lowlightTextOpacity: 0.8,
     boxShadowAlpha: 0.1,
 
@@ -205,9 +208,6 @@ export const highContrastTheme = {
     inputPlaceholderColor: '#444',
     inputWarningPlaceholder: '#e1b374', // Mix of warning + white
 
-    highlightBackground: '#ffffff',
-    highlightColor: '#000',
-
     popColor,
 
     warningColor,