From 8d0cfdcfb4d057bee0a50b9e5fe0062ce1b285a9 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Mon, 10 Aug 2020 15:04:41 -0300
Subject: [PATCH] :lipstick: improve visibility on light mode

---
 client/modules/Mobile/MobileDashboardView.jsx |  6 +++---
 client/theme.js                               | 20 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index 429687e5..99983c86 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -51,7 +51,7 @@ const ContentWrapper = styled(Content)`
   }
 
   tbody td:nth-child(2) { grid-column-start: 2 }
-  tbody td:last-child { justify-self: end }
+  tbody td:last-child { justify-self: end; text-align: end; }
 
   /* .sketch-list__sort-button { padding: 0 } */
   tbody {
@@ -60,10 +60,10 @@ const ContentWrapper = styled(Content)`
 
   .sketches-table-container {
     padding-bottom: ${remSize(160)};
-    background: ${prop('backgroundColor')};
+    background: ${prop('SketchList.background')};
     }
   .sketches-table__row {
-    background: ${prop('backgroundColor')} !important; height: auto
+    background: ${prop('SketchList.card.background')} !important; height: auto
   }
 
   tr {
diff --git a/client/theme.js b/client/theme.js
index fec3e93d..9d096d78 100644
--- a/client/theme.js
+++ b/client/theme.js
@@ -106,6 +106,12 @@ export default {
     Separator: grays.middleLight,
 
     TabHighlight: colors.p5jsPink,
+    SketchList: {
+      background: grays.lighter,
+      card: {
+        background: grays.lighter
+      }
+    }
   },
   [Theme.dark]: {
     colors,
@@ -153,6 +159,12 @@ export default {
     Separator: grays.middleDark,
 
     TabHighlight: colors.p5jsPink,
+    SketchList: {
+      background: grays.darker,
+      card: {
+        background: grays.dark
+      }
+    }
   },
   [Theme.contrast]: {
     colors,
@@ -199,6 +211,12 @@ export default {
     },
     Separator: grays.middleDark,
 
-    TabHighlight: colors.yellow,
+    TabHighlight: grays.darker,
+    SketchList: {
+      background: colors.yellow,
+      card: {
+        background: grays.dark
+      }
+    }
   },
 };