done credentials and agents mobile/responsive need review

2026-03-24 17:04:16 +08:00
parent c9d5faebb0
commit cc2a18c4d7
9 changed files with 146 additions and 25 deletions
--- 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}>
--- 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;
+  }
+}
--- 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}>
--- 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;
+  }
+}
--- 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;
--- 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
--- 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,7 +60,6 @@
 }
 .label > .optionalTxt {
  color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
  font-family: Inter;
  font-size: 16px;
  font-style: 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;
+  }
+}
--- 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;
--- 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}
                        />