From b84b8eadb58d68707c8bdd870e65037bb58c5799 Mon Sep 17 00:00:00 2001
From: Emil Nielsen <hej@emilnielsen.com>
Date: Fri, 7 Apr 2023 08:24:41 +0700
Subject: [PATCH] Cleanup some UI stuff

---
 src/app/Components/BankAccountsView.tsx   |   4 +-
 src/app/Components/InventoryItemView.tsx  |  28 ++---
 src/app/Components/NavbarVertical.tsx     |   4 +-
 src/app/Components/ResourceAccount.tsx    |   4 +-
 src/app/Components/SelectDropdown.tsx     |   2 +-
 src/app/Components/StakingSource.tsx      | 122 +++++++++++++---------
 src/app/Components/StakingSourcesView.tsx |  62 +++++------
 7 files changed, 126 insertions(+), 100 deletions(-)

diff --git a/src/app/Components/BankAccountsView.tsx b/src/app/Components/BankAccountsView.tsx
index 2663c1f..33f0504 100644
--- a/src/app/Components/BankAccountsView.tsx
+++ b/src/app/Components/BankAccountsView.tsx
@@ -18,8 +18,8 @@ const BankAccountsView = (props: {
   return (
     <div className="p-4">
       <div className="flex items-center gap-8">
-        <div className="flex-1 border-2 border-white rounded-lg px-8 py-4">
-          <div className="text-white">
+        <div className="flex-1 bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl">
+          <div className="text-white bg-slate-900 px-8 py-4 rounded-xl">
             <span className="text-green-600 font-bold">Moonbucks</span>
             <h3 className="text-2xl font-bold">
               $
diff --git a/src/app/Components/InventoryItemView.tsx b/src/app/Components/InventoryItemView.tsx
index d8ddbee..931b3db 100644
--- a/src/app/Components/InventoryItemView.tsx
+++ b/src/app/Components/InventoryItemView.tsx
@@ -8,19 +8,21 @@ const InventoryItemView = (props: {
   upgradeInventoryItem: (inventoryItemId: number, storeItemId: string) => void;
 }) => {
   return (
-    <div className="border-2 border-white text-white p-8 rounded-lg col-span-5">
-      <h2 className="text-3xl font-bold mb-4">Your Inventory</h2>
-      <div className="grid grid-cols-3 gap-8">
-        {props.inventoryItems &&
-          props.inventoryItems.length > 0 &&
-          props.inventoryItems.map((inventoryItem, id) => (
-            <InventoryItem
-              key={id}
-              inventoryItem={inventoryItem}
-              upgradeInventoryItem={props.upgradeInventoryItem}
-              stakes={props.stakes}
-            />
-          ))}
+    <div className="bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl rounded-xl col-span-5">
+      <div className="bg-slate-900 text-white p-8 rounded-xl">
+        <h2 className="text-3xl font-bold mb-4">Your Inventory</h2>
+        <div className="grid grid-cols-3 gap-8">
+          {props.inventoryItems &&
+            props.inventoryItems.length > 0 &&
+            props.inventoryItems.map((inventoryItem, id) => (
+              <InventoryItem
+                key={id}
+                inventoryItem={inventoryItem}
+                upgradeInventoryItem={props.upgradeInventoryItem}
+                stakes={props.stakes}
+              />
+            ))}
+        </div>
       </div>
     </div>
   );
diff --git a/src/app/Components/NavbarVertical.tsx b/src/app/Components/NavbarVertical.tsx
index 6bf8825..ae1d5a8 100644
--- a/src/app/Components/NavbarVertical.tsx
+++ b/src/app/Components/NavbarVertical.tsx
@@ -23,8 +23,8 @@ const NavbarVertical: React.FC<NavbarProps> = ({
 }) => {
   return (
     <div className="">
-      <nav className="border-2 border-white rounded-lg p-8 h-auto">
-        <ul className="">
+      <nav className="bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl">
+        <ul className="bg-slate-900 p-8 rounded-xl">
           {menuItems.map((item) => (
             <li
               key={item.componentKey}
diff --git a/src/app/Components/ResourceAccount.tsx b/src/app/Components/ResourceAccount.tsx
index 28b454c..0da2da7 100644
--- a/src/app/Components/ResourceAccount.tsx
+++ b/src/app/Components/ResourceAccount.tsx
@@ -5,8 +5,8 @@ import { resourceToBg, resourceToFc } from "../../utils/helpers";
 
 const ResourceAccount = (props: { account: IResourceAccount }) => {
   return (
-    <div className={"flex-1 border-2 border-white rounded-lg px-8 py-4"}>
-      <div className="text-white">
+    <div className="flex-1 bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl">
+      <div className="bg-slate-900 text-white px-8 py-4 rounded-xl">
         <span
           className={resourceToFc(props.account.resourceType) + " font-bold"}
         >
diff --git a/src/app/Components/SelectDropdown.tsx b/src/app/Components/SelectDropdown.tsx
index 6dbb435..4c6cc99 100644
--- a/src/app/Components/SelectDropdown.tsx
+++ b/src/app/Components/SelectDropdown.tsx
@@ -21,7 +21,7 @@ const SelectDropdown: React.FC<ISelectDropdownProps> = (props) => {
     <select
       value={selectedValue}
       onChange={handleChange}
-      className="text-black flex-1 p-2 border border-gray-300 rounded-lg"
+      className="text-black flex-1 p-2 border border-gray-300 rounded-lg hover:cursor-pointer"
     >
       <option value="">Select</option>
       {props.options.map((option, index) => (
diff --git a/src/app/Components/StakingSource.tsx b/src/app/Components/StakingSource.tsx
index 721fbcb..1029954 100644
--- a/src/app/Components/StakingSource.tsx
+++ b/src/app/Components/StakingSource.tsx
@@ -24,6 +24,7 @@ const StakingSource = (props: {
     null
   );
   const [selectedWellId, setSelectedWellId] = useState<number | null>(null);
+  const [showInfo, setShowInfo] = useState(false);
 
   // Check if claimable every second
   useEffect(() => {
@@ -123,14 +124,37 @@ const StakingSource = (props: {
           alt="Moon"
           width={props.stakingSource.size}
           height={props.stakingSource.size}
+          onClick={() => setShowInfo(!showInfo)}
+          className="hover:cursor-pointer"
         />
-        <div className="absolute -right-0 top-1/2 transform -translate-y-1/2 opacity-0 w-0 group-hover:w-96 group-hover:opacity-100 transition-all duration-200 hover:ease-in-out">
-          <div className="bg-slate-900 border-2 border-white rounded-xl p-4 text-white">
-            <h3 className="text-xl font-bold mb-2">
-              {props.stakingSource.name}
-            </h3>
-            <p className="text-sm">{props.stakingSource.description}</p>
-            <div className="flex gap-4">
+        {showInfo && (
+          <div className="absolute -right-0 top-1/2 transform -translate-y-1/2 w-96">
+            <div className="bg-slate-500 border-2 border-white rounded-xl p-4 text-white">
+              <button
+                onClick={() => {
+                  setShowInfo(!showInfo);
+                }}
+                className="text-white absolute -right-0 mr-4"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={2}
+                  stroke="currentColor"
+                  className="w-6 h-6"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+              <h3 className="text-xl font-bold mb-2">
+                {props.stakingSource.name}
+              </h3>
+              <p className="text-sm">{props.stakingSource.description}</p>
               <div className="flex-1">
                 <p className="font-bold mt-4 mb-2">Active Drills</p>
                 {activeStakes &&
@@ -160,53 +184,51 @@ const StakingSource = (props: {
                     </div>
                   ))}
               </div>
-              <div className="flex-1">
-                <p className="font-bold mt-4 mb-2">Inactive Drills</p>
-                {props.inventoryItems &&
-                  props.inventoryItems.map(
-                    (item, id) =>
-                      !isActive(item) && (
-                        <div
-                          key={id}
-                          className="border border-white rounded-xl p-3 mb-2 bg-black/20"
-                        >
-                          <p className="font-bold">{item.storeItem.name}</p>
-                          <p className="mt-2">Select Resource</p>
-                          <div className="flex">
-                            <SelectDropdown
-                              options={props.stakingSource.resourceWells.map(
-                                (well): IOption => ({
-                                  value: well.id,
-                                  label: well.resourceType,
-                                })
-                              )}
-                              onChange={(value) =>
-                                handleSelectChange(
-                                  value,
-                                  item.id,
-                                  item.storeItem.id
-                                )
-                              }
-                              isActive={selectedItemId === item.id}
-                            />
-                            {selectedItemId === item.id ? (
-                              <button
-                                onClick={handleStartMining}
-                                className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-28 text-center ml-2"
-                              >
-                                Activate
-                              </button>
-                            ) : (
-                              <></>
+              <p className="font-bold mt-4 mb-2">Inactive Drills</p>
+              {props.inventoryItems &&
+                props.inventoryItems.map(
+                  (item, id) =>
+                    !isActive(item) && (
+                      <div
+                        key={id}
+                        className="border border-white rounded-xl p-3 mb-2 bg-black/20"
+                      >
+                        <p className="font-bold">{item.storeItem.name}</p>
+                        <p className="mt-2">Select Resource</p>
+                        <div className="flex">
+                          <SelectDropdown
+                            options={props.stakingSource.resourceWells.map(
+                              (well): IOption => ({
+                                value: well.id,
+                                label: well.resourceType,
+                              })
                             )}
-                          </div>
+                            onChange={(value) =>
+                              handleSelectChange(
+                                value,
+                                item.id,
+                                item.storeItem.id
+                              )
+                            }
+                            isActive={selectedItemId === item.id}
+                          />
+                          {selectedItemId === item.id ? (
+                            <button
+                              onClick={handleStartMining}
+                              className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-28 text-center ml-2"
+                            >
+                              Activate
+                            </button>
+                          ) : (
+                            <></>
+                          )}
                         </div>
-                      )
-                  )}
-              </div>
+                      </div>
+                    )
+                )}
             </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   );
diff --git a/src/app/Components/StakingSourcesView.tsx b/src/app/Components/StakingSourcesView.tsx
index be27d26..0b148ed 100644
--- a/src/app/Components/StakingSourcesView.tsx
+++ b/src/app/Components/StakingSourcesView.tsx
@@ -116,38 +116,40 @@ const StakingSourcesView = (props: {
   const rows = handleRows();
 
   return (
-    <div className="border-2 border-white p-8 rounded-xl col-span-5">
-      <div className="flex items-center mb-4">
-        <h2 className="text-3xl text-white font-bold">Your Moons</h2>
-        <button
-          className="bg-green-600 rounded-full ml-2 p-1 inline"
-          onClick={() => props.createStakingSource()}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            strokeWidth={2}
-            stroke="currentColor"
-            className="w-6 h-6"
+    <div className="bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl h-auto p-1 rounded-xl col-span-5">
+      <div className="bg-slate-900 p-8 rounded-xl">
+        <div className="flex items-center mb-4">
+          <h2 className="text-3xl text-white font-bold">Your Moons</h2>
+          <button
+            className="bg-green-600 rounded-full ml-2 p-1 inline"
+            onClick={() => props.createStakingSource()}
           >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M12 4.5v15m7.5-7.5h-15"
-            />
-          </svg>
-        </button>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={2}
+              stroke="currentColor"
+              className="w-6 h-6"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M12 4.5v15m7.5-7.5h-15"
+              />
+            </svg>
+          </button>
+        </div>
+        {rows.map((stakingSources, index) => (
+          <Row
+            key={index}
+            stakingSources={stakingSources}
+            inventoryItems={props.inventoryItems}
+            claimStake={props.claimStake}
+            startStake={props.startStake}
+          />
+        ))}
       </div>
-      {rows.map((stakingSources, index) => (
-        <Row
-          key={index}
-          stakingSources={stakingSources}
-          inventoryItems={props.inventoryItems}
-          claimStake={props.claimStake}
-          startStake={props.startStake}
-        />
-      ))}
     </div>
   );
 };