Styling

knowit · Jun 29, 2023 · e0c663f · e0c663f
1 parent 603c03b
commit e0c663f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 15 deletions.
diff --git a/apps/web/src/components/SearchInput.tsx b/apps/web/src/components/SearchInput.tsx
@@ -12,6 +12,7 @@ const InputBaseStyled = styled(InputBase)(({ theme }) => ({
   paddingLeft: 15,
   paddingRight: 15,
   fontSize: 16,
+  border: `1px solid ${theme.palette.background.darker}`,
 }))
 const SearchIconStyled = styled(SearchIcon)(() => ({
   borderRadius: 0,

diff --git a/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx b/apps/web/src/pages/organizationStructure/Components/OrganizationStructureTree.tsx
@@ -12,12 +12,8 @@ import { spliceArray } from '../util'
 import SearchInput from '../../../components/SearchInput'
 import { styled } from '@mui/material/styles'
 
-const SearchFieldStyled = styled('div')(({ theme }) => ({
-  background: theme.palette.background.default,
-  border: '1px solid',
-  padding: '4px 7px',
-  boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.25)',
-  width: '320px',
+const SearchFieldStyled = styled('div')(() => ({
+  marginBottom: '5px',
 }))
 
 interface Props {
@@ -96,16 +92,16 @@ const OrganizationStructureTree = ({
 
   return (
     <>
-      <SearchFieldStyled>
-        <SearchInput
-          placeholder={'Søk i ansatte'}
-          onSearch={(searchTerm) => {
-            setSearchTerm(searchTerm.toLowerCase())
-          }}
-          onClear={() => setSearchTerm('')}
-        />
-      </SearchFieldStyled>
       <div>
+        <SearchFieldStyled>
+          <SearchInput
+            placeholder={'Søk i ansatte'}
+            onSearch={(searchTerm) => {
+              setSearchTerm(searchTerm.toLowerCase())
+            }}
+            onClear={() => setSearchTerm('')}
+          />
+        </SearchFieldStyled>
         <Rotating
           groupRef={groupRef}
           zoomTransformValue={zoomTransformValue}