From d275f48acbb0469eb8d815b40a2a24c495e257fe Mon Sep 17 00:00:00 2001
From: BrunoAmbricca <bambricca@gmail.com>
Date: Sun, 27 Oct 2024 17:58:31 -0300
Subject: [PATCH] Requested changes fixes

---
 frontend/src/components/BalanceCards.jsx  |  2 +-
 frontend/src/components/CardGradients.jsx |  8 ++++++++
 frontend/src/components/StarMaker.jsx     | 15 +++++++++++++++
 frontend/src/pages/forms/Form.jsx         | 18 ++++--------------
 frontend/src/pages/forms/form.css         |  8 ++++----
 5 files changed, 32 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/components/CardGradients.jsx
 create mode 100644 frontend/src/components/StarMaker.jsx

diff --git a/frontend/src/components/BalanceCards.jsx b/frontend/src/components/BalanceCards.jsx
index 4190ef20..d2730bf2 100644
--- a/frontend/src/components/BalanceCards.jsx
+++ b/frontend/src/components/BalanceCards.jsx
@@ -5,7 +5,7 @@ import { ReactComponent as STRK } from '../assets/icons/strk.svg';
 import { ReactComponent as DAI } from '../assets/icons/dai.svg';
 import { getBalances } from '../utils/wallet';
 
-const BalanceCards = ({ walletId}) => {
+const BalanceCards = ({ walletId }) => {
     const [balances, setBalances] = useState([
         { icon: <ETH />, title: 'ETH', balance: '0.00' },
         { icon: <USDC />, title: 'USDC', balance: '0.00' },
diff --git a/frontend/src/components/CardGradients.jsx b/frontend/src/components/CardGradients.jsx
new file mode 100644
index 00000000..87510669
--- /dev/null
+++ b/frontend/src/components/CardGradients.jsx
@@ -0,0 +1,8 @@
+const CardGradients = ({ additionalClassName }) => (
+    <div className={`card-gradients ${additionalClassName}`}>
+        <div className="card-gradient"></div>
+        <div className="card-gradient"></div>
+    </div>
+  );
+  
+  export default CardGradients;
\ No newline at end of file
diff --git a/frontend/src/components/StarMaker.jsx b/frontend/src/components/StarMaker.jsx
new file mode 100644
index 00000000..45ef886d
--- /dev/null
+++ b/frontend/src/components/StarMaker.jsx
@@ -0,0 +1,15 @@
+import { ReactComponent as Star } from "../assets/particles/star.svg";
+
+const StarMaker = ({ starData }) => (
+    starData.map((star, index) => (
+        <Star key={index} style={{
+            position: 'absolute',
+            top: `${star.top}%`,
+            left: `${star.left}%`,
+            width: `${star.size}%`,
+            height: `${star.size}%`
+        }}/>
+    ))
+  );
+  
+  export default StarMaker;
\ No newline at end of file
diff --git a/frontend/src/pages/forms/Form.jsx b/frontend/src/pages/forms/Form.jsx
index a87dd477..68f81038 100644
--- a/frontend/src/pages/forms/Form.jsx
+++ b/frontend/src/pages/forms/Form.jsx
@@ -6,7 +6,8 @@ import MultiplierSelector from '../../components/MultiplierSelector';
 import { connectWallet } from '../../utils/wallet';
 import { handleTransaction } from '../../utils/transaction';
 import Spinner from '../../components/spinner/Spinner';
-import { ReactComponent as Star } from "../../assets/particles/star.svg";
+import StarMaker from '../../components/StarMaker';
+import CardGradients from '../../components/CardGradients';
 import { ReactComponent as AlertHexagon } from '../../assets/icons/alert_hexagon.svg';
 
 const Form = ({ walletId, setWalletId }) => {
@@ -97,19 +98,8 @@ const Form = ({ walletId, setWalletId }) => {
                     <div className="submit">
                         <button type="submit" className='form-button'>Submit</button>
                     </div>
-                    <div className="card-gradients forms-gradient">
-                        <div className="card-gradient"></div>
-                        <div className="card-gradient"></div>
-                    </div>
-                    {starData.map((star, index) => (
-                    <Star key={index} style={{
-                        position: 'absolute',
-                        top: `${star.top}%`,
-                        left: `${star.left}%`,
-                        width: `${star.size}%`,
-                        height: `${star.size}%`
-                        }}/>
-                    ))}
+                    <CardGradients additionalClassName={"forms-gradient"}/>
+                    <StarMaker starData={starData}/>
                 </div>
             </form>
             <Spinner loading={loading} />
diff --git a/frontend/src/pages/forms/form.css b/frontend/src/pages/forms/form.css
index 8993e610..8d1a2254 100644
--- a/frontend/src/pages/forms/form.css
+++ b/frontend/src/pages/forms/form.css
@@ -369,13 +369,13 @@ input[type="number"].error {
 
 .balance-item label:nth-child(1){
     font-size: 20px;
-    color: #E7ECF0;
+    color: var(--secondary);
     letter-spacing: 0.5px;
 }
 
 .balance-item label:nth-child(2){
     font-size: 32px;
-    color: #E7ECF0;
+    color: var(--secondary);
 }
 
 .balance-title{
@@ -385,6 +385,6 @@ input[type="number"].error {
 
 .balance-title svg{
     margin-right: 5px;
-    height: 25px !important;
-    width: 24px !important;
+    height: 25px;
+    width: 24px ;
 }
\ No newline at end of file