Skip to content

Fix: Profile upload icon issue and product card layout in mobile layout #348

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Aryan0699 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix: Profile upload icon issue and product card layout in mobile layout #348

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/display-products.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -292,7 +292,7 @@ const DisplayProducts = ({
) : null}
{filteredProducts.length > 0 && (
<>
<div className="grid max-w-full grid-cols-[repeat(auto-fill,minmax(280px,1fr))] justify-items-stretch gap-4 overflow-x-hidden">
<div className="grid max-w-full grid-cols-1 justify-items-stretch gap-4 overflow-x-hidden px-2 sm:grid-cols-[repeat(auto-fill,minmax(280px,1fr))] sm:px-0">
{getCurrentPageProducts().map(
(productData: ProductData, index) => (
<ProductCard
Expand Down
27 changes: 11 additions & 16 deletions components/home/marketplace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ function MarketplacePage({
focusedPubkey &&
reviewsContext.merchantReviewsData.has(focusedPubkey) &&
typeof reviewsContext.merchantReviewsData.get(focusedPubkey) !=
"undefined" &&
"undefined" &&
reviewsContext.productReviewsData.has(focusedPubkey) &&
typeof reviewsContext.productReviewsData.get(focusedPubkey) != "undefined"
) {
Expand Down Expand Up @@ -345,11 +345,10 @@ function MarketplacePage({
return (
<Chip
key={index}
className={`text-light-text dark:text-dark-text ${
value === "1"
className={`text-light-text dark:text-dark-text ${value === "1"
? "bg-green-500"
: "bg-red-500"
}`}
}`}
>
{`overall: ${value === "1" ? "👍" : "👎"}`}
</Chip>
Expand All @@ -358,15 +357,13 @@ function MarketplacePage({
return (
<Chip
key={index}
className={`text-light-text dark:text-dark-text ${
value === "1"
className={`text-light-text dark:text-dark-text ${value === "1"
? "bg-green-500"
: "bg-red-500"
}`}
}`}
>
{`${category}: ${
value === "1" ? "👍" : "👎"
}`}
{`${category}: ${value === "1" ? "👍" : "👎"
}`}
</Chip>
);
}
Expand Down Expand Up @@ -577,11 +574,10 @@ function MarketplacePage({
{merchantReview && merchantReview >= 0.5 ? (
<>
<FaceSmileIcon
className={`h-10 w-10 p-1 ${
merchantReview >= 0.75
className={`h-10 w-10 p-1 ${merchantReview >= 0.75
? "text-green-500"
: "text-green-300"
}`}
}`}
/>
<span className="text-light-text dark:text-dark-text mr-2 text-sm whitespace-nowrap">
{merchantQuality}
Expand All @@ -590,11 +586,10 @@ function MarketplacePage({
) : (
<>
<FaceFrownIcon
className={`h-10 w-10 p-1 ${
merchantReview >= 0.25
className={`h-10 w-10 p-1 ${merchantReview >= 0.25
? "text-red-300"
: "text-red-500"
}`}
}`}
/>
<span className="text-light-text dark:text-dark-text mr-2 text-sm whitespace-nowrap">
{merchantQuality}
Expand Down
4 changes: 2 additions & 2 deletions components/nav-top.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,7 @@ const TopNav = ({
{signedIn ? (
<ProfileWithDropdown
pubkey={userPubkey!}
baseClassname="flex-shrink-0 dark:hover:shopstr-yellow-light rounded-3xl hover:scale-105 hover:bg-light-bg hover:shadow-lg dark:hover:bg-dark-bg"
baseClassname="flex-shrink-0 rounded-full transition-opacity hover:opacity-80"
dropDownKeys={[
"shop_profile",
"user_profile",
Expand Down Expand Up @@ -309,7 +309,7 @@ const TopNav = ({
{signedIn ? (
<ProfileWithDropdown
pubkey={userPubkey!}
baseClassname="justify-start dark:hover:shopstr-yellow-light pl-2 rounded-3xl py-2 hover:scale-105 hover:bg-light-bg hover:shadow-lg dark:hover:bg-dark-bg"
baseClassname="justify-start pl-2 rounded-full py-2 transition-opacity hover:opacity-80"
dropDownKeys={[
"shop_profile",
"user_profile",
Expand Down
2 changes: 2 additions & 0 deletions components/utility-components/profile/profile-dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,6 +319,8 @@ export const ProfileWithDropdown = ({
as="button"
avatarProps={{
src: pfp,
size: "sm",
className: "rounded-full flex-shrink-0",
}}
className={"transition-transform"}
classNames={{
Expand Down
30 changes: 15 additions & 15 deletions pages/settings/user-profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,8 +111,8 @@ const UserProfilePage = () => {
<ShopstrSpinner />
) : (
<>
<div className="bg-light-fg dark:bg-dark-fg mb-20 h-40 rounded-lg">
<div className="bg-shopstr-purple-light dark:bg-dark-fg relative flex h-40 items-center justify-center rounded-lg">
<div className="relative mb-14">
<div className="relative flex h-40 items-center justify-center overflow-hidden rounded-lg bg-shopstr-purple-light dark:bg-dark-fg">
{watchBanner && (
<Image
alt={"User banner image"}
Expand All @@ -121,36 +121,36 @@ const UserProfilePage = () => {
/>
)}
<FileUploaderButton
className={`bg-shopstr-purple absolute right-5 bottom-5 z-20 border-2 border-white shadow-md ${SHOPSTRBUTTONCLASSNAMES}`}
className={`absolute bottom-3 right-3 z-20 border-2 border-white bg-shopstr-purple shadow-md ${SHOPSTRBUTTONCLASSNAMES}`}
imgCallbackOnUpload={(imgUrl) => setValue("banner", imgUrl)}
>
Upload Banner
</FileUploaderButton>
</div>
<div className="flex items-center justify-center">
<div className="relative z-20 mt-[-3rem] h-24 w-24">
<div className="">
<FileUploaderButton
isIconOnly
className={`absolute right-[-0.5rem] bottom-[-0.5rem] z-20 ${SHOPSTRBUTTONCLASSNAMES}`}
imgCallbackOnUpload={(imgUrl) =>
setValue("picture", imgUrl)
}
/>
<div className="absolute -bottom-12 left-1/2 z-20 -translate-x-1/2">
<div className="relative h-24 w-24">
<div className="h-24 w-24 overflow-hidden rounded-full">
{watchPicture ? (
<Image
src={watchPicture}
alt="user profile picture"
className="rounded-full"
className="h-full w-full rounded-full object-cover"
/>
) : (
<Image
src={defaultImage}
alt="user profile picture"
className="rounded-full"
className="h-full w-full rounded-full object-cover"
/>
)}
</div>
<FileUploaderButton
isIconOnly
className={`absolute -bottom-1 -right-1 z-30 transition-transform hover:scale-110 ${SHOPSTRBUTTONCLASSNAMES}`}
imgCallbackOnUpload={(imgUrl) =>
setValue("picture", imgUrl)
}
/>
</div>
</div>
</div>
Expand Down
2 changes: 2 additions & 0 deletions styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,14 @@ html {
height: 100%;
overflow: hidden;
position: relative;
scrollbar-gutter: stable;
}

body {
height: 100%;
overflow: auto;
position: relative;
scrollbar-gutter: stable;
}

.text-xxs {
Expand Down
12 changes: 6 additions & 6 deletions utils/nostr/fetch-service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -788,15 +788,15 @@ export const fetchReviews = async (
if (
!existingReview ||
createdAt >
Number(existingReview.find((item) => item[0] === "created_at")?.[1])
Number(existingReview.find((item) => item[0] === "created_at")?.[1])
) {
const updatedReview = existingReview
? existingReview.map((item) => {
if (item[0] === "created_at") {
return ["created_at", createdAt.toString()];
}
return item;
})
if (item[0] === "created_at") {
return ["created_at", createdAt.toString()];
}
return item;
})
: [...ratingTags, ["created_at", createdAt.toString()]];

productReviews.set(event.pubkey, updatedReview);
Expand Down