Remove Required Indicator from Tags Field in Document Upload

src/components/Directory/ManageBucket.jsx

@@ -15,6 +15,7 @@ import ConfirmModal from "../common/ConfirmModal";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { DIRECTORY_ADMIN, DIRECTORY_MANAGER } from "../../utils/constants";
 import { useProfile } from "../../hooks/useProfile";
+import Label from "../common/Label";
 
 const ManageBucket = () => {
   const { profile } = useProfile();
@@ -210,12 +211,12 @@ const ManageBucket = () => {
 
       <div className="container m-0 p-0" style={{ minHeight: "00px" }}>
         <div className="d-flex justify-content-center">
-          <p className="fs-6 fw-semibold m-0">Manage Buckets</p>
+          <p className="fs-5 fw-semibold m-0">Manage Buckets</p>
         </div>
         <div className="d-flex justify-content-between px-2 px-sm-0 mt-5 mt-3 align-items-center ">
           {action_bucket ? (
             <i
-              className={`fa-solid fa-arrow-left fs-5 cursor-pointer`}
+              className={`fa-solid fa-arrow-left fs-5 cursor-pointer mb-5`}
               onClick={handleBack}
             ></i>
           ) : (
@@ -344,10 +345,10 @@ const ManageBucket = () => {
           ) : (
             <>
               <form onSubmit={handleSubmit(onSubmit)} className="px-2 px-sm-0">
-                <div className="mb-3">
-                  <label htmlFor="bucketName" className="form-label">
+                <div className="mb-3 text-start">
+                  <Label htmlFor="bucketName" className="form-label" required>
                     Bucket Name
-                  </label>
+                  </Label>
                   <input
                     id="bucketName"
                     className="form-control form-control-sm"
@@ -357,10 +358,10 @@ const ManageBucket = () => {
                     <small className="danger-text">{errors.name.message}</small>
                   )}
                 </div>
-                <div className="mb-3">
-                  <label htmlFor="bucketDescription" className="form-label">
+                <div className="mb-3 text-start">
+                  <Label htmlFor="bucketDescription" className="form-label" required>
                     Bucket Description
-                  </label>
+                  </Label>
                   <textarea
                     id="bucketDescription"
                     className="form-control form-control-sm"
@@ -382,11 +383,11 @@ const ManageBucket = () => {
                   />
                 )}
 
-                <div className="mt-4 d-flex justify-content-center gap-3">
+                <div className="mt-4 d-flex justify-content-end gap-3">
                   <button
                     type="button"
                     onClick={handleBack}
-                    className="btn btn-sm btn-secondary"
+                    className="btn btn-sm btn-label-secondary"
                     disabled={isSubmitting}
                   >
                     Cancel

src/components/Directory/ManageDirectory.jsx

@@ -474,7 +474,7 @@ const ManageDirectory = ({ submitContact, onCLosed }) => {
 
         <div className="d-flex justify-content-end gap-2 py-2 mt-3">
           <button
-            className="btn btn-sm btn-secondary"
+            className="btn btn-sm btn-label-secondary"
             type="button"
             onClick={handleClosed}
           >

src/components/common/MultiSelectDropdown.css

@@ -63,6 +63,7 @@
   border: none;
   outline: none;
   background-color: #f8f9fa;
+  color: black;
   border-radius: 6px;
   font-size: 14px;
 }

src/components/common/TagInput.jsx

@@ -65,9 +65,9 @@ const handleChange = (e) => {
 
   return (
     <>
-      <Label htmlFor={name} className="form-label" required>
+      <label htmlFor={name} className="form-label">
         {label}
-      </Label>
+      </label>
 
       <div
         className="form-control form-control-sm p-1"