fix: resolve Tailwind dynamic class bug and duplicate error rendering

src/components/Button.tsx

@@ -1,14 +1,26 @@
+const colorMap: Record<string, string> = {
+    mygreen: 'bg-mygreen',
+    myyellow: 'bg-myyellow',
+    myred: 'bg-myred',
+};
+
+const hoverMap: Record<string, string> = {
+    mygreen: 'hover:bg-mygreen',
+    myyellow: 'hover:bg-myyellow',
+    myred: 'hover:bg-myred',
+};
+
 interface ButtonProps {
     color?: string;
     hover?: string;
     text: string;
     onClick?: () => void;
 }
 
-function Button({ color, hover, text, onClick }: ButtonProps) {
+function Button({ color = 'mygreen', hover = 'mygreen', text, onClick }: ButtonProps) {
     return (
         <div className="flex items-center justify-center">
-            <button className={`btn bg-${color} hover:bg-${hover}  `} onClick={onClick}>
+            <button className={`btn ${colorMap[color] || 'bg-mygreen'} ${hoverMap[hover] || 'hover:bg-mygreen'}`} onClick={onClick}>
                 {text}
             </button>
         </div>

src/pages/Auth/Auth.tsx

@@ -531,17 +531,6 @@ function Auth() {
                         ))}
                       </ul>
                     )}
-
-                    {errors.password && (
-                      <ul
-                        className="px-2 text-xs mt-1"
-                        style={{ color: "red" }}
-                      >
-                        {errors.password.map((error, index) => (
-                          <li key={index}>{error}</li>
-                        ))}
-                      </ul>
-                    )}
                   </div>
                   <div className="mt-4 text-sm text-gray-600 text-right font-bold tracking-wider">
                     <Link to="#" onClick={handleForgotPasswordRequest}>