Apply styles to the search bar

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2024-02-23 15:28:39 +08:00
parent 4bc6f6a3ee
commit aa35348288
4 changed files with 96 additions and 11 deletions

View File

@ -178,6 +178,47 @@ button {
.backlog-container { .backlog-container {
padding-bottom: 4rem; padding-bottom: 4rem;
.backlog-bar {
display: flex;
width: 100%;
margin: 0.4rem 0;
padding: 0 0.5rem;
justify-content: space-around;
.mobileCloseMenu {
display: flex;
padding: 0;
margin: 0;
width: 10%;
align-content: center;
}
.search-backlog {
display: inline-block;
border: 0;
width: 90%;
.search-backlog-input {
display: inline;
border: 0;
color: white;
border-radius: 2rem;
background: rgba(255, 255, 255, 0.15) url("/images/shop/icon-search.svg") no-repeat;
background-position: right 2% center;
background-size: 20px;
padding-right: 1rem;
&::placeholder {
color: white;
opacity: 0.5;
}
&:focus {
box-shadow: none;
}
}
}
}
} }
.rule { .rule {

View File

@ -0,0 +1,39 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="512"
height="512"
version="1.1"
viewBox="0 0 512 512"
id="svg1"
sodipodi:docname="icon-search.svg"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="1.59375"
inkscape:cx="255.68627"
inkscape:cy="256"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg1" />
<path
d="M456.69,421.39,362.6,327.3a173.81,173.81,0,0,0,34.84-104.58C397.44,126.38,319.06,48,222.72,48S48,126.38,48,222.72s78.38,174.72,174.72,174.72A173.81,173.81,0,0,0,327.3,362.6l94.09,94.09a25,25,0,0,0,35.3-35.3ZM97.92,222.72a124.8,124.8,0,1,1,124.8,124.8A124.95,124.95,0,0,1,97.92,222.72Z"
fill="#fff"
id="path1"
style="fill:#ffffff;fill-opacity:0.5" />
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -34,15 +34,21 @@ export function Backlog() {
ref={provided.innerRef} ref={provided.innerRef}
{...provided.droppableProps}> {...provided.droppableProps}>
{isMobile ? (
<div className="mobileCloseMenu">
<button onClick={onClickToggleMobileSideMenu}>
<img src="/images/shop/icon-close-white.svg" alt="add"/>
</button>
</div>
) : null}
<SearchBar/>
<div className="backlog-bar">
<SearchBar/>
{isMobile ? (
<div className="mobileCloseMenu">
<button onClick={onClickToggleMobileSideMenu}>
<img src="/images/shop/icon-close-white.svg" alt="add"/>
</button>
</div>
) : null}
</div>
<BacklogSearchResult/> <BacklogSearchResult/>

View File

@ -4,12 +4,11 @@ import {useShopStore} from "./shop_store";
export function SearchBar() { export function SearchBar() {
const search_bar_value = useShopStore((state) => state.search_bar_value); const search_bar_value = useShopStore((state) => state.search_bar_value);
const updateSearchBar = useShopStore((state) => state.updateSearchBar); const updateSearchBar = useShopStore((state) => state.updateSearchBar);
return ( return (
<div className="form-outline"> <div className="search-backlog form-outline">
<input type="search" <input type="search"
id="search_bar" id="search_bar"
className="form-control" className="search-backlog-input form-control"
placeholder="Search through cards" placeholder="Search through cards"
value={search_bar_value} value={search_bar_value}
onChange={event => updateSearchBar(event.target.value)} onChange={event => updateSearchBar(event.target.value)}