Skip to content

Commit

Permalink
Improve search styles & ux
Browse files Browse the repository at this point in the history
  • Loading branch information
felixmosh committed Aug 6, 2021
1 parent c2092dc commit c5d5cff
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 26 deletions.
30 changes: 17 additions & 13 deletions packages/ui/src/components/Menu/Menu.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
box-shadow: 4px 0 8px 3px rgba(38, 46, 60, 0.1);
}

.aside > div {
.aside .secondary {
color: #828e97;
font-size: 0.833em;
padding: 0 1rem;
Expand Down Expand Up @@ -74,28 +74,32 @@
.searchWrapper {
color: #f5f8fa;
position: relative;
padding: 1rem;
margin-top: 0.5rem;
}

.searchWrapper svg {
width: 16px;
height: 16px;
width: 1rem;
height: 1rem;
position: absolute;
pointer-events: none;
top: 22px;
left: 20px;
top: 1.75rem;
left: 1.75rem;
stroke-width: 2px;
color: #c5c9cd;
color: #828e97;
}

.search {
border: 2px solid #1d232e;
border-radius: 18px;
margin: 10px 10px;
background-color: #303a4b;
height: 40px;
padding: 0 12px 0 32px;
border: 2px solid rgba(0, 0, 0, 0.4);
border-radius: 9999px;
width: 100%;
background-color: rgba(255, 255, 255, 0.1);
height: 2.5rem;
padding: 0 1rem 0 2rem;
font-family: inherit;
color: #f5f8fa;
line-height: 40px;
line-height: 2.5rem;
transition: border-color 120ms ease-in-out;
}

.search:focus-visible,
Expand Down
29 changes: 16 additions & 13 deletions packages/ui/src/components/Menu/Menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { STATUS_LIST } from '../../constants/status-list';
import { SearchIcon } from '../Icons/Search';
import { Store } from '../../hooks/useStore';
import s from './Menu.module.css';
import cn from 'clsx';

export const Menu = ({
queues,
Expand All @@ -17,19 +18,21 @@ export const Menu = ({
const [searchTerm, setSearchTerm] = useState('');
return (
<aside className={s.aside}>
<div>QUEUES</div>
<div className={s.secondary}>QUEUES</div>

<span className={s.searchWrapper}>
<SearchIcon />
<input
className={s.search}
type="search"
id="search-queues"
placeholder="Filter queues"
value={searchTerm}
onChange={({ currentTarget }) => setSearchTerm(currentTarget.value)}
/>
</span>
{(queues?.length || 0) > 5 && (
<div className={s.searchWrapper}>
<SearchIcon />
<input
className={s.search}
type="search"
id="search-queues"
placeholder="Filter queues"
value={searchTerm}
onChange={({ currentTarget }) => setSearchTerm(currentTarget.value)}
/>
</div>
)}
<nav>
{!!queues && (
<ul className={s.menu}>
Expand All @@ -53,7 +56,7 @@ export const Menu = ({
</ul>
)}
</nav>
<div className={s.appVersion}>{process.env.APP_VERSION}</div>
<div className={cn(s.appVersion, s.secondary)}>{process.env.APP_VERSION}</div>
</aside>
);
};

0 comments on commit c5d5cff

Please sign in to comment.