Projects bugfixes

ui/src/components/Card/card.scss

@@ -12,11 +12,17 @@
   padding: 1.75rem 2rem 0.688rem;
 }
 .ProjectCard__title {
-  color: $color-font-black;
-  font-size: $size-font-2-xl;
-  font-weight: $font-weight-extra-bold;
-  height: 1.563rem;
-  line-height: $line-height-reset;
+  color: $color-font-base;
+  display: -webkit-box;
+  font-size: $size-font-xl;
+  font-weight: $font-weight-semi-bold;
+  height: $px-48;
+  line-height: $line-height-default;
+  overflow: hidden;
+  padding: 0;
+  white-space: normal;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 .ProjectCard__footer {
   display: flex;

ui/src/components/Modal/index.tsx

@@ -47,16 +47,14 @@ const Modal = (props: ProjectModalProps) => {
   };
 
   const nameValidation = (value: string) => {
-
-    if (value === '') {
+    if (!value || !/^[^\s].+[^\s]$/.test(value)) {
       setInputValue(false);
-      return 'Please enter project name.';
-    } else if (value && value?.length > 200) {
+      return 'Please enter project name.'
+    } else if(value && value?.length > 200) {
       setInputValue(false);
       return 'Project Name should not be more than 200 chars';
     } else {
       setInputValue(true);
-      return '';
     }
   };
 
@@ -68,6 +66,7 @@ const Modal = (props: ProjectModalProps) => {
       return '';
     }
   };
+
   return (
     <>
       <ModalHeader

ui/src/components/ProjectsHeader/index.tsx

@@ -13,27 +13,43 @@ const ProjectsHeader = ({
   allProject,
   handleModal
 }: ProjectsHeaderType) => {
+
   let interval: ReturnType<typeof setTimeout>;
   function setFocus() {
     clearTimeout(interval);
     interval = setTimeout(() => {
       document.getElementById('search-project-input')?.focus();
     }, 10);
   }
+
   const SearchProject = (
     <>
-      {allProject && allProject?.length > 0 && ( 
-      <div className="project-search-wrapper" onClick={setFocus}>
-        <Search
-          placeholder={searchPlaceholder}
-          onChange={(search: string) => setSearchText(search)}
-          onClear={true}
-          value={searchText}
-          debounceSearch={true}
-          id="search-project-input"
-        />
-      </div>
-      )}
+      {allProject && allProject?.length > 0
+        ? <div className="project-search-wrapper">
+            <Search
+              placeholder={searchPlaceholder}
+              onChange={(search: string) => search.replace(/\s/g, '').length ? setSearchText(search?.trim()) : setSearchText(search)}
+              onClear={true}
+              onClick={setFocus} 
+              value={searchText}
+              debounceSearch={true}
+              id="search-project-input"
+            />
+        </div>
+        : searchText?.length > 0 && (
+          <div className="project-search-wrapper">
+            <Search
+              placeholder={searchPlaceholder}
+              onChange={(search: string) => setSearchText(search)}
+              onClear={true}
+              onClick={setFocus} 
+              value={searchText}
+              debounceSearch={true}
+              id="search-project-input"
+            />
+        </div>
+        )
+      }
     </>
   );
 

ui/src/pages/Projects/index.tsx

@@ -16,6 +16,7 @@ import { validateObject } from '../../utilities/functions';
 // Interfaces
 import { ProjectsType, ProjectsObj } from './projects.interface';
 import { ModalObj } from '../../components/Modal/modal.interface';
+import { CTA } from '../Home/home.interface';
 
 // Context
 import { AppContext } from '../../context/app/app.context';
@@ -30,7 +31,6 @@ import { NO_PROJECTS, NO_PROJECTS_SEARCH } from '../../common/assets';
 
 // styles
 import './index.scss';
-import { CTA } from '../Home/home.interface';
 
 const Projects = () => {
   const [data, setData] = useState<ProjectsType>({});
@@ -44,7 +44,6 @@ const Projects = () => {
 
   const outputIntro = HTMLReactParser(jsonToHtml(emptystate?.description ?? {}));
 
-  // const history = useHistory();
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   const search = (queryParams.get('search') ?? '').trim();
@@ -85,9 +84,6 @@ const Projects = () => {
   }, []);
 
   useEffect(() => {
-    // navigate({
-    //   search: searchText ? `?region=${newParam}?search=${searchText}` : `?region=${newParam}`
-    // });
     setLoadStatus(true);
     if (searchText) {
       setProjects(
@@ -139,50 +135,37 @@ const Projects = () => {
 
   const header = {
     component: (
-      <>
-        <ProjectsHeader
-          headingText={heading}
-          searchText={searchText}
-          searchPlaceholder={searchProjects as string}
-          setSearchText={setSearchText}
-          cta={cta}
-          handleModal={openModal}
-          allProject={projects}
-        />
-      </>
+      <ProjectsHeader
+        headingText={heading}
+        searchText={searchText}
+        searchPlaceholder={searchProjects as string}
+        setSearchText={setSearchText}
+        cta={cta}
+        handleModal={openModal}
+        allProject={projects}
+      />
     )
   };
 
   const content = {
     component: (
       <div className="flex-wrap w-100" key="project-component">
-        {loadStatus ? (
+        {loadStatus 
+          ? (
           <div className="flex-wrap">
             {[...Array(20)].map((e, i) => (
               <CardList key={i} />
             ))}
           </div>
-        ) : projects && projects?.length > 0 ? (
-          projects?.map((e) => (
+          ) 
+          : projects?.map((e) => (
             <div key={e?.uid}>
               <CardList project={e} />
             </div>
           ))
-        ) : projects && projects?.length > 0 && !searchText ? (
-          <EmptyState
-            forPage="emptyStateV2"
-            heading={<div className="empty_search_heading">{emptystate?.empty_search_heading}</div>}
-            img={NO_PROJECTS_SEARCH}
-            description={
-              <div className="empty_search_description">
-                {HTMLReactParser(jsonToHtml(emptystate?.empty_search_description ?? {}))}
-              </div>
-            }
-            version="v2"
-            className="no_results_found_page"
-            testId="no-results-found-page"
-          />
-        ) : (
+        }
+
+        {projects && projects?.length === 0 && !searchText && (
           <EmptyState
             forPage="emptyStateV2"
             heading={emptystate?.heading}
@@ -204,9 +187,26 @@ const Projects = () => {
                   )}
                   {cta?.title}
                 </Button>
-              ))}
+              ))
+            }
           </EmptyState>
         )}
+
+        {projects && projects?.length === 0 && searchText &&  (
+          <EmptyState
+            forPage="emptyStateV2"
+            heading={<div className="empty_search_heading">{emptystate?.empty_search_heading}</div>}
+            img={NO_PROJECTS_SEARCH}
+            description={
+              <div className="empty_search_description">
+                {HTMLReactParser(jsonToHtml(emptystate?.empty_search_description ?? {}))}
+              </div>
+            }
+            version="v2"
+            className="no_results_found_page"
+            testId="no-results-found-page"
+          />
+        )}
       </div>
     )
   };

ui/src/scss/App.scss

@@ -337,13 +337,26 @@ h2 {
     .PageLayout__head__hamburger {
       display: none;
     }
+    .PageLayout__head{
+      &>.PageHeader {
+        padding-right: $px-20;
+      }
+    } 
   }
 }
-.ReactModal__Overlay .ReactModal__Content .ReactModal__Content__header h3 {
-  color: $color-black-2121;
-  font-weight: bold;
-}
+.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%;
-}
+}
+
+::-webkit-input-placeholder{color:$color-black-2121!important}
+::-ms-input-placeholder{color:$color-black-2121!important}
+::placeholder{color:$color-black-2121!important}

ui/src/scss/_variables.scss

@@ -93,6 +93,7 @@ $px-32: 2rem; // 32px
 $px-35: 2.188rem; // 36px
 $px-36: 2.25rem; // 36px
 $px-40: 2.5rem; // 40px
+$px-48: 3rem;
 $px-50: 3.125rem; // 50px
 $px-60: 3.75rem; // 60px
 $px-70: 4.375rem; // 70px