From 702adf93f60aa3ca518b737647afbe88a58accf4 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Mon, 10 Aug 2020 14:55:02 -0300
Subject: [PATCH] :lipstick: improve visibility on dark mode

---
 client/components/mobile/Tab.jsx              |  2 +-
 client/modules/Mobile/MobileDashboardView.jsx | 10 ++++++++--
 client/theme.js                               |  6 ++++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/client/components/mobile/Tab.jsx b/client/components/mobile/Tab.jsx
index 016b29d2..20a158b4 100644
--- a/client/components/mobile/Tab.jsx
+++ b/client/components/mobile/Tab.jsx
@@ -9,7 +9,7 @@ export default styled(Link)`
 
   background: transparent;
   /* border-top: ${remSize(4)} solid ${props => prop(props.selected ? 'colors.p5jsPink' : 'MobilePanel.default.background')}; */
-  border-top: ${remSize(4)} solid ${props => (props.selected ? prop('colors.p5jsPink') : 'transparent')};
+  border-top: ${remSize(4)} solid ${props => (props.selected ? prop('TabHighlight') : 'transparent')};
 
   color: ${prop('primaryTextColor')};
 
diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index a8fe3e72..429687e5 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -47,6 +47,7 @@ const ContentWrapper = styled(Content)`
   tbody td, thead th {
     justify-self: stretch;
     align-self: flex-end;
+    color: ${prop('primaryTextColor')}
   }
 
   tbody td:nth-child(2) { grid-column-start: 2 }
@@ -57,8 +58,13 @@ const ContentWrapper = styled(Content)`
     height: ${remSize(48)};
   }
 
-  .sketches-table-container { padding-bottom: ${remSize(160)} }
-  .sketches-table__row { background: white !important; height: auto }
+  .sketches-table-container {
+    padding-bottom: ${remSize(160)};
+    background: ${prop('backgroundColor')};
+    }
+  .sketches-table__row {
+    background: ${prop('backgroundColor')} !important; height: auto
+  }
 
   tr {
     align-self: start;
diff --git a/client/theme.js b/client/theme.js
index 1fc6dada..fec3e93d 100644
--- a/client/theme.js
+++ b/client/theme.js
@@ -104,6 +104,8 @@ export default {
       border: grays.middleLight
     },
     Separator: grays.middleLight,
+
+    TabHighlight: colors.p5jsPink,
   },
   [Theme.dark]: {
     colors,
@@ -149,6 +151,8 @@ export default {
       border: grays.middleDark
     },
     Separator: grays.middleDark,
+
+    TabHighlight: colors.p5jsPink,
   },
   [Theme.contrast]: {
     colors,
@@ -194,5 +198,7 @@ export default {
       border: grays.middleDark
     },
     Separator: grays.middleDark,
+
+    TabHighlight: colors.yellow,
   },
 };