add responsiveness

frontend/src/app/components/topHeader/TopHeader.jsx

@@ -21,6 +21,9 @@ import EditIcon from "../icons/edit";
 import UpdateIcon from "../icons/update";
 import SecondaryButton from "../buttons/secondaryButton/SecondaryButton";
 import SearchBar from "../searchbar/SearchBar";
+import ViewLogsIcon from "../icons/viewLogs";
+import PublishIcon from "../icons/publish";
+import useIsMobile from "@/app/hooks/useIsMobile";
 
 const TopHeader = (props) => {
   const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
@@ -32,6 +35,7 @@ const TopHeader = (props) => {
   const handleNavigateToAdd = () => {
     router.push(`${pathName}/add`);
   };
+  const isMobile = useIsMobile();
   return (
     <>
       {triggerAlert && (
@@ -83,7 +87,7 @@ const TopHeader = (props) => {
           {props?.requiredButtons.includes("add") && (
             <PrimaryButton
               icon={<AddIcon />}
-              text={props?.buttonText}
+              text={isMobile ? "" : props?.buttonText}
               onClick={handleNavigateToAdd}
             />
           )}
@@ -167,6 +171,18 @@ const TopHeader = (props) => {
               </div>
               {triggerDropDownMenu && (
                 <div className={styles.dropDown}>
+                  <div>
+                    <div>
+                      <ViewLogsIcon />
+                      <p>View Logs</p>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <PublishIcon />
+                      <p>Publish Service</p>
+                    </div>
+                  </div>
                   <div>
                     <div>
                       <OutlineDownloadIcon />

frontend/src/app/components/topHeader/styles.module.css

@@ -35,9 +35,9 @@
 .title > div:hover path {
   stroke: white;
 }
-.title > p {
+.title p {
   color: #d2d3e1;
-  font-size: 24px;
+  font-size: var(--title-font-size);
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -120,7 +120,7 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 6px;
-  z-index: 2;
+  z-index: 11;
   border-radius: 6px;
   background: #2d3144;
   box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
@@ -167,4 +167,5 @@
   font-style: normal;
   font-weight: 500;
   line-height: normal;
+  z-index: 13;
 }