monique/hover-button-everywhere

src/app/favorites/individualItem.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { Body1Bold, Body2, Body3 } from '@/styles/fonts';
+
+import {
+  HeartIcon,
+  Hover,
+  FavoriteDiv,
+  ProductNameDiv,
+  ViewItem,
+  TransparentButton,
+} from './styles';
+
+import { addOrRemoveProductFromFavorite } from '../../api/supabase/queries/user_queries';
+
+import { Product } from '../../schema/schema';
+
+export default function IndividualItem(props: {
+  favorite: Product;
+  setFavorites: (category: Product[]) => void;
+  Favorites: Product[];
+}) {
+  const { favorite, Favorites, setFavorites } = props;
+  const router = useRouter();
+  const [hovering, setHovering] = useState(false);
+
+  async function clickFunctions(props2: { fav: Product }) {
+    const { fav } = props2;
+    addOrRemoveProductFromFavorite(fav, false);
+    setFavorites(Favorites.filter(Prod => Prod.id !== fav.id));
+  }
+
+  return (
+    <FavoriteDiv key={favorite.id}>
+      <img
+        src={favorite.photo}
+        alt={favorite.name}
+        style={{ width: '150px', height: '150px' }}
+      />
+
+      <ProductNameDiv>
+        <Body1Bold>{favorite.name}</Body1Bold>
+        <Body2>Category: {favorite.category}</Body2>
+        <ViewItem onClick={() => router.push(`/${favorite.id}`)}>
+          <Body2>View Item</Body2>
+        </ViewItem>
+      </ProductNameDiv>
+
+      <TransparentButton
+        onClick={() => clickFunctions({ fav: favorite })}
+        onMouseEnter={() => setHovering(true)}
+        onMouseLeave={() => setHovering(false)}
+      >
+        <Hover $ishovering={hovering}>
+          <Body3>Remove from favorites</Body3>
+        </Hover>
+        <HeartIcon />
+      </TransparentButton>
+    </FavoriteDiv>
+  );
+}

src/app/favorites/page.tsx

@@ -1,33 +1,19 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { Body1Bold, Body2 } from '@/styles/fonts';
 import BackButton from '../../components/BackButton/BackButton';
+import IndividualItem from './individualItem';
 
-import {
-  arrayOfFavorites,
-  addOrRemoveProductFromFavorite,
-} from '../../api/supabase/queries/user_queries';
+import { arrayOfFavorites } from '../../api/supabase/queries/user_queries';
 
 import NavBar from '../../components/NavBarFolder/NavBar';
 
-import {
-  FavoriteDiv,
-  OutterFavoriteDiv,
-  OutterBox,
-  ProductNameDiv,
-  HeartIcon,
-  TransparentButton,
-  ViewItem,
-  Fullscreen,
-} from './styles';
+import { OutterFavoriteDiv, OutterBox, Fullscreen } from './styles';
 
 import { Product } from '../../schema/schema';
 
 export default function FavoritesPage() {
   const [Favorites, setFavorites] = useState<Product[]>([]);
-  const router = useRouter();
 
   async function fetchProducts() {
     const data = (await arrayOfFavorites()) as Product[];
@@ -37,12 +23,6 @@ export default function FavoritesPage() {
     fetchProducts();
   }, []);
 
-  async function clickFunctions(props: { fav: Product }) {
-    const { fav } = props;
-    addOrRemoveProductFromFavorite(fav, false);
-    setFavorites(Favorites.filter(Prod => Prod.id !== fav.id));
-  }
-
   return (
     <Fullscreen>
       <NavBar />
@@ -51,27 +31,12 @@ export default function FavoritesPage() {
         <h1>Favorites</h1>
         <OutterFavoriteDiv>
           {Favorites.map(favorite => (
-            <FavoriteDiv key={favorite.id}>
-              <img
-                src={favorite.photo}
-                alt={favorite.name}
-                style={{ width: '150px', height: '150px' }}
-              />
-
-              <ProductNameDiv>
-                <Body1Bold>{favorite.name}</Body1Bold>
-                <Body2>Category: {favorite.category}</Body2>
-                <ViewItem onClick={() => router.push(`/${favorite.id}`)}>
-                  <Body2>View Item</Body2>
-                </ViewItem>
-              </ProductNameDiv>
-
-              <TransparentButton
-                onClick={() => clickFunctions({ fav: favorite })}
-              >
-                <HeartIcon />
-              </TransparentButton>
-            </FavoriteDiv>
+            <IndividualItem
+              key={favorite.id}
+              favorite={favorite}
+              setFavorites={setFavorites}
+              Favorites={Favorites}
+            />
           ))}
         </OutterFavoriteDiv>
       </OutterBox>

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

src/app/orderHistory/page 2.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { Heading1 } from '@/styles/fonts';
+import OrderDetailsWithProducts from '../../components/OrderHistory/OrderHistoryBox';
+import { fetchOrderIdsByUserIdSorted } from '../../api/supabase/queries/order_queries';
+
+import {
+  OrderHistoryContainer,
+  OutterBox,
+  NavBarMovedUP,
+  Fullscreen,
+} from './styles';
+import BackButton from '../../components/BackButton/BackButton';
+
+function OrderHistory() {
+  const [orderIds, setOrderIds] = useState<number[]>([]);
+
+  useEffect(() => {
+    const fetchIds = async () => {
+      const ids = await fetchOrderIdsByUserIdSorted();
+      setOrderIds(ids);
+    };
+
+    fetchIds();
+  }, []);
+
+  return (
+    <Fullscreen>
+      <NavBarMovedUP />
+      <OutterBox>
+        <BackButton destination="./profileScreen" />
+        <Heading1>Order History</Heading1>
+        <OrderHistoryContainer>
+          {orderIds.length > 0 ? (
+            orderIds.map((orderId: number) => (
+              <OrderDetailsWithProducts key={orderId} orderId={orderId} />
+            ))
+          ) : (
+            <div>Loading...</div>
+          )}
+        </OrderHistoryContainer>
+      </OutterBox>
+    </Fullscreen>
+  );
+}
+
+export default OrderHistory;

src/app/orderHistory/styles 2.ts

@@ -0,0 +1,49 @@
+// styles.ts (for styled-components)
+import styled from 'styled-components';
+import NavBar from '../../components/NavBarFolder/NavBar';
+
+import Footer from '../../components/FooterFolder/Footer';
+
+export const FooterMoved = styled(Footer)`
+  left: 0;
+`;
+
+export const NavBarMovedUP = styled(NavBar)`
+  position: relative;
+`;
+
+export const OutterBox = styled.div`
+  width: 900px;
+  margin: 0 auto; // This will center the OutterBox
+`;
+
+export const OrderHistoryContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 10px;
+  background: var(--White, #fff);
+  box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
+  width: 800px; // Width of the outer box
+  height: 700px;
+  overflow: scroll;
+  margin-top: 10px;
+  padding: 0; // Ensure there's no padding pushing the internal boxes inward
+`;
+
+export const OrderHistoryBox = styled.div`
+  width: 100%; // Make internal box take full width of the container
+  margin: 20px 0; // Keep vertical spacing between orders
+  padding: 30px; // Inner spacing for content inside the box
+  border-radius: 8px;
+  background: #fff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  overflow-y: auto;
+`;
+export const Fullscreen = styled.div`
+  width: 100%;
+  height: 100%;
+`;

src/app/profileScreen/individualItem.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+import { Body1Bold, Body2, Body3 } from '@/styles/fonts';
+
+import { HeartIcon, Hover, FavoriteDiv, ProductNameDiv } from './styles';
+
+import { addOrRemoveProductFromFavorite } from '../../api/supabase/queries/user_queries';
+
+import { Product } from '../../schema/schema';
+import { TransparentButton } from '../favorites/styles';
+
+export default function IndividualItem(props: {
+  favorite: Product;
+  setFavorites: (category: Product[]) => void;
+  Favorites: Product[];
+}) {
+  const { favorite, Favorites, setFavorites } = props;
+  const [hovering, setHovering] = useState(false);
+
+  async function clickFunctions(props2: { fav: Product }) {
+    const { fav } = props2;
+    addOrRemoveProductFromFavorite(fav, false);
+    setFavorites(Favorites.filter(Prod => Prod.id !== fav.id));
+  }
+
+  return (
+    <FavoriteDiv key={favorite.id}>
+      <img
+        src={favorite.photo}
+        alt={favorite.name}
+        style={{ width: '75px', height: '75px' }}
+      />
+      <ProductNameDiv>
+        <Body1Bold>{favorite.name}</Body1Bold>
+        <Body2>Category: {favorite.category}</Body2>
+      </ProductNameDiv>
+      <TransparentButton
+        onClick={() => clickFunctions({ fav: favorite })}
+        onMouseEnter={() => setHovering(true)}
+        onMouseLeave={() => setHovering(false)}
+      >
+        <Hover $ishovering={hovering}>
+          <Body3>Remove from favorites</Body3>
+        </Hover>
+        <HeartIcon />
+      </TransparentButton>
+    </FavoriteDiv>
+  );
+}