From 41184ee7161445fc27f1cb1e219f59084fbc0a38 Mon Sep 17 00:00:00 2001 From: Laux Dev <2201104208@student.buksu.edu.ph> Date: Tue, 3 Mar 2026 15:23:58 +0800 Subject: [PATCH] Fixed --- frontend/src/app/components/alerts/Alert.jsx | 6 ++- .../app/components/alerts/styles.module.css | 24 +--------- .../buttons/primarybutton/styles.module.css | 1 - .../secondaryButton/SecondaryButton.jsx | 11 +++++ .../buttons/secondaryButton/styles.module.css | 25 +++++++++++ .../src/app/components/fields/textfield.jsx | 9 +++- .../app/components/select/styles.module.css | 2 +- .../app/components/topHeader/TopHeader.jsx | 45 +++++++++++-------- frontend/src/app/organization/add/page.jsx | 2 +- 9 files changed, 77 insertions(+), 48 deletions(-) create mode 100644 frontend/src/app/components/buttons/secondaryButton/SecondaryButton.jsx create mode 100644 frontend/src/app/components/buttons/secondaryButton/styles.module.css diff --git a/frontend/src/app/components/alerts/Alert.jsx b/frontend/src/app/components/alerts/Alert.jsx index 7fc417d..dff3406 100644 --- a/frontend/src/app/components/alerts/Alert.jsx +++ b/frontend/src/app/components/alerts/Alert.jsx @@ -1,6 +1,8 @@ import React, { useState } from "react"; import styles from "./styles.module.css"; import BoxedCheckIcon from "../icons/boxedCheck"; +import SecondaryButton from "../buttons/secondaryButton/SecondaryButton"; +import PrimaryButton from "../buttons/primarybutton/PrimaryButton"; const Alert = (props) => { const [hide, setHide] = useState(false); const handleHide = () => { @@ -27,8 +29,8 @@ const Alert = (props) => {

- - + +
diff --git a/frontend/src/app/components/alerts/styles.module.css b/frontend/src/app/components/alerts/styles.module.css index f27d70b..ca819bd 100644 --- a/frontend/src/app/components/alerts/styles.module.css +++ b/frontend/src/app/components/alerts/styles.module.css @@ -101,30 +101,10 @@ padding-top: 12px; justify-content: center; align-items: flex-end; + gap: 10px; align-self: stretch; } .actionButtons > button { - display: flex; - height: 36px; - padding: 8px 16px; - justify-content: center; - align-items: center; - gap: 10px; - flex: 1 0 0; - border-radius: 6px; - border: 0.5px solid #8187ff; - background: rgba(83, 89, 242, 0.25); - color: #fff; - font-family: Inter; - font-size: 16px; - font-style: normal; - font-weight: 400; - line-height: normal; - cursor: pointer; -} -.actionButtons > button:nth-child(2) { - border-radius: 6px; - border: 0.5px solid #4e537e; - background-color: transparent; + width: 100%; } diff --git a/frontend/src/app/components/buttons/primarybutton/styles.module.css b/frontend/src/app/components/buttons/primarybutton/styles.module.css index 6f004fc..0df0348 100644 --- a/frontend/src/app/components/buttons/primarybutton/styles.module.css +++ b/frontend/src/app/components/buttons/primarybutton/styles.module.css @@ -5,7 +5,6 @@ align-items: center; gap: 10px; border-radius: 6px; - border-radius: 6px; border: 0.5px solid #8187ff; background: rgba(83, 89, 242, 0.25); color: white; diff --git a/frontend/src/app/components/buttons/secondaryButton/SecondaryButton.jsx b/frontend/src/app/components/buttons/secondaryButton/SecondaryButton.jsx new file mode 100644 index 0000000..70281f4 --- /dev/null +++ b/frontend/src/app/components/buttons/secondaryButton/SecondaryButton.jsx @@ -0,0 +1,11 @@ +import React from "react"; +import styles from "./styles.module.css"; +const SecondaryButton = (props) => { + return ( + + ); +}; + +export default SecondaryButton; diff --git a/frontend/src/app/components/buttons/secondaryButton/styles.module.css b/frontend/src/app/components/buttons/secondaryButton/styles.module.css new file mode 100644 index 0000000..bd023c8 --- /dev/null +++ b/frontend/src/app/components/buttons/secondaryButton/styles.module.css @@ -0,0 +1,25 @@ +.button { + display: flex; + height: 36px; + padding: 9px 12px; + justify-content: center; + align-items: center; + gap: 8px; + border-radius: 6px; + border: 0.5px solid #4e537e; + cursor: pointer; + color: #d2d3e1; + font-size: 16px; + + font-style: normal; + font-weight: 500; + line-height: normal; + letter-spacing: 0.16px; + cursor: pointer; + background: transparent; +} +.button:hover { + border-radius: 6px; + border: 1px solid #8e98e7; + background: linear-gradient(180deg, #8e98e6 0%, #4d537e 100%); +} diff --git a/frontend/src/app/components/fields/textfield.jsx b/frontend/src/app/components/fields/textfield.jsx index f1e6275..7c01f7a 100644 --- a/frontend/src/app/components/fields/textfield.jsx +++ b/frontend/src/app/components/fields/textfield.jsx @@ -1,8 +1,13 @@ import React from "react"; import styles from "./styles.module.css"; -const TextField = ({ placeHolder }) => { +const TextField = ({ placeHolder, ...props }) => { return ( - + ); }; diff --git a/frontend/src/app/components/select/styles.module.css b/frontend/src/app/components/select/styles.module.css index b6f7b39..96cdb47 100644 --- a/frontend/src/app/components/select/styles.module.css +++ b/frontend/src/app/components/select/styles.module.css @@ -64,7 +64,7 @@ .optionsContainer p { color: #acb0ff; font-family: Inter; - font-size: 18px; + font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; diff --git a/frontend/src/app/components/topHeader/TopHeader.jsx b/frontend/src/app/components/topHeader/TopHeader.jsx index 6390fa1..46ac643 100644 --- a/frontend/src/app/components/topHeader/TopHeader.jsx +++ b/frontend/src/app/components/topHeader/TopHeader.jsx @@ -19,19 +19,26 @@ import RestartIcon from "../icons/restart"; import PrimaryButton from "../buttons/primarybutton/PrimaryButton"; import EditIcon from "../icons/edit"; import UpdateIcon from "../icons/update"; +import SecondaryButton from "../buttons/secondaryButton/SecondaryButton"; const TopHeader = (props) => { const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false); const [triggerAlert, setTriggerAlert] = useState(false); const pathName = usePathname(); const router = useRouter(); + const [editState, setEditState] = useState(false); const params = useParams(); const handleNavigateToAdd = () => { router.push(`${pathName}/add`); }; return ( <> - {triggerAlert && } + {triggerAlert && ( + setEditState(true)} + /> + )}
{props.requiredButtons.includes("back") && ( @@ -60,11 +67,13 @@ const TopHeader = (props) => { onClick={() => props?.trigger(!props?.triggerState)} /> )} - {props?.requiredButtons.includes("edit") && ( + {!editState && props?.requiredButtons.includes("edit") && ( } text="Edit" - onClick={() => props?.trigger(!props?.triggerState)} + onClick={() => { + setEditState(true); + }} /> )} {props?.requiredButtons.includes("add") && ( @@ -74,35 +83,33 @@ const TopHeader = (props) => { onClick={handleNavigateToAdd} /> )} - {props?.requiredButtons.includes("save") && ( + {editState || props?.requiredButtons?.includes("save") ? ( <>
setTriggerAlert(!triggerAlert)} > -

{props?.buttonText}

-
-
router.back()} - > -

{props?.cancelButtonText}

+

Save

+ + setEditState(!editState) + : () => router.back() + } + /> - )} + ) : null} {props?.requiredButtons.includes("update") && ( <> } text="Update" /> -
router.back()} - > -

{props.cancelButtonText}

-
+ router.back()} /> )} {props?.requiredButtons?.includes("services-drop-down") && ( @@ -144,7 +151,7 @@ const TopHeader = (props) => {
)} - {props?.requiredButtons.includes("download") && ( + {props?.requiredButtons.includes("download") && !editState && (
setTriggerDropDownMenu(!triggerDropDownMenu)} diff --git a/frontend/src/app/organization/add/page.jsx b/frontend/src/app/organization/add/page.jsx index 11fbadf..7798d3a 100644 --- a/frontend/src/app/organization/add/page.jsx +++ b/frontend/src/app/organization/add/page.jsx @@ -13,8 +13,8 @@ const AddCredentials = () => {