From db066f8769511cb91ab35bbb08ba8e7e99c76832 Mon Sep 17 00:00:00 2001
From: Jib <jib.adegunloye@mongodb.com>
Date: Fri, 28 Feb 2025 16:53:38 -0500
Subject: [PATCH] docker frontend build fixes

---
 .../frontend/app/components/settings/Profile.tsx               | 3 ++-
 .../frontend/app/components/settings/Security.tsx              | 3 ++-
 {{cookiecutter.project_slug}}/frontend/app/login/page.tsx      | 3 ++-
 .../frontend/app/reset-password/page.tsx                       | 3 ++-
 {{cookiecutter.project_slug}}/frontend/package.json            | 1 +
 {{cookiecutter.project_slug}}/frontend/postcss.config.js       | 2 +-
 {{cookiecutter.project_slug}}/frontend/tailwind.config.ts      | 2 +-
 7 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/{{cookiecutter.project_slug}}/frontend/app/components/settings/Profile.tsx b/{{cookiecutter.project_slug}}/frontend/app/components/settings/Profile.tsx
index 04fa578..e61b535 100644
--- a/{{cookiecutter.project_slug}}/frontend/app/components/settings/Profile.tsx
+++ b/{{cookiecutter.project_slug}}/frontend/app/components/settings/Profile.tsx
@@ -18,7 +18,8 @@ const renderError = (type: LiteralUnion<keyof RegisterOptions, string>) => {
   switch (type) {
     case "required":
       return <div className={style}>This field is required.</div>;
-    case "minLength" || "maxLength":
+    case "minLength":
+    case "maxLength":
       return (
         <div className={style}>
           Your password must be between 8 and 64 characters long.
diff --git a/{{cookiecutter.project_slug}}/frontend/app/components/settings/Security.tsx b/{{cookiecutter.project_slug}}/frontend/app/components/settings/Security.tsx
index 6f7f167..d95a48d 100644
--- a/{{cookiecutter.project_slug}}/frontend/app/components/settings/Security.tsx
+++ b/{{cookiecutter.project_slug}}/frontend/app/components/settings/Security.tsx
@@ -39,7 +39,8 @@ const renderError = (type: LiteralUnion<keyof RegisterOptions, string>) => {
   switch (type) {
     case "required":
       return <div className={style}>This field is required.</div>;
-    case "minLength" || "maxLength":
+    case "minLength":
+    case "maxLength":
       return (
         <div className={style}>
           Your password must be between 8 and 64 characters long.
diff --git a/{{cookiecutter.project_slug}}/frontend/app/login/page.tsx b/{{cookiecutter.project_slug}}/frontend/app/login/page.tsx
index 63bcfc6..5202013 100644
--- a/{{cookiecutter.project_slug}}/frontend/app/login/page.tsx
+++ b/{{cookiecutter.project_slug}}/frontend/app/login/page.tsx
@@ -26,7 +26,8 @@ const renderError = (type: LiteralUnion<keyof RegisterOptions, string>) => {
   switch (type) {
     case "required":
       return <div className={style}>This field is required.</div>;
-    case "minLength" || "maxLength":
+    case "minLength":
+    case "maxLength":
       return (
         <div className={style}>
           Your password must be between 8 and 64 characters long.
diff --git a/{{cookiecutter.project_slug}}/frontend/app/reset-password/page.tsx b/{{cookiecutter.project_slug}}/frontend/app/reset-password/page.tsx
index 0b7faae..9a6b746 100644
--- a/{{cookiecutter.project_slug}}/frontend/app/reset-password/page.tsx
+++ b/{{cookiecutter.project_slug}}/frontend/app/reset-password/page.tsx
@@ -21,7 +21,8 @@ const renderError = (type: LiteralUnion<keyof RegisterOptions, string>) => {
   switch (type) {
     case "required":
       return <div className={style}>This field is required.</div>;
-    case "minLength" || "maxLength":
+    case "minLength":
+    case "maxLength":
       return (
         <div className={style}>
           Your password must be between 8 and 64 characters long.
diff --git a/{{cookiecutter.project_slug}}/frontend/package.json b/{{cookiecutter.project_slug}}/frontend/package.json
index 4da9fa2..cf83baf 100644
--- a/{{cookiecutter.project_slug}}/frontend/package.json
+++ b/{{cookiecutter.project_slug}}/frontend/package.json
@@ -18,6 +18,7 @@
     "@reduxjs/toolkit": "^1.9.6",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.6",
+    "@tailwindcss/postcss": "^4.0.9",
     "@tailwindcss/typography": "^0.5.10",
     "gray-matter": "^4.0.3",
     "next": "^14.0.4",
diff --git a/{{cookiecutter.project_slug}}/frontend/postcss.config.js b/{{cookiecutter.project_slug}}/frontend/postcss.config.js
index 12a703d..d87a966 100644
--- a/{{cookiecutter.project_slug}}/frontend/postcss.config.js
+++ b/{{cookiecutter.project_slug}}/frontend/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
     autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 };
diff --git a/{{cookiecutter.project_slug}}/frontend/tailwind.config.ts b/{{cookiecutter.project_slug}}/frontend/tailwind.config.ts
index 8b2596f..10f053f 100644
--- a/{{cookiecutter.project_slug}}/frontend/tailwind.config.ts
+++ b/{{cookiecutter.project_slug}}/frontend/tailwind.config.ts
@@ -1,6 +1,6 @@
 import type { Config } from "tailwindcss";
+import colors from "tailwindcss/colors";
 
-const colors: import("tailwindcss").Config = require("tailwindcss/colors");
 module.exports = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",