From 323acaafd2659566e09b177cd6bab2e0ad1b4244 Mon Sep 17 00:00:00 2001
From: Hy Nguyen <khanghy2130@gmail.com>
Date: Fri, 18 Oct 2024 02:58:26 -0500
Subject: [PATCH] /profile: place text on left for placeholder texts in empty
 containers

---
 app/components/Footer.tsx                                     | 2 +-
 .../product.$productID/other_products/OtherProductCard.tsx    | 2 +-
 app/routes/profile/orders/MyOrders.tsx                        | 4 +---
 app/routes/profile/reviews/MyReviews.tsx                      | 4 +---
 app/routes/profile/wishlist/MyWishlist.tsx                    | 2 +-
 5 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index c3bb6c3..a9ac11d 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -3,7 +3,7 @@ import { Link } from "@remix-run/react";
 export default function Footer() {
     return (
         <div className="z-10 flex w-full flex-grow items-end pt-10">
-            <div className="flex w-full flex-col items-stretch bg-black px-4 py-3 text-center text-sm text-gray-200 sm:px-20 sm:text-lg">
+            <div className="flex w-full flex-col items-center bg-black px-4 py-3 text-center text-sm text-gray-200 sm:px-20 sm:text-lg">
                 <h2>&copy; {new Date().getFullYear()} TOYSHOP</h2>
                 <h2 className="px-2">
                     <span className="font-bold">Disclaimer:</span> This is a
diff --git a/app/routes/product.$productID/other_products/OtherProductCard.tsx b/app/routes/product.$productID/other_products/OtherProductCard.tsx
index 18e382d..864347e 100644
--- a/app/routes/product.$productID/other_products/OtherProductCard.tsx
+++ b/app/routes/product.$productID/other_products/OtherProductCard.tsx
@@ -40,7 +40,7 @@ export default function OtherProductCard({ product }: Props) {
         <div className="flex w-1/2 p-1 sm:p-2 md:w-1/4">
             <Link
                 to={`/product/${product.id}`}
-                className="flex h-full w-full flex-col overflow-hidden rounded-lg bg-bgColor2 shadow-md sm:rounded-xl"
+                className="click-shrink flex h-full w-full flex-col overflow-hidden rounded-lg bg-bgColor2 shadow-md hover:bg-bgColor3 sm:rounded-xl"
                 onClick={() => {
                     window.scrollTo({ top: 0, behavior: "smooth" });
                 }}
diff --git a/app/routes/profile/orders/MyOrders.tsx b/app/routes/profile/orders/MyOrders.tsx
index 10ebabf..f037d07 100644
--- a/app/routes/profile/orders/MyOrders.tsx
+++ b/app/routes/profile/orders/MyOrders.tsx
@@ -62,9 +62,7 @@ export default function MyOrders({ ordersData }: Props) {
             </h1>
             <div className="flex max-h-96 flex-col overflow-auto text-lg sm:text-xl">
                 {orders.length === 0 ? (
-                    <p className="w-full text-center text-lg">
-                        No orders found.
-                    </p>
+                    <p className="w-full text-lg">No orders found.</p>
                 ) : null}
                 {orders.map((order) => (
                     <button
diff --git a/app/routes/profile/reviews/MyReviews.tsx b/app/routes/profile/reviews/MyReviews.tsx
index 018c468..8a2c65a 100644
--- a/app/routes/profile/reviews/MyReviews.tsx
+++ b/app/routes/profile/reviews/MyReviews.tsx
@@ -38,9 +38,7 @@ export default function MyReviews() {
             </h1>
             <div className="flex flex-col">
                 {reviews.length === 0 && (
-                    <p className="w-full text-center text-lg">
-                        No reviews found.
-                    </p>
+                    <p className="w-full text-lg">No reviews found.</p>
                 )}
                 <div className="flex w-full flex-col">
                     {reviews.map((r) => (
diff --git a/app/routes/profile/wishlist/MyWishlist.tsx b/app/routes/profile/wishlist/MyWishlist.tsx
index 05ee8a2..a93c76e 100644
--- a/app/routes/profile/wishlist/MyWishlist.tsx
+++ b/app/routes/profile/wishlist/MyWishlist.tsx
@@ -50,7 +50,7 @@ export default function MyWishlist({ newWishlist, orderedProducts }: Props) {
             </h1>
 
             {products.length === 0 ? (
-                <p className="w-full text-center text-lg">Wishlist is empty.</p>
+                <p className="w-full text-lg">Wishlist is empty.</p>
             ) : (
                 <div className="flex flex-wrap">
                     {products.map((product) => (