fix(app/serach-result): fix search button

blockydevs · Jul 29, 2024 · 5352f76 · 5352f76
1 parent 7ec686a
commit 5352f76
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 20 deletions.
diff --git a/packages/apps/dashboard/ui-2024/src/assets/styles/_search.scss b/packages/apps/dashboard/ui-2024/src/assets/styles/_search.scss
@@ -6,7 +6,7 @@
   #search-bar{
     width: 100%;
     border-radius: 8px;
-    padding: 16px 85px 16px 17px;
+    // padding: 16px 85px 16px 17px;
     line-height: 24px;
 
     &:focus, &:focus-visible {
@@ -20,18 +20,12 @@
   }
 
   .search-close{
-    position: absolute;
-    right: 56px;
-    top: 15px;
     cursor: pointer;
   }
 
   .search-button{
-    position: absolute;
-    right: 4px;
     background-color: $secondary;
     border-radius: 8px;
-    top: 4px;
     svg{
       font-size: 32px;
     }
@@ -55,7 +49,6 @@
 
   .search-button{
     padding: 4px;
-    top: 5px;
     background: #1406B214;
     svg{
       font-size: 24px;
@@ -68,15 +61,8 @@
     }
   }
 
-  .search-close{
-    position: absolute;
-    right: 40px;
-    top: 13px;
-    font-size: 16px;
-  }
-
   #search-bar{
-    padding: 8px 68px 8px 16px;
+    padding: 8px 0;
 
   }
   @media (max-width: 1150px) {

diff --git a/packages/apps/dashboard/ui-2024/src/components/Search/Search.tsx b/packages/apps/dashboard/ui-2024/src/components/Search/Search.tsx
@@ -38,6 +38,7 @@ const Search: FC<{ className?: string; displaySearchBar?: boolean }> = ({
 
 	const handleClearClick = () => {
 		setInputValue('');
+		setAddress('');
 	};
 
 	const handleInputBlur = () => {
@@ -91,6 +92,10 @@ const Search: FC<{ className?: string; displaySearchBar?: boolean }> = ({
 							border: 'none',
 						},
 					},
+					'& .MuiInputBase-input': {
+						overflow: 'hidden',
+						textOverflow: 'ellipsis',
+					},
 				}}
 				InputProps={{
 					sx: {
@@ -102,6 +107,7 @@ const Search: FC<{ className?: string; displaySearchBar?: boolean }> = ({
 							color: `${colorPalette.sky.main}`,
 							opacity: 1,
 						},
+						padding: '0 5px',
 					},
 					startAdornment: (
 						<InputAdornment
@@ -113,6 +119,7 @@ const Search: FC<{ className?: string; displaySearchBar?: boolean }> = ({
 								width: displaySearchBar ? '100px' : '220px',
 								height: '100%',
 								backgroundColor: `${colorPalette.white}`,
+								marginLeft: '1rem',
 							}}
 						>
 							<MuiSelect
@@ -162,17 +169,31 @@ const Search: FC<{ className?: string; displaySearchBar?: boolean }> = ({
 						</InputAdornment>
 					),
 					endAdornment: inputValue && (
-						<InputAdornment position="end">
+						<InputAdornment
+							sx={{
+								display: 'flex',
+								justifyContent: 'center',
+								alignItems: 'center',
+								gap: '0.7rem',
+							}}
+							position="end"
+						>
 							<IconButton onClick={handleClearClick} edge="end">
 								<CloseIcon color={`${focus ? 'textSecondary' : 'primary'}`} />
 							</IconButton>
+							<IconButton
+								className="search-button"
+								type="submit"
+								aria-label="search"
+							>
+								<SearchIcon
+									color={`${displaySearchBar ? 'textSecondary' : 'white'}`}
+								/>
+							</IconButton>
 						</InputAdornment>
 					),
 				}}
 			/>
-			<IconButton className="search-button" type="submit" aria-label="search">
-				<SearchIcon color={`${displaySearchBar ? 'textSecondary' : 'white'}`} />
-			</IconButton>
 		</form>
 	);
 };