crimson-quirks/crimson-quirks-ui
1
0
Fork 0
mirror of https://github.com/hazemKrimi/crimson-quirks-ui.git synced 2026-05-01 18:20:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update search component

Browse Source
This commit is contained in:
Hazem Krimi
2021-04-23 18:24:40 +01:00
parent de13544afb
commit dc4cbbb528
2 changed files with 29 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Search/index.tsx
+11 -9
View File
@@ -27,15 +27,17 @@ const Search = ({
return ( return (
<Wrapper color={color} {...props}> <Wrapper color={color} {...props}>
<div className='search'> <div className='search'>
<span className='icon left'> <div>
<SearchIcon /> <span className='icon left'>
</span> <SearchIcon />
<input </span>
type='text' <input
value={value} type='text'
onChange={onChange} value={value}
placeholder='Search' onChange={onChange}
/> placeholder='Search'
/>
</div>
</div> </div>
</Wrapper> </Wrapper>
); );
src/components/Search/styles.ts
+18 -30
View File
@@ -21,28 +21,16 @@ export const Wrapper = styled.div<WrapperProps>`
width: inherit; width: inherit;
height: inherit; height: inherit;
border-radius: 5px; border-radius: 5px;
padding: 1rem; padding: 2px;
position: relative;
color: ${({ theme }) => theme.colors.black.main}; color: ${({ theme }) => theme.colors.black.main};
background: ${({ theme }) => theme.colors.white.main};
background-clip: padding-box;
border: 2px solid transparent;
display: flex;
flex-direction: row;
align-items: center;
&:before { div {
content: ''; background: ${({ theme }) => theme.colors.white.main};
position: absolute; padding: 1rem;
top: 0; border-radius: 5px;
right: 0; display: flex;
bottom: 0; flex-direction: row;
left: 0; align-items: center;
width: inherit;
height: inherit;
z-index: -1;
margin: -2px;
border-radius: inherit;
} }
} }
@@ -67,7 +55,7 @@ export const Wrapper = styled.div<WrapperProps>`
switch (color) { switch (color) {
case 'client': case 'client':
return css` return css`
.search:before { .search {
background: ${theme.colors.client.light}; background: ${theme.colors.client.light};
} }
@@ -77,7 +65,7 @@ export const Wrapper = styled.div<WrapperProps>`
`; `;
case 'productOwner': case 'productOwner':
return css` return css`
.search:before { .search {
background: ${theme.colors.productOwner.light}; background: ${theme.colors.productOwner.light};
} }
@@ -87,7 +75,7 @@ export const Wrapper = styled.div<WrapperProps>`
`; `;
case 'developer': case 'developer':
return css` return css`
.search:before { .search {
background: ${theme.colors.developer.light}; background: ${theme.colors.developer.light};
} }
@@ -97,7 +85,7 @@ export const Wrapper = styled.div<WrapperProps>`
`; `;
case 'admin': case 'admin':
return css` return css`
.search:before { .search {
background: ${theme.colors.admin.light}; background: ${theme.colors.admin.light};
} }
@@ -107,7 +95,7 @@ export const Wrapper = styled.div<WrapperProps>`
`; `;
case 'success': case 'success':
return css` return css`
.search:before { .search {
background: ${theme.colors.success.main}; background: ${theme.colors.success.main};
} }
@@ -117,7 +105,7 @@ export const Wrapper = styled.div<WrapperProps>`
`; `;
case 'warning': case 'warning':
return css` return css`
.search:before { .search {
background: ${theme.colors.warning.main}; background: ${theme.colors.warning.main};
} }
@@ -127,7 +115,7 @@ export const Wrapper = styled.div<WrapperProps>`
`; `;
case 'error': case 'error':
return css` return css`
.search:before { .search {
background: ${theme.colors.error.main}; background: ${theme.colors.error.main};
} }
@@ -137,7 +125,7 @@ export const Wrapper = styled.div<WrapperProps>`
`; `;
case 'black': case 'black':
return css` return css`
.search:before { .search {
background: ${theme.colors.black.main}; background: ${theme.colors.black.main};
} }
@@ -147,7 +135,7 @@ export const Wrapper = styled.div<WrapperProps>`
`; `;
case 'white': case 'white':
return css` return css`
.search:before { .search {
background: ${theme.colors.white.main}; background: ${theme.colors.white.main};
} }
@@ -157,7 +145,7 @@ export const Wrapper = styled.div<WrapperProps>`
`; `;
default: default:
return css` return css`
.search:before { .search {
background: ${theme.colors.client.light}; background: ${theme.colors.client.light};
} }