From 63d926e1965ae3ccd45ba98e17d390d5f2f2767b Mon Sep 17 00:00:00 2001
From: Nan Yu <thenanyu@gmail.com>
Date: Mon, 7 Dec 2020 08:56:07 -0800
Subject: [PATCH] slightly nicer color definitions (#1705)

---
 app/components/DropToImport.js | 23 +++++++++++++----------
 shared/styles/theme.js         |  3 ++-
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/app/components/DropToImport.js b/app/components/DropToImport.js
index 5c2859d6..f5dc68e6 100644
--- a/app/components/DropToImport.js
+++ b/app/components/DropToImport.js
@@ -5,7 +5,7 @@ import { observer, inject } from "mobx-react";
 import * as React from "react";
 import Dropzone from "react-dropzone";
 import { withRouter, type RouterHistory, type Match } from "react-router-dom";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import DocumentsStore from "stores/DocumentsStore";
 import UiStore from "stores/UiStore";
 import LoadingIndicator from "components/LoadingIndicator";
@@ -100,15 +100,18 @@ class DropToImport extends React.Component<Props> {
 
 const DropzoneContainer = styled("div")`
   border-radius: 4px;
-  background: ${({ isDragActive, theme }) =>
-    isDragActive && theme.slateDark} !important;
-  a {
-    color: ${({ isDragActive, theme }) =>
-      isDragActive && theme.white} !important;
-  }
-  svg {
-    fill: ${({ isDragActive, theme }) => isDragActive && theme.white};
-  }
+
+  ${({ isDragActive, theme }) =>
+    isDragActive &&
+    css`
+      background: ${theme.slateDark};
+      a {
+        color: ${theme.white} !important;
+      }
+      svg {
+        fill: ${theme.white};
+      }
+    `}
 `;
 
 export default inject("documents", "ui")(withRouter(DropToImport));
diff --git a/shared/styles/theme.js b/shared/styles/theme.js
index c7269a45..ba987cae 100644
--- a/shared/styles/theme.js
+++ b/shared/styles/theme.js
@@ -2,6 +2,7 @@
 import { darken, lighten } from "polished";
 
 const colors = {
+  transparent: "transparent",
   almostBlack: "#111319",
   lightBlack: "#2F3336",
   almostWhite: "#E6E6E6",
@@ -183,7 +184,7 @@ export const dark = {
   placeholder: colors.slateDark,
 
   sidebarBackground: colors.veryDarkBlue,
-  sidebarItemBackground: colors.veryDarkBlue,
+  sidebarItemBackground: colors.transparent,
   sidebarText: colors.slate,
   shadow: "rgba(0, 0, 0, 0.6)",