patch: Icons in search bar, updated icon styles

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>

src/__tests__/Shared/SearchSuggestion.test.js

@@ -0,0 +1,76 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { api } from 'api';
+import SearchSuggestion from 'components/SearchSuggestion';
+import React from 'react';
+
+// router mock
+const mockedUsedNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+  // @ts-ignore
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockedUsedNavigate
+}));
+
+const mockImageList = {
+  GlobalSearch: {
+    Repos: [
+      {
+        Name: 'alpine',
+        Size: '2806985',
+        LastUpdated: '2022-08-09T17:19:53.274069586Z',
+        NewestImage: {
+          Tag: 'latest',
+          Description: 'w',
+          IsSigned: true,
+          Licenses: '',
+          Vendor: '',
+          Labels: ''
+        }
+      },
+      {
+        Name: 'mongo',
+        Size: '231383863',
+        LastUpdated: '2022-08-02T01:30:49.193203152Z',
+        NewestImage: {
+          Tag: 'latest',
+          Description: '',
+          IsSigned: false,
+          Licenses: '',
+          Vendor: '',
+          Labels: ''
+        }
+      },
+      {
+        Name: 'nodeUnique',
+        Size: '369311301',
+        LastUpdated: '2022-08-23T00:20:40.144281895Z',
+        NewestImage: {
+          Tag: 'latest',
+          Description: '',
+          IsSigned: false,
+          Licenses: '',
+          Vendor: '',
+          Labels: ''
+        }
+      }
+    ]
+  }
+};
+
+afterEach(() => {
+  // restore the spy created with spyOn
+  jest.restoreAllMocks();
+});
+
+describe('Search component', () => {
+  it('should display suggestions when user searches', async () => {
+    // @ts-ignore
+    jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockImageList } });
+    render(<SearchSuggestion />);
+    const searchInput = screen.getByPlaceholderText(/search for content/i);
+    expect(searchInput).toBeInTheDocument();
+    userEvent.type(searchInput, 'test');
+    expect(await screen.findByText(/alpine/i)).toBeInTheDocument();
+  });
+});

src/components/PreviewCard.jsx

@@ -45,7 +45,8 @@ const useStyles = makeStyles(() => ({
   },
   avatar: {
     height: '1.4375rem',
-    width: '1.4375rem'
+    width: '1.4375rem',
+    objectFit: 'fill'
   },
   cardBtn: {
     height: '100%',

src/components/RepoCard.jsx

@@ -48,7 +48,8 @@ const useStyles = makeStyles(() => ({
   },
   avatar: {
     height: '1.4375rem',
-    width: '1.4375rem'
+    width: '1.4375rem',
+    objectFit: 'fill'
   },
   cardBtn: {
     height: '100%',

src/components/RepoDetails.jsx

@@ -41,7 +41,8 @@ const useStyles = makeStyles(() => ({
   },
   avatar: {
     height: '3rem',
-    width: '3rem'
+    width: '3rem',
+    objectFit: 'fill'
   },
   cardBtn: {
     height: '100%',

src/components/SearchSuggestion.jsx

@@ -1,4 +1,4 @@
-import { InputBase, List, ListItem, Stack, Typography } from '@mui/material';
+import { Avatar, InputBase, List, ListItem, Stack, Typography } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import PhotoIcon from '@mui/icons-material/Photo';
 import SearchIcon from '@mui/icons-material/Search';
@@ -75,8 +75,20 @@ const useStyles = makeStyles(() => ({
     height: '2.75rem',
     padding: '0 5%'
   },
+  searchItemIconBg: {
+    backgroundColor: '#FFFFFF',
+    height: '1.5rem',
+    width: '1.5rem',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden'
+  },
   searchItemIcon: {
-    color: '#0000008A'
+    color: '#0000008A',
+    minHeight: '100%',
+    minWidth: '100%',
+    objectFit: 'fill'
   }
 }));
 
@@ -147,7 +159,8 @@ function SearchSuggestion() {
     getItemProps,
     highlightedIndex,
     getComboboxProps,
-    isOpen
+    isOpen,
+    openMenu
     // closeMenu
   } = useCombobox({
     items: suggestionData,
@@ -166,7 +179,16 @@ function SearchSuggestion() {
         spacing={2}
       >
         <Stack direction="row" spacing={2}>
-          <PhotoIcon className={classes.searchItemIcon} />
+          <Avatar
+            variant="square"
+            classes={{
+              root: classes.searchItemIconBg,
+              img: classes.searchItemIcon
+            }}
+            src={`data:image/png;base64, ${suggestion.logo}`}
+          >
+            <PhotoIcon className={classes.searchItemIcon} />
+          </Avatar>
           <Typography>{suggestion.name}</Typography>
         </Stack>
       </ListItem>
@@ -188,6 +210,7 @@ function SearchSuggestion() {
           placeholder="Search for content..."
           className={classes.input}
           onKeyUp={handleSearch}
+          onFocus={() => openMenu()}
           {...getInputProps()}
         />
         <div onClick={handleSearch} className={classes.searchIcon}>

src/components/TagDetails.jsx

@@ -58,7 +58,8 @@ const useStyles = makeStyles(() => ({
   },
   avatar: {
     height: '3rem',
-    width: '3rem'
+    width: '3rem',
+    objectFit: 'fill'
   },
   cardBtn: {
     height: '100%',