Solved bugs

ui/src/components/MainHeader/index.scss

@@ -17,6 +17,42 @@
     // height: 2rem;
     margin-right: 1rem;
     position: relative;
-    width: 2rem;
+    width: 3rem;
+    a {
+      align-items: center;
+      display: flex;
+      height: 2.5rem;
+      justify-content: center;
+      padding: .5rem;
+      text-decoration: none;    
+    }
+    a:focus {
+      border-radius: 5px;
+      box-shadow: 0 0 1px $color-brand-primary-base, 0 0 0 4px #bbb4f4;
+    }
+  }
+  .organisationWrapper:focus {
+    box-shadow: 0 0 1px $color-brand-primary-base, 0 0 0 4px #bbb4f4;
+  }
+  .Dropdown__header__value {
+    overflow: visible;
+    line-height: 1.2;
+  }
+  .Dropdown__header__label {
+    margin-bottom: 0;
+  }
+  .Dropdown.Dropdown--hover .Dropdown__menu--primary {
+    top: 2.5rem;
+  }
+  .organisationWrapper {
+    .Dropdown__header__value {
+      color: #475161;
+      max-width: 11.1875rem;
+      width: auto;
+      overflow: hidden;
+    }
+    .Dropdown__menu--primary .Dropdown__menu__list__item, .Dropdown__menu--secondary .Dropdown__menu__list__item, .Dropdown__menu--tertiary .Dropdown__menu__list__item {
+      max-width: 14.5rem;
+    }
   }
 }

ui/src/components/MainHeader/index.tsx

@@ -1,7 +1,7 @@
 // Libraries
 import { useContext, useEffect, useState } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
-import { Dropdown } from '@contentstack/venus-components';
+import { useNavigate, useLocation, Link } from 'react-router-dom';
+import { Dropdown, Tooltip } from '@contentstack/venus-components';
 
 // Service
 import { getCMSDataFromFile } from '../../cmsData/cmsSelector';
@@ -100,21 +100,20 @@ const MainHeader = () => {
           <div className="col-6 d-flex align-items-center">
             {logo?.image?.url ? (
               <div className="logo">
-                <a
-                  className="navbar-brand"
-                  title="contentstack.com"
-                  href={`${logo?.url}?region=${newParam}`}
-                >
-                  <img src={logo?.image?.url} className="w-100" alt="Contentstack Logo" />
-                </a>
+                <Tooltip position="right" content="Stacks" wrapperElementType="div">
+                  <Link to={`${logo?.url}`}>
+                    <img src={logo?.image?.url} className="w-100" alt="Contentstack Logo"/>
+                  </Link>
+                </Tooltip>
               </div>
             ) : (
               ''
             )}
 
-            <div>
-              <div className="Dropdown__header__label">{organizationLabel}</div>
+            <div className='organisationWrapper'>
               <Dropdown
+                withSearch
+                headerLabel={organizationLabel}
                 closeAfterSelect
                 highlightActive
                 list={orgsList}

ui/src/components/ProjectsHeader/index.tsx

@@ -10,6 +10,7 @@ const ProjectsHeader = ({
   setSearchText,
   searchPlaceholder,
   cta,
+  allProject,
   handleModal
 }: ProjectsHeaderType) => {
   let interval: ReturnType<typeof setTimeout>;
@@ -21,6 +22,7 @@ const ProjectsHeader = ({
   }
   const SearchProject = (
     <>
+      {allProject && allProject?.length > 0 && ( 
       <div className="project-search-wrapper" onClick={setFocus}>
         <Search
           placeholder={searchPlaceholder}
@@ -31,6 +33,7 @@ const ProjectsHeader = ({
           id="search-project-input"
         />
       </div>
+      )}
     </>
   );
 
@@ -57,7 +60,7 @@ const ProjectsHeader = ({
 
   return (
     <>
-      <PageHeader title={{ label: headingText, component: SearchProject }} actions={pageActions} />
+      <PageHeader title={{ label: headingText, component: SearchProject }} actions={allProject && allProject?.length > 0 && pageActions} />
     </>
   );
 };

ui/src/components/ProjectsHeader/projectsHeader.interface.ts

@@ -1,4 +1,5 @@
 import { CTA } from '../../types/common.interface';
+import { ProjectsObj } from '../../pages/Projects/projects.interface'
 
 export interface ProjectsHeaderType {
   cta?: CTA;
@@ -7,4 +8,5 @@ export interface ProjectsHeaderType {
   setSearchText: (value: string) => void;
   searchPlaceholder: string;
   handleModal?: () => void;
+  allProject?: ProjectsObj[] | null;
 }

ui/src/pages/Projects/index.tsx

@@ -147,6 +147,7 @@ const Projects = () => {
           setSearchText={setSearchText}
           cta={cta}
           handleModal={openModal}
+          allProject={projects}
         />
       </>
     )

ui/src/scss/App.scss

@@ -339,3 +339,11 @@ h2 {
     }
   }
 }
+.ReactModal__Overlay .ReactModal__Content .ReactModal__Content__header h3 {
+  color: $color-black-2121;
+  font-weight: bold;
+}
+.ReactModal__Content__footer .Button{
+  font-size: 1rem;
+  line-height: 100%;
+}