Closes #Issue-191 UI Compatibility

src/app/(main)/client.tsx

@@ -23,9 +23,9 @@ export default function Client() {
         <div className="flex flex-col justify-center items-center h-screen">
             {projectsQuery.isLoading && (
                 <div className="flex items-center">
-                    <div className="w-4 h-4 mr-2 rounded-full bg-gray-900 animate-pulse"></div>
-                    <div className="w-4 h-4 mr-2 rounded-full bg-gray-900 animate-pulse"></div>
-                    <div className="w-4 h-4 rounded-full bg-gray-900 animate-pulse"></div>
+                    <div className="w-4 h-4 mr-2 rounded-full bg-primary animate-pulse"></div>
+                    <div className="w-4 h-4 mr-2 rounded-full bg-primary animate-pulse"></div>
+                    <div className="w-4 h-4 rounded-full bg-primary animate-pulse"></div>
                 </div>
             )}
 

src/app/admin/page.tsx

@@ -46,7 +46,7 @@ export default function Page() {
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mt-8">
           <Link
             href={`/admin/projects/new`}
-            className="border border-dashed border-gray-300 hover:bg-secondary bg-primary rounded-lg p-4"
+            className="border border-dashed border-secondaryActive hover:bg-secondary bg-primary rounded-lg p-4"
           >
             <i className="far fa-plus" /> New Project
           </Link>
@@ -56,11 +56,11 @@ export default function Page() {
                 <Link
                   href={`/admin/projects/${project.external_id}`}
                   key={i}
-                  className="border border-gray-300 hover:bg-secondary bg-primary rounded-lg p-4"
+                  className="border border-secondaryActive hover:bg-secondary bg-primary rounded-lg p-4"
                 >
                   {project.title}
                   {project.is_default && (
-                    <span className="text-xs ml-2 bg-secondaryActive text-gray-500 px-2 py-1 rounded-full">
+                    <span className="text-xs ml-2 bg-secondaryActive text-secondaryActive px-2 py-1 rounded-full">
                       Default
                     </span>
                   )}
@@ -86,7 +86,7 @@ export default function Page() {
         <button
           className={`mt-4 px-4 py-2 rounded-md focus:outline-none ${projectsQuery.hasNextPage
             ? "bg-green-400 text-primary"
-            : "bg-secondaryActive text-gray-400 cursor-not-allowed"
+            : "bg-secondaryActive text-secondaryActive cursor-not-allowed"
             }`}
           onClick={() => projectsQuery.fetchNextPage()}
           disabled={!projectsQuery.hasNextPage}

src/app/admin/projects/[project_id]/chats/[chat_id]/page.tsx

@@ -40,7 +40,7 @@ export default function Page({
               {chats?.username && (
                 <Link
                   href={`/admin/users/${chats?.username}`}
-                  className="bg-slate-200 flex items-center gap-2 justify-center hover:bg-slate-300 m-2 p-2 rounded-xl px-6"
+                  className="bg-primary flex items-center gap-2 justify-center hover:bg-slate-300 m-2 p-2 rounded-xl px-6"
                 >
                   <i className="fa fa-user"></i>
                   {chats?.username}
@@ -54,11 +54,11 @@ export default function Page({
                 chats?.chats.map((chat: any, i: number) => (
                   <div key={i}>
                     {chat.messageType === 1 ? (
-                      <div className="border border-gray-300 hover:bg-secondary bg-primary rounded-lg p-4">
+                      <div className="border border-secondaryActive hover:bg-secondary bg-primary rounded-lg p-4">
                         {chat.message}
                       </div>
                     ) : (
-                      <div className="border border-gray-300 hover:bg-secondary bg-secondaryActive rounded-lg p-4">
+                      <div className="border border-secondaryActive hover:bg-secondary bg-secondaryActive rounded-lg p-4">
                         {chat.message}
                       </div>
                     )}
@@ -73,7 +73,7 @@ export default function Page({
           </div>
         </div>
       ) : (
-        <div className="flex justify-center text-gray-500 text-2xl font-medium mt-6">
+        <div className="flex justify-center text-primaryLightfont text-2xl font-medium mt-6">
           Chat not found
         </div>
       )}

src/app/admin/projects/[project_id]/chats/page.tsx

@@ -36,7 +36,7 @@ export default function Page({ params }: { params: { project_id: string } }) {
   const chatTableBody = () => {
     if (chatsList.length > 0 && chatsList[0].count !== 0) {
       return (
-        <tbody className="bg-primary divide-y divide-secondaryActive text-gray-700">
+        <tbody className="bg-primary divide-y divide-secondaryActive text-primaryLightfont">
           {chatsList.map((chats) => {
             return chats.results.map((chat: any, index: number) => {
               return (
@@ -59,9 +59,9 @@ export default function Page({ params }: { params: { project_id: string } }) {
       );
     } else {
       return (
-        <tbody className="bg-primary divide-y divide-secondaryActive text-sm text-gray-700">
+        <tbody className="bg-primary divide-y divide-secondaryActive text-sm text-primaryLightfont">
           <tr className="bg-primary border-b border-x hover:bg-secondary w-full">
-            <td colSpan={100} className="p-4 text-center text-gray-400">
+            <td colSpan={100} className="p-4 text-center text-primaryLightfont">
               No chats found
             </td>
           </tr>

src/app/admin/projects/[project_id]/page.tsx

@@ -98,15 +98,15 @@ export default function Page({ params }: { params: { project_id: string } }) {
         <div className="flex gap-2 items-center">
           <h1 className="text-3xl font-black">{project?.title}</h1>
           {project?.is_default && (
-            <span className="text-xs ml-2 bg-secondaryActive text-gray-500 px-2 py-1 rounded-full">
+            <span className="text-xs ml-2 bg-secondaryActive text-primaryLightfont px-2 py-1 rounded-full">
               Default
             </span>
           )}
         </div>
         <div className="flex justify-center items-center">
           <Link
             href={`/admin/projects/${project_id}/chats`}
-            className="bg-slate-200 flex items-center gap-2 justify-center hover:bg-slate-300 m-2 p-2 rounded-xl px-6"
+            className="bg-primary flex items-center gap-2 justify-center hover:bg-slate-300 m-2 p-2 rounded-xl px-6"
           >
             <i className="fa fa-comments"></i>
             Chats
@@ -123,7 +123,7 @@ export default function Page({ params }: { params: { project_id: string } }) {
                 : `/admin/projects/${project_id}/documents/${document.external_id}`
             }
             key={i}
-            className="border border-gray-300 hover:bg-secondary bg-primary rounded-lg p-4 flex items-center gap-2 justify-between"
+            className="border border-secondaryActive hover:bg-secondary bg-primary rounded-lg p-4 flex items-center gap-2 justify-between"
           >
             <div className="flex items-center gap-2">
               <i
@@ -133,7 +133,7 @@ export default function Page({ params }: { params: { project_id: string } }) {
               {document.title}
             </div>
             {document.uploading && (
-              <div className="text-xs text-gray-600 inline-flex items-center gap-2">
+              <div className="text-xs text-primaryLightfont inline-flex items-center gap-2">
                 <i className="fa fa-spinner-third fa-spin"></i>
                 Uploading...
               </div>
@@ -143,7 +143,7 @@ export default function Page({ params }: { params: { project_id: string } }) {
         {!project?.archived && (
           <Link
             href={`/admin/projects/${project_id}/documents/new`}
-            className="border border-dashed border-gray-300 hover:bg-secondary bg-primary rounded-lg p-4"
+            className="border border-dashed border-secondaryActive hover:bg-secondary bg-primary rounded-lg p-4"
           >
             <i className="far fa-plus" /> New Document
           </Link>
@@ -177,7 +177,7 @@ export default function Page({ params }: { params: { project_id: string } }) {
         </Button>
         <Button
           variant="secondary"
-          className="w-full bg-slate-200 enabled:hover:bg-slate-300"
+          className="w-full bg-primary enabled:hover:bg-slate-300"
           onClick={() => setShowSetDefaultModal(true)}
           disabled={project?.is_default}
         >
@@ -193,7 +193,7 @@ export default function Page({ params }: { params: { project_id: string } }) {
           <p>Are you sure you want to delete this project?</p>
           <div className="flex flex-col md:flex-row gap-2 justify-end">
             <button
-              className="bg-gray-300 hover:bg-gray-400 px-4 p-2 rounded-lg"
+              className="bg-primary hover:bg-gray-400 px-4 p-2 rounded-lg"
               onClick={() => setShowDeleteModel(false)}
             >
               Cancel
@@ -222,7 +222,7 @@ export default function Page({ params }: { params: { project_id: string } }) {
           </p>
           <div className="flex flex-col md:flex-row gap-2 justify-end">
             <button
-              className="bg-gray-300 hover:bg-gray-400 px-4 p-2 rounded-lg"
+              className="bg-primary hover:bg-gray-400 px-4 p-2 rounded-lg"
               onClick={() => setShowArchiveModal(false)}
             >
               Cancel
@@ -248,7 +248,7 @@ export default function Page({ params }: { params: { project_id: string } }) {
           <p>Are you sure you want to set this project as default?</p>
           <div className="flex flex-col md:flex-row gap-2 justify-end">
             <button
-              className="bg-gray-300 hover:bg-gray-400 px-4 p-2 rounded-lg"
+              className="bg-primary hover:bg-gray-400 px-4 p-2 rounded-lg"
               onClick={() => setShowSetDefaultModal(false)}
             >
               Cancel

src/app/admin/tests/[testsuite_id]/page.tsx

@@ -18,7 +18,6 @@ import {
   TestRunStatus,
 } from "@/types/test";
 import { useInfiQuery } from "@/utils/hooks/useInfiQuery";
-// import CSVReader from "react-csv-reader";
 import CSVReader from "../../../../components/csvReader";
 export default function Page({ params }: { params: { testsuite_id: string } }) {
   const router = useRouter();
@@ -41,7 +40,6 @@ export default function Page({ params }: { params: { testsuite_id: string } }) {
       });
     },
   });
-  const [questionsCsv, setQuestionsCsv] = useState<any>([]);
   const testQuestions: TestQuestion[] =
     TestQuestionsQuery?.data?.pages?.flatMap((page) => page.results) ?? [];
 
@@ -917,7 +915,7 @@ export default function Page({ params }: { params: { testsuite_id: string } }) {
                 language: e.target.value,
               })
             }
-            className="block w-full bg-white border border-gray-300 hover:border-gray-500 px-4 py-2 rounded leading-tight focus:outline-none focus:border-blue-500 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+            className="block w-full bg-primary border border-gray-300 hover:border-gray-500 px-4 py-2 rounded leading-tight focus:outline-none focus:border-blue-500 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
           >
             {supportedLanguages.map((language) => (
               <option key={language.value} value={language.value}>
@@ -999,4 +997,4 @@ export default function Page({ params }: { params: { testsuite_id: string } }) {
       <Toaster />
     </div>
   );
-}
+}