Merge branch 'main' into main

safetrustcr · Dec 23, 2024 · 554ba29 · 554ba29
2 parents 2b7cf08 + 47b49a2
commit 554ba29
Show file tree

Hide file tree

Showing 88 changed files with 1,069 additions and 720 deletions.
diff --git a/.prettierignore b/.prettierignore
diff --git a/.prettierrc b/.prettierrc
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["logolight"]
+}
diff --git a/__test__/components/loginform.test.tsx b/__test__/components/loginform.test.tsx
diff --git a/app/auth/email-verification/page.tsx b/app/auth/email-verification/page.tsx
@@ -137,7 +137,7 @@ const EmailVerificationForm = () => {
           <button
             onClick={handleResendCode}
             disabled={isResending}
-            className="w-full py-3 px-4 bg-orange-500 text-white rounded-md hover:bg-orange-600 disabled:opacity-50"
+            className="w-full py-3 px-4 bg-default-color text-white rounded-md hover:bg-default-color disabled:opacity-50"
           >
             {isResending
               ? t('emailVerification.sendBtn.firstTitle')

diff --git a/app/auth/forgot-password/page.tsx b/app/auth/forgot-password/page.tsx
@@ -6,7 +6,7 @@ import { ThemeToggle } from '@/components/ThemeToggle';
 
 const ForgotPasswordPage: React.FC = () => {
   return (
-    <div className="bg-gray-50 dark:bg-dark-surface min-h-screen flex items-center justify-center relative">
+    <div className="bg-light-secondary dark:bg-dark-surface min-h-screen flex items-center justify-center relative">
       <div className="absolute top-4 right-4 z-50">
         <ThemeToggle />
       </div>

diff --git a/app/auth/login/page.tsx b/app/auth/login/page.tsx
@@ -3,7 +3,7 @@ import LoginCard from '@/components/auth/login/LoginCard';
 
 const SignupPage: React.FC = () => {
   return (
-    <div>
+    <div className="bg-light-primary dark:bg-dark-background">
       <LoginCard />
     </div>
   );

diff --git a/app/auth/new-password/page.tsx b/app/auth/new-password/page.tsx
@@ -46,7 +46,7 @@ export default function NewPassword() {
         />
         <button
           type="submit"
-          className="w-[180px] mx-auto block bg-[#F47521] text-white py-2 rounded-lg hover:bg-orange-600 active:bg-orange-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-all duration-300 ease-in-out flex justify-center items-center"
+          className="w-[180px] mx-auto block bg-default-color text-white py-2 rounded-lg hover:bg-default-color active:bg-default-color disabled:bg-gray-400 disabled:cursor-not-allowed transition-all duration-300 ease-in-out flex justify-center items-center"
           disabled={isLoading}
         >
           {isLoading ? (

diff --git a/app/globals.css b/app/globals.css
@@ -7,6 +7,7 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  --transition-duration: 0.3s;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -21,3 +22,10 @@ body {
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
 }
+
+*, *::before, *::after {
+  transition: background-color var(--transition-duration) ease,
+              color var(--transition-duration) ease,
+              border-color var(--transition-duration) ease,
+              box-shadow var(--transition-duration) ease;
+}
diff --git a/app/house/depositBlocked/page.tsx b/app/house/depositBlocked/page.tsx
@@ -1,21 +1,23 @@
-import React from "react";
-import Header from "@/layouts/Header";
-import PendingHeader from "@/layouts/house/depositBlocked/Header";
-import Details from "@/components/house/depositBlocked/Details";
-import Notes from "@/components/house/depositBlocked/Notes";
-import Process from "@/components/house/depositBlocked/Process";
+import React from 'react';
+import Header from '@/layouts/Header';
+import PendingHeader from '@/layouts/house/depositBlocked/Header';
+import Details from '@/components/house/depositBlocked/Details';
+import Notes from '@/components/house/depositBlocked/Notes';
+import Process from '@/components/house/depositBlocked/Process';
 
 const DepostBlocked: React.FC = () => {
   return (
-    <div className="bg-gray-100 min-h-screen">
+    <div className="bg-gray-100 min-h-screen dark:bg-dark-background">
       <Header />
-      <div className="w-full bg-gray-50 px-10 py-8">
+      <div className="w-full bg-light-secondary dark:bg-dark-background px-10 py-8">
         <PendingHeader />
-        <div className="grid grid-cols-12 gap-6">
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-6">
           <Details />
-          <div className="col-span-4">
+          <div className="col-span-1 md:col-span-4">
             <Notes />
-            <h3 className="text-lg font-bold text-black">Process</h3>
+            <h3 className="text-lg font-bold text-light-primary dark:text-dark-primary">
+              Process
+            </h3>
             <Process />
           </div>
         </div>

diff --git a/app/house/depositReleased/page.tsx b/app/house/depositReleased/page.tsx
@@ -1,21 +1,25 @@
-import React from "react";
-import Header from "@/layouts/Header";
-import PendingHeader from "@/layouts/house/depositReleased/Header";
-import Details from "@/components/house/depositReleased/Details";
-import Notes from "@/components/house/depositReleased/Notes";
-import Process from "@/components/house/depositReleased/Process";
+import React from 'react';
+import Header from '@/layouts/Header';
+import PendingHeader from '@/layouts/house/depositReleased/Header';
+import Details from '@/components/house/depositReleased/Details';
+import Notes from '@/components/house/depositReleased/Notes';
+import Process from '@/components/house/depositReleased/Process';
 
 const DepostBlocked: React.FC = () => {
   return (
-    <div className="bg-gray-100 min-h-screen">
+    <div className="bg-light-secondary dark:bg-dark-background min-h-screen">
       <Header />
-      <div className="w-full bg-gray-50 px-10 py-8">
+      <div className="w-full bg-light-secondary dark:bg-dark-background px-6 sm:px-10 py-8">
         <PendingHeader />
-        <div className="grid grid-cols-12 gap-6">
-          <Details />
-          <div className="col-span-4">
+        <div className="grid grid-cols-1 sm:grid-cols-12 gap-6">
+          <div className="sm:col-span-8">
+            <Details />
+          </div>
+          <div className="sm:col-span-4">
             <Notes />
-            <h3 className="text-lg font-bold text-black">Process</h3>
+            <h3 className="text-lg font-bold text-light-secondary dark:text-dark-primary mt-4 sm:mt-0">
+              Process
+            </h3>
             <Process />
           </div>
         </div>

diff --git a/app/house/new-apartment/page.tsx b/app/house/new-apartment/page.tsx
@@ -7,13 +7,15 @@ import FormNewApartment from '@/components/house/new-apartment/Form';
 
 const Home: React.FC = () => {
   return (
-    <div className="bg-gray-100 min-h-screen">
+    <div className="bg-light-secondary dark:bg-dark-background min-h-screen">
       <Header />
-      <div className="flex">
+      <div className="flex flex-col lg:flex-row">
         <Sidebar />
-        <Bounded title="New Apartment">
-          <FormNewApartment />
-        </Bounded>
+        <div className="flex-1 p-6">
+          <Bounded title="New Apartment">
+            <FormNewApartment />
+          </Bounded>
+        </div>
       </div>
     </div>
   );

diff --git a/app/house/page.tsx b/app/house/page.tsx
@@ -1,15 +1,18 @@
-import React from "react";
-import Header from "@/layouts/Header";
-import Sidebar from "@/layouts/house/Sidebar";
-import PropertyDetails from "@/components/house/PropertyDetails";
+'use client';
+import React from 'react';
+import Header from '@/layouts/Header';
+import Sidebar from '@/layouts/house/Sidebar';
+import PropertyDetails from '@/components/house/PropertyDetails';
 
 const Home: React.FC = () => {
   return (
     <div className="bg-gray-100 min-h-screen">
       <Header />
-      <div className="flex">
-        <Sidebar />
-        <div className="flex-grow">
+      <div className="flex flex-col lg:flex-row">
+        <div className="order-2 lg:order-1">
+          <Sidebar />
+        </div>
+        <div className="flex-grow order-1 lg:order-2">
           <PropertyDetails />
         </div>
       </div>

diff --git a/app/house/paid/page.tsx b/app/house/paid/page.tsx
@@ -1,22 +1,28 @@
-import React from "react";
-import MainHeader from "@/layouts/Header";
-import SectionHeader from "@/layouts/house/paid/Header";
-import Details from "@/components/house/paid/Details";
-import Notes from "@/components/house/paid/Notes";
-import Process from "@/components/house/paid/Process";
+import React from 'react';
+import MainHeader from '@/layouts/Header';
+import SectionHeader from '@/layouts/house/paid/Header';
+import Details from '@/components/house/paid/Details';
+import Notes from '@/components/house/paid/Notes';
+import Process from '@/components/house/paid/Process';
 
 const Paid: React.FC = () => {
   return (
-    <div className="w-full bg-gray-50 min-h-screen">
+    <div className="w-full bg-light-secondary dark:bg-dark-background min-h-screen">
       <MainHeader />
-      <div className="px-10 py-8">
+      <div className="px-4 sm:px-10 py-6 sm:py-8">
         <SectionHeader />
-        <div className="grid grid-cols-12 gap-6">
-          <Details />
-          <div className="col-span-4">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
+          <div className="lg:col-span-8">
+            <Details />
+          </div>
+          <div className="lg:col-span-4 space-y-6">
             <Notes />
-            <h3 className="text-lg font-bold text-black">Process</h3>
-            <Process />
+            <div>
+              <h3 className="text-lg font-bold text-light-primary dark:text-dark-primary">
+                Process
+              </h3>
+              <Process />
+            </div>
           </div>
         </div>
       </div>

diff --git a/app/house/pending/page.tsx b/app/house/pending/page.tsx
@@ -1,21 +1,23 @@
-import React from "react";
-import Header from "@/layouts/Header";
-import PendingHeader from "@/layouts/house/pending/Header";
-import Details from "@/components/house/pending/Details";
-import Notes from "@/components/house/pending/Notes";
-import Process from "@/components/house/pending/Process";
+import React from 'react';
+import Header from '@/layouts/Header';
+import PendingHeader from '@/layouts/house/pending/Header';
+import Details from '@/components/house/pending/Details';
+import Notes from '@/components/house/pending/Notes';
+import Process from '@/components/house/pending/Process';
 
 const Pending: React.FC = () => {
   return (
-    <div className="bg-gray-100 min-h-screen">
+    <div className="bg-light-secondary dark:bg-dark-background min-h-screen">
       <Header />
-      <div className="w-full bg-gray-50 px-10 py-8">
+      <div className="w-full bg-light-secondary dark:bg-dark-background px-4 md:px-10 py-6 md:py-8">
         <PendingHeader />
-        <div className="grid grid-cols-12 gap-6">
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-6 mt-6">
           <Details />
-          <div className="col-span-4">
+          <div className="col-span-1 md:col-span-4">
             <Notes />
-            <h3 className="text-lg font-bold text-black">Process</h3>
+            <h3 className="text-lg font-bold text-light-primary dark:text-dark-primary mt-6">
+              Process
+            </h3>
             <Process />
           </div>
         </div>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -6,13 +6,22 @@ import 'react-toastify/dist/ReactToastify.css';
 import { ThemeProvider } from '@material-tailwind/react';
 import { ThemeProvider as CustomThemeProvider } from '@/providers/ThemeProvider';
 import '../src/i18n/config';
+import themeScript from '@/utils/themeScript';
+
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: themeScript
+          }}
+        />
+      </head>
       <body className="antialiased font-inter" suppressHydrationWarning={true}>
         <div className="min-h-screen flex flex-col">
           <ThemeProvider>

diff --git a/app/page.tsx b/app/page.tsx
@@ -7,9 +7,8 @@ const Home: React.FC = () => {
   return (
     <div className="bg-gray-100 min-h-screen dark:bg-dark-background">
       <Header />
-      <div className="flex">
-        <Sidebar />
-        <div className="flex-grow">
+      <div className="flex flex-col lg:flex-row">
+        <div className="flex-grow p-4">
           <PropertyList />
         </div>
       </div>

diff --git a/app/profile/bids/page.tsx b/app/profile/bids/page.tsx
@@ -10,19 +10,18 @@ const PaidStateBidRequest: React.FC = () => {
     <div className="w-full bg-gray-50 min-h-screen">
       {/* Header Principal */}
       <MainHeader />
-      <div className="px-10 py-8">
+      <div className="px-4 sm:px-10 py-8">
         {/* Encabezado de la sección */}
         <Header />
-        <div className="grid grid-cols-12 gap-6">
+        <div className="grid grid-cols-1 sm:grid-cols-12 gap-6">
           {/* Detalles */}
-          <div className="col-span-8 bg-white shadow rounded p-4">
-            <h2>Details Section</h2>
+          <div className="col-span-1 sm:col-span-8 bg-white shadow rounded p-4">
+            <h2 className="text-xl font-semibold mb-4">Details Section</h2>
             <Details />
           </div>
           {/* Notas y Proceso */}
-          <div className="col-span-4">
+          <div className="col-span-1 sm:col-span-4">
             <div className="bg-white shadow rounded p-4 mb-6">
-              {/* Aquí se elimina el encabezado redundante */}
               <Notes />
             </div>
             <div className="bg-white shadow rounded p-4">