Cleanup some UI stuff

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="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">
+          <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">
               $

src/app/Components/InventoryItemView.tsx

@@ -8,7 +8,8 @@ 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">
+    <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 &&
@@ -23,6 +24,7 @@ const InventoryItemView = (props: {
             ))}
         </div>
       </div>
+    </div>
   );
 };
 

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">
+      <nav className="bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl">
-        <ul className="">
+        <ul className="bg-slate-900 p-8 rounded-xl">
           {menuItems.map((item) => (
             <li
               key={item.componentKey}

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="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">
+      <div className="bg-slate-900 text-white px-8 py-4 rounded-xl">
         <span
           className={resourceToFc(props.account.resourceType) + " font-bold"}
         >

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) => (

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">
+        {showInfo && (
-          <div className="bg-slate-900 border-2 border-white rounded-xl p-4 text-white">
+          <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 gap-4">
               <div className="flex-1">
                 <p className="font-bold mt-4 mb-2">Active Drills</p>
                 {activeStakes &&
@@ -160,7 +184,6 @@ 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(
@@ -205,8 +228,7 @@ const StakingSource = (props: {
                 )}
             </div>
           </div>
-          </div>
+        )}
-        </div>
       </div>
     </div>
   );

src/app/Components/StakingSourcesView.tsx

@@ -116,7 +116,8 @@ const StakingSourcesView = (props: {
   const rows = handleRows();
 
   return (
-    <div className="border-2 border-white p-8 rounded-xl col-span-5">
+    <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
@@ -149,6 +150,7 @@ const StakingSourcesView = (props: {
           />
         ))}
       </div>
+    </div>
   );
 };