Sticky Header

.eslintrc.json

@@ -30,6 +30,7 @@
 				"alphabetize": { "order": "asc", "ignoreCase": true }
 			}
 		],
-		"@typescript-eslint/no-explicit-any": "off"
+		"@typescript-eslint/no-explicit-any": "off",
+		"@next/next/no-img-element": "off"
 	}
 }

.github/workflows/deploy.yml

@@ -58,6 +58,7 @@ jobs:
 
       - name: Build with Next.js
         run: yarn next build
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:

next.config.js

@@ -9,7 +9,7 @@ const withPWA = require("next-pwa")({
 
 const nextConfig = withPWA({
 	output: "export",
-	basePath: "/frontend",
+	basePath: process.env.IN_DEVELOPMENT ? "" : "/frontend",
 	images: {
 		unoptimized: true,
 	},

package.json

@@ -44,7 +44,7 @@
 		"typescript": "latest"
 	},
 	"scripts": {
-		"dev": "next dev -p 3001",
+		"dev": "IN_DEVELOPMENT=true next dev -p 3001",
 		"build": "next build",
 		"start": "next start",
 		"lint": "eslint . --quiet",

public/manifest.json

@@ -1,6 +1,6 @@
 {
-	"theme_color": "#803b7e",
-	"background_color": "#f9daf4",
+	"theme_color": "#00c9fe",
+	"background_color": "#ffffff",
 	"display": "standalone",
 	"scope": "/",
 	"start_url": "/",

src/app/(public)/transacao/[transactionId]/TransactionInOut/index.tsx

@@ -3,7 +3,6 @@
 import { budget, cards, categories } from "assets/data";
 import { Icon } from "components/Icon";
 import { useCurrentBudget } from "contexts/current-budget";
-import Image from "next/image";
 import { CardTypeEnum } from "types/enums/card-type";
 import { TransactionInOut as TransactionInOutType } from "types/transaction";
 import { formatFullDate } from "utils/date";
@@ -35,7 +34,7 @@ const Card = ({ cardId }: { cardId: string }) => {
 			<span className="text-sm text-content-t">Cartao</span>
 
 			<div className="flex flex-row gap-2 items-center">
-				<Image
+				<img
 					src={card.iconUrl}
 					alt={card.name}
 					className="w-12 h-full rounded"

src/components/Header/index.tsx

@@ -21,7 +21,7 @@ export const Header = ({
 	const router = useRouter();
 
 	return (
-		<section>
+		<section className="sticky top-0 z-40 shadow">
 			<div className="bg-primary container-padding text-center items-center relative">
 				{hasBackBtn && (
 					<button

src/components/Inputs/Select/index.tsx

@@ -1,7 +1,6 @@
 import { Listbox, Transition } from "@headlessui/react";
 import { colors } from "assets/colors";
 import { Icon } from "components/Icon";
-import Image from "next/image";
 import React from "react";
 import { Fragment } from "react";
 import { BsFillCaretDownFill } from "react-icons/bs";
@@ -88,7 +87,7 @@ export function SelectInput<T extends Record<string, any>>({
 											<Icon icon={selected[fieldNames.icon]} size={2} />
 										)}
 										{fieldNames.iconUrl && (
-											<Image
+											<img
 												src={selected[fieldNames.iconUrl]}
 												alt={selected[fieldNames.label]}
 												className="w-4 h-4"
@@ -169,7 +168,7 @@ export function SelectInput<T extends Record<string, any>>({
 												<Icon icon={d[fieldNames?.icon]} size={2} />
 											)}
 											{fieldNames.iconUrl && d[fieldNames.iconUrl] && (
-												<Image
+												<img
 													src={d[fieldNames?.iconUrl]}
 													alt={d[fieldNames.label]}
 													className="w-4 h-4"

src/components/WalletItem/index.tsx

@@ -1,4 +1,3 @@
-import Image from "next/image";
 import { MdKeyboardArrowRight } from "react-icons/md";
 
 interface Props {
@@ -18,7 +17,7 @@ export const WalletItem = ({
 }: Props) => {
 	return (
 		<div className="relative grid grid-cols-7 gap-1 items-center bg-accent text-accent-content container-padding rounded">
-			<Image src={iconUrl} alt={label} className="w-12 h-full rounded" />
+			<img src={iconUrl} alt={label} className="w-12 h-full rounded" />
 
 			<div className="flex flex-col col-span-3">
 				<span className="font-semibold">{name}</span>