added-stylings

Author: ProgrammerDATCH

public/assets/images/user.png

@@ -14,4 +14,5 @@
 @import './assets/styles/Sidebar.scss';
 @import './assets/styles/Header.scss';
 @import "./assets/styles/Product.scss";
-@import "./assets/styles/Loader.scss"
+@import "./assets/styles/Loader.scss";
+@import "./assets/styles/SingleProduct.scss";

src/App.scss

@@ -16,7 +16,7 @@
 
         .images-container {
             display: flex;
-            flex:  0 0 60%;
+            flex: 0 0 60%;
             flex-direction: row;
             align-items: center;
             width: 100%;
@@ -37,16 +37,18 @@
                     object-fit: cover;
                     border: 2px solid transparent;
                     cursor: pointer;
-                    &:hover{
+
+                    &:hover {
                         border: 2px solid $primary-color;
                     }
                 }
-                .active{
+
+                .active {
                     border: 2px solid $primary-color;
                 }
-                
+
             }
-            
+
             .main-image-container {
                 flex: 1;
                 overflow: hidden;
@@ -56,7 +58,7 @@
                 align-items: center;
                 box-shadow: 0 0 2px #f60;
                 border-radius: 10px;
-                
+
 
                 .main-image {
                     width: 100%;
@@ -240,16 +242,17 @@
                     align-items: center;
                     justify-content: start;
                     gap: 2rem;
-
+                    
                     .img-holder {
+                        padding: 3px;
                         display: flex;
                         justify-content: center;
                         align-items: center;
                         border-radius: 50%;
                         overflow: hidden;
                         width: 30px;
                         height: 30px;
-                        background-color: #f60;
+                        background-color: $primary-color;
 
                         img {
                             width: 100%;
@@ -306,7 +309,8 @@
                                 overflow: hidden;
                                 width: 30px;
                                 height: 30px;
-                                background-color: #f60;
+                                background-color: $primary-color;
+                                padding: 3px;
 
                                 img {
                                     width: 100%;
@@ -409,15 +413,22 @@
                     justify-content: space-between;
                     width: 100%;
                     height: 80px;
-                    .thumbnail-image{
+
+                    .thumbnail-image {
                         width: 70px;
                         height: 70px;
                     }
                 }
 
                 .main-image-container {
+                    min-width: 100%;
+                    max-width: 100%;
+                    max-height: 400px;
+                    min-height: 400px;
+
                     .main-image {
                         height: 100%;
+                        width: 100%;
                     }
                 }
             }

src/assets/styles/SingleProduct.scss

@@ -11,6 +11,7 @@ import { IProductInitialResponse } from '../../utils/types/store';
 import { Meta } from '../Meta';
 import { Link } from 'react-router-dom';
 import truncateString from '../../utils/text/truncateString';
+import UserDefaultImage from "../../../public/assets/images/user.png";
 
 const ProductComponent = ({ productId }: { productId: string }) => {
     const dispatch = useAppDispatch();
@@ -124,7 +125,7 @@ const DetailsCard = ({ children, title }: { children: React.ReactNode, title: st
 const SellerInfoCard = ({ shop }: { shop: IShop | null }) => {
     return (
         <div className='seller-info'>
-            <div className="seller-profile"><div className="img-holder"><img src={shop && shop.image || 'https://placehold.co/100x100'} alt="Shop" /> </div><span>{shop && shop.name}</span></div>
+            <div className="seller-profile"><div className="img-holder"><img src={shop && shop.image || UserDefaultImage} alt="Shop" /> </div><span>{shop && shop.name}</span></div>
             <div className="seller-description">{shop && shop.description}</div>
         </div>
     )
@@ -148,7 +149,7 @@ const ReviewsCard = ({ reviews }: { reviews: IProductReview[] | null }) => {
 const SingleReviewCard = ({ review }: { review: IProductReview }) => {
     return (
         <div className='review-card'>
-            <div className="reviewer-profile"><div className="img-holder"><img src={review.user?.profilePicture || 'https://placehold.co/100x100'} alt="Shop" /> </div><span>{`${review.user?.firstName} ${' '} ${review.user?.lastName} `} </span></div>
+            <div className="reviewer-profile"><div className="img-holder"><img src={review.user?.profilePicture || UserDefaultImage} alt="Shop" /> </div><span>{`${review.user?.firstName} ${' '} ${review.user?.lastName} `} </span></div>
             <div className="review-contents">
                 <div className="stars-container"><StarsRender count={review.rating} /></div>
                 <div className="review-date">Reviewed on {new Date(review.createdAt).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</div>

src/components/product/SingleProduct.tsx

@@ -32,12 +32,10 @@ const singleProductSlice = createSlice({
                 state.isError = null;
                 state.isSuccess = false;
             })
-            // .addCase(fetchSingleProduct.fulfilled, (state, action: PayloadAction<IProductResponse>) => {
-            .addCase(fetchSingleProduct.fulfilled, (state, action: PayloadAction<any>) => {
+            .addCase(fetchSingleProduct.fulfilled, (state, action: PayloadAction<IProductResponse>) => {
                 state.isLoading = false;
                 state.isSuccess = true;
-                // state.product = action.payload.data?.product || null;
-                state.product = action.payload.product || null;
+                state.product = action.payload.data?.product || null;
             })
             .addCase(fetchSingleProduct.rejected, (state, action: PayloadAction<any>) => {
                 state.isLoading = false;