done

calblueprint · Apr 8, 2024 · 1ace690 · 1ace690
1 parent 1e473b2
commit 1ace690
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 1 deletion.
diff --git 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,13 +21,15 @@ import {
   TransparentButton,
   ViewItem,
   Fullscreen,
+  Hover,
 } from './styles';
 
 import { Product } from '../../schema/schema';
 
 export default function FavoritesPage() {
   const [Favorites, setFavorites] = useState<Product[]>([]);
   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() {
 
               <TransparentButton
                 onClick={() => clickFunctions({ fav: favorite })}
+                onMouseEnter={() => setHovering(true)}
+                onMouseLeave={() => setHovering(false)}
               >
+                <Hover $ishovering={hovering}>
+                  <Body3>Remove from favorites</Body3>
+                </Hover>
                 <HeartIcon />
               </TransparentButton>
             </FavoriteDiv>

diff --git 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
@@ -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: {
             </ProductNameDiv>
             <TransparentButton
               onClick={() => clickFunctions({ fav: favorite })}
+              onMouseEnter={() => setHovering(true)}
+              onMouseLeave={() => setHovering(false)}
             >
+              <Hover $ishovering={hovering}>
+                <Body3>Remove from favorites</Body3>
+              </Hover>
               <HeartIcon />
             </TransparentButton>
           </FavoriteDiv>

diff --git 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;
+`;