From cc2a18c4d72063f2ccc0f19d29538228693ced7f Mon Sep 17 00:00:00 2001
From: benzbarquilla <benzzbarquilla@gmail.com>
Date: Tue, 24 Mar 2026 17:04:16 +0800
Subject: [PATCH] done credentials and agents mobile/responsive need review

---
 frontend/src/app/agents/[agentsId]/page.jsx   |  5 +-
 .../app/agents/[agentsId]/styles.module.css   | 54 +++++++++++++++++--
 frontend/src/app/agents/add/page.jsx          |  6 ++-
 frontend/src/app/agents/add/styles.module.css | 49 +++++++++++++++++
 .../customCheckbox/styles.module.css          |  2 -
 frontend/src/app/credentials/add/page.jsx     | 14 +++--
 .../src/app/credentials/add/styles.module.css | 37 +++++++++----
 .../src/app/roles/[rolesId]/styles.module.css |  2 -
 frontend/src/app/roles/add/page.jsx           |  2 +-
 9 files changed, 146 insertions(+), 25 deletions(-)

diff --git a/frontend/src/app/agents/[agentsId]/page.jsx b/frontend/src/app/agents/[agentsId]/page.jsx
index bf6644d..06e1fa7 100644
--- a/frontend/src/app/agents/[agentsId]/page.jsx
+++ b/frontend/src/app/agents/[agentsId]/page.jsx
@@ -9,10 +9,13 @@ import Prompts from "@/app/components/prompts/Prompts";
 import useAgentForm from "@/app/hooks/useAgentForm";
 import Alert from "@/app/components/alerts/Alert";
 import Checkbox from "@/app/components/customCheckbox/Checkbox";
+import useIsMobile from "@/app/hooks/useIsMobile";
 
 const ViewAgentPage = () => {
   const [useVpn, setUseVpn] = useState(false);
   const [enableLoki, setEnableLoki] = useState(false);
+  const isMobile = useIsMobile();
+
   const {
     register,
     handleSubmit,
@@ -50,7 +53,7 @@ const ViewAgentPage = () => {
                 {/* AGENT FORM */}
                 <div className={createAgentStyle.headerContainer}>
                   <div className={createAgentStyle.headerTxt}>
-                    <p>Agent Details</p>
+                    {isMobile ? "" : <p>Agent Details</p>}
                   </div>
                 </div>
                 <div className={createAgentStyle.inputContainer}>
diff --git a/frontend/src/app/agents/[agentsId]/styles.module.css b/frontend/src/app/agents/[agentsId]/styles.module.css
index 14d5251..747bd53 100644
--- a/frontend/src/app/agents/[agentsId]/styles.module.css
+++ b/frontend/src/app/agents/[agentsId]/styles.module.css
@@ -6,7 +6,6 @@
   flex: 1 0 0;
   align-self: stretch;
 }
-
 .createAgentContainer {
   display: flex;
   justify-content: center;
@@ -30,7 +29,7 @@
 .headerContainer {
   display: flex;
   align-items: flex-start;
-  gap: 17px;
+  gap: 50px;
   align-self: stretch;
 }
 .headerContainer > div {
@@ -66,7 +65,6 @@
 }
 .labelContainer > p {
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
@@ -80,9 +78,59 @@
 
 .lokiContainer {
   display: flex;
+  width: 100%;
   width: 548px;
   padding: 24px;
   flex-direction: column;
   align-items: flex-start;
   gap: 24px;
 }
+
+@media (max-width: 1024px) {
+  .createAgentContainer {
+    display: flex;
+    padding: 16px 16px; /*did some math 32 ang orig top*/
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 24px;
+    height: calc(100vh - 100px - 60px);
+    align-self: stretch;
+  }
+  .div {
+    display: none;
+  }
+  .inputMainContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 0px;
+    /* align-self: stretch;   */
+  }
+  .lokiContainer {
+    display: flex;
+    gap: 16px;
+    align-self: stretch;
+    border-radius: 8px;
+    width: 500px;
+    padding: 24px 0 0 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .inputMainContainer {
+    align-self: stretch;
+    width: 100%;
+  }
+  .lokiContainer {
+    width: 100%;
+  }
+  .inputContainer {
+    width: 100%;
+  }
+  .headerTxt > p {
+    font-size: 16px;
+    font-weight: 400;
+  }
+}
diff --git a/frontend/src/app/agents/add/page.jsx b/frontend/src/app/agents/add/page.jsx
index d361fdc..fda12c8 100644
--- a/frontend/src/app/agents/add/page.jsx
+++ b/frontend/src/app/agents/add/page.jsx
@@ -9,10 +9,12 @@ import Prompts from "@/app/components/prompts/Prompts";
 import useAgentForm from "@/app/hooks/useAgentForm";
 import Alert from "@/app/components/alerts/Alert";
 import Checkbox from "@/app/components/customCheckbox/Checkbox";
+import useIsMobile from "@/app/hooks/useIsMobile";
 
 const AddAgentPage = () => {
   const [useVpn, setUseVpn] = useState(false);
   const [enableLoki, setEnableLoki] = useState(false);
+  const isMobile = useIsMobile();
   const {
     register,
     handleSubmit,
@@ -40,7 +42,7 @@ const AddAgentPage = () => {
             state="add"
             requiredButtons={["title", "save"]}
           />
-          <TopToolTip />
+          {isMobile ? "" : <TopToolTip />}
           {/* Create agent Container */}
           <form
             className={createAgentStyle.formContainer}
@@ -52,7 +54,7 @@ const AddAgentPage = () => {
                 {/* AGENT FORM */}
                 <div className={createAgentStyle.headerContainer}>
                   <div className={createAgentStyle.headerTxt}>
-                    <p>Agent Details</p>
+                    {isMobile ? "" : <p>Agent Details</p>}
                   </div>
                 </div>
                 <div className={createAgentStyle.inputContainer}>
diff --git a/frontend/src/app/agents/add/styles.module.css b/frontend/src/app/agents/add/styles.module.css
index b0b46f1..0814210 100644
--- a/frontend/src/app/agents/add/styles.module.css
+++ b/frontend/src/app/agents/add/styles.module.css
@@ -79,3 +79,52 @@
   align-items: flex-start;
   gap: 24px;
 }
+
+@media (max-width: 1024px) {
+  .createAgentContainer {
+    display: flex;
+    padding: 16px 16px; /*did some math 32 ang orig top*/
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    height: calc(100vh - 100px - 5px - 50px);
+    gap: 24px;
+    align-self: stretch;
+  }
+  .div {
+    display: none;
+  }
+  .inputMainContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 0px;
+    /* align-self: stretch;   */
+  }
+  .lokiContainer {
+    display: flex;
+    gap: 16px;
+    align-self: stretch;
+    border-radius: 8px;
+    width: 500px;
+    padding: 24px 0 0 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .inputMainContainer {
+    align-self: stretch;
+    width: 100%;
+  }
+  .lokiContainer {
+    width: 100%;
+  }
+  .inputContainer {
+    width: 100%;
+  }
+  .headerTxt > p {
+    font-size: 16px;
+    font-weight: 400;
+  }
+}
diff --git a/frontend/src/app/components/customCheckbox/styles.module.css b/frontend/src/app/components/customCheckbox/styles.module.css
index e400c14..ad898f2 100644
--- a/frontend/src/app/components/customCheckbox/styles.module.css
+++ b/frontend/src/app/components/customCheckbox/styles.module.css
@@ -19,7 +19,6 @@
   flex: 1 0 0;
   border-radius: var(--Basic-Forms-Checkbox-Border-Radius, 8px);
   background: #1d1e2a;
-  background: color(display-p3 0.1137 0.1176 0.1608);
 }
 .check {
   display: flex;
@@ -85,7 +84,6 @@
 .placeholderTxt {
   align-self: stretch;
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
diff --git a/frontend/src/app/credentials/add/page.jsx b/frontend/src/app/credentials/add/page.jsx
index ebe2109..8c3fb85 100644
--- a/frontend/src/app/credentials/add/page.jsx
+++ b/frontend/src/app/credentials/add/page.jsx
@@ -8,6 +8,7 @@ import TextField from "@/app/components/fields/textfield";
 import Prompts from "@/app/components/prompts/Prompts";
 import useRoleForm from "@/app/hooks/useRolesForm";
 import Alert from "@/app/components/alerts/Alert";
+import useIsMobile from "@/app/hooks/useIsMobile";
 
 const AddCredentialPage = () => {
   const {
@@ -18,7 +19,10 @@ const AddCredentialPage = () => {
     triggerAlert,
     setTriggerAlert,
   } = useRoleForm();
+
   const [selectedFile, setSelectedFile] = useState(null);
+  const isMobile = useIsMobile();
+
   // Click
   const handleFileChange = (e) => {
     const file = e.target.files[0];
@@ -27,6 +31,7 @@ const AddCredentialPage = () => {
       console.log(file); //send this to backend later
     }
   };
+
   // Drag/Drop
   const handleDrop = (e) => {
     e.preventDefault();
@@ -39,6 +44,7 @@ const AddCredentialPage = () => {
   const handleDragOver = (e) => {
     e.preventDefault();
   };
+
   return (
     <div className={globalStyle.section}>
       {triggerAlert && (
@@ -59,7 +65,7 @@ const AddCredentialPage = () => {
           />
           {/* Create Crediantial Container */}
           <div className={createCredStyle.createCredContainer}>
-            <TopToolTip />
+            {isMobile ? "" : <TopToolTip />}
             <form
               className={createCredStyle.inputFieldContainer}
               id="form"
@@ -81,13 +87,11 @@ const AddCredentialPage = () => {
                   <Prompts show={false} />
                 </div>
               </div>
-              {/* Upload File */}
               <div className={createCredStyle.uploadFile}>
-                {/* Label */}
                 <div className={createCredStyle.label}>
-                  <p>Upload File</p>
+                  <p className={createCredStyle.labelTxt}>Upload File</p>
                   {/* Optional or Required */}
-                  <p className={createCredStyle.optionalTxt}>(Optional)</p>{" "}
+                  {/* <p className={createCredStyle.optionalTxt}>(Optional)</p>{" "} */}
                 </div>
                 {/* Upload File */}
                 <label
diff --git a/frontend/src/app/credentials/add/styles.module.css b/frontend/src/app/credentials/add/styles.module.css
index 7ddf20b..803f263 100644
--- a/frontend/src/app/credentials/add/styles.module.css
+++ b/frontend/src/app/credentials/add/styles.module.css
@@ -22,6 +22,7 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 12px;
+  align-self: stretch;
 }
 .label {
   display: flex;
@@ -31,7 +32,6 @@
 }
 .labelTxt {
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
@@ -60,9 +60,8 @@
 }
 .label > .optionalTxt {
   color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
   font-family: Inter;
-  font-size: 16 px;
+  font-size: 16px;
   font-style: normal;
   font-weight: 300;
   line-height: normal;
@@ -77,22 +76,18 @@
   gap: 10px;
   align-self: stretch;
   border-radius: 4px;
-  border: 1px dashed #5980f1;
-  border: 2px dashed color(display-p3 0.3804 0.4959 0.9137);
+  border: 2px dashed #5980f1;
   cursor: pointer;
 }
 .upload:hover {
   background: rgba(129, 135, 255, 0.25);
-  background: color(display-p3 0.5098 0.5294 1 / 0.25);
 }
 .upload:hover .chooseTxt {
   color: #fff;
-  color: color(display-p3 1 1 1);
 }
 
 .chooseTxt {
   color: #5980f1;
-  color: color(display-p3 0.3804 0.4959 0.9137);
   text-align: center;
   font-family: Inter;
   font-size: 16px;
@@ -104,7 +99,6 @@
 
 .dragTxt {
   color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
   text-align: center;
   font-family: Inter;
   font-size: 14px;
@@ -113,3 +107,28 @@
   line-height: normal;
   align-self: stretch;
 }
+
+/* Mobile */
+@media (max-width: 768px) {
+  .createCredContainer {
+    padding: 32px 16px 0 16px;
+    align-items: flex-start;
+    gap: 16px;
+  }
+
+  .inputFieldContainer {
+    display: flex;
+    align-items: flex-start;
+    padding: 0px;
+    gap: 24px;
+    align-self: stretch;
+  }
+
+  .projectName {
+    width: 100%;
+  }
+
+  .upload {
+    height: 100px;
+  }
+}
diff --git a/frontend/src/app/roles/[rolesId]/styles.module.css b/frontend/src/app/roles/[rolesId]/styles.module.css
index 91531f3..e0ad4b9 100644
--- a/frontend/src/app/roles/[rolesId]/styles.module.css
+++ b/frontend/src/app/roles/[rolesId]/styles.module.css
@@ -56,7 +56,6 @@
 .header > div > p {
   width: 163px;
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
@@ -93,7 +92,6 @@
 }
 .label > p {
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
diff --git a/frontend/src/app/roles/add/page.jsx b/frontend/src/app/roles/add/page.jsx
index 1e5e91d..727791f 100644
--- a/frontend/src/app/roles/add/page.jsx
+++ b/frontend/src/app/roles/add/page.jsx
@@ -71,7 +71,7 @@ const AddRolePage = () => {
                       </div>
                       <div className={addRoleStyle.inputField}>
                         <TextField
-                          placeHolder="Enter name"
+                          placeHolder="Enter role name"
                           {...register("roleName", { required: true })}
                           hasError={!!errors.roleName}
                         />