fix: Improve image clarity and CSS modules for BMDashboard cards

Author: SreePujitha01

src/components/BMDashboard/BMDashboard.module.css

@@ -617,4 +617,27 @@
   color: #ffffff !important;
 }
 
+/* Image clarity improvements for BMDashboard */
+.bm-dashboard-container img,
+.bm-dashboard-dark img,
+.bm-dashboard-light img {
+  image-rendering: auto !important;
+  -webkit-filter: none !important;
+  filter: none !important;
+  backface-visibility: hidden !important;
+  transform: translateZ(0) !important;
+  -webkit-font-smoothing: antialiased !important;
+  -moz-osx-font-smoothing: grayscale !important;
+}
+
+.bm-dashboard-container .single-card__img img,
+.bm-dashboard-dark .single-card__img img,
+.bm-dashboard-light .single-card__img img {
+  object-fit: cover !important;
+  object-position: center !important;
+  max-width: 100% !important;
+  height: auto !important;
+  image-rendering: auto !important;
+}
+
 

src/components/BMDashboard/Projects/ProjectDetails/Materials/MaterialCard.jsx

@@ -1,16 +1,25 @@
+import styles from '../ProjectDetails.module.css';
+
 function MaterialCard() {
   return (
-    <div className="single-card">
-      <div className="single-card__img">
+    <div className={styles['single-card']}>
+      <div className={styles['single-card__img']}>
         <img
-          alt=""
+          alt="Material"
           src="https://www.theforkliftcenter.com/images/forklift-hero-left.png"
           width="100%"
+          style={{
+            imageRendering: 'auto',
+            filter: 'none',
+            objectFit: 'cover',
+            maxWidth: '100%',
+            height: 'auto',
+          }}
         />
       </div>
-      <div className="single-card__body">
+      <div className={styles['single-card__body']}>
         <h3>Card title</h3>
-        <div className="single-card__info">Less than ___% left</div>
+        <div className={styles['single-card__info']}>Less than ___% left</div>
       </div>
     </div>
   );

src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.module.css

@@ -191,12 +191,19 @@
   justify-content: center;
   align-items: center;
   overflow: hidden;
+  background-color: #ffffff;
+  border-radius: 5px 5px 0 0;
 }
 
 .single-card__img img {
   max-width: 100%;
   height: auto;
-  object-fit: contain;
+  object-fit: cover;
+  image-rendering: auto;
+  filter: none;
+  -webkit-filter: none;
+  backface-visibility: hidden;
+  transform: translateZ(0);
 }
 
 .single-card:hover {

src/components/BMDashboard/Projects/ProjectDetails/RentedTools/ToolCard.jsx

@@ -1,16 +1,25 @@
+import styles from '../ProjectDetails.module.css';
+
 function ToolCard() {
   return (
-    <div className="single-card">
-      <div className="single-card__img">
+    <div className={styles['single-card']}>
+      <div className={styles['single-card__img']}>
         <img
-          alt=""
+          alt="Equipment"
           src="https://www.theforkliftcenter.com/images/forklift-hero-left.png"
           width="100%"
+          style={{
+            imageRendering: 'auto',
+            filter: 'none',
+            objectFit: 'cover',
+            maxWidth: '100%',
+            height: 'auto',
+          }}
         />
       </div>
-      <div className="single-card__body">
+      <div className={styles['single-card__body']}>
         <h3>Card title</h3>
-        <div className="single-card__info">Term ends in __ hours.</div>
+        <div className={styles['single-card__info']}>Term ends in __ hours.</div>
       </div>
     </div>
   );