Fix darkmode completed files popover colors

Author: markrickert

src/components/common/CompletedFilesCounter.js

@@ -56,11 +56,11 @@ const CompletedFilesCounter = styled(
   position: fixed;
   bottom: 20px;
   right: 20px;
-  background: #d5eafd;
+  background: ${({ theme }) => theme.popover.background};
   padding: 10px;
-  border: 1px solid #1890ff;
+  border: 1px solid ${({ theme }) => theme.popover.border};
   border-radius: 20px;
-  color: #7dadda;
+  color: ${({ theme }) => theme.popover.text};
   transform: ${({ completed }) =>
     completed ? 'translateY(0px)' : 'translateY(70px)'};
   display: flex;
@@ -76,7 +76,7 @@ const CompletedFilesCounter = styled(
     `}
 
   .completedAmount {
-    color: #1890ff;
+    color: ${({ theme }) => theme.popover.border};
   }
 `
 

src/theme/index.js

@@ -33,6 +33,13 @@ export const lightTheme = {
   // Alternating Row Colors for Binary Download component
   rowEven: '#fafbfc',
   rowOdd: '#ffffff',
+
+  // The completed files counter
+  popover: {
+    background: '#d5eafd',
+    text: '#7dadda',
+    border: '#1890ff',
+  },
 }
 export const darkTheme = {
   body: '#363537',
@@ -68,4 +75,10 @@ export const darkTheme = {
   // Alternating Row Colors for Binary Download component
   rowEven: '#363537',
   rowOdd: '#222223',
+
+  popover: {
+    text: '#7dadda',
+    background: '#0E5699',
+    border: '#aabbca',
+  },
 }