Merge pull request #767 from Rucha-Ambaliya/main

Fixed carousel buttons not visible on dark image (black) and opening attachment from the inbox croping the image

frontend/src/components/inbox/components/AttachmentViewerForm.tsx

@@ -23,11 +23,11 @@ export const AttachmentViewerForm: FC<
     <Wrapper {...WrapperProps}>
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img
-        width="auto"
-        height={800}
+        width="100%"
         style={{
           cursor: "pointer",
           objectFit: "contain",
+          maxHeight: "70vh",
         }}
         alt={data?.url}
         src={data?.url}

frontend/src/components/inbox/components/Carousel.tsx

@@ -29,7 +29,7 @@ import {
 
 const CARD_WIDTH = 300;
 const StyledIconButton = styled(IconButton)({
-  opacity: 0.1,
+  opacity: 0.2,
   zIndex: 9999,
   position: "absolute",
   top: "50%",
@@ -37,7 +37,9 @@ const StyledIconButton = styled(IconButton)({
   transition: "all 0.1s",
   ".carousel-wrapper:hover &": {
     opacity: 1,
+    backgroundColor: "#fff"
   },
+  backgroundColor: "#fff"
 });
 const StyledCarouselDiv = styled("div")({
   display: "flex",