xx/vgtracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update style

Browse source
This commit is contained in:
Rasmus Moorats 2025-02-18 12:37:46 +02:00
parent 21a328ece6
commit a5550d2c5b
Signed by: xx
GPG key ID: FE14255A6AE7241C
2 changed files with 15 additions and 15 deletions

26
src/App.tsx
View file

@ -145,27 +145,27 @@ const App = () => {
const gatheredItems = items.filter(item => item.gathered >= item.required);
return (
<div className="max-w-2xl mx-auto p-4 sm:p-6 space-y-6 bg-gray-900 text-gray-100 min-h-screen">
<div className="max-w-2xl mx-auto p-4 sm:p-6 space-y-6 bg-zinc-900 text-zinc-100 min-h-screen sm:min-h-0 border-zinc-800 border-1 rounded sm:my-8">
<form onSubmit={addItem} className="flex flex-wrap gap-2 sm:gap-4">
<div className="flex-1 min-w-[200px] relative">
<div className="flex-1 relative">
<input
ref={inputRef}
type="text"
value={newItemName}
onChange={handleInputChange}
placeholder="Item name"
className="w-full px-4 py-2 rounded bg-gray-800 text-gray-100 placeholder-gray-500"
className="w-full px-4 py-2 rounded bg-zinc-800 text-zinc-100 placeholder-zinc-500"
/>
{showSuggestions && suggestions.length > 0 && (
<div
ref={suggestionsRef}
className="absolute z-10 w-full mt-1 bg-gray-800 rounded shadow-lg"
className="absolute z-10 w-full mt-1 bg-zinc-800 rounded shadow-lg"
>
{suggestions.map((result, index) => (
<div
key={index}
onClick={() => { handleSuggestionClick(result.item); }}
className="px-4 py-2 cursor-pointer hover:bg-gray-700"
className="px-4 py-2 cursor-pointer hover:bg-zinc-700"
>
{highlightMatch(result.item, result.matches)}
</div>
@ -178,11 +178,11 @@ const App = () => {
value={newItemAmount}
onChange={(e) => { setNewItemAmount(e.target.value); }}
min="1"
className="w-20 px-2 py-2 rounded bg-gray-800 text-gray-100"
className="w-20 px-2 py-2 rounded bg-zinc-800 text-zinc-100"
/>
<button
type="submit"
className="px-4 sm:px-6 py-2 bg-blue-600 text-gray-100 rounded hover:bg-blue-700 cursor-pointer"
className="px-4 sm:px-6 py-2 bg-blue-600 text-zinc-100 rounded hover:bg-blue-700 cursor-pointer"
>
Add
</button>
@ -204,13 +204,13 @@ const App = () => {
<div className="flex items-center gap-2">
<button
onClick={() => { updateGathered(item.id, -1); }}
className="p-1 text-gray-400 hover:text-gray-200 cursor-pointer"
className="p-1 text-zinc-400 hover:text-zinc-200 cursor-pointer"
>
<Minus size={20} />
</button>
<button
onClick={() => { updateGathered(item.id, 1); }}
className="p-1 text-gray-400 hover:text-gray-200 cursor-pointer"
className="p-1 text-zinc-400 hover:text-zinc-200 cursor-pointer"
>
<Plus size={20} />
</button>
@ -229,14 +229,14 @@ const App = () => {
{gatheredItems.length > 0 && (
<>
<hr className="border-gray-700" />
<hr className="border-zinc-800" />
<div className="space-y-4">
<h2 className="text-xl font-bold">Gathered</h2>
<div className="space-y-2">
{gatheredItems.map(item => (
<div
key={item.id}
className="flex items-center justify-between py-2 text-gray-500"
className="flex items-center justify-between py-2 text-zinc-500"
>
<span className="flex-1">
{item.name} ({item.gathered}/{item.required})
@ -244,7 +244,7 @@ const App = () => {
<div className="flex items-center gap-2">
<button
onClick={() => { updateGathered(item.id, -1); }}
className="p-1 text-gray-600 hover:text-gray-400 cursor-pointer"
className="p-1 text-zinc-600 hover:text-zinc-400 cursor-pointer"
>
<Minus size={20} />
</button>
@ -266,4 +266,4 @@ const App = () => {
);
};
export default App;
export default App;

4
src/index.css
View file

@ -1,5 +1,5 @@
@import "tailwindcss";
html {
background-color: var(--color-gray-800);
}
background-color: var(--color-zinc-900);
}