diff --git a/src/app/favorites/page.tsx b/src/app/favorites/page.tsx index 9aad30f6..1385d91a 100644 --- a/src/app/favorites/page.tsx +++ b/src/app/favorites/page.tsx @@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'; import { useRouter } from 'next/navigation'; -import { Body1Bold, Body2 } from '@/styles/fonts'; +import { Body1Bold, Body2, Body3 } from '@/styles/fonts'; import BackButton from '../../components/BackButton/BackButton'; import { @@ -21,6 +21,7 @@ import { TransparentButton, ViewItem, Fullscreen, + Hover, } from './styles'; import { Product } from '../../schema/schema'; @@ -28,6 +29,7 @@ import { Product } from '../../schema/schema'; export default function FavoritesPage() { const [Favorites, setFavorites] = useState([]); const router = useRouter(); + const [hovering, setHovering] = useState(false); async function fetchProducts() { const data = (await arrayOfFavorites()) as Product[]; @@ -68,7 +70,12 @@ export default function FavoritesPage() { clickFunctions({ fav: favorite })} + onMouseEnter={() => setHovering(true)} + onMouseLeave={() => setHovering(false)} > + + Remove from favorites + diff --git a/src/app/favorites/styles.ts b/src/app/favorites/styles.ts index 1cf4c27e..a3f63c92 100644 --- a/src/app/favorites/styles.ts +++ b/src/app/favorites/styles.ts @@ -93,3 +93,19 @@ export const Fullscreen = styled.div` flex-direction: column; align-items: center; `; + +export const Hover = styled.div<{ $ishovering?: boolean }>` + visibility: ${props => (props.$ishovering ? 'visible' : 'hidden')}; + margin-bottom: 7px; + transform: translate(-10px, 0px); + color: black; + border: none; + width: 156px; + height: 26px; + border-radius: 8px; + background: var(--Light-Periwinkle, #f4f7ff); + box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.2); + padding-top: 6px; + position: relative; + text-align: center; +`; diff --git a/src/app/profileScreen/page.tsx b/src/app/profileScreen/page.tsx index 48e2c696..f61beb77 100644 --- a/src/app/profileScreen/page.tsx +++ b/src/app/profileScreen/page.tsx @@ -37,6 +37,7 @@ import { BlankSpace, HeaderDiv, Fullscreen, + Hover, } from './styles'; import { signOut } from '../../api/supabase/auth/auth'; import 'react-toastify/dist/ReactToastify.css'; @@ -47,6 +48,8 @@ function FavoriteSection(props: { setFavorites: (category: Product[]) => void; }) { const { Favorites, setFavorites } = props; + const [hovering, setHovering] = useState(false); + async function clickFunctions(props2: { fav: Product }) { const { fav } = props2; addOrRemoveProductFromFavorite(fav, false); @@ -72,7 +75,12 @@ function FavoriteSection(props: { clickFunctions({ fav: favorite })} + onMouseEnter={() => setHovering(true)} + onMouseLeave={() => setHovering(false)} > + + Remove from favorites + diff --git a/src/app/profileScreen/styles.ts b/src/app/profileScreen/styles.ts index 7afc9ff6..8dc336bd 100644 --- a/src/app/profileScreen/styles.ts +++ b/src/app/profileScreen/styles.ts @@ -143,3 +143,18 @@ export const Fullscreen = styled.div` width: 100%; height: 100%; `; + +export const Hover = styled.div<{ $ishovering?: boolean }>` + visibility: ${props => (props.$ishovering ? 'visible' : 'hidden')}; + margin-bottom: 7px; + color: black; + border: none; + width: 156px; + height: 26px; + border-radius: 8px; + background: var(--Light-Periwinkle, #f4f7ff); + box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.2); + padding-top: 6px; + position: relative; + text-align: center; +`;