Skip to content

Commit

Permalink
added-stylings
Browse files Browse the repository at this point in the history
  • Loading branch information
@ProgrammerDATCH
ProgrammerDATCH committed Jul 11, 2024
1 parent bc1bfdd commit 2e2ac98
Show file tree
Hide file tree
Showing 5 changed files with 28 additions and 17 deletions.
Binary file added public/assets/images/user.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion src/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
31 changes: 21 additions & 10 deletions src/assets/styles/SingleProduct.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

.images-container {
display: flex;
flex: 0 0 60%;
flex: 0 0 60%;
flex-direction: row;
align-items: center;
width: 100%;
Expand All @@ -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;
Expand All @@ -56,7 +58,7 @@
align-items: center;
box-shadow: 0 0 2px #f60;
border-radius: 10px;


.main-image {
width: 100%;
Expand Down Expand Up @@ -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%;
Expand Down Expand Up @@ -306,7 +309,8 @@
overflow: hidden;
width: 30px;
height: 30px;
background-color: #f60;
background-color: $primary-color;
padding: 3px;

img {
width: 100%;
Expand Down Expand Up @@ -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%;
}
}
}
Expand Down
5 changes: 3 additions & 2 deletions src/components/product/SingleProduct.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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>
)
Expand All @@ -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>
Expand Down
6 changes: 2 additions & 4 deletions src/store/features/product/singleProductSlice.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 2e2ac98

Please sign in to comment.