JosephFerano/MoonMiners
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleanup some UI stuff

Browse Source
This commit is contained in:
Emil Nielsen 2023-04-07 08:24:41 +07:00
parent 595bd18b14
commit b84b8eadb5
7 changed files with 126 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/Components/BankAccountsView.tsx
View File

@ -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">
$

4
src/app/Components/InventoryItemView.tsx
View File

@ -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>
);
};

4
src/app/Components/NavbarVertical.tsx
View File

@ -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}

4
src/app/Components/ResourceAccount.tsx
View File

@ -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"}
>

2
src/app/Components/SelectDropdown.tsx
View File

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

34
src/app/Components/StakingSource.tsx
View File

@ -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">
{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 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>
);

4
src/app/Components/StakingSourcesView.tsx
View File

@ -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>
);
};