fixed alignments in profile, and css on update profile buttons

Six5pAdes · Oct 7, 2024 · f5b01cf · f5b01cf
1 parent 6d50e1b
commit f5b01cf
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
diff --git a/react-vite/src/components/Profile/EditProfile.css b/react-vite/src/components/Profile/EditProfile.css
@@ -34,6 +34,20 @@
     align-items: center;
     width: auto;
     height: auto;
+    font-size: 15px;
+    margin: 10px;
+    border-radius: 5px;
+    color: white;
+    font-weight: bold;
+    text-transform: uppercase;
+    padding: 5px;
+    background-color: #c6286d;
+    transition: background-color 0.3s ease;
+}
+
+#cancel:hover {
+    background-color: #e73b8e;
+    cursor: pointer;
 }
 
 .user-inputs {

diff --git a/react-vite/src/components/Profile/ProfileInfo.css b/react-vite/src/components/Profile/ProfileInfo.css
@@ -1,4 +1,4 @@
-.profile-contain, #this-product, #this-review {
+#this-profile, #this-product, #this-review {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -60,6 +60,7 @@ button {
 
 #curr-title {
     margin-top: 10px;
+    padding-bottom: 10px;
 }
 
 #new-product {
@@ -90,13 +91,20 @@ button {
 #products {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    row-gap: 40px;
+    row-gap: 20px;
     width: auto;
     margin: 0 auto;
-    padding: 20px;
+    padding: 0;
     box-sizing: border-box;
 }
 
+#products.empty, #reviews.empty {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
 .product-card {
     border-radius: 1em;
     width: 300px;
@@ -173,19 +181,21 @@ button {
 }
 
 #reviews {
-    row-gap: 40px;
-    width: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 100%;
     margin: 0 auto;
-    padding-top: 20px;
+    padding: 0;
     box-sizing: border-box;
     align-content: center;
     text-align: center;
 }
 
 .review-card {
     margin-bottom: 20px;
-    border: 1px solid #ddd;
-    border-radius: 5px;
+    border: 2px solid #ddd;
+    border-radius: 15px;
     padding: 10px;
 }
 

diff --git a/react-vite/src/components/Profile/ProfileInfo.jsx b/react-vite/src/components/Profile/ProfileInfo.jsx
@@ -86,7 +86,7 @@ const UserPage = () => {
 
     return (
         <>
-            <section className='profile-contain'>
+            <section id='this-profile'>
                 <h1 id='curr-title'>About Me</h1>
                 <div id='prof-info'>
                     <div id='prof-stuff'>
@@ -115,7 +115,7 @@ const UserPage = () => {
                 <h1 id='curr-title'>My Products</h1>
                 <button type='button' id='new-product' onClick={() => navigate('/new-product')}>Create a New Product</button>
                 <br />
-                <ul id={`products ${userProducts?.length === 0 ? 'empty' : ''}`}>
+                <ul id='products' className={userProducts.length === 0 ? 'empty' : ''}>
                     {userProducts.length > 0 ? (
                         userProducts.map((product) => (
                             <div key={product.id} className='product-card'>
@@ -155,12 +155,11 @@ const UserPage = () => {
             </section>
             <section id='this-review'>
                 <h1 id='curr-title'>My Reviews</h1>
-                <ul id={`reviews ${userReviews?.length === 0 ? 'empty' : ''}`}>
+                <ul id='reviews' className={userReviews?.length === 0 ? 'empty' : ''}>
                     {userReviews.length > 0 ? (
                         userReviews.map((review) => (
                             <div key={review?.id} className='review-card'>
                                 <h3
-                                    title={products[review?.product_id]?.name}
                                     className="product-name"
                                     onClick={() => navigate(`/products/${review?.product_id}`)}
                                 >{products[review?.product_id]?.name}</h3>