update ui

zbycz · May 5, 2023 · 4b85fe2 · 4b85fe2
1 parent cea1eb2
commit 4b85fe2
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 11 deletions.
diff --git a/src/components/SearchBox/SearchBox.tsx b/src/components/SearchBox/SearchBox.tsx
@@ -16,27 +16,26 @@ import { isDesktop, useMobileMode } from '../helpers';
 const TopPanel = styled.div`
   position: absolute;
   height: 72px;
-  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.12);
-  background-color: ${({ theme }) => theme.palette.background.searchBox};
-  padding: 10px;
+  padding: 12px;
   box-sizing: border-box;
-
+  border-radius: 30px;
   z-index: 1200;
 
   width: 100%;
   @media ${isDesktop} {
-    width: 410px;
+    width: 434px;
   }
 `;
 
 const StyledPaper = styled(Paper)`
   padding: 2px 4px;
   display: flex;
   align-items: center;
-
+  overflow: hidden;
   .MuiAutocomplete-root {
     flex: 1;
   }
+  border-radius: 8px !important;
 `;
 
 const SearchIconButton = styled(IconButton)`
@@ -87,7 +86,7 @@ const SearchBox = () => {
 
   return (
     <TopPanel>
-      <StyledPaper elevation={1} ref={autocompleteRef}>
+      <StyledPaper elevation={3} ref={autocompleteRef}>
         <SearchIconButton disabled aria-label={t('searchbox.placeholder')}>
           <SearchIcon />
         </SearchIconButton>

diff --git a/src/components/utils/ClosePanelButton.tsx b/src/components/utils/ClosePanelButton.tsx
@@ -8,7 +8,7 @@ export const ClosePanelButton = ({ onClick, right = false, style = {} }) => (
     aria-label={t('close_panel')}
     onClick={onClick}
     style={{
-      ...(right ? { position: 'absolute', right: 0 } : {}),
+      ...(right ? { position: 'fixed', right: 12 } : {}),
       ...style,
     }}
   >

diff --git a/src/components/utils/PanelHelpers.tsx b/src/components/utils/PanelHelpers.tsx
@@ -8,17 +8,18 @@ import { isDesktop } from '../helpers';
 // maybe https://github.com/malte-wessel/react-custom-scrollbars (larger)
 export const PanelWrapper = styled.div`
   position: absolute;
-  left: 0;
+  left: 12px;
   top: 72px; // TopPanel
-  bottom: 0;
+  bottom: 12px;
+  border-radius: 12px;
   background: ${({ theme }) => theme.palette.panelBackground};
   overflow: hidden;
   z-index: 1100;
 
   display: flex;
   flex-direction: column;
 
-  width: 100%;
+  width: calc(100% - 24px);
   @media ${isDesktop} {
     width: 410px;
   }