Restyle

Author: infinitel8p

src/App.css

@@ -6,17 +6,3 @@
 	color: #f6f6f6;
 	background-color: #2f2f2f;
 }
-
-input,
-button {
-	border-radius: 8px;
-	border: 1px solid transparent;
-	padding: 0.6em 1.2em;
-	font-size: 1em;
-	font-weight: 500;
-	font-family: inherit;
-	color: #ffffff;
-	background-color: #0f0f0f98;
-	transition: border-color 0.25s;
-	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-}

src/App.tsx

@@ -25,7 +25,27 @@ function App() {
     }
 
     return (
-        <div className="m-0 pt-[5vh] flex flex-col justify-between h-screen text-center">
+        <div className="text-center">
+            <p className="text-xs my-2"><span className="font-bold italic">Note:</span> Type effectiveness multipliers may vary in other games outside the core series.</p>
+
+            <form
+                className="flex flex-col justify-center mb-10"
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    searchPokemon();
+                }}
+            >
+
+                <div className="flex justify-center gap-3">
+                    <input
+                        id="pokemon-input"
+                        onChange={(e) => setName(e.currentTarget.value.toLowerCase())}
+                        placeholder="Enter a Pokémon name..."
+                        className="cursor-pointer text-lg border-1 rounded-lg py-2 px-4 bg-[#0f0f0f98] focus:outline-none focus:ring-1 focus:ring-red-500"
+                    />
+                    <button type="submit" className="cursor-pointer text-lg border-1 rounded-lg py-2 px-4 bg-[#0f0f0f98] hover:ring-1 hover:ring-red-500">Find</button>
+                </div>
+            </form>
             <div>
                 {pokemonData ? (
                     <div>
@@ -38,7 +58,7 @@ function App() {
                         <p className="mt-2">
                             <strong>Type:</strong> {pokemonData?.types?.map((type: any) => capitalize(type.type.name)).join(", ")}
                         </p>
-                        <div className="mt-10">
+                        <div>
                             {pokemonData?.weaknesses ? (
                                 ['2x', '0.5x', '0x'].map((multiplier) => (
                                     <CollapsibleSection key={multiplier} title={`${multiplier} ${multiplier === '2x' ? 'Weaknesses' : multiplier === '0.5x' ? 'Resistances' : 'Immunities'}`}>
@@ -67,24 +87,6 @@ function App() {
             </div>
 
             {error && <p className="text-red-500">{error}</p>}
-
-            <form
-                className="flex flex-col justify-center gap-2 mt-2"
-                onSubmit={(e) => {
-                    e.preventDefault();
-                    searchPokemon();
-                }}
-            >
-                <div className="flex justify-center gap-2 mt-2">
-                    <input
-                        id="pokemon-input"
-                        onChange={(e) => setName(e.currentTarget.value.toLowerCase())}
-                        placeholder="Enter a Pokémon name..."
-                    />
-                    <button type="submit" className="cursor-pointer">Find</button>
-                </div>
-                <p className="text-xs italic">Note: Type effectiveness multipliers may vary in other games outside the core series.</p>
-            </form>
         </div>
     );
 }

src/components/CollapsibleSection.tsx

@@ -9,14 +9,14 @@ const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({ title, children
     const [isOpen, setIsOpen] = useState(false);
 
     return (
-        <div className="mb-2">
+        <div className="">
             <button
-                className="text-lg font-bold w-64 mt-5"
+                className="text-lg font-bold mt-4 w-56 border-1 rounded-lg py-2 px-4 bg-[#0f0f0f98] hover:ring-1 hover:ring-red-500"
                 onClick={() => setIsOpen(!isOpen)}
             >
-                {title} {isOpen ? "▲" : "▼"}
+                <p className="flex justify-between">{title} <span>{isOpen ? "▲" : "▼"}</span></p>
             </button>
-            {isOpen && <div className="ml-4 mt-2">{children}</div>}
+            {isOpen && <div className="">{children}</div>}
         </div>
     );
 };