fix: improved theme colors for file dropzone

Author: yougotwill

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>

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)',
 };

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)',
 };

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)',
 };

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)',
 };

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) {