users page changes

frontend/src/app/users/[usersId]/page.jsx

@@ -1,9 +1,11 @@
-import React from "react";
+"use client";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import globalStyle from "../../globalStyle.module.css";
 import editUserStyle from "./styles.module.css";
+import Prompts from "@/app/components/prompts/Prompts";
+import { useState } from "react";
 
-const page = () => {
+const Page = () => {
   const sampleData = [
     { permission: "organization.delete" },
     { permission: "user.create" },
@@ -20,6 +22,9 @@ const page = () => {
     { permission: "service.delete" },
     { permission: "service.update" },
   ];
+
+  const [showPrompt, setShowPrompt] = useState(false);
+
   return (
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
@@ -43,6 +48,7 @@ const page = () => {
                     <div className={editUserStyle.inputContainer}>
                       <div className={editUserStyle.label}>
                         <p>Role</p>
+                        <p className={editUserStyle.required}>*</p>
                       </div>
                       <div className={editUserStyle.inputField}>
                         <select
@@ -63,6 +69,7 @@ const page = () => {
                       {/* Label */}
                       <div className={editUserStyle.label}>
                         <p>Email</p>
+                        {/* <p className={editUserStyle.optionalTxt}>(Optional)</p> */}
                       </div>
                       {/* Input field */}
                       <div className={editUserStyle.inputField}>
@@ -74,6 +81,7 @@ const page = () => {
                           className={editUserStyle.placeholderTxt}
                         />
                       </div>
+                      <Prompts showPrompt={false} />
                     </div>
                   </div>
                   {/* Full Name */}
@@ -82,6 +90,7 @@ const page = () => {
                       {/* Label */}
                       <div className={editUserStyle.label}>
                         <p>Full Name</p>
+                        {/* <p className={editUserStyle.optionalTxt}>(Optional)</p> */}
                       </div>
                       {/* Input field */}
                       <div className={editUserStyle.inputField}>
@@ -223,4 +232,4 @@ const page = () => {
   );
 };
 
-export default page;
+export default Page;

frontend/src/app/users/[usersId]/styles.module.css

@@ -76,6 +76,19 @@
   gap: 2px;
   align-self: stretch;
 }
+.label > .required {
+  color: #cfb000;
+  font-weight: 600;
+}
+.label > .optionalTxt {
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  font-family: Inter;
+  font-size: 16 px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+}
 .label > p {
   color: #d2d3e1;
   color: color(display-p3 0.8235 0.8275 0.8784);
@@ -85,6 +98,7 @@
   font-weight: 400;
   line-height: normal;
 }
+
 .inputField {
   display: flex;
   flex-direction: column;