UI: Tabs, full color resources, omit modals

src/app/Components/Accounts/Account.tsx

@@ -1,7 +1,7 @@
 "use client";
 import React, { useEffect, useState } from "react";
 import { IResourceAccount, IConversionPair, IGameConfig } from "typings";
-import { resourceToFc } from "../../../utils/helpers";
+import { resourceToFc, resourceToBg } from "../../../utils/helpers";
 import ResourceModal from "./ResourceModal";
 
 const ResourceAccount = (props: {
@@ -101,8 +101,14 @@ const ResourceAccount = (props: {
           </div>
         </div>
       )}
-      <div className="flex-1 md:mb-0 mb-2 bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl">
-        <div className="relative bg-slate-900 text-white px-8 py-4 rounded-xl">
+      <div className="flex-1 md:mb-0 mb-2 h-auto p-1 rounded-xl">
+        <div
+          className={
+            "bg-gradient-to-br hover:bg-gradient-to-tr " +
+            resourceToBg(props.account.resourceType) +
+            " relative text-white px-8 py-4 rounded-xl"
+          }
+        >
           <span
             className={resourceToFc(props.account.resourceType) + " font-bold"}
           >
@@ -115,16 +121,21 @@ const ResourceAccount = (props: {
             })}{" "}
             kg
           </h3>
+          <div className="absolute right-0 top-0 mt-4 mr-4 hover:cursor-pointer">
+            <div
+              className="flex"
+              onClick={() => {
+                setShowModal(!showModal);
+              }}
+            >
+              <span className="mr-2">Sell</span>
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
                 strokeWidth={1.5}
                 stroke="currentColor"
-            className="w-6 h-6 absolute right-0 top-0 mt-4 mr-4 hover:cursor-pointer"
-            onClick={() => {
-              setShowModal(!showModal);
-            }}
+                className="w-6 h-6"
               >
                 <path
                   strokeLinecap="round"
@@ -134,6 +145,8 @@ const ResourceAccount = (props: {
               </svg>
             </div>
           </div>
+        </div>
+      </div>
     </>
   );
 };

src/app/Components/Navigation/NavbarVertical.tsx

@@ -23,14 +23,14 @@ const NavbarVertical: React.FC<NavbarProps> = ({
   return (
     <div className="w-full col-span-5 md:col-span-1">
       <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">
+        <ul className="bg-slate-900 rounded-xl p-2">
           {menuItems.map((item) => (
             <li
               key={item.componentKey}
-              className={`text-white cursor-pointer mb-1 ${
+              className={`cursor-pointer mb-1 px-4 ${
                 item.componentKey === activeItem
-                  ? "text-3xl font-bold"
-                  : "text-2xl"
+                  ? "text-white bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 text-3xl font-bold rounded-xl py-2 "
+                  : "text-white text-2xl"
               }`}
               onClick={() => onMenuItemClick(item.componentKey)}
             >

src/app/Components/Staking/StakingSource.tsx

@@ -119,50 +119,28 @@ const StakingSource = (props: {
   };
 
   return (
-    <div className="flex justify-center items-center">
-      <div className="relative group">
+    <div className="flex">
       <Image
         src={"/assets/moons/" + props.stakingSource.image}
         alt="Moon"
-          width={props.stakingSource.size}
-          height={props.stakingSource.size}
-          onClick={() => setShowInfo(!showInfo)}
-          className="hover:cursor-pointer"
+        width={300}
+        height={300}
+        style={{ objectFit: "contain" }}
+        className="mr-4"
       />
-        {showInfo && (
-          <div className="z-10 fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
-            <div className="w-full h-full md:h-auto max-w-md max-h-full overflow-y-auto">
-              <div className="relative h-full md:h-auto text-white bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto md:rounded-xl h-auto p-1">
-                <div className="h-full md:h-auto bg-slate-900 md:rounded-xl p-4">
-                  <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>
+      <div className="max-w-md text-white bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 md:rounded-xl p-1">
+        <div className="bg-slate-900 md:rounded-xl p-4">
+          <div className="">
             <h3 className="text-3xl font-bold mb-2">
               {props.stakingSource.name}
             </h3>
             <p className="text-sm">{props.stakingSource.description}</p>
-                  <div className="flex-1">
+          </div>
+          <div className="flex">
+            {activeStakes.length > 0 && (
+              <div className="">
                 <p className="font-bold mt-4 mb-2">Active Drills</p>
-                    {activeStakes &&
-                      activeStakes.map((stake, id) => (
+                {activeStakes.map((stake, id) => (
                   <div
                     key={id}
                     className="border border-white rounded-xl p-3 mb-2 bg-black/20"
@@ -188,9 +166,11 @@ const StakingSource = (props: {
                   </div>
                 ))}
               </div>
+            )}
+            {props.inventoryItems && (
+              <div className="">
                 <p className="font-bold mt-4 mb-2">Inactive Drills</p>
-                  {props.inventoryItems &&
-                    props.inventoryItems.map(
+                {props.inventoryItems.map(
                   (item, id) =>
                     !isActive(item) && (
                       <div
@@ -231,12 +211,11 @@ const StakingSource = (props: {
                     )
                 )}
               </div>
-              </div>
-            </div>
-          </div>
             )}
           </div>
         </div>
+      </div>
+    </div>
   );
 };
 

src/app/Components/Staking/StakingSourcesView.tsx

@@ -3,41 +3,6 @@ import React from "react";
 import { IInventoryItem, IStakingSource } from "typings";
 import StakingSource from "./StakingSource";
 
-interface RowProps {
-  stakingSources: IStakingSource[];
-  inventoryItems: IInventoryItem[] | undefined | null;
-  claimStake: (stakingEventId: number) => void;
-  startStake: (
-    inventoryItemId: string,
-    storeItemId: number,
-    wellId: string
-  ) => void;
-}
-
-const Row: React.FC<RowProps> = ({
-  stakingSources,
-  inventoryItems,
-  claimStake,
-  startStake,
-}) => {
-  return (
-    <div className="md:flex md:justify-between md:items-center w-full mb-8 mt-8">
-      {stakingSources.map((stakingSource, index) => (
-        <div key={index} className="w-full">
-          <StakingSource
-            stakingSource={stakingSource}
-            inventoryItems={inventoryItems}
-            claimStake={claimStake}
-            startStake={startStake}
-          />
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const moonSizes = [250, 375, 300, 225, 175, 300, 200, 150, 300, 225];
-
 const StakingSourcesView = (props: {
   stakingSources: IStakingSource[] | null;
   inventoryItems: IInventoryItem[] | null | undefined;
@@ -49,34 +14,6 @@ const StakingSourcesView = (props: {
   ) => void;
   createStakingSource: () => void;
 }) => {
-  // Generate rows of stakingSources
-  const handleRows = () => {
-    let rows = [];
-    let currentRow: IStakingSource[] = [];
-    let rowSize = 3;
-    if (props.stakingSources) {
-      props.stakingSources.forEach((stakingSource, index) => {
-        currentRow.push({ ...stakingSource, size: moonSizes[index] });
-
-        if (currentRow.length === rowSize) {
-          rows.push(currentRow);
-          currentRow = [];
-          rowSize = rowSize === 3 ? 4 : 3;
-        }
-      });
-
-      if (currentRow.length) {
-        rows.push(currentRow);
-      }
-
-      return rows;
-    } else {
-      return [];
-    }
-  };
-
-  const rows = handleRows();
-
   return (
     <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 h-full">
@@ -102,21 +39,24 @@ const StakingSourcesView = (props: {
             </svg>
           </button>
         </div>
-        {rows.length > 0 ? (
-          rows.map((stakingSources, index) => (
-            <Row
-              key={index}
-              stakingSources={stakingSources}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          {props.stakingSources ? (
+            props.stakingSources.map((stakingSource, index) => (
+              <div key={index} className="mb-4">
+                <StakingSource
+                  stakingSource={stakingSource}
                   inventoryItems={props.inventoryItems}
                   claimStake={props.claimStake}
                   startStake={props.startStake}
                 />
+              </div>
             ))
           ) : (
             <p className="text-white text-2xl">You don't have any moons</p>
           )}
         </div>
       </div>
+    </div>
   );
 };