From f6bff5fcdce5fe03b69cde183d32a88ebea89d6a Mon Sep 17 00:00:00 2001
From: Eesha <eeshaulh@gmail.com>
Date: Sun, 10 Nov 2024 22:11:01 -0500
Subject: [PATCH] fix minor build errors

---
 .../app/src/components/DragAndDropTextBox.tsx | 47 ++++++++++++-------
 packages/app/src/components/Footer.tsx        | 16 ++++---
 2 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/packages/app/src/components/DragAndDropTextBox.tsx b/packages/app/src/components/DragAndDropTextBox.tsx
index 9f51137..da86c67 100644
--- a/packages/app/src/components/DragAndDropTextBox.tsx
+++ b/packages/app/src/components/DragAndDropTextBox.tsx
@@ -1,20 +1,31 @@
 import React from "react";
-import styled from 'styled-components';
+import styled, { css, ThemeProvider } from 'styled-components';
+import { useTheme } from "@mui/material/styles";
 import { useDragAndDrop } from '../hooks/useDragAndDrop';
+import { Typography } from "@mui/material";
 
-const DragAndDropTextBoxWrapper = styled.div`
+const DragAndDropTextBoxWrapper = styled.div<{ highlighted: boolean }>`
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	border: 2px dashed #ccc;
 	padding: 20px;
+	${({ highlighted, theme }) =>
+    highlighted
+      ? css`
+          border-color: ${theme.palette.accent.main};
+		  color: ${theme.palette.accent.main}
+        `
+      : ''}
 `;
 
 type Props = {
 	onFileDrop: (file: File) => void;
+	highlighted?: boolean;
 };
 
-const DragAndDropTextBox: React.FC<Props> = ({onFileDrop}) => {
+const DragAndDropTextBox: React.FC<Props> = ({ onFileDrop, highlighted = false }) => {
+	const theme = useTheme();
     const {
 		dragging,
 		handleDragEnter,
@@ -25,20 +36,24 @@ const DragAndDropTextBox: React.FC<Props> = ({onFileDrop}) => {
 	} = useDragAndDrop();
 
 	return (
-		<DragAndDropTextBoxWrapper
-			onDragEnter={handleDragEnter}
-			onDragLeave={handleDragLeave}
-			onDragOver={handleDragOver}
-			onDragEnd={handleDragEnd}
-			onDrop={(e) => handleDrop(e, onFileDrop)}
-		>
-			{dragging ? (
-				<div>Drop here</div>
-			) : (
-				<div>Drop .eml file here</div>
-			)}
-		</DragAndDropTextBoxWrapper>
+		<ThemeProvider theme={theme}>
+			<DragAndDropTextBoxWrapper
+				highlighted={highlighted}
+				onDragEnter={handleDragEnter}
+				onDragLeave={handleDragLeave}
+				onDragOver={handleDragOver}
+				onDragEnd={handleDragEnd}
+				onDrop={(e) => handleDrop(e, onFileDrop)}
+			>
+				{dragging ? (
+					<div> Drop here</div>
+				) : (
+					<div>Drop .eml file here </div>
+				)}
+			</DragAndDropTextBoxWrapper>
+		</ThemeProvider>
 	);
 };
 
 export default DragAndDropTextBox;
+
diff --git a/packages/app/src/components/Footer.tsx b/packages/app/src/components/Footer.tsx
index 7f4ff82..7cfaf29 100644
--- a/packages/app/src/components/Footer.tsx
+++ b/packages/app/src/components/Footer.tsx
@@ -1,20 +1,22 @@
 'use client';
 import { useState } from 'react';
-import { Box, Typography, useTheme, Link } from "@mui/material";
+import { Box, Typography, Link } from "@mui/material";
+
+type ImgNames = 'XLogo' | 'YoutubeLogo' | 'TelegramLogo' | 'GithubLogo';
 
 const Footer = () => {
-  const [hoveredImgs, setHoveredImgs] = useState({
+  const [hoveredImgs, setHoveredImgs] = useState<Record<ImgNames, boolean>>({
     XLogo: false,
     YoutubeLogo: false,
     TelegramLogo: false,
     GithubLogo: false,
   });
 
-  const handleMouseEnter = (img) => {
+  const handleMouseEnter = (img: ImgNames) => {
     setHoveredImgs((prev) => ({ ...prev, [img]: true }));
   };
 
-  const handleMouseLeave = (img) => {
+  const handleMouseLeave = (img: ImgNames) => {
     setHoveredImgs((prev) => ({ ...prev, [img]: false }));
   };
 
@@ -70,9 +72,9 @@ const Footer = () => {
             >
               <Box
                 component="img"
-                onMouseEnter={() => handleMouseEnter(icon.name)}
-                onMouseLeave={() => handleMouseLeave(icon.name)}
-                src={hoveredImgs[icon.name] ? icon.hoveredImgSrc : icon.imgSrc}
+                onMouseEnter={() => handleMouseEnter(icon.name as ImgNames)}
+                onMouseLeave={() => handleMouseLeave(icon.name as ImgNames)}
+                src={hoveredImgs[icon.name as ImgNames] ? icon.hoveredImgSrc : icon.imgSrc}
                 alt={icon.alt}
                 height={20}
                 width={20}