From e293a832fee9fb1772177a23b42f7c0bf3fbe997 Mon Sep 17 00:00:00 2001
From: Rucha Ambaliya <Rambaliyaforall@gmail.com>
Date: Mon, 17 Feb 2025 19:15:28 +0530
Subject: [PATCH] Fixed carousel buttons not visible on dark image (black) and
 opening attachment from the inbox cropinf the image

---
 .../src/components/inbox/components/AttachmentViewerForm.tsx  | 2 +-
 frontend/src/components/inbox/components/Carousel.tsx         | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/inbox/components/AttachmentViewerForm.tsx b/frontend/src/components/inbox/components/AttachmentViewerForm.tsx
index de97482a..70446446 100644
--- a/frontend/src/components/inbox/components/AttachmentViewerForm.tsx
+++ b/frontend/src/components/inbox/components/AttachmentViewerForm.tsx
@@ -23,7 +23,7 @@ export const AttachmentViewerForm: FC<
     <Wrapper {...WrapperProps}>
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
-        width="auto"
+        width="100%"
         height={800}
         style={{
           cursor: "pointer",
diff --git a/frontend/src/components/inbox/components/Carousel.tsx b/frontend/src/components/inbox/components/Carousel.tsx
index d1e57c40..70a11640 100644
--- a/frontend/src/components/inbox/components/Carousel.tsx
+++ b/frontend/src/components/inbox/components/Carousel.tsx
@@ -30,7 +30,7 @@ import {
 
 const CARD_WIDTH = 300;
 const StyledIconButton = styled(IconButton)({
-  opacity: 0.1,
+  opacity: 0.2,
   zIndex: 9999,
   position: "absolute",
   top: "50%",
@@ -38,7 +38,9 @@ const StyledIconButton = styled(IconButton)({
   transition: "all 0.1s",
   ".carousel-wrapper:hover &": {
     opacity: 1,
+    backgroundColor: "#fff"
   },
+  backgroundColor: "#fff"
 });
 const StyledCarouselDiv = styled("div")({
   display: "flex",