+ );
+}
+
+const styles = {
+ formWrapper: "border p-4 mb-4 flex flex-col rounded-lg",
+ label: "mb-2 text-md text-gray-500",
+ input:
+ "border border-gray-300 text-gray-900 text-sm rounded focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5",
+ alertError:
+ "flex flex-col items-center py-2 px-4 border border-red-300 mt-6 gap-1 text-sm rounded-lg bg-red-50 text-red-800",
+ alertSuccess:
+ "flex flex-col items-center p-4 border border-green-300 mt-6 gap-1 text-sm rounded-lg bg-green-50",
+ submitButton:
+ "text-black bg-[#02F58C] hover:bg-[#02E281] font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 disabled:bg-gray-300 disabled:text-gray-800 disabled:cursor-not-allowed",
+};
diff --git a/frontend/src/components/fuel-logo.tsx b/frontend/src/components/fuel-logo.tsx
new file mode 100644
index 0000000..6bbb5a3
--- /dev/null
+++ b/frontend/src/components/fuel-logo.tsx
@@ -0,0 +1,35 @@
+import { Component } from "preact";
+
+export class FuelLogo extends Component {
+ render() {
+ return (
+