fixes

Author: AhsanKhan7

src/ui/components/Filters/index.tsx

@@ -3,6 +3,7 @@ import {
   Box,
   FlexBox,
   FormDropdownField,
+  SearchInputField,
   FormTextField,
   icons,
   Paragraph,
@@ -644,24 +645,18 @@ const FilterComponent = ({
   return (
     <FlexBox.Column fullWidth>
       <div className={styles.inputRow}>
-        <Box marginBottom="lg" marginRight="md">
-          <FormTextField
-            label={''}
-            placeholder={'Search'}
-            value={searchText ? filters[0]?.filterValue : ''}
-            disabled={applyFilter}
-            onChange={(value: string) => {
-              setSearchText(value ? true : false);
-              handleValueFieldChangeOnSearch(value);
-            }}
-            style={{
-              borderRadius: '4px',
-              width: '205px',
-              fontSize: '12px',
-              color: '#424240',
-            }}
+        <Box marginRight="md" marginTop='md'>
+          <SearchInputField 
+              placeholder={'Search'}
+              value={searchText ? filters[0]?.filterValue : ''}
+              disabled={applyFilter}
+              onChange={(value: string) => {
+                setSearchText(value ? true : false);
+                handleValueFieldChangeOnSearch(value);
+              }}
           />
         </Box>
+
         <FlexBox
           fullWidth
           className="border border-primary rounded rounded-4 p-2 align-item-center"
@@ -673,14 +668,14 @@ const FilterComponent = ({
             style={{
               width: '33px',
               height: '28px',
-              background: '#431D93',
+              background: '#fff',
               borderRadius: '4px',
             }}
           >
             <icons.funnelFill
               style={{ padding: '5px 0px 0px 7px' }}
               size={iconSizes.sm}
-              color={iconColors.white}
+              color={iconColors.primary}
             />
           </Box>
           <Box

src/ui/components/icons/assets/Run.svg

@@ -57,6 +57,7 @@ import { ReactComponent as LockKey } from './assets/LockKey.svg';
 import { ReactComponent as Graph } from './assets/Graph.svg';
 import { ReactComponent as GitCommit } from './assets/GitCommit.svg';
 import { ReactComponent as ChatDots } from './assets/ChatDots.svg';
+import { ReactComponent as Run } from './assets/Run.svg';
 // import { ReactComponent as Inprogress } from './assets/InProgress.svg';
 // import { ReactComponent as Cached } from './assets/Cached.svg';
 // import { ReactComponent as RightArrow } from './assets/RightArrow.svg';
@@ -169,6 +170,7 @@ const icons = {
   delete: createIcon({ Component: Delete }),
   edit: createIcon({ Component: Edit }),
   search: createIcon({ Component: Search }),
+  run: createIcon({ Component: Run, useStroke: true }),
 
   //icons for stackComponents
   artifact_store: createIcon({ Component: Folders, useStroke: true }),

src/ui/components/icons/index.tsx

@@ -31,7 +31,7 @@
 
 .baseParagraph {
   font-family: $fontFamilyNormal;
-  color: #828282;
+  color: #424240;
   word-wrap: break-word;
   margin: 0;
 }

src/ui/components/typographies/index.module.scss

@@ -27,11 +27,13 @@ $width: 15rem;
   z-index: 9;
   top: 5rem;
   right: 0;
+  text-align: end;
 }
 
 .popupItem {
   cursor: pointer;
   transition: 0.2s ease-in all;
+  justify-content: end;
 }
 
 .popupItem:hover {

src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.module.scss

@@ -20,7 +20,6 @@ import {
 import { getInitials } from '../../../../../utils/name';
 import {
   DEFAULT_FULL_NAME,
-  DEFAULT_PROJECT_NAME,
 } from '../../../../../constants';
 import OutsideClickHandler from 'react-outside-click-handler';
 import {
@@ -157,13 +156,13 @@ export const AuthenticatedHeader: React.FC<{
         onFailure: () => stopLoad(),
       }),
     );
-    await dispatch(projectsActions.getMy({ selectDefault: false, selectedProject }))
+    await dispatch(projectsActions.getMy({ selectDefault: false, selectedProject: e?.name }))
   };
 
+  const selected =  projects.some((project) => project['name'] === locationPath.split('/')[2])
+                          ? locationPath.split('/')[2].substring(0, 10)
+                          : selectedProject
 
-const selected =  projects.some((project) => project['name'] === locationPath.split('/')[2])
-                        ? locationPath.split('/')[2].substring(0, 10)
-                        : DEFAULT_PROJECT_NAME.substring(0, 10)
 
   return (
     <>
@@ -207,7 +206,7 @@ const selected =  projects.some((project) => project['name'] === locationPath.sp
                 </FlexBox>
               </LinkBox>
               <If condition={popupOpen}>
-                {() => (
+                {() => ( 
                   <OutsideClickHandler
                     onOutsideClick={() => setPopupOpen(false)}
                   >
@@ -217,7 +216,6 @@ const selected =  projects.some((project) => project['name'] === locationPath.sp
                           className={styles.popupItem}
                           paddingHorizontal="md"
                           paddingVertical="sm"
-                          alignItems="center"
                         >
                           <Paragraph size="small">Settings</Paragraph>
                         </FlexBox>
@@ -227,13 +225,13 @@ const selected =  projects.some((project) => project['name'] === locationPath.sp
                       <Box marginHorizontal='md'><Separator.LightNew /></Box>
                       <Box marginTop='sm' marginHorizontal="md" ><Paragraph color='grey' style={{ fontSize: '14px' }} >Your workspaces</Paragraph></Box>
 
-                      <Box marginVertical='sm' marginLeft='md' className="d-none d-md-block">            
+                      <Box marginVertical='sm' marginHorizontal='md' className="d-none d-md-block">            
                         <Box marginTop='sm' style={{ maxHeight: '290px', overflow: projects?.length > 10 ? 'auto' :'hidden' }} >  
                               {projects.map((option, index) => (
                                 <Box marginTop='sm' onClick={() => onChange(option) } key={index} >
                                   <div data-tip data-for={option.name}>
                                     <Paragraph style={{ fontSize: '16px', color: '#443E99', cursor: 'pointer', fontWeight: selected === option.name ? 'bold' : 'normal' }} >
-                                      {option.name.substring(0, 10)} {selected === option.name && <>&#x2022;</>} 
+                                      {option.name.substring(0, 10)} <span style={{ color: selected === option.name ? '#443E99' : '#fff' }}  >&#x2022;</span> 
                                     </Paragraph>
                                   </div>
 
@@ -254,7 +252,7 @@ const selected =  projects.some((project) => project['name'] === locationPath.sp
                             className={styles.popupItem}
                             paddingHorizontal="md"
                             paddingVertical="sm"
-                            alignItems="center"
+                            // alignItems="center"
                           >
                             <Box paddingRight="sm">
                               <icons.signOut

src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedHeader.tsx

@@ -40,7 +40,7 @@ export const Menu: React.FC = () => {
       <MenuItem
         id="runs"
         Icon={() => (
-          <icons.pipeline color={iconColors.white} size={iconSizes.md} />
+          <icons.run color={iconColors.white} size={iconSizes.md} />
         )}
         to={routePaths.pipelines.allRuns(selectedProject)}
         isActive={() => window.location.href?.includes('all-runs')}

src/ui/layouts/common/layouts/AuthenticatedLayout/AuthenticatedSidebar/Menu/index.tsx

@@ -39,7 +39,8 @@ const Component = () => {
       })
 
     const formatText = (text: string) => {
-        return text.charAt(0).toUpperCase() + text.slice(1).replace('_', ' ')
+        const removeUnderscore = text.replace('_', ' ')
+        return removeUnderscore.replace(/(^\w{1})|(\s+\w{1})/g, letter => letter.toUpperCase());
     }
 
     const formatSectionColor = (text: string) => {