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="flex-1 md:mb-0 mb-2 h-auto p-1 rounded-xl">
-        <div className="relative bg-slate-900 text-white px-8 py-4 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,23 +121,30 @@ const ResourceAccount = (props: {
             })}{" "}
             kg
           </h3>
-          <svg
+          <div className="absolute right-0 top-0 mt-4 mr-4 hover:cursor-pointer">
-            xmlns="http://www.w3.org/2000/svg"
+            <div
-            fill="none"
+              className="flex"
-            viewBox="0 0 24 24"
+              onClick={() => {
-            strokeWidth={1.5}
+                setShowModal(!showModal);
-            stroke="currentColor"
+              }}
-            className="w-6 h-6 absolute right-0 top-0 mt-4 mr-4 hover:cursor-pointer"
+            >
-            onClick={() => {
+              <span className="mr-2">Sell</span>
-              setShowModal(!showModal);
+              <svg
-            }}
+                xmlns="http://www.w3.org/2000/svg"
-          >
+                fill="none"
-            <path
+                viewBox="0 0 24 24"
-              strokeLinecap="round"
+                strokeWidth={1.5}
-              strokeLinejoin="round"
+                stroke="currentColor"
-              d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
+                className="w-6 h-6"
-            />
+              >
-          </svg>
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z"
+                />
+              </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-white bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 text-3xl font-bold rounded-xl py-2 "
-                  : "text-2xl"
+                  : "text-white text-2xl"
               }`}
               onClick={() => onMenuItemClick(item.componentKey)}
             >

src/app/Components/Staking/StakingSource.tsx

@@ -119,122 +119,101 @@ const StakingSource = (props: {
   };
 
   return (
-    <div className="flex justify-center items-center">
+    <div className="flex">
-      <div className="relative group">
+      <Image
-        <Image
+        src={"/assets/moons/" + props.stakingSource.image}
-          src={"/assets/moons/" + props.stakingSource.image}
+        alt="Moon"
-          alt="Moon"
+        width={300}
-          width={props.stakingSource.size}
+        height={300}
-          height={props.stakingSource.size}
+        style={{ objectFit: "contain" }}
-          onClick={() => setShowInfo(!showInfo)}
+        className="mr-4"
-          className="hover:cursor-pointer"
+      />
-        />
+      <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">
-        {showInfo && (
+        <div className="bg-slate-900 md:rounded-xl p-4">
-          <div className="z-10 fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+          <div className="">
-            <div className="w-full h-full md:h-auto max-w-md max-h-full overflow-y-auto">
+            <h3 className="text-3xl font-bold mb-2">
-              <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">
+              {props.stakingSource.name}
-                <div className="h-full md:h-auto bg-slate-900 md:rounded-xl p-4">
+            </h3>
-                  <button
+            <p className="text-sm">{props.stakingSource.description}</p>
-                    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-3xl 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 &&
-                      activeStakes.map((stake, id) => (
-                        <div
-                          key={id}
-                          className="border border-white rounded-xl p-3 mb-2 bg-black/20"
-                        >
-                          <p>
-                            <span className="font-bold">Drill: </span>
-                            {props.inventoryItems &&
-                              getObjectFromArray(
-                                props.inventoryItems,
-                                "id",
-                                stake.inventoryItemId
-                              )?.storeItem.name}
-                          </p>
-                          <p>
-                            <span className="font-bold">Resource: </span>
-                            {stake.resourceType}
-                          </p>
-                          <p className="mb-2">
-                            <span className="font-bold">Yield: </span>
-                            {stake.stakeAmount}
-                          </p>
-                          <RenderButtonOrCountdown stake={stake} />
-                        </div>
-                      ))}
-                  </div>
-                  <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={selectedInventoryItemId === item.id}
-                              />
-                              {selectedInventoryItemId === 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 className="flex">
+            {activeStakes.length > 0 && (
+              <div className="">
+                <p className="font-bold mt-4 mb-2">Active Drills</p>
+                {activeStakes.map((stake, id) => (
+                  <div
+                    key={id}
+                    className="border border-white rounded-xl p-3 mb-2 bg-black/20"
+                  >
+                    <p>
+                      <span className="font-bold">Drill: </span>
+                      {props.inventoryItems &&
+                        getObjectFromArray(
+                          props.inventoryItems,
+                          "id",
+                          stake.inventoryItemId
+                        )?.storeItem.name}
+                    </p>
+                    <p>
+                      <span className="font-bold">Resource: </span>
+                      {stake.resourceType}
+                    </p>
+                    <p className="mb-2">
+                      <span className="font-bold">Yield: </span>
+                      {stake.stakeAmount}
+                    </p>
+                    <RenderButtonOrCountdown stake={stake} />
+                  </div>
+                ))}
+              </div>
+            )}
+            {props.inventoryItems && (
+              <div className="">
+                <p className="font-bold mt-4 mb-2">Inactive Drills</p>
+                {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={selectedInventoryItemId === item.id}
+                          />
+                          {selectedInventoryItemId === 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>
   );

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,19 +39,22 @@ const StakingSourcesView = (props: {
             </svg>
           </button>
         </div>
-        {rows.length > 0 ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-          rows.map((stakingSources, index) => (
+          {props.stakingSources ? (
-            <Row
+            props.stakingSources.map((stakingSource, index) => (
-              key={index}
+              <div key={index} className="mb-4">
-              stakingSources={stakingSources}
+                <StakingSource
-              inventoryItems={props.inventoryItems}
+                  stakingSource={stakingSource}
-              claimStake={props.claimStake}
+                  inventoryItems={props.inventoryItems}
-              startStake={props.startStake}
+                  claimStake={props.claimStake}
-            />
+                  startStake={props.startStake}
-          ))
+                />
-        ) : (
+              </div>
-          <p className="text-white text-2xl">You don't have any moons</p>
+            ))
-        )}
+          ) : (
+            <p className="text-white text-2xl">You don't have any moons</p>
+          )}
+        </div>
       </div>
     </div>
   );