From 7db6c4b0415f04e02c60a19be575a47c187e3988 Mon Sep 17 00:00:00 2001
From: Ojas Arora <127867874+Ojas-Arora@users.noreply.github.com>
Date: Sat, 3 Aug 2024 18:49:05 +0530
Subject: [PATCH] UI Improvement

---
 src/Components/RateUs.css        |  7 ++-
 src/Components/RateUs.js         |  6 +++
 src/Components/wallet/Wallet.css | 10 ++++
 src/Components/wallet/Wallet.js  | 92 +++++++++++++++++++++-----------
 4 files changed, 83 insertions(+), 32 deletions(-)

diff --git a/src/Components/RateUs.css b/src/Components/RateUs.css
index d0dc72fb..decfdd4b 100644
--- a/src/Components/RateUs.css
+++ b/src/Components/RateUs.css
@@ -16,7 +16,8 @@
   border-radius: 10px;
   /* Slightly increased border radius for a softer look */
   background-color: #322a5e;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+  border: 2px solid #6052ff;
+  box-shadow: 7px 7px 32px 0 #6052ff;
   /* Added box shadow for depth */
   display: flex;
   flex-direction: column;
@@ -24,12 +25,14 @@
   transition: box-shadow 0.3s, transform 0.3s;
   position: relative;
   overflow: hidden;
+
 }
 
 .rate-us-container:hover {
   box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
-  /* Adjusted shadow for hover */
   transform: scale(1.05);
+  background-color: #ff21bc; /* Changed background color on hover */
+  border: 2px solid #ff21bc; /* Adjusted border color to match hover background */
 }
 
 .rate-us-heading {
diff --git a/src/Components/RateUs.js b/src/Components/RateUs.js
index 931ac362..cd85eccc 100644
--- a/src/Components/RateUs.js
+++ b/src/Components/RateUs.js
@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import "./RateUs.css";
 import TopContainer from "./TopContainer";
 import Menu from "./Menu";
+import { Link } from 'react-router-dom';
+import homeIcon from '../img/homeicon.png';
 
 function RateUsComponent({ previousContent }) {
   const [emoji, setEmoji] = useState("");
@@ -31,6 +33,10 @@ function RateUsComponent({ previousContent }) {
   return (
     <div>
       <div className="header">
+      <Link to="/">
+  <img src={homeIcon} alt="Home" className="home-icon" style={{ marginTop: '130px' }} />
+</Link>
+
         <TopContainer /></div>
       <div className="rateUsContainer">
         <Menu />
diff --git a/src/Components/wallet/Wallet.css b/src/Components/wallet/Wallet.css
index 6f108fa4..b8b515f0 100644
--- a/src/Components/wallet/Wallet.css
+++ b/src/Components/wallet/Wallet.css
@@ -55,6 +55,12 @@
     margin-bottom: 50px;
     display: flex;
 }
+  .infoWallet:hover {
+    background-color: #ff21bc; /* Change background color on hover */
+    border: 2px solid #ff21bc; /* Adjust border color to match hover background */
+    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5); /* Adjust shadow for hover effect */
+  }
+  
 
 .feedbackTopic {
     width: 30%;
@@ -91,6 +97,10 @@
     border-radius: 30px;
     transition: transform 0.15s ease-in-out;
 }
+.detailsPayment:hover {
+    background-color: #ff21bc;
+}
+
 
 .detailsPayment:hover {
     transform: scale(1.08);
diff --git a/src/Components/wallet/Wallet.js b/src/Components/wallet/Wallet.js
index 79ddab1f..cfb71a49 100644
--- a/src/Components/wallet/Wallet.js
+++ b/src/Components/wallet/Wallet.js
@@ -1,10 +1,53 @@
-import React from 'react'
-import './Wallet.css'
+import React from 'react';
+import { Link } from "react-router-dom";
+import homeIcon from '../../img/homeicon.png';
+import './Wallet.css';
 
 const Wallet = () => {
+    const pointsHistory = [
+        {
+            description: "Purchase of StockIT subscription",
+            date: "12-07-2024",
+            points: 100
+        },
+        {
+            description: "Refer a friend to UniCollab",
+            date: "05-07-2024",
+            points: 50
+        },
+        {
+            description: "Participation in UniCollab survey",
+            date: "01-07-2024",
+            points: 30
+        },
+        {
+            description: "Weekly login bonus",
+            date: "28-06-2024",
+            points: 20
+        },
+        {
+            description: "Achievement unlocked: Complete 10 tasks",
+            date: "20-06-2024",
+            points: 150
+        },
+        {
+            description: "User feedback reward",
+            date: "15-06-2024",
+            points: 40
+        },
+        {
+            description: "Referral bonus for new user",
+            date: "10-06-2024",
+            points: 70
+        }
+    ];
+
     return (
         <div>
             <div className="heading1Wallet">Balance and Rewards</div>
+            <Link to="/">
+                <img src={homeIcon} alt="Home" className="home-icon" />
+            </Link>
             <div className='pointsandrupees'>
                 <div className='iconsWallet'>
                     <div className='quantity'>5000</div>
@@ -19,36 +62,25 @@ const Wallet = () => {
                 </div>
             </div>
             <div className='infoWallet'>
-                <div className='topic_head feedbackTopic'>UniCollab <span className='Pro'>Pro</span></div>
-                <div className='descWallet1'>
-                    <div className='quantity'>Now, UniCollab Pro members will earn 50 ppoints</div>
-                    <div className='value'>On every ₹100 spent on UniCollab</div>
-                </div>
-            </div>
+    <div className='topic_head feedbackTopic'>UniCollab <span className='Pro'>Pro</span></div>
+    <div className='descWallet1'>
+        <div className='quantity'>Now, UniCollab Pro members will earn 50 points</div>
+        <div className='value'>On every ₹100 spent on UniCollab</div>
+    </div>
+</div>
+
             <div className="heading2Wallet">Points History</div>
-            <div className='detailsPayment'>
-                <div className='detailsCardWallet'>
-                    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, cumque eum. </div>
-                    <div>Credited On XX-XX-XXXX</div>
+            {pointsHistory.map((entry, index) => (
+                <div className='detailsPayment' key={index}>
+                    <div className='detailsCardWallet'>
+                        <div>{entry.description}</div>
+                        <div>Credited On {entry.date}</div>
+                    </div>
+                    <div className='amountWallet'>+ {entry.points} points</div>
                 </div>
-                <div className='amountWallet'>+ 100 points</div>
-            </div>
-            <div className='detailsPayment'>
-                <div className='detailsCardWallet'>
-                    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, cumque eum. </div>
-                    <div>Credited On XX-XX-XXXX</div>
-                </div>
-                <div className='amountWallet'>+ 100 points</div>
-            </div>
-            <div className='detailsPayment'>
-                <div className='detailsCardWallet'>
-                    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, cumque eum. </div>
-                    <div>Credited On XX-XX-XXXX</div>
-                </div>
-                <div className='amountWallet'>+ 100 points</div>
-            </div>
+            ))}
         </div>
-    )
+    );
 }
 
-export default Wallet
+export default Wallet;