From 31f786aecde402065b2e03106197d43100fec5d8 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Thu, 10 Nov 2022 16:19:09 +1100
Subject: [PATCH] fix: improved theme colors for file dropzone

---
 ts/components/conversation/SessionFileDropzone.tsx | 10 +++++++---
 ts/themes/classicDark.ts                           |  3 +++
 ts/themes/classicLight.ts                          |  3 +++
 ts/themes/oceanDark.ts                             |  3 +++
 ts/themes/oceanLight.ts                            |  3 +++
 ts/themes/variableColors.tsx                       |  4 ++++
 6 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/ts/components/conversation/SessionFileDropzone.tsx b/ts/components/conversation/SessionFileDropzone.tsx
index 108ca7735..9a6b87430 100644
--- a/ts/components/conversation/SessionFileDropzone.tsx
+++ b/ts/components/conversation/SessionFileDropzone.tsx
@@ -12,8 +12,8 @@ const DropZoneContainer = styled.div`
 `;
 
 const DropZoneWithBorder = styled.div`
-  border: dashed 4px var(--primary-color);
-  background-color: var(--message-link-preview-background-color);
+  border: dashed 4px var(--file-dropzone-border-color);
+  background-color: var(--file-dropzone-background-color);
   position: absolute;
   top: 0;
   bottom: 0;
@@ -29,7 +29,11 @@ export const SessionFileDropzone = () => {
     <DropZoneContainer>
       <DropZoneWithBorder>
         <Flex container={true} justifyContent="space-around" height="100%" alignItems="center">
-          <SessionIcon iconColor="var(--primary-color)" iconSize={'max'} iconType="circlePlus" />
+          <SessionIcon
+            iconColor="var(--file-dropzone-border-color)"
+            iconSize={'max'}
+            iconType="circlePlus"
+          />
         </Flex>
       </DropZoneWithBorder>
     </DropZoneContainer>
diff --git a/ts/themes/classicDark.ts b/ts/themes/classicDark.ts
index d4539ce9b..323ebcb03 100644
--- a/ts/themes/classicDark.ts
+++ b/ts/themes/classicDark.ts
@@ -153,4 +153,7 @@ export const classicDark: ThemeColorVariables = {
   '--call-buttons-icon-disabled-color': 'var(--text-primary-color)',
   '--call-buttons-dropdown-color': 'var(--text-primary-color)',
   '--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
+
+  '--file-dropzone-background-color': 'var(--message-link-preview-background-color)',
+  '--file-dropzone-border-color': 'var(--primary-color)',
 };
diff --git a/ts/themes/classicLight.ts b/ts/themes/classicLight.ts
index 931ec4838..87584cd38 100644
--- a/ts/themes/classicLight.ts
+++ b/ts/themes/classicLight.ts
@@ -153,4 +153,7 @@ export const classicLight: ThemeColorVariables = {
   '--call-buttons-icon-disabled-color': 'var(--disabled-color)',
   '--call-buttons-dropdown-color': 'var(--text-primary-color)',
   '--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
+
+  '--file-dropzone-background-color': 'var(--message-link-preview-background-color)',
+  '--file-dropzone-border-color': 'var(--text-primary-color)',
 };
diff --git a/ts/themes/oceanDark.ts b/ts/themes/oceanDark.ts
index 2de8563e6..fe9908591 100644
--- a/ts/themes/oceanDark.ts
+++ b/ts/themes/oceanDark.ts
@@ -154,4 +154,7 @@ export const oceanDark: ThemeColorVariables = {
   '--call-buttons-icon-disabled-color': THEMES.OCEAN_DARK.COLOR7!,
   '--call-buttons-dropdown-color': 'var(--text-primary-color)',
   '--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
+
+  '--file-dropzone-background-color': 'var(--message-link-preview-background-color)',
+  '--file-dropzone-border-color': 'var(--primary-color)',
 };
diff --git a/ts/themes/oceanLight.ts b/ts/themes/oceanLight.ts
index fd2e30f6e..4cf2d064d 100644
--- a/ts/themes/oceanLight.ts
+++ b/ts/themes/oceanLight.ts
@@ -154,4 +154,7 @@ export const oceanLight: ThemeColorVariables = {
   '--call-buttons-icon-disabled-color': 'var(--disabled-color)',
   '--call-buttons-dropdown-color': 'var(--text-primary-color)',
   '--call-buttons-dropdown-shadow': '0 0 4px 0 var(grey-color)',
+
+  '--file-dropzone-background-color': 'var(--message-link-preview-background-color)',
+  '--file-dropzone-border-color': 'var(--text-primary-color)',
 };
diff --git a/ts/themes/variableColors.tsx b/ts/themes/variableColors.tsx
index 0d18afb29..105825bc5 100644
--- a/ts/themes/variableColors.tsx
+++ b/ts/themes/variableColors.tsx
@@ -189,6 +189,10 @@ export type ThemeColorVariables = {
   '--call-buttons-icon-disabled-color': string;
   '--call-buttons-dropdown-color': string;
   '--call-buttons-dropdown-shadow': string;
+
+  /* File Dropzone */
+  '--file-dropzone-background-color': string;
+  '--file-dropzone-border-color': string;
 };
 
 export function loadThemeColors(variables: ThemeColorVariables) {