From 03bf877f64f6c0042b2dac824474f1f9197952cf Mon Sep 17 00:00:00 2001
From: Prrorr2 <rubenantolinjr@gmail.com>
Date: Wed, 9 Aug 2023 17:22:24 +0200
Subject: [PATCH] Colors alive

---
 src/App.jsx                     |  5 ++---
 src/Components/Header.jsx       |  9 ++++-----
 src/Components/Pay.jsx          |  8 ++++----
 src/Components/Transactions.jsx | 34 +++++++++++++++++++++------------
 src/Screens/MainApp.jsx         |  4 ++--
 tailwind.config.js              |  8 ++++++++
 6 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 87428e8..ae7d65f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,7 +4,6 @@ import { useState, useEffect } from "react";
 import MainApp from "./Screens/MainApp.jsx";
 import sjcl from "sjcl";
 export default function App() {
-  const colors = { primary: "bg-blue-200", secondary: "bg-emerald-400" };
   const [keys, setKeys] = useState({ public: "", private: "" });
   if (keys.private !== "") {
     console.log("heykj");
@@ -20,8 +19,8 @@ export default function App() {
   }
   console.log(keys);
   return keys.private.length < 10 ? (
-    <Login colors={colors} setKeys={setKeys} />
+    <Login setKeys={setKeys} />
   ) : (
-    <MainApp colors={colors} keys={keys} setKeys={setKeys} />
+    <MainApp keys={keys} setKeys={setKeys} />
   );
 }
diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
index 35faa7b..19eb56b 100644
--- a/src/Components/Header.jsx
+++ b/src/Components/Header.jsx
@@ -30,13 +30,12 @@ export default function Header({ keys, setKeys }) {
     });
   }
   return (
-    <div className="flex flex-row pt-5 gap-[20%] h-32 bg-blue-300 ">
-      <div className="bg-blue-400 w-[25rem] self-center flex flex-col justify-center rounded-xl ml-[45%]">
-        <h1 className="text-white text-5xl self-center">Balance Actual:</h1>
-        <h1 className=" text-yellow-200 text-5xl self-center">{balance}</h1>
+    <div className="flex flex-row pt-5 gap-[20%] h-32 bg-secondary ">
+      <div className="bg-secondary w-[25rem] self-center flex flex-col justify-center rounded-xl ml-[45%]">
+        <h1 className="text-black text-5xl self-center">{balance} BLC</h1>
       </div>
       <button
-        className="w-[7rem] h-[3rem] bg-teal-600 text-white rounded-3xl self-center"
+        className="w-[8rem] h-[3rem] bg-five text-white rounded-3xl self-center"
         onClick={handleLogout}
       >
         Cerrar Sesion
diff --git a/src/Components/Pay.jsx b/src/Components/Pay.jsx
index 176cc2f..906816d 100644
--- a/src/Components/Pay.jsx
+++ b/src/Components/Pay.jsx
@@ -19,14 +19,14 @@ export default function Pay({ keys }) {
     send(amount, desprorr2(keys.private), to);
   }
   return (
-    <div className="h-3/6 w-2/6 bg-teal-400 self-center ml-[10rem] rounded-2xl flex flex-col gap-5 justify-center">
+    <div className="h-3/6 w-2/6 bg-secondary self-center ml-[10rem] rounded-2xl flex flex-col gap-5 justify-center">
       <label htmlFor="send2" className="font-bold text-3xl self-center">
         Send to:
       </label>
       <input
         name="send2"
         id="to"
-        className="h-[2rem] w-3/6 self-center border-4 border-teal-200 rounded-md"
+        className="h-[2rem] w-3/6 self-center border-4 border-tertiary rounded-md"
         placeholder="Example: GDY2CP7XLBIY65YX7KS72X7JCZJVJ3AEPEEFTW3TYPLGDRWEZKAC7NR3"
         type="text"
       />
@@ -36,14 +36,14 @@ export default function Pay({ keys }) {
       <input
         id="amount"
         name="amount"
-        className="h-[2rem] w-3/6 self-center border-4 border-teal-200 rounded-md"
+        className="h-[2rem] w-3/6 self-center border-4 border-tertiary rounded-md"
         type="number"
       />
       <input
         name="submit"
         type="submit"
         value="Send"
-        className="rounded bg-blue-500 text-white px-4 py-2 cursor-pointer w-3/6 self-center"
+        className="rounded bg-primary text-tertiary px-4 py-2 cursor-pointer w-3/6 self-center"
         onClick={handleSend}
       />
     </div>
diff --git a/src/Components/Transactions.jsx b/src/Components/Transactions.jsx
index 68b67a3..42aedc2 100644
--- a/src/Components/Transactions.jsx
+++ b/src/Components/Transactions.jsx
@@ -36,35 +36,45 @@ export default function Transactions({ keys }) {
     account.transactions().then((tran) => console.log(tran.records[0]))
   );*/
   return (
-    <div className=" w-[32%] h-5/6  bg-teal-200 shadow-xl rounded-xl flex flex-col gap-5 overflow-scroll mt-10">
+    <div className=" w-[32%] h-5/6  bg-secondary shadow-xl rounded-xl flex flex-col gap-5 overflow-scroll mt-10">
       {operations.map((operation) => (
-        <div className="bg-teal-400 flex flex-col gap-2 rounded-lg w-[95%] self-center mt-5">
-          <h1 className="text-xl text-yellow-700 font-bold">
+        <div className="bg-five flex flex-col gap-2 rounded-lg w-[95%] self-center mt-5">
+          <h1 className="pl-5 text-2xl text-secondary font-bold">
             {operation.type}:
           </h1>
-          <h1 className="font-semibold">{operation.amount}</h1>
+          <h1 className="font-semibold text-primary pl-5">
+            {operation.amount}
+          </h1>
           {operation.funder ? (
-            <h1 className="font-semibold">By: {operation.funder}</h1>
+            <h1 className="font-semibold text-primary pl-5">
+              By: {operation.funder}
+            </h1>
           ) : null}
           {operation.asset_code ? (
-            <h1 className="font-semibold">Token: {operation.asset_code}</h1>
+            <h1 className="font-semibold text-primary pl-5">
+              Token: {operation.asset_code}
+            </h1>
           ) : null}
           {operation.from ? (
             operation.from === publickey ? (
-              <h1 className="font-semibold">
-                from: <span className="text-red-400 text-xl">Me</span>
+              <h1 className="font-semibold text-primary pl-5">
+                from: <span className="text-secondary text-xl">Me</span>
               </h1>
             ) : (
-              <h1 className="font-semibold">from: {operation.from}</h1>
+              <h1 className="font-semibold text-primary pl-5">
+                from: {operation.from}
+              </h1>
             )
           ) : null}
           {operation.to ? (
             operation.to === publickey ? (
-              <h1 className="font-semibold">
-                to: <span className="text-red-400 text-xl">Me</span>
+              <h1 className="font-semibold text-primary pl-5">
+                to: <span className="text-secondary text-xl">Me</span>
               </h1>
             ) : (
-              <h1 className="font-semibold">to: {operation.to}</h1>
+              <h1 className="font-semibold text-primary pl-5 w-40">
+                to: {operation.to}
+              </h1>
             )
           ) : null}
         </div>
diff --git a/src/Screens/MainApp.jsx b/src/Screens/MainApp.jsx
index 807bf4b..115e4e6 100644
--- a/src/Screens/MainApp.jsx
+++ b/src/Screens/MainApp.jsx
@@ -2,9 +2,9 @@
 import Header from "../Components/Header";
 import Pay from "../Components/Pay";
 import Transactions from "../Components/Transactions";
-export default function MainApp({ colors, keys, setKeys }) {
+export default function MainApp({ keys, setKeys }) {
   return (
-    <div className={colors.primary + " w-full h-full"}>
+    <div className={"bg-five w-full h-full"}>
       <Header keys={keys} setKeys={setKeys} />
       <div className="flex flex-row w-full h-5/6">
         <Transactions keys={keys} />
diff --git a/tailwind.config.js b/tailwind.config.js
index ff7c171..a809fa4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,14 @@ export default {
 "./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {},
+    colors: {
+      'primary':'#050505',
+      'primary2':'#c2c2c2',
+      'secondary':'#1B9AAA',
+      'tertiary':'#DDDBCB',
+      'four':'#F5F1E3',
+      'five':'#FFFFFF'
+    },
   },
   plugins: [],
 }