Requested changes fixes

djeck1432 · Oct 27, 2024 · d275f48 · d275f48
1 parent 9adb540
commit d275f48
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 19 deletions.
diff --git 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
@@ -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;
diff --git a/frontend/src/components/StarMaker.jsx 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;
diff --git 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
@@ -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 ;
 }